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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <div v-if="isReady" class="update">
  3. <div class="update__info">
  4. <!-- Logo -->
  5. <figure>
  6. <img :src="data.logo">
  7. </figure>
  8. <h1 class="title">
  9. {{ data.name }} <span v-tooltip="'New version'">{{ updater.latestCompatible.tag_name }}</span>
  10. </h1>
  11. <h2 v-if="!updater.update.active" class="subtitle">
  12. {{ data.description }}
  13. </h2>
  14. </div>
  15. <!-- Downloading -->
  16. <div v-if="isDownloading && updater.update.progress >= 0" class="update__status">
  17. Downloading ~ <strong>{{ updater.update.progress }}%</strong> ~ {{ updater.update.written | size }}/{{ updater.update.total | size }} MB.
  18. </div>
  19. <!-- Downloading -->
  20. <div v-else-if="isDownloading" class="update__status">
  21. Downloading ~ {{ updater.update.written | size }} MB.
  22. </div>
  23. <!-- Installing -->
  24. <div v-else-if="isInstalling" class="update__status">
  25. Installing...
  26. </div>
  27. <!-- Download Progress -->
  28. <div v-if="isDownloading && updater.update.progress >= 0" class="update__progressbar">
  29. <progress min="0" max="100" :value="updater.update.progress" />
  30. </div>
  31. <!-- Actions -->
  32. <div class="update__actions">
  33. <button v-show="!updater.update.active" class="button button--success" @click.prevent="updater.start()">
  34. <span class="icon"><font-awesome-icon icon="sync" /></span>
  35. Update
  36. </button>
  37. <a v-if="project === 'waifu' && $settings.processing.device === 'GPU'"
  38. v-tooltip="'Software required to use Waifu2X on GPU.'"
  39. class="button button--danger"
  40. href="https://developer.nvidia.com/cuda-10.2-download-archive"
  41. target="_blank">
  42. <span class="icon"><font-awesome-icon icon="download" /></span>
  43. <span>CUDA 10.2</span>
  44. </a>
  45. <button v-show="updater.update.active" class="button button--danger" @click.prevent="updater.cancel()">
  46. <span class="icon"><font-awesome-icon icon="stop" /></span>
  47. Cancel
  48. </button>
  49. <button v-tooltip="'List of links to download the update manually.'" class="button button--info" @click.prevent="$refs.mirrorsDialog.show()">
  50. <span class="icon"><font-awesome-icon icon="link" /></span>
  51. Mirrors
  52. </button>
  53. </div>
  54. <!-- Project buttons -->
  55. <div class="update__actions__extra">
  56. <a v-for="(item, index) in data.data.navigation"
  57. :key="index"
  58. :href="item.
  59. ref"
  60. target="_blank"
  61. class="button button--sm">{{ item.label }}</a>
  62. </div>
  63. <!-- Hint -->
  64. <div class="update__hint">
  65. <p>
  66. <a href="https://time.dreamnet.tech/docs/guide/updater" target="_blank">
  67. <font-awesome-icon icon="exclamation-circle" />
  68. Troubleshooting
  69. </a>
  70. </p>
  71. </div>
  72. <!-- Mirrors Dialog -->
  73. <dialog ref="mirrorsDialog">
  74. <div class="dialog__content">
  75. <ul class="mirrors">
  76. <li v-for="(item, index) in updater.downloadUrls" :key="index">
  77. <a :href="item" target="_blank">{{ item | domain }}</a>
  78. </li>
  79. </ul>
  80. <div class="dialog__buttons">
  81. <button class="button button--danger" @click.prevent="$refs.mirrorsDialog.close()">
  82. Close
  83. </button>
  84. </div>
  85. </div>
  86. </dialog>
  87. </div>
  88. </template>
  89. <script>
  90. import { toNumber } from 'lodash'
  91. import * as projects from '~/modules/projects'
  92. export default {
  93. filters: {
  94. progress(value) {
  95. value = toNumber(value).toFixed(2)
  96. return `${value}%`
  97. },
  98. size(value) {
  99. value = toNumber(value).toFixed(2)
  100. return value
  101. },
  102. domain(value) {
  103. return (new URL(value)).hostname
  104. },
  105. },
  106. props: {
  107. project: {
  108. type: String,
  109. required: true,
  110. },
  111. },
  112. data: () => ({
  113. data: null,
  114. }),
  115. computed: {
  116. updater() {
  117. return this.data.updater
  118. },
  119. isReady() {
  120. return this.updater
  121. },
  122. currentVersion() {
  123. return this.updater?.currentVersion || 'v0.0.0'
  124. },
  125. isDownloading() {
  126. return this.updater?.update?.status === 'downloading'
  127. },
  128. isInstalling() {
  129. return this.updater?.update?.status === 'installing'
  130. },
  131. },
  132. created() {
  133. // eslint-disable-next-line import/namespace
  134. this.data = projects[this.project]
  135. },
  136. beforeDestroy() {
  137. this.updater.cancel()
  138. },
  139. }
  140. </script>
  141. <style lang="scss" scoped>
  142. .update {
  143. @apply flex flex-col items-center justify-center;
  144. }
  145. .update__info {
  146. @apply text-center mb-6;
  147. figure {
  148. @apply mb-4 text-6xl;
  149. img {
  150. @apply inline-block;
  151. height: 100px;
  152. }
  153. }
  154. .title {
  155. @apply text-2xl text-white font-semibold;
  156. span {
  157. @apply text-primary-500 font-bold;
  158. cursor: help;
  159. }
  160. }
  161. .subtitle {
  162. @apply text-lg;
  163. }
  164. }
  165. .update__status {
  166. @apply mb-4 text-lg;
  167. }
  168. .update__progressbar {
  169. @apply mb-4;
  170. width: 80%;
  171. progress {
  172. @apply w-full border-0 bg-dark-600;
  173. height: 18px;
  174. border-radius: 9px;
  175. &::-webkit-progress-bar {
  176. @apply bg-dark-500;
  177. border-radius: 9px;
  178. }
  179. &::-webkit-progress-value {
  180. @apply bg-primary-500;
  181. border-radius: 9px;
  182. }
  183. }
  184. }
  185. .update__actions {
  186. @apply mb-4;
  187. .button {
  188. &:not(:last-child) {
  189. @apply mr-4;
  190. }
  191. }
  192. }
  193. .update__actions__extra {
  194. @apply mb-6;
  195. .button {
  196. &:not(:last-child) {
  197. @apply mr-2;
  198. }
  199. }
  200. }
  201. .update__hint {
  202. @apply text-sm;
  203. a {
  204. @apply text-white underline;
  205. }
  206. }
  207. .mirrors {
  208. @apply list-disc ml-6;
  209. a:hover {
  210. @apply underline;
  211. }
  212. }
  213. </style>