fix(nsis-compat-tester): beautify using vue and element-ui

evshiron · Apr 20, 2017 · c193e94 · c193e94
1 parent 395a8c1
commit c193e94
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 30 deletions.
diff --git a/packages/nsis-compat-tester/main.html b/packages/nsis-compat-tester/main.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-default/index.css" />
     <style type="text/css">
 
     body {
@@ -10,54 +11,121 @@
         margin: 0;
     }
 
+    #buttons {
+        margin: 8px;
+    }
+
+    #progress {
+        margin: 8px;
+    }
+
     </style>
+    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
+    <script type="text/javascript" src="./node_modules/element-ui/lib/index.js"></script>
 </head>
 <body>
+<div id="root">
+    <div id="buttons">
+        <el-button :loading="checking" @click="checkForUpdates">Check for updates</el-button>
+    </div>
+    <div id="progress" v-if="downloading">
+        <el-progress :text-inside="true" :stroke-width="18" :percentage="progress"></el-progress>
+    </div>
+</div>
 <script type="text/javascript">
 
-document.write(`<p>App launches.</p>`);
-
 const { NsisCompatUpdater } = require('nsis-compat-updater');
 
-const updater = new NsisCompatUpdater('http://127.0.0.1:8080/versions.nsis.json', nw.App.manifest.version, 'x86');
+document.title = `${ nw.App.manifest.name } - ${ nw.App.manifest.version }`;
 
-updater.checkForUpdates()
-.then((version) => {
+const app = new Vue({
+    el: '#root',
+    data: function() {
+        return {
+            checking: false,
+            downloading: false,
+            progress: 0,
+        };
+    },
+    methods: {
+        checkForUpdates() {
 
-    document.write(`<p>Available Version: ${ version ? version.version : 'current' }</p>`);
+            const updater = new NsisCompatUpdater('http://127.0.0.1:8080/versions.nsis.json', nw.App.manifest.version, 'x86');
 
-    if(version && confirm(`New version of ${ version.version } is available, download now?`)) {
+            this.checking = true;
 
-        return updater.downloadUpdate(version.version)
-        .then((path) => {
+            updater.checkForUpdates()
+            .then((version) => {
 
-            document.write(`<p>Path: ${ path }</p>`);
+                this.checking = false;
 
-            if(confirm(`New version of ${ version.version } is downloaded, install now?`)) {
-                return updater.quitAndInstall(path);
-            }
-            else {
-                return updater.installWhenQuit(path);
-            }
+                if(version) {
 
-        });
+                    return this.$confirm(`New version of ${ version.version } is available, download now?`)
+                    .then((confirm) => {
 
-    }
-    else {
+                        if(confirm) {
 
-        nw.Window.open('./app/index.html', {
-            width: 640,
-            height: 480,
-            new_instance: true,
-        });
+                            this.downloading = true;
+                            this.progress = 0;
 
-        nw.Window.get().close();
+                            const handleDownloadProgress = (state) => {
+                                this.percentage = state.percentage;
+                            };
 
-    }
+                            updater.onDownloadProgress.subscribe(handleDownloadProgress);
+
+                            return updater.downloadUpdate(version.version)
+                            .then((path) => {
+
+                                updater.onDownloadProgress.unsubscribe(handleDownloadProgress);
+                                this.downloading = false;
+                                this.progress = 0;
+
+                                return this.$confirm(`New version of ${ version.version } is downloaded, install now?`)
+                                .then((confirm) => {
+
+                                    if(confirm) {
+                                        return updater.quitAndInstall(path);
+                                    }
+                                    else {
+                                        this.$message(`Installing cancelled.`);
+                                    }
+
+                                });
+
+                            })
+                            .catch((err) => {
+
+                                updater.onDownloadProgress.unsubscribe(handleDownloadProgress);
+                                this.downloading = false;
+                                this.progress = 0;
+
+                                throw err;
+
+                            });
+
+                        }
+                        else {
+                            this.$message(`Downloading cancelled.`);
+                        }
+
+                    });
+                }
+                else {
+                    return this.$alert(`No new version available, the current version is ${ nw.App.manifest.version }.`);
+                }
+            })
+            .catch((err) => {
+
+                this.checking = false;
+
+                this.$message.error(err.toString());
+
+            });
 
-})
-.catch((err) => {
-    document.write(`<p>[ERROR] ${ err.message }</p>`);
+        },
+    },
 });
 
 </script>

diff --git a/packages/nsis-compat-tester/package.json b/packages/nsis-compat-tester/package.json
@@ -12,7 +12,9 @@
   "author": "evshiron",
   "license": "MIT",
   "dependencies": {
-    "nsis-compat-updater": "^1.0.0"
+    "element-ui": "^1.2.9",
+    "nsis-compat-updater": "^1.0.0",
+    "vue": "^2.2.6"
   },
   "devDependencies": {
     "http-server": "^0.9.0",