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.

AppUpdate.vue 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <!-- Cannot update, only show the version... -->
  3. <box-item
  4. v-if="!updater.enabled"
  5. :label="currentVersion"
  6. icon="globe" />
  7. <!-- Updated! -->
  8. <box-item
  9. v-else-if="!updater.available"
  10. :label="`${projectTitle} is up to date.`"
  11. :description="currentVersion"
  12. icon="globe" />
  13. <!-- Update available -->
  14. <box-item
  15. v-else-if="!updater.update.active"
  16. :label="`${projectTitle} ${updater.latest.tag_name} available.`"
  17. icon="fire-alt"
  18. class="update-item">
  19. <button v-tooltip="'Download and install the update automatically.'" type="button" class="button is-sm" @click.prevent="updater.start()">
  20. Update
  21. </button>
  22. <a v-tooltip="'Download the update manually.'" :href="downloadURL" target="_blank" class="button is-sm">
  23. Manual
  24. </a>
  25. </box-item>
  26. <!-- update... -->
  27. <!-- eslint-disable-next-line vue/valid-template-root --->
  28. <box-item
  29. v-else
  30. :label="updater.update.status"
  31. icon="globe">
  32. <template slot="description">
  33. <p v-if="updater.update.status === 'Downloading...'" class="item__description">
  34. <strong>{{ updater.update.progress | progress }}</strong> - {{ updater.update.written | size }}/{{ updater.update.total | size }} MB.
  35. </p>
  36. <p v-else class="item__description">
  37. Wait a few minutes, please do not close the program.
  38. </p>
  39. </template>
  40. <button type="button" class="button is-danger is-sm" @click.prevent="updater.cancel()">
  41. Cancel
  42. </button>
  43. </box-item>
  44. </template>
  45. <script>
  46. import { isString, toNumber } from 'lodash'
  47. /* eslint import/namespace: ['error', { allowComputed: true }] */
  48. import * as updateProviders from '~/modules/updater'
  49. const { shell } = $provider.api
  50. const { getPath } = $provider.tools.paths
  51. export default {
  52. filters: {
  53. progress(value) {
  54. if (isString(value)) {
  55. // eslint-disable-next-line no-param-reassign
  56. value = toNumber(value)
  57. }
  58. const progress = (value * 100).toFixed(2)
  59. return `${progress}%`
  60. },
  61. size(value) {
  62. if (isString(value)) {
  63. // eslint-disable-next-line no-param-reassign
  64. value = toNumber(value)
  65. }
  66. return value.toFixed(2)
  67. },
  68. },
  69. props: {
  70. project: {
  71. type: String,
  72. required: true,
  73. },
  74. projectTitle: {
  75. type: String,
  76. default: 'Project',
  77. },
  78. },
  79. data: () => ({
  80. currentVersion: 'v0.0.0',
  81. updater: {},
  82. }),
  83. computed: {
  84. downloadURL() {
  85. return this.updater.downloadUrls[0]
  86. },
  87. },
  88. created() {
  89. this.currentVersion = this.updater.currentVersion
  90. this.updater = updateProviders[this.project]
  91. },
  92. beforeDestroy() {
  93. this.updater.cancel()
  94. },
  95. methods: {
  96. openDownload() {
  97. shell.openItem(getPath('downloads'))
  98. },
  99. },
  100. }
  101. </script>
  102. <style lang="scss">
  103. @keyframes updateAnim {
  104. 0% {
  105. @apply bg-transparent;
  106. }
  107. 50% {
  108. @apply bg-dark-100;
  109. }
  110. 100% {
  111. @apply bg-transparent;
  112. }
  113. }
  114. .update-item {
  115. transition: all 0.2s ease-in-out;
  116. animation-name: updateAnim;
  117. animation-duration: 2s;
  118. animation-iteration-count: infinite;
  119. &:hover {
  120. animation-name: none;
  121. background: theme('colors.dark.300') !important;
  122. }
  123. .item__label {
  124. @apply text-white;
  125. }
  126. .item__description {
  127. @apply text-generic-600;
  128. }
  129. }
  130. </style>