DOC-5064 added checklist storage

Author: andy-stark-redis

content/develop/clients/jedis/produsage.md

@@ -23,7 +23,8 @@ progress in implementing the recommendations.
     {{< checklist-item "#timeouts" >}}Timeouts{{< /checklist-item >}}
     {{< checklist-item "#exception-handling" >}}Exception handling{{< /checklist-item >}}
     {{< checklist-item "#general-exceptions" >}}General exceptions{{< /checklist-item >}}
-    {{< checklist-item "#dns-cache-and-redis" >}}DNS cache and Redis{{< /checklist-item >}}    
+    {{< checklist-item "#dns-cache-and-redis" >}}DNS cache and Redis{{< /checklist-item >}}
+    {{< checklist-item "#dns-cache-and-redis" >}}DNS cache and Redis{{< /checklist-item >}}
 {{< /checklist >}}
 
 

layouts/shortcodes/checklist.html

@@ -6,44 +6,25 @@
     <label for="gcount">&#9989; = </label>
     <output name="gcount" id="gcount">0</output>/<output name="gtotal"></output>,
     <label for="rcount">&#x274C; = </label>
-    <output name="rcount" id="rcount">2</output>/<output name="rtotal"></output>,
+    <output name="rcount" id="rcount">0</output>/<output name="rtotal"></output>,
     <label for="acount">&#x1F50D; = </label>
-    <output name="acount" id="acount">0</output>/<output name="atotal"></output><br/>
+    <output name="acount" id="acount">0</output>/<output name="atotal"></output>
+    <br/>
     (<label for="xcount">&#x2205; = </label>
     <output name="xcount" id="xcount">0</output>/<output name="xtotal"></output>)
 </form>
 <script>
     document.addEventListener('DOMContentLoaded', () => {
-        if (localStorage.getItem("{{ $formId }}")) {
-            let choiceList = localStorage.getItem("{{ $formId }}");
-            let form = document.getElementById(formId);
-            let counts = {R: 0, G: 0, A: 0, X:0};
-
-            let listItems = form.getElementsByTagName("li");
-
-            for (const [index, elem] of listItems.entries()) {
-                let menu = elem.getElementsByTagName("select")[0];
-                let mvalue = choiceList[index];
-                menu.value = mvalue;
-
-                counts[mvalue]++;
-            }
-
-            form.elements["rcount"].value = counts["R"];
-            form.elements["gcount"].value = counts["G"];
-            form.elements["acount"].value = counts["A"];
-            form.elements["xcount"].value = counts["X"];
-
-            let numClItems = listItems.length;
-            form.elements["rtotal"].value = numClItems;
-            form.elements["gtotal"].value = numClItems;
-            form.elements["atotal"].value = numClItems;
-            form.elements["xtotal"].value = numClItems;
-        }
+        let itemString = localStorage.getItem("{{ $formId }}");
 
-        clChange("{{ $formId }}");
+        if (itemString !== "") {
+            setCLItemsFromString("{{ $formId }}", itemString);
+        } else {
+            clChange("{{ $formId }}");
+        }
     });
 
+    /*
     function clChange(formId) {
         let form = document.getElementById(formId);
         let counts = {R: 0, G: 0, A: 0, X:0};
@@ -68,4 +49,64 @@
         form.elements["atotal"].value = numClItems;
         form.elements["xtotal"].value = listItems.length;
     }
+        */
+   
+
+    function getStringFromCLItems(formId) {
+        let result = "";
+    
+        let form = document.getElementById(formId);
+
+        let listItems = form.getElementsByTagName("li");
+
+        for (let elem of listItems) {
+            let menu = elem.getElementsByTagName("select")[0];
+            result += menu.value;
+        }
+
+        return result;
+    }
+
+
+    function setCLItemsFromString(formId, clString) {
+        let counts = {R: 0, G: 0, A: 0, X:0};
+
+        let form = document.getElementById(formId);
+        let listItems = form.getElementsByTagName("li");
+
+        if (clString.length < listItems.length) {
+            clString = clString.padEnd(listItems.length, "R");
+        } else if (clString.length > listItems.length) {
+            clString = clString.substring(0, listItems.length);
+        }
+
+        for (let i = 0; i < clString.length; i++) {
+            let char = clString.charAt(i);
+            counts[char]++;
+            let menu = listItems[i].getElementsByTagName("select")[0];
+            menu.value = char;
+        }
+
+        form.elements["rcount"].value = counts["R"];
+        form.elements["gcount"].value = counts["G"];
+        form.elements["acount"].value = counts["A"];
+        form.elements["xcount"].value = counts["X"];
+
+        
+        let numClItems = listItems.length - counts["X"];
+
+        form.elements["rtotal"].value = numClItems;
+        form.elements["gtotal"].value = numClItems;
+        form.elements["atotal"].value = numClItems;
+        form.elements["xtotal"].value = counts["X"];
+
+        let itemChoices = getStringFromCLItems("{{ $formId }}");
+        localStorage.setItem("{{ $formId }}", itemChoices);
+    }
+
+
+    function clChange(formId) {
+        let itemChoices = getStringFromCLItems(formId);
+        setCLItemsFromString(formId, itemChoices);
+    }
 </script>