implement install extension in electron/vuetify

2 files changed, 99 insertions, 26 deletions

diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue
index 7888d968..7579d04e 100644
--- a/electron/src/renderer/App.vue
+++ b/electron/src/renderer/App.vue
@@ -1,15 +1,26 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <v-app>
+      <v-main>
+        <!-- the v-container, v-row, and v-col give us vertical centering -->
+        <v-container fill-height fluid>
+          <v-row align="center" justify="center">
+            <v-col>
+              <router-view></router-view>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-main>
+    </v-app>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'my-project'
-  }
+export default {
+  name: 'my-project'
+}
 </script>
 
 <style>
-  /* CSS */
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');
 </style>
diff --git a/electron/src/renderer/components/InstallPalettes.vue b/electron/src/renderer/components/InstallPalettes.vue
index 73fd2865..728088b8 100644
--- a/electron/src/renderer/components/InstallPalettes.vue
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -1,20 +1,67 @@
 <template>
   <div>
-    <font-awesome-icon icon="palette" class="info-icon"/>
-    <p>
-      <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
-      </translate>
-    </p>
-    <p>
-      <translate>Choose Inkscape directory</translate>
-      <input v-bind:value="path"/>
-    </p>
-    <button v-on:click="install">
-      <translate>Install</translate>
-    </button>
-    <button v-on:click="cancel">
-      <translate>Cancel</translate>
-    </button>
+    <v-card v-if="step == 'pick'" rounded="lg" :loading="installing" :disabled="installing" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-container>
+        <v-card-title>
+          <translate>
+            Install Palettes
+          </translate>
+        </v-card-title>
+        <v-card-text class="text--primary">
+          <translate>Ink/Stitch can install palettes for Inkscape matching the thread colors from popular machine embroidery thread manufacturers.
+          </translate>
+        </v-card-text>
+        <v-file-input class="mb-3" webkitdirectory hide-details v-model="path" color="rgb(0,51,153)"
+                      :label="$gettext('Choose Inkscape directory')"></v-file-input>
+        <v-card-actions>
+          <v-btn text color="rgb(0,51,153)" v-on:click="install">
+            <v-icon>mdi-palette</v-icon>
+            <translate>Install</translate>
+          </v-btn>
+          <v-btn text color="rgb(0,51,153)" v-on:click="close">
+            <translate>Cancel</translate>
+          </v-btn>
+        </v-card-actions>
+      </v-container>
+    </v-card>
+    <v-card v-if="step == 'done'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-card-title>
+        <translate>
+          Installation Completed
+        </translate>
+      </v-card-title>
+      <v-card-text>
+        <translate>
+          Inkscape palettes have been installed. Please restart Inkscape to load the new palettes.
+        </translate>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+          Done
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-card v-if="step == 'error'" class="mx-auto my-3 pa-1" elevation=8 max-width="500px">
+      <v-card-title>
+        <translate>
+          Installation Failed
+        </translate>
+      </v-card-title>
+      <v-card-text>
+        <translate>Inkscape add-on installation failed</translate>
+      </v-card-text>
+      <v-card-text class="text--secondary">
+        {{ error }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text color="rgb(0,51,153)" v-on:click="retry">
+          <translate>Try again</translate>
+        </v-btn>
+        <v-btn text color="rgb(0,51,153)" v-on:click="close">
+          <translate>Cancel</translate>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
   </div>
 </template>
 
@@ -25,20 +72,35 @@ export default {
   name: "InstallPalettes",
   data: function () {
     return {
-      path: "",
+      path: null,
+      installing: false,
+      step: "pick",
+      error: null
     }
   },
   methods: {
     install() {
-      alert("install button clicked")
+      this.installing = true
+      inkStitch.post('install/palettes', {path: this.path.path || this.path.name}).then(response => {
+        this.step = "done"
+      }).catch(error => {
+        this.step = "error"
+        this.error = error.response.data.error
+      }).then(() => {
+        this.installing = false
+      })
     },
-    cancel() {
-      alert("cancel button clicked")
+    close() {
+      window.close()
+    },
+    retry() {
+      this.installing = false
+      this.step = "pick"
     }
   },
   created: function () {
-    inkStitch.get("/install/default-path").then(response => {
-      this.path = response.data
+    inkStitch.get("install/default-path").then(response => {
+      this.path = new File([""], response.data, {})
     })
   }
 }