Significant progress

index.html

@@ -27,15 +27,12 @@
         </a>
         <div class="nav-container">
             <label class="nav-align" for="newBackendUrlInput">Change Backend Url</label>
-            <input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput">
+            <input type="text" class="form-control nav-align" id="newBackendUrlInput" name="newBackendUrlInput" onfocus="this.value=''" value="127.0.0.1:8090">
             <button class="btn btn-primary nav-align" id="changeBackendButton">Change Backend Url</button>
         </div>
         <div class="nav-container">
             <p class="nav-align">Backend Status</p>
-            <svg class="nav-align connected" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <div class="connected nav-align circle" id="statusCircle">&nbsp;</div>
-                <circle r="1" cx="1" cy="1" />
-            </svg>
-            <!--<span class="connected nav-align backend-status-indicator">●</span>-->
             <button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
         </div>
     </nav>
@@ -43,7 +40,7 @@
     <main class="page contact-page">
         <section class="portfolio-block contact">
             <div class="container">
-                <h2 class="text-center mt-5 h2">Current Backend Url: 127.0.0.1:8090</h2>
+                <h2 id="displayedUrl" class="text-center mt-5 h2">Current Backend Url: </h2>
                 <h1 class="text-center mt-5 h1">** DEV ENV** - VCard Creator - ** DEV ENV **</h1>
                 <form method="post" class="form-group mt-5">
                     <div class="form-group">
@@ -62,22 +59,12 @@
                         <label for="location">Location:</label>
                         <select class="form-control" id="location" name="location">
 
-                            <option value="Capital Area Early Learning Center">Capital Area Early Learning Center</option>
-
                             <option value="Capital Area Intermediate Unit">Capital Area Intermediate Unit</option>
 
+                            <option value="Capital Area Early Learning Center">Capital Area Early Learning Center</option>
+
                             <option value="Hill Top Academy">Hill Top Academy</option>
 
-                            <option value="Hershey Elementary/Derry PS">Hershey Elementary/Derry PS</option>
-
-                            <option value="Londonderry Elementary">Londonderry Elementary</option>
-
-                            <option value="Upper Dauphin Elementary School">Upper Dauphin Elementary School</option>
-
-                            <option value="PA STEAM">PA STEAM</option>
-
-                            <option value="Conewago Elementary">Conewago Elementary</option>
-
                         </select>
                     </div>
                     <div class="form-group">
@@ -88,7 +75,7 @@
                         <label for="directLine">Direct Line:</label>
                         <input type="text" class="form-control" id="directLine" name="directLine" maxlength="15" required="">
                     </div>
-                    <div class="form-group" ,="" id="extensioninput">
+                    <div class="form-group" id="extensionInput">
                         <label for="extension">Extension</label>
                         <input type="tel" class="form-control" id="extension" name="extension" required="">
                     </div>
@@ -96,7 +83,7 @@
                         <label for="cellNumber">Cell Number</label>
                         <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
                     </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <button type="submit" class="btn btn-primary" id="formSubmit">Submit</button>
                 </form>
             </div>
         </section>
@@ -105,9 +92,11 @@
     <script src="script.js"></script>
     <script>
         loadBackendUrl();
+        checkBackend();
 
         document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
         document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
+        document.getElementById("formSubmit").addEventListener("click", submitForm, false);
     </script>
 </body>
 </html>

script.js

@@ -9,29 +9,63 @@ function handleCheckbox() {
         extensionInput.style.display = "block";
         directLineInput.style.display = "none";
         document.getElementById("directLine").value = "";
-
     }
 }
 
+function submitForm() {
+
+}
+
+function getLocations() {
+    //TODO use (backend)/data/locations and do `document.getElementById("location").innerHtml`
+    //TODO and add <option> tags with the appropriate names, then create a map of names to other data
+    //TODO find equivalent of object to make things easier?
+}
+
 let backendUrl = "http://127.0.0.1:8090"
 
 async function checkBackend() {
+    const statusCircle = document.getElementById("statusCircle");
+    const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
+    statusCircle.classList.replace(previousState, "loading");
     try {
-        const response = await fetch(backendUrl);
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000)
+        let response;
+        await fetch(backendUrl + "/heartbeat", {
+            method: 'GET',
+            mode: 'cors',
+            headers: {
+                'Accept': 'application/json'
+            },
+            signal: controller.signal
+        }).then(res => {
+            response = res;
+            clearTimeout(timeoutId);
+        });
+        if (response.status === 200) {
             console.log('Backend up with code ', response.status);
-        console.log(response);
+        } else {
+            console.log("Something weird happened: ", response.status);
+        }
+        statusCircle.classList.replace("loading", "connected");
     } catch (err) {
-        console.log(err);
+        console.log("Backend down with error ", err);
+        statusCircle.classList.replace("loading", "disconnected");
     }
 }
 
 function saveBackendUrl() {
     let url = document.getElementById("newBackendUrlInput").value;
+    document.getElementById("newBackendUrlInput").value = "";
     if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
         url = "http://" + url;
     }
-    document.cookie = "backendUrl=" + url;
+    backendUrl = url;
-    console.log("Saved new backendUrl ", url);
+    document.cookie = "backendUrl=" + backendUrl;
+    document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
+    console.log("Saved new backendUrl ", backendUrl);
+    checkBackend();
 }
 
 function loadBackendUrl() {
@@ -40,6 +74,7 @@ function loadBackendUrl() {
         let cookie = cookieArray[i].split("=");
         if (cookie[0] === "backendUrl") {
             backendUrl = cookie[1];
+            document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
             console.log("Set backendUrl to ", backendUrl);
         } else {
             console.log("Unable to load backendUrl from cookie, defaulting to 127.0.0.1:8090");

stylesheet.css

@@ -4,6 +4,7 @@
   padding-left: 20px;
   padding-right: 20px;
   float: right;
+  margin: 0;
 }
 
 .nav-container {
@@ -13,10 +14,36 @@
   align-items: center;
 }
 
+.circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  margin-right: 15px;
+  padding: 0 !important;
+}
+
+.loading {
+  width: 40px;
+  height: 40px;
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #0069d9;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(360deg) }
+}
+
 .connected {
-  color: #28a745;
+  background: #28a745;
 }
 
 .disconnected {
-  color: #dc3545;
+  background: #dc3545;
 }