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.7KB

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