App store install purchase app

resources/assets/js/views/install/update.js

@@ -100,7 +100,7 @@ const app = new Vue({
             let installed = document.getElementById('installed').value;
 
             if (data) {
-                this.update.total = (100 - ((this.update.steps.length / this.update.steps_total) * 100));
+                this.update.total = (100 - ((this.update.steps.length / this.update.steps_total) * 100)).toFixed(0);
 
                 this.update.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
 

resources/assets/js/views/modules/item.js

@@ -10,6 +10,10 @@ import Vue from 'vue';
 
 import Global from '../../mixins/global';
 
+import {Progress} from 'element-ui';
+
+Vue.use(Progress);
+
 const app = new Vue({
     el: '#app',
 
@@ -17,6 +21,10 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        [Progress.name]: Progress,
+    },
+
     mounted() {
         this.onGetReviews('', 1);
     },
@@ -24,7 +32,17 @@ const app = new Vue({
     data: function () {
         return {
             reviews: '',
-            faq: false
+            faq: false,
+            installation: {
+                show: false,
+                steps: [],
+                steps_total: 0,
+                total: 0,
+                path: '',
+                version: '',
+                status: 'success',
+                html: ''
+            },
         }
     },
 
@@ -43,6 +61,77 @@ const app = new Vue({
 
         onShowFaq() {
             this.faq = true;
+        },
+
+        onInstall(path, name, version) {
+            this.installation.show = true;
+            this.installation.total = 0;
+            this.installation.path = path;
+            this.installation.version = version;
+
+            axios.post(url + '/apps/steps', {
+                name: name,
+                version: version
+            })
+            .then(response => {
+                if (response.data.error) {
+                    this.installation.status = 'exception';
+                    this.installation.html = '<div class="text-danger">' + response.data.message + '</div>';
+                }
+
+                // Set steps
+                if (response.data.data) {
+                    this.installation.steps = response.data.data;
+                    this.installation.steps_total = this.installation.steps.length;
+
+                    this.next();
+                }
+            })
+            .catch(error => {
+            });
+        },
+
+        next() {
+            let data = this.installation.steps.shift();
+
+            if (data) {
+                this.installation.total = (100 - ((this.installation.steps.length / this.installation.steps_total) * 100)).toFixed(0);
+
+                this.installation.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
+
+                axios.post(data.url, {
+                    version: this.installation.version,
+                    path: this.installation.path,
+                })
+                .then(response => {
+                    if (response.data.error) {
+                        this.installation.status = 'exception';
+                        this.installation.html = '<div class="text-danger"><i class="fa fa-times update-error"></i> ' + response.data.message + '</div>';
+                    }
+
+                    if (response.data.success) {
+                        this.installation.status = 'success';
+                    }
+
+                    if (response.data.data.path) {
+                        this.installation.path = response.data.data.path;
+                    }
+
+                    if (!response.data.error && !response.data.redirect) {
+                        let self = this;
+
+                        setTimeout(function() {
+                            self.next();
+                        }, 800);
+                    }
+
+                    if (response.data.redirect) {
+                        window.location = response.data.redirect;
+                    }
+                })
+                .catch(error => {
+                });
+            }
         }
     }
 });