front end changes

resources/assets/js/plugins/en.js

@@ -668,10 +668,13 @@ export default {
     },
     update_app: {
       title: 'Update App',
-      description: 'update app description',
+      description: 'You can easily update Crater by checking for a new update by clicking the button below',
       check_update: 'Check for updates',
-      avail_update: 'Update available',
+      avail_update: 'New Update available',
-      update: 'Update'
+      next_version: 'Next version',
+      update: 'Update',
+      update_progress: 'Update in progress...',
+      progress_text: 'It will just take a few minutes. Please do not refresh the screen or close the window before the update finishes'
     }
   },
   wizard: {

resources/assets/js/views/settings/UpdateApp.vue

@@ -6,62 +6,72 @@
         <p class="page-sub-title">
           {{ $t('settings.update_app.description') }}
         </p>
-        <p class="page-sub-title">Current version: 1.0.0</p>
+        <label class="input-label">Current version</label><br>
-        <base-button size="large" color="theme" @click="checkUpdate">
+        <label class="version">1.0.0</label>
+        <base-button :outline="true" size="large" color="theme" @click="checkUpdate">
           <font-awesome-icon :class="{'update': isUpdateAvail}" style="margin-right: 5px;" icon="sync-alt" />
           {{ $t('settings.update_app.check_update') }}
         </base-button>
-        <div v-if="isUpdateAvail" class="mt-4 content">
+        <hr>
-          <label class="input-label">{{ $t('settings.update_app.avail_update') }}</label>
+        <div class="mt-4 content">
-          <p class="page-sub-title">Latest version: 2.0.0</p>
+          <h3 class="page-title">{{ $t('settings.update_app.avail_update') }}</h3>
+          <label class="input-label">{{ $t('settings.update_app.next_version') }}</label><br>
+          <label class="version">{{ updateData.version }}</label>
+          <p class="page-sub-title">
+            {{ description }}
+          </p>
           <base-button size="large" color="theme" @click="onUpdateApp">
             {{ $t('settings.update_app.update') }}
           </base-button>
         </div>
-        <div v-if="isShowProgressBar" class="progress mt-4">
+        <!-- <div>
-          <div
+          <h3 class="page-title">{{ $t('settings.update_app.update_progress') }}</h3>
-            :style="[{'width': progress+'%'}]"
+          <p class="page-sub-title">
-            class="progress-bar progress-bar-striped progress-bar-animated"
+            {{ $t('settings.update_app.progress_text') }}
-            role="progressbar"
+          </p>
-            aria-valuenow="0"
+          <font-awesome-icon icon="spinner" class="fa-spin"/>
-            aria-valuemin="0"
+        </div> -->
-            aria-valuemax="100"
-          />
-        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-
+import { mapActions, mapGetters } from 'vuex'
 export default {
   data () {
     return {
       isShowProgressBar: false,
       isUpdateAvail: false,
       progress: 10,
-      interval: null
+      interval: null,
+      description: '',
+      updateData: {
+        isMinor: Boolean,
+        installed: '',
+        version: ''
       }
+    }
+  },
+  computed: {
   },
   watch: {
   },
   mounted () {
   },
   methods: {
-    onUpdateApp () {
+    async onUpdateApp () {
-      this.isShowProgressBar = true
+      const data = this.updateData
-      this.interval = setInterval(() => {
+      let response = await axios.post('/api/update', data)
-        if (this.progress >= 100) {
+      console.log(response.data)
-          clearInterval(this.interval)
-          setTimeout(() => {
-            this.isShowProgressBar = false
-          }, 1000)
-        }
-        this.progress += 10
-      }, 250)
     },
-    checkUpdate () {
+    async checkUpdate () {
-      this.isUpdateAvail = !this.isUpdateAvail
+      let response = await axios.get('/api/check/update')
+      console.log(response.data)
+      if (response.data) {
+        this.updateData.isMinor = response.data.is_minor
+        this.updateData.version = response.data.version.version
+        this.updateData.description = response.data.version.description
+      }
     }
   }
 }

resources/assets/sass/pages/settings.scss

@@ -150,6 +150,15 @@
             overflow: hidden;
         }
     }
+
+    .version {
+        background: #EAF1FB;
+        border: 1px solid #EAF1FB;
+        box-sizing: border-box;
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 15px;
+    }
 }
 
 @media(max-width: $x-small-breakpoint ) {