From 4c2e9183f042e991946bb12aa893955a980efbc8 Mon Sep 17 00:00:00 2001
From: bartvdbraak <bartvdbraak@gmail.com>
Date: Tue, 4 Feb 2020 20:20:42 +0100
Subject: [PATCH] Config loading, localstorage saving, export and persistence

---
 src/components/ConfigSection.vue | 112 ++++++++++++++++++++++++-------
 src/components/MainContent.vue   |  13 +++-
 2 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/src/components/ConfigSection.vue b/src/components/ConfigSection.vue
index ad5f448..9dceffd 100644
--- a/src/components/ConfigSection.vue
+++ b/src/components/ConfigSection.vue
@@ -1,10 +1,34 @@
 <template>
     <section>
-        <div class="pt-3 pb-2 my-2">
-            <h1 class="h3 text-uppercase mb-2">Account Settings</h1>
-            <hr>
-            <h4>Stats</h4>
-            <b-row class="text-center align-content-center">
+        <div class="pt-3 pb-2 my-2 px-4">
+            <b-row>
+                <b-col>
+                    <h1 class="h3 text-uppercase mb-4">Account Settings</h1>
+                </b-col>
+                <b-col class="flex-column">
+                    <b-button-toolbar aria-label="Toolbar with button groups and input groups">
+                        <b-button-group size="sm" class="mr-1">
+                            <b-button @click="flipRemember"
+                                    :pressed="remember"
+                                    size="sm">
+                                <svg v-if="remember" xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" class="mr-1" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M9 21.035l-9-8.638 2.791-2.87 6.156 5.874 12.21-12.436 2.843 2.817z"/></svg>
+                                <svg v-else xmlns="http://www.w3.org/2000/svg" width=".8em" height=".8em" class="mr-1" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>
+                                Remember
+                            </b-button>
+                            <b-button @click="serveConfig"><a ref="config-export" download="config.json"></a>Export</b-button>
+                        </b-button-group>
+                        <b-form-file class="w-auto"
+                                v-model="configFile"
+                                placeholder="Load settings.json"
+                                accept=".json">
+                        </b-form-file>
+                    </b-button-toolbar>
+
+
+                </b-col>
+            </b-row>
+            <b-row class="shadow py-3 mb-5">
+                <b-col sm="12" ><h4>Stats</h4></b-col>
                 <b-col sm="6" md="4" v-for="statUnlock in configData.statUnlocks" v-bind:key="statUnlock.id">
                     <div class="input-group mb-3">
                         <div class="input-group-prepend">
@@ -23,9 +47,8 @@
                     </div>
                 </b-col>
             </b-row>
-            <hr>
-            <b-row>
-                <b-col class="justify-content-between">
+            <b-row class="shadow py-3 mb-5">
+                <b-col>
                     <h4>Slayer Point Unlocks</h4>
                     <b-form-checkbox
                             class="mb-1"
@@ -64,24 +87,22 @@
                     </b-form-select>
                 </b-col>
             </b-row>
-            <hr>
-            <h4>Quests Unlocks</h4>
-            <b-row>
-                    <b-col md="6" xl="4" v-for="questUnlock in configData.questUnlocks" v-bind:key="questUnlock.id">
-                        <b-form-checkbox
-                                class="mb-1"
-                                v-model="questUnlock.unlock"
-                                :name="questUnlock.name"
-                                value="true"
-                                unchecked-value="false"
-                        >
-                            {{ questUnlock.name }} <br>
-                            <small v-if="questUnlock.alternative_text" class="text-monospace text-muted" >
-                                Unlocks <span class="text-info" v-b-tooltip.hover.right :title="monsterListString(questUnlock)">{{ questUnlock.alternative_text }}</span>
-                            </small>
-                            <small v-else class="text-monospace text-muted">{{ monsterListString(questUnlock) }}</small>
-                        </b-form-checkbox>
-                    </b-col>
+            <b-row class="shadow py-3">
+                <b-col sm="12" ><h4>Quests Unlocks</h4></b-col>
+                <b-col md="6" xl="4" v-for="questUnlock in configData.questUnlocks" v-bind:key="questUnlock.id">
+                    <b-form-checkbox
+                            class="mb-1"
+                            v-model="questUnlock.unlock"
+                            :name="questUnlock.name"
+                            value="true"
+                            unchecked-value="false">
+                        {{ questUnlock.name }} <br>
+                        <small v-if="questUnlock.alternative_text" class="text-monospace text-muted" >
+                            Unlocks <span class="text-info" v-b-tooltip.hover.right :title="monsterListString(questUnlock)">{{ questUnlock.alternative_text }}</span>
+                        </small>
+                        <small v-else class="text-monospace text-muted">{{ monsterListString(questUnlock) }}</small>
+                    </b-form-checkbox>
+                </b-col>
             </b-row>
         </div>
     </section>
@@ -99,6 +120,8 @@ export default {
 	    return {
 	    	monsterData: monster_json,
 	    	mastersData: master_json,
+			configFile: null,
+			remember: null,
 		}
 	},
 	methods: {
@@ -127,10 +150,47 @@ export default {
 
 			return 'Added to ' + masterList.join(', ').replace(/,(?!.*,)/gmi, ' and');
 		},
+		serveConfig() {
+			let data = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.configData));
+			let node = this.$refs['config-export'];
+			node.setAttribute("href", data);
+			node.click();
+		},
+		flipRemember() {
+			localStorage.setItem('remember', (!(localStorage.getItem('remember') === 'true')).toString());
+			this.setRemember();
+		},
+		setRemember() {
+			if (localStorage.getItem('remember') === null) {
+				localStorage.setItem('remember', 'true');
+			}
+			this.remember = (localStorage.getItem('remember') === 'true');
+		},
+		readFile(file){
+			return new Promise((resolve, reject) => {
+				let fr = new FileReader();
+				fr.onload = () => {
+					this.$emit('update', JSON.parse(fr.result));
+				};
+				fr.readAsText(file);
+			});
+		}
 	},
 	beforeRouteLeave (to, from, next) {
 		this.$emit('update',this.configData);
 		next()
+	},
+	created() {
+		this.setRemember()
+	},
+	watch: {
+		configFile: function () {
+			if (window.File && window.FileReader && window.FileList && window.Blob) {
+				this.readFile(this.configFile);
+			} else {
+				alert('The File APIs are not fully supported in this browser.');
+			}
+		}
 	}
 
 }
diff --git a/src/components/MainContent.vue b/src/components/MainContent.vue
index 587274f..4542d6d 100644
--- a/src/components/MainContent.vue
+++ b/src/components/MainContent.vue
@@ -1,6 +1,6 @@
 <template>
   <main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
-    <router-view :configData="mainConfig" @update="mainConfig = $event"></router-view>
+    <router-view :configData="mainConfig" @update="updateConfig($event)"></router-view>
   </main>
 </template>
 
@@ -61,6 +61,17 @@ export default {
 			}
 		}
 	},
+	methods: {
+		updateConfig(eventData) {
+			this.mainConfig = eventData;
+			if (localStorage.getItem('remember') === 'true') {
+				localStorage.setItem('configData', JSON.stringify(this.mainConfig));
+			}
+		}
+	},
+	created() {
+		this.mainConfig = JSON.parse(localStorage.getItem("configData"));
+	},
 }
 </script>