Merge pull request #793 from inkstitch/lexelby/install-extension-electron

migrate install extension to electron

4 files changed, 152 insertions, 14 deletions

diff --git a/electron/src/renderer/App.vue b/electron/src/renderer/App.vue
index 7888d968..7495dd05 100644
--- a/electron/src/renderer/App.vue
+++ b/electron/src/renderer/App.vue
@@ -1,15 +1,19 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <v-app>
+      <v-main>
+        <router-view></router-view>
+      </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
new file mode 100644
index 00000000..85bf5578
--- /dev/null
+++ b/electron/src/renderer/components/InstallPalettes.vue
@@ -0,0 +1,109 @@
+<template>
+  <v-dialog max-width="500px" value="true">
+    <v-card v-if="step == 'pick'" key="pick" rounded="lg" :loading="installing" :disabled="installing">
+      <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 mx-3" webkitdirectory hide-details v-model="path"
+                    :label="$gettext('Choose Inkscape directory')"></v-file-input>
+      <v-card-actions>
+        <v-btn text color="primary" v-on:click="install">
+          <v-icon>mdi-palette</v-icon>
+          <translate>Install</translate>
+        </v-btn>
+        <v-btn text color="primary" v-on:click="close">
+          <translate>Cancel</translate>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-card v-if="step == 'done'" key="done">
+      <v-card-title>
+        <translate>
+          Installation Completed
+        </translate>
+      </v-card-title>
+      <v-card-text class="text--primary">
+        <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="primary" v-on:click="close">
+          Done
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-card v-if="step == 'error'" key="error">
+      <v-card-title>
+        <translate>
+          Installation Failed
+        </translate>
+      </v-card-title>
+      <v-card-text class="text--primary">
+        <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="primary" v-on:click="retry">
+          <translate>Try again</translate>
+        </v-btn>
+        <v-btn text color="primary" v-on:click="close">
+          <translate>Cancel</translate>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+const inkStitch = require("../../lib/api")
+
+export default {
+  name: "InstallPalettes",
+  data: function () {
+    return {
+      path: null,
+      installing: false,
+      step: "pick",
+      error: null
+    }
+  },
+  methods: {
+    install() {
+      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
+      })
+    },
+    close() {
+      window.close()
+    },
+    retry() {
+      this.installing = false
+      this.step = "pick"
+    }
+  },
+  created: function () {
+    inkStitch.get("install/default-path").then(response => {
+      this.path = new File([""], response.data, {})
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/electron/src/renderer/main.js b/electron/src/renderer/main.js
index 3502ed6a..25a3f7f1 100644
--- a/electron/src/renderer/main.js
+++ b/electron/src/renderer/main.js
@@ -20,6 +20,7 @@ import {
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
@@ -34,6 +35,9 @@ import Transitions from 'vue2-transitions'
 import GetTextPlugin from 'vue-gettext'
 import translations from './assets/translations.json'
 import {selectLanguage} from '../lib/i18n'
+import Vuetify from 'vuetify'
+import 'vuetify/dist/vuetify.min.css'
+import '@mdi/font/css/materialdesignicons.css'
 
 // We have to add to the library every icon we use anywhere in the UI.
 // This avoids the need to bundle the entire font-awesome icon set with
@@ -52,6 +56,7 @@ library.add(
   faHorse,
   faInfo,
   faMinus,
+  faPalette,
   faPause,
   faPlay,
   faPlus,
@@ -75,8 +80,23 @@ Vue.use(GetTextPlugin, {
 Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
 
+Vue.use(Vuetify)
+const vuetify = new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#003399',
+        secondary: '#000000',
+        accent: '#8c9eff',
+        error: '#b71c1c',
+      },
+    },
+  },
+})
+
 /* eslint-disable no-new */
 new Vue({
+  vuetify,
   components: {App},
   router,
   template: '<App/>'
diff --git a/electron/src/renderer/router/index.js b/electron/src/renderer/router/index.js
index 3a27c4bc..63e2f415 100644
--- a/electron/src/renderer/router/index.js
+++ b/electron/src/renderer/router/index.js
@@ -5,14 +5,19 @@ Vue.use(Router)
 
 export default new Router({
   routes: [
-  	{
-  	    path: '/simulator',
-  	    name: 'simulator',
-  	    component: require('@/components/Simulator').default
-  	},
-  	{
-  	    path: '*',
-  	    redirect: '/'
-  	}
+    {
+      path: '/simulator',
+      name: 'simulator',
+      component: require('@/components/Simulator').default
+    },
+    {
+      path: '/install',
+      name: 'install',
+      component: require('@/components/InstallPalettes').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
   ]
 })