From 286cb7e5ba2b8e4023b6c5616907142517fac328 Mon Sep 17 00:00:00 2001
From: Klemek <klemek@outlook.fr>
Date: Tue, 29 Aug 2023 16:44:29 +0200
Subject: [PATCH] save state in url

---
 index.html |  4 ++--
 main.js    | 31 +++++++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index c67b253..e9f667e 100644
--- a/index.html
+++ b/index.html
@@ -37,8 +37,8 @@
             <h2 v-on:click="showConfig = !showConfig"  class="expand">{{showConfig ? '▾' : '▸'}} List ({{ available.length }})</h2>
             <table class="config" v-if="showConfig">
                 <tr>
-                    <td><input type="checkbox" v-model="q2a" @click="nextQuestion"/>&nbsp;Q&nbsp;→&nbsp;A</td>
-                    <td><input type="checkbox" v-model="a2q" @click="nextQuestion"/>&nbsp;A&nbsp;→&nbsp;Q</td>
+                    <td><input type="checkbox" v-model="q2a" @click="reset"/>&nbsp;Q&nbsp;→&nbsp;A</td>
+                    <td><input type="checkbox" v-model="a2q" @click="reset"/>&nbsp;A&nbsp;→&nbsp;Q</td>
                     <td></td>
                 </tr>
                 <tr v-for="(row, i) in available">
diff --git a/main.js b/main.js
index f16b3fd..ae433fe 100644
--- a/main.js
+++ b/main.js
@@ -119,11 +119,31 @@ let app = {
                 }
             }
         },
+        getLetter() {
+            if (this.q2a && !this.a2q) {
+                return 'd';
+            }
+            if (this.a2q && !this.q2a) {
+                return 'e';
+            }
+            return 'f';
+        },
     },
     beforeMount() {
         const url = new URL(window.location);
-        if (url.searchParams.get('d')) {
-            this.available = utils.deserialize(url.searchParams.get('d'));
+        if (url.searchParams.get('d') || url.searchParams.get('e') || url.searchParams.get('f')) {
+            if (url.searchParams.get('d')) {
+                this.q2a = true;
+                this.a2q = false;
+            } else if (url.searchParams.get('e')) {
+                this.q2a = false;
+                this.a2q = true;
+            } else {
+                this.q2a = true;
+                this.a2q = true;
+            }
+            
+            this.available = utils.deserialize(url.searchParams.get(this.getLetter()));
             this.showConfig = false;
             this.reset();
         }
@@ -132,8 +152,11 @@ let app = {
     updated() {
         const data = utils.serialize(this.available);
         const url = new URL(window.location);
-        if (url.searchParams.get('d') !== data) {
-            url.searchParams.set('d', data);
+        if (url.searchParams.get(this.getLetter()) !== data) {
+            url.searchParams.delete('d');
+            url.searchParams.delete('e');
+            url.searchParams.delete('f');
+            url.searchParams.set(this.getLetter(), data);
             window.history.pushState({}, '', url);
         }
         this.size = url.href.length;