From 0797377eb47b6e560fc1bf5639dc6be2ba3b417f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 6 Sep 2019 15:00:15 +0100
Subject: [PATCH] Session storage used to save tile collapse state

---
 package.json                   |  2 +-
 src/components/Collapsable.vue | 40 +++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 165af5f0..fe31074b 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "start": "node server",
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint --fix"
   },
   "dependencies": {
     "connect": "^3.7.0",
diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
index e45e4173..e214019d 100644
--- a/src/components/Collapsable.vue
+++ b/src/components/Collapsable.vue
@@ -4,7 +4,8 @@
             :id="`collapsible-${uniqueKey}`"
             class="toggle"
             type="checkbox"
-            :checked="!collapsed">
+            :checked="getCollapseState()"
+            @change="collapseChanged">
         <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="0">
             <h2>{{ title }}</h2>
         </label>
@@ -24,6 +25,43 @@ export default {
     title: String,
     collapsed: Boolean,
   },
+  data() {
+    return {
+      isOpen: !this.collapsed,
+    };
+  },
+  methods: {
+    initialiseStorage() {
+      const initStorage = () => localStorage.setItem('collapseState', JSON.stringify({}));
+      if (!localStorage.collapseState) initStorage(); // If not yet set, then init localstorage
+      try { // Check storage is valid JSON, and has not been corrupted
+        JSON.parse(localStorage.collapseState);
+      } catch {
+        initStorage();
+      }
+      return JSON.parse(localStorage.collapseState);
+    },
+    getCollapseState() {
+      const collapseStateObject = this.initialiseStorage();
+      let collapseState = !this.collapsed;
+      if (collapseStateObject[this.uniqueKey] !== undefined) {
+        collapseState = collapseStateObject[this.uniqueKey];
+      }
+      return collapseState;
+    },
+    setCollapseState(id, newState) {
+      // Get the current localstorage collapse state object
+      const collapseState = JSON.parse(localStorage.collapseState);
+      // Add the new state to it
+      collapseState[id] = newState;
+      // Stringify, and set the new object into local storage
+      localStorage.setItem('collapseState', JSON.stringify(collapseState));
+    },
+    collapseChanged(whatChanged) {
+      this.initialiseStorage();
+      this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
+    },
+  },
 };
 </script>