Create slides

deploy.sh

@@ -9,4 +9,5 @@ npm run build
 git add dist
 git commit -m 'deploy ✨🚀'
 
-git subtree push --prefix dist origin gh-pages
+git subtree push --prefix dist origin gh-pages
+git push

package.json

@@ -14,14 +14,15 @@
   "dependencies": {
     "simple-peer": "^9.3.0",
     "vue": "^2.6.6",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.5.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",
     "@vue/cli-plugin-e2e-cypress": "^3.4.0",
     "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.4.0",
-    "@vue/cli-service": "^3.4.0",
+    "@vue/cli-plugin-unit-jest": "^3.5.3",
+    "@vue/cli-service": "^3.5.3",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -30,6 +31,8 @@
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.5.21"
   }
 }

src/components/admin/Help.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="help">
+    <h1 title="Credits">👏</h1>
+
+    <v-card class="pa-4 mt-4">
+      <a
+        target="_blank"
+        href="https://github.com/T3kstiil3/conference-toolkit/issues"
+      >Problem ? 🛠</a>
+
+      <br>
+      <a
+        target="_blank"
+        href="https://github.com/T3kstiil3/conference-toolkit/"
+      >Contribute 🐙</a>
+    </v-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 2em;
+  margin: 50px 0px;
+}
+
+.help {
+  width: 90%;
+  margin: auto;
+}
+</style>

src/components/admin/HowToUse.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="howtouse">
+    <h1 title="How to use ?">🤷‍</h1>
+
+    <v-card class="pa-4 mt-4">
+      <div class="keys">
+        <div class="item" v-for="(key,index) in keys" :key="`key-${index}`">
+          <div class="key">{{key.value}}</div>
+          <label>{{key.label}}</label>
+        </div>
+      </div>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            keys: [
+                { value : '␠ Space', label: 'Play / Pause slider'},
+                { value : '␛ Escape', label: 'Go to settings'},
+                { value : '👉 Right', label: 'Next slide'},
+                { value : '👈 Left', label: 'Previous slide'},
+                { value : '👆 Up', label: 'Next slide content'},
+                { value : '👇 Down', label: 'Previous slide content'},
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 2em;
+  margin: 50px 0px;
+}
+
+.howtouse {
+  width: 90%;
+  margin: auto;
+}
+
+.keys {
+  display: flex;
+  justify-content: space-around;
+  align-items: start;
+  .item {
+    width: 160px;
+    .key {
+      background: #00bcd4;
+      border: 2px solid #1c6fb1;
+      text-align: center;
+      width: 120px;
+      padding: 15px 10px;
+      margin: auto;
+      margin-bottom: 20px;
+      border-radius: 5px;
+      font-weight: bold;
+    }
+  }
+}
+</style>
+

src/components/admin/ImportSave.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <h1 title="Import / Save">🚜 / 💾</h1>
+
+    <v-card class="pa-4 mt-4">
+      <v-card-title primary-title class="pa-0">
+        <h4 class="bolder mb-4 pa-0">Import</h4>
+      </v-card-title>
+
+      <v-text-field
+        type="file"
+        id="file"
+        accept=".json"
+        label="Import json configuration from file"
+      ></v-text-field>
+
+      <v-btn color="info" :disabled="!!!json" @click="importFromFile">Import from file</v-btn>
+
+      <v-text-field type="text" v-model="slideUrl" label="Import json configuration from url"></v-text-field>
+
+      <v-btn color="info" :disabled="!!!slideUrl" @click="importFromUrl">Import from url</v-btn>
+
+      <v-card-title primary-title class="mt-4 pa-0">
+        <h4 class="bolder mb-4 pa-0">Export</h4>
+      </v-card-title>
+
+      <v-text-field type="text" v-model="saveName" label="Configuration name"></v-text-field>
+
+      <v-btn :disabled="!saveName" color="info" @click="exportConf">Export</v-btn>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            slideUrl: null,
+            json: null,
+            saveName: null,
+            slides: JSON.parse(window.localStorage.getItem('slides') || '[]') || [],
+        }
+    },
+    mounted() {
+        document.getElementById('file').addEventListener('change', this.onChange);
+    },
+    methods: {
+        onChange(event) {
+            var reader = new FileReader();
+            reader.onload = this.onReaderLoad;
+            if(event.target.files[0]) {
+                reader.readAsText(event.target.files[0]);
+            }
+        },
+        onReaderLoad(event){
+            this.json = JSON.parse(event.target.result);
+        },
+        importFromFile(){
+            if(this.json) {
+                localStorage.setItem('slides', JSON.stringify(this.json));
+                console.log('💾 save json');
+                this.$emit('onSlidesImport');
+                this.json = null;
+            }
+       },
+       importFromUrl() {
+           if(this.slideUrl) {
+               fetch(this.slideUrl)
+                .then(resp => resp.json())
+                .then(data => {
+                    this.slides = data;
+                    localStorage.setItem('slides', JSON.stringify(data));
+                    this.$emit('onSlidesImport');
+                    this.slideUrl = null;
+                });
+            }
+       },
+       exportConf() {
+           this.slides = JSON.parse(window.localStorage.getItem('slides') || '[]') || [];
+           if(this.saveName && this.slides.length){
+               this.downloadObjectAsJson(this.slides,this.saveName);
+           }
+       },
+       downloadObjectAsJson(exportObj, exportName){
+            var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
+            var downloadAnchorNode = document.createElement('a');
+            downloadAnchorNode.setAttribute("href",     dataStr);
+            downloadAnchorNode.setAttribute("download", exportName + ".json");
+            document.body.appendChild(downloadAnchorNode); // required for firefox
+            downloadAnchorNode.click();
+            downloadAnchorNode.remove();
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  font-size: 2em;
+  margin: 50px 0px;
+}
+</style>
+