You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ProjectUpdate.vue 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <div class="project-update">
  3. <!-- Update available -->
  4. <div v-if="!updater.update.active" class="update__status">
  5. {{ updater.latest.tag_name }} available:
  6. </div>
  7. <!-- Downloading -->
  8. <div v-else-if="isDownloading" class="update__status">
  9. Downloading ~ <strong>{{ updater.update.progress | progress }}</strong> ~ {{ updater.update.written | size }}/{{ updater.update.total | size }} MB.
  10. </div>
  11. <!-- Installing -->
  12. <div v-else-if="isInstalling" class="update__status">
  13. Installing...
  14. </div>
  15. <!-- Download Progress -->
  16. <div v-show="isDownloading" class="update__progressbar">
  17. <progress min="0" max="100" :value="updater.update.progress" />
  18. </div>
  19. <!-- Actions -->
  20. <div class="update__actions">
  21. <button v-show="!updater.update.active" class="button button--success" @click.prevent="updater.start()">
  22. Download
  23. </button>
  24. <button v-show="updater.update.active" class="button button--danger" @click.prevent="updater.cancel()">
  25. Cancel
  26. </button>
  27. <button class="button button--info" @click.prevent="$refs.mirrorsDialog.show()">
  28. Mirrors
  29. </button>
  30. </div>
  31. <!-- Mirrors Dialog -->
  32. <dialog ref="mirrorsDialog">
  33. <div class="dialog__content">
  34. <ul class="mirrors">
  35. <li v-for="(item, index) in updater.downloadUrls" :key="index">
  36. <a :href="item" target="_blank">{{ item | domain }}</a>
  37. </li>
  38. </ul>
  39. <div class="dialog__buttons">
  40. <button class="button button--danger" @click.prevent="$refs.mirrorsDialog.close()">
  41. Close
  42. </button>
  43. </div>
  44. </div>
  45. </dialog>
  46. </div>
  47. </template>
  48. <script>
  49. import { toNumber } from 'lodash'
  50. import * as providers from '~/modules/updater'
  51. export default {
  52. filters: {
  53. progress(value) {
  54. value = toNumber(value).toFixed(2)
  55. return `${value}%`
  56. },
  57. size(value) {
  58. value = toNumber(value).toFixed(2)
  59. return value
  60. },
  61. domain(value) {
  62. return (new URL(value)).hostname
  63. },
  64. },
  65. props: {
  66. project: {
  67. type: String,
  68. required: true,
  69. },
  70. },
  71. data: () => ({
  72. updater: null,
  73. }),
  74. computed: {
  75. currentVersion() {
  76. return this.updater?.currentVersion || 'v0.0.0'
  77. },
  78. isDownloading() {
  79. return this.updater?.update?.status === 'downloading'
  80. },
  81. isInstalling() {
  82. return this.updater?.update?.status === 'installing'
  83. },
  84. },
  85. created() {
  86. // eslint-disable-next-line import/namespace
  87. this.updater = providers[this.project]
  88. },
  89. beforeDestroy() {
  90. this.updater.cancel()
  91. },
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .project-update {
  96. @apply flex flex-col items-center justify-center;
  97. }
  98. .update__status {
  99. @apply mb-6 text-2xl text-white;
  100. }
  101. .update__progressbar {
  102. @apply mb-6;
  103. width: 80%;
  104. progress {
  105. @apply w-full border-0 bg-dark-600;
  106. height: 18px;
  107. border-radius: 9px;
  108. &::-webkit-progress-bar {
  109. @apply bg-dark-500;
  110. border-radius: 9px;
  111. }
  112. &::-webkit-progress-value {
  113. @apply bg-primary-500;
  114. border-radius: 9px;
  115. }
  116. }
  117. }
  118. .mirrors {
  119. @apply list-disc ml-6;
  120. a:hover {
  121. @apply underline;
  122. }
  123. }
  124. </style>