Save schema and response id to local storage (#55)

ONSdigital · Sep 4, 2023 · 0fba340 · 0fba340
1 parent 0bfe34c
commit 0fba340
Showing 1 changed file with 59 additions and 9 deletions.
diff --git a/templates/launch.html b/templates/launch.html
@@ -2,7 +2,7 @@
 
 {{ define "body" }}
 
-<body onbeforeunload='resetDropdowns();'>
+<body onbeforeunload="resetDropdowns();" onload="retrieveSchemaName();retrieveResponseId();">
     <h1>Launch a survey</h1>
     <div>
         <form action="" method="POST" xmlns="http://www.w3.org/1999/html" onsubmit="validateForm()">
@@ -90,6 +90,7 @@ <h3>Required Data</h3>
                     <input id="response_id" name="response_id" type="text" class="qa-response_id">
                     <img class="field-container__img" onclick="numericId()" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNMjU2LDM4NC4xYy03MC43LDAtMTI4LTU3LjMtMTI4LTEyOC4xYzAtNzAuOCw1Ny4zLTEyOC4xLDEyOC0xMjguMVY4NGw5Niw2NGwtOTYsNTUuN3YtNTUuOCAgIGMtNTkuNiwwLTEwOC4xLDQ4LjUtMTA4LjEsMTA4LjFjMCw1OS42LDQ4LjUsMTA4LjEsMTA4LjEsMTA4LjFTMzY0LjEsMzE2LDM2NC4xLDI1NkgzODRDMzg0LDMyNywzMjYuNywzODQuMSwyNTYsMzg0LjF6Ii8+PC9nPjwvc3ZnPg==">
                 </span>
+                <input type="button" value="Load Previous Value" class="btn--hidden" id="response-id-btn" onclick="loadResponseId()"/>
             </div>
 
             <div class="field-container">
@@ -145,8 +146,9 @@ <h3>Runner Data</h3>
             </div>
 
             <div class="field-container">
-                <input type="submit" name="action_launch" value="Open Survey" class="qa-btn-submit-dev btn btn--hidden" id="submit-btn"/>
+                <input type="submit" name="action_launch" value="Open Survey" class="qa-btn-submit-dev btn btn--hidden" id="submit-btn" onclick="saveResponseId()"/>
                 <input type="submit" name="action_flush" value="Flush Survey Data" class="qa-btn-submit-dev btn btn--hidden" id="flush-btn"/>
+                <input type="button" value="Clear Local Storage" class="qa-btn-submit-dev btn btn--hidden" id="local-storage-btn" onclick="clearLocalStorage()"/>
             </div>
 
         </form>
@@ -247,16 +249,16 @@ <h3>Runner Data</h3>
     }
 
     function loadMetadataForSchemaName() {
-        let schema_name = document.querySelector("#schema_name").value
+        let schemaName = document.querySelector("#schema_name").value;
+        localStorage.setItem("schema_name", schemaName);
 
-        if (schema_name !== "Select Schema") {
-            clearAndDisableSchemaUrlSelection()
+        if (schemaName !== "Select Schema") {
+            clearAndDisableSchemaUrlSelection();
 
-            const schemaName = document.querySelector("#schema_name").value
-            const surveyType = document.querySelector(`#schema_name option[value="${schemaName}"]`).dataset.surveyType
+            const surveyType = document.querySelector(`#schema_name option[value="${schemaName}"]`).dataset.surveyType;
 
-            loadSurveyMetadata(schemaName, surveyType)
-            loadSchemaMetadata(schemaName, null)
+            loadSurveyMetadata(schemaName, surveyType);
+            loadSchemaMetadata(schemaName, null);
         }
     }
 
@@ -460,6 +462,54 @@ <h3>Runner Data</h3>
         document.getElementById('schema-url-survey-type').selectedIndex = -1;
     }
 
+    function retrieveSchemaName() {
+        const availableSchemas = [...document.querySelector("#schema_name").options].map(x => x.value)
+        let schemaName = localStorage.getItem("schema_name");
+        let localStorageButton = document.querySelector("#local-storage-btn")
+
+        if (schemaName && availableSchemas.includes(schemaName)) {
+            document.querySelector("#schema_name").value = schemaName;
+
+            toggleSubmitFlushButtons("show");
+            clearAndDisableSchemaUrlSelection();
+
+            const surveyType = document.querySelector(`#schema_name option[value="${schemaName}"]`).dataset.surveyType;
+
+            loadSurveyMetadata(schemaName, surveyType);
+            loadSchemaMetadata(schemaName, null);
+            localStorageButton.classList.remove("btn--hidden");
+        }
+        else {
+            localStorageButton.classList.add("btn--hidden");
+        }
+    }
+
+    function retrieveResponseId() {
+        let responseId = localStorage.getItem("response_id");
+        let responseIdButton = document.querySelector("#response-id-btn");
+
+        if (responseId) {
+            responseIdButton.classList.remove("btn--hidden");
+        }
+        else {
+            responseIdButton.classList.add("btn--hidden");
+        }
+    }
+
+    function loadResponseId() {
+        document.querySelector("#response_id").value = localStorage.getItem("response_id");
+    }
+
+    function saveResponseId() {
+        localStorage.setItem("response_id", document.querySelector("#response_id").value);
+    }
+
+    function clearLocalStorage() {
+        localStorage.removeItem("response_id");
+        localStorage.removeItem("schema_name");
+        location.reload();
+    }
+
     uuid('collection_exercise_sid');
     uuid('case_id');
     numericId();