Fix data consistancy in submitForm function

index.html

@@ -42,7 +42,9 @@
             <div class="container">
                 <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">
+                <a id="vcard" href="#"></a>
+                <label for="vcard" class="text-center"></label>
+                <div class="form-group mt-5">
                     <div class="form-group">
                         <label for="full_name">Full Name &amp; Credentials</label>
                         <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
@@ -57,15 +59,7 @@
                     </div>
                     <div class="form-group">
                         <label for="location">Location:</label>
-                        <select class="form-control" id="location" name="location">
+                        <select class="form-control" id="location" name="location"></select>
-
-                            <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>
-
-                        </select>
                     </div>
                     <div class="form-group">
                         <input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
@@ -83,8 +77,8 @@
                         <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" id="formSubmit">Submit</button>
+                    <button class="btn btn-primary" id="formSubmit">Generate VCard</button>
-                </form>
+                </div>
             </div>
         </section>
     </main>

script.js

@@ -12,36 +12,69 @@ function handleCheckbox() {
     }
 }
 
-function submitForm() {
+let backendUrl = "http://127.0.0.1:8090"
+let locations = JSON.parse("{}");
 
+function submitForm() {
+    fetchWithTimeout(backendUrl + "/", {
+        timeout: 5000,
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Accept': 'image/png',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(
+            "{" +
+            "\"name\":\"" + document.getElementById("full_name").value + "\"," +
+            "\"title\":\"" + document.getElementById("title").value + "\"," +
+            "\"email\":\"" + document.getElementById("email").value + "\"," +
+            "\"location\":\"" + document.getElementById("location").value + "\"," +
+            "\"extension\":\"" + document.getElementById("extension").value + "\"," +
+            "\"hasExtension\":\"" + document.getElementById("hasExtension").value + "\"," +
+            "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
+            "\"hasCell\":\"" + document.getElementById("hasCell").value + "\"" +
+            "}"
+        )
+    }).then(response => {
+        console.log(response);
+    });
 }
 
+
 function getLocations() {
-    //TODO use (backend)/data/locations and do `document.getElementById("location").innerHtml`
+    let locationsList = document.getElementById("location");
-    //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"
+    fetchWithTimeout(backendUrl + "/data/locations", {
+        timeout: 5000,
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+            'Accept': 'application/json'
+        }
+    }).then(response => {
+        response.text().then(text => {
+            locations = JSON.parse(text);
+            locationsList.innerText = "";
+            for (let i = 0; i < locations.length; i++) {
+                locationsList.options[locationsList.options.length] = new Option(locations[i].name, locations[i].id);
+            }
+        })
+    });
+}
 
 async function checkBackend() {
     const statusCircle = document.getElementById("statusCircle");
     const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
     statusCircle.classList.replace(previousState, "loading");
     try {
-        const controller = new AbortController();
+        const response = await fetchWithTimeout(backendUrl + "/heartbeat", {
-        const timeoutId = setTimeout(() => controller.abort(), 5000)
+            timeout: 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);
@@ -53,6 +86,7 @@ async function checkBackend() {
         console.log("Backend down with error ", err);
         statusCircle.classList.replace("loading", "disconnected");
     }
+    getLocations();
 }
 
 function saveBackendUrl() {
@@ -81,3 +115,17 @@ function loadBackendUrl() {
         }
     }
 }
+
+async function fetchWithTimeout(resource, options = {}) {
+    const { timeout = 8000 } = options;
+    const controller = new AbortController();
+    const id = setTimeout(() => controller.abort(), timeout);
+
+    const response = await fetch(resource, {
+        ...options,
+        signal: controller.signal
+    });
+    clearTimeout(id);
+
+    return response;
+}

stylesheet.css

@@ -32,7 +32,7 @@
   border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
-  animation: spin 2s linear infinite;
+  animation: spin 1.25s ease-in-out infinite;
 }
 
 @keyframes spin {