feat(export): read from base64

package.json

@@ -8,13 +8,15 @@
   },
   "dependencies": {
     "core-js": "^3.4.4",
-    "vue": "^2.6.10",
     "d3": "3.5.17",
+    "vue": "^2.6.10",
+    "vue-router": "^3.3.4",
     "vuetify": "^2.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-plugin-router": "^4.4.6",
     "@vue/cli-service": "^4.1.0",
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",

src/App.vue

@@ -1,44 +1,9 @@
 <template>
-  <v-app>
-    <v-app-bar app color="primary" dark>
-      Open Speechless
-    </v-app-bar>
-
-    <v-content>
-      <SpeechlessSubject @subjects="updateSubjects" @replace-subject="replaceSubject" :subjects="subjects"/>
-      <SpinningWheel ref="spinningWheel" :subjects="subjects"/>
-    </v-content>
-  </v-app>
+  <div id="app">
+    <router-view/>
+  </div>
 </template>
 
-<script>
+<style lang="scss">
 
-import SpinningWheel from "./components/spinning_wheel/SpinningWheel";
-import SpeechlessSubject from "./components/speechless_subject/SpeechLessSubject";
-export default {
-  name: 'App',
-  props: {
-    source: String,
-  },
-  data: () => ({
-    subjects: [
-      {Nom:"Un film",  Lien:""},
-      {Nom:"Une serie", Lien:""},
-      {Nom:"Un logiciel", Lien:""}
-    ],
-  }),
-  methods: {
-    updateSubjects(subjects) {
-      this.subjects=subjects;
-    },
-    replaceSubject(replace){
-      Object.assign(this.subjects[replace.index], replace.subject)
-      this.$refs.spinningWheel.replaceSubject(replace)
-    }
-  },
-  components: {
-    SpeechlessSubject,
-    SpinningWheel
-  },
-};
-</script>
+</style>

src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify';
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
     vuetify,
+    router,
     render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+  const routes = [
+    {
+      path: '/:subjects',
+      name: 'Home',
+      component: Home
+    },
+    {
+      path: '/',
+      name: 'E',
+      component: Home
+    },
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-app>
+    <v-app-bar app color="primary" dark>
+      Open Speechless
+    </v-app-bar>
+    <v-content>
+      <SpeechlessSubject @subjects="updateSubjects" @replace-subject="replaceSubject" :subjects="subjects"/>
+      <SpinningWheel ref="spinningWheel" :subjects="subjects"/>
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+
+  import SpinningWheel from "../components/spinning_wheel/SpinningWheel";
+  import SpeechlessSubject from "../components/speechless_subject/SpeechLessSubject";
+
+  export default {
+    name: 'App',
+    props: {
+      source: String,
+    },
+    data: () => ({
+      subjects: [],
+    }),
+    created: function () {
+        var subjectsPath = this.$route.params.subjects
+        if (subjectsPath !== undefined) {
+          // eslint-disable-next-line no-console
+          this.subjects = JSON.parse(atob(subjectsPath));
+        } else {
+          this.subjects = [
+            {Nom:"Un film",  Lien:""},
+            {Nom:"Une serie", Lien:""},
+            {Nom:"Un logiciel", Lien:""}
+          ]
+        }
+    },
+
+    methods: {
+
+      updateSubjects(subjects) {
+        this.subjects=subjects;
+      },
+      replaceSubject(replace){
+        Object.assign(this.subjects[replace.index], replace.subject)
+        this.$refs.spinningWheel.replaceSubject(replace)
+      }
+    },
+    components: {
+      SpeechlessSubject,
+      SpinningWheel
+    },
+  };
+</script>