store the ticket in the localStorage to perist it during reloads

1 files changed, 27 insertions, 14 deletions

diff --git a/index.html b/index.html
index d57ed87..bb1b6ca 100644
--- a/index.html
+++ b/index.html
@@ -77,22 +77,21 @@ button {
         }
       }
 
-      var myTicket;
       function requestHelp() {
         new HttpClient().get("new", (myNumber) => {
           myTicket = myNumber;
+          localStorage.setItem("my-ticket", myTicket);
+          showTicket();
+        });
+      }
+
+      function showTicket() {
           document.getElementById("hilfeButton").style.display = 'none';
 
-          let helpDiv = document.getElementById("help");
-          let ticketText = document.createElement("text");
-          ticketText.id = "ticket-text";
-          ticketText.innerHTML = "Deine Nummer: ";
-          let ticketSpan = document.createElement("span");
-          ticketSpan.id = "ticket";
-          ticketSpan.innerHTML = myNumber;
-          helpDiv.appendChild(ticketText);
-          helpDiv.appendChild(ticketSpan);
-        });
+          let ticketDiv = document.getElementById("ticket");
+          ticketDiv.style.display = "block";
+          let ticketSpan = document.getElementById("ticket-number");
+          ticketSpan.innerHTML = myTicket;
       }
 
       function finishHelp() {
@@ -112,12 +111,25 @@ button {
           let ticketNode = document.getElementById("ticket");
           ticketNode.style.color = "red";
         } else if (event.data > myTicket) {
-          let helpDiv = document.getElementById("help");
-          helpDiv.removeChild(document.getElementById("ticket-text"));
-          helpDiv.removeChild(document.getElementById("ticket"));
+          localStorage.removeItem("my-ticket");
+          document.getElementById("ticket").style.display = 'none';
           document.getElementById("hilfeButton").style.display = 'block';
         }
       };
+
+      var myTicket;
+      function init() {
+	      myTicket = localStorage.getItem("my-ticket");
+	      if (myTicket)
+	        showTicket();
+      }
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+      } else {
+        init();
+      }
+
     </script>
   </head>
   <body>
@@ -130,6 +142,7 @@ button {
     <button id="doneButton" onclick="finishHelp()">Done</button>
     {{else}}
     <div id="help">
+      <div id="ticket" style="display: none;">Deine Nummer: <span id="ticket-number"></span></div>
       <button id="hilfeButton" onclick="requestHelp()">Ich brauche Hilfe!</button>
     </div>
     {{end}}