add button to clear local storage app data + prepare types

src/App.vue

@@ -29,6 +29,8 @@
 import NavigationBar from "./components/layout/NavigationBar.vue";
 import ls from "./helpers/localStorageHelper";
 
+const DEFAULT_SNACKBAR_TIMEOUT = 2000;
+
 export default {
   props: {
     title: String
@@ -48,6 +50,9 @@ export default {
     this.$eventHub.$on("snackbarEvent", output => {
       this.showSnackbar(output);
     });
+    this.$eventHub.$on("clearLocalStorage", () => {
+      this.clearLocalStorage();
+    });
   },
   data() {
     return {
@@ -78,7 +83,7 @@ export default {
       snackbar: {
         text: "",
         snackbar: false,
-        timeout: 2000
+        timeout: DEFAULT_SNACKBAR_TIMEOUT,
       }
     };
   },
@@ -103,8 +108,9 @@ export default {
       }
       this.$refs.navbar.showDrawer();
     },
-    showSnackbar(text) {
+    showSnackbar(text, timeout) { // timeout: {value?: number, factor?: number}
       this.snackbar.text = text;
+      this.snackbar.timeout = timeout ? timeout.value || (timeout.factor || 1) * DEFAULT_SNACKBAR_TIMEOUT : DEFAULT_SNACKBAR_TIMEOUT;
       this.snackbar.snackbar = true;
     },
     readFromLocalStorage() {
@@ -124,6 +130,10 @@ export default {
         ls.set(item.key, JSON.stringify(this[item.key]));
       });
     },
+    clearLocalStorage () {
+      ls.clearAppData();
+      this.showSnackbar("Removed All App Data From Local Storage. Please Reload To See The Effect.", { factor: 2});
+    },
     addDecksFromFile(fileContent) {
       // TODO: check how many decks and cards were imported -> throw error if none
       try {

src/helpers/localStorageHelper.js

@@ -8,4 +8,17 @@ export default {
   set(key, value) {
     localStorage.setItem(LOCAL_STORAGE_APP_CONTEXT + key, value);
   },
+
+  remove(key) {
+    localStorage.removeItem(LOCAL_STORAGE_APP_CONTEXT + key);
+  },
+
+  clearAppData() {
+    for (let i=0; i<localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key.startsWith(LOCAL_STORAGE_APP_CONTEXT)) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
 };

src/types/index.ts

@@ -0,0 +1,22 @@
+export interface Deck {
+    id: number,
+    selected: boolean,
+    name: string,
+    meta: {
+        file: object,
+        deck: object
+    },
+    cards: Card[],
+}
+
+export interface Card {
+    id: number,
+    q: string,
+    a: string,
+    r?: Rating[],
+}
+
+export interface Rating {
+    t: number,
+    r: number,
+}

src/views/Settings.vue

@@ -8,12 +8,25 @@
           <span>You will be able to change your settings here.</span>
           <br />
           <a href="https://github.com/fancy-flashcard/ffc">https://github.com/fancy-flashcard/ffc</a>
+          <br />
+          <v-btn color="red" @click="clearLocalStorage" class="my-4">Clear Local Storage</v-btn>
         </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
 
+<script>
+export default {
+  name: "Settings",
+  methods: {
+    clearLocalStorage() {
+      this.$eventHub.$emit("clearLocalStorage");
+    }
+  }
+}
+</script>
+
 <style scoped>
 .settings {
   text-align: center;