From e4853c2585aa8c9b08a1fa0fddfeeae5797a624f Mon Sep 17 00:00:00 2001
From: Steven Tracey <steven@nevets.tech>
Date: Tue, 16 May 2023 16:10:05 -0400
Subject: [PATCH] PRODUCTION

---
 index.html     |  28 +++------
 logo.png       | Bin 0 -> 2216 bytes
 script.js      | 154 ++++++++++++++++---------------------------------
 stylesheet.css |  25 +++++++-
 4 files changed, 83 insertions(+), 124 deletions(-)
 create mode 100644 logo.png

diff --git a/index.html b/index.html
index 65d7e11..9b53a25 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="stylesheet.css">
-    <title>*DEV* CAIU VCard Creator *DEV*</title>
+    <title>CAIU Signature Card</title>
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const inputs = Array.from(
@@ -22,18 +22,8 @@
 
     <nav id="navbar" class="navbar navbar-light">
         <a class="navbar-brand" href="#">
-            <img src="https://resources.finalsite.net/images/f_auto,q_auto/v1619001051/caiuorg/cjwogofoj9lsqxvuwnd8/Logo_CAIU_color1.png" alt="">
+            <img src="logo.png" alt="CAIU Logo">
         </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" 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>
-            <div class="connected nav-align circle" id="statusCircle">&nbsp;</div>
-            <button class="btn btn-primary nav-align" id="checkBackendButton">Reload</button>
-        </div>
         <div class="nav-container">
             <label class="nav-align" for="existingFile">Edit Existing VCard</label>
             <input type="file" accept="image/png" class="nav-align" id="existingFile" name="existingFile">
@@ -62,9 +52,12 @@
     <main class="page contact-page">
         <section class="portfolio-block contact">
             <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>
-                <a id="vcard" href="#"></a>
+                <h1 class="text-center mt-5 mb-5 h1">Signature Card Creator</h1>
+                <div class="card">
+                    <a id="vcard" href="#" style="display: none">
+                        <img class="card" id="cardImg"/>
+                    </a>
+                </div>
                 <label for="vcard" class="text-center"></label>
                 <div class="form-group mt-5">
                     <div class="form-group">
@@ -115,11 +108,8 @@
     <script src="script.js"></script>
     <script>
         refreshDarkMode();
-        loadBackendUrl();
-        checkBackend();
+        loadLocations();
 
-        document.getElementById("changeBackendButton").addEventListener("click", saveBackendUrl, false);
-        document.getElementById("checkBackendButton").addEventListener("click", checkBackend, false);
         document.getElementById("getFileDataBtn").addEventListener("click", loadFromExistingCard, false);
         document.getElementById("formSubmit").addEventListener("click", submitForm, false);
         document.getElementById("theme").addEventListener("click", toggleDarkMode, false);
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..0930e72e1db7c05224498b6d45c3072df074e8a9
GIT binary patch
literal 2216
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

literal 0
HcmV?d00001

diff --git a/script.js b/script.js
index 6edfd6a..3ccff6e 100644
--- a/script.js
+++ b/script.js
@@ -12,10 +12,30 @@ function handleCheckbox() {
     }
 }
 
-
-let backendUrl = "http://127.0.0.1:8090"
+let backendUrl = "http://127.0.0.1:8080"
 let locations = JSON.parse("{}");
 
+function loadLocations() {
+    let locationsList = document.getElementById("location");
+
+    fetchWithTimeout(backendUrl + "/backend/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);
+            }
+        })
+    });
+}
+
 function submitForm() {
     let body =
         "{" +
@@ -29,8 +49,6 @@ function submitForm() {
         "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
         "}";
 
-    console.log(body);
-
     fetchWithTimeout(backendUrl + "/backend/generate", {
         timeout: 5000,
         method: 'POST',
@@ -44,6 +62,21 @@ function submitForm() {
     });
 }
 
+function downloadImage(arrayBuffer) {
+    const blob = new Blob([arrayBuffer], { type: "image/png" });
+    const cardElement = document.getElementById("vcard");
+    const imgElement = document.getElementById("cardImg");
+
+    let urlCreator = window.URL || window.webkitURL;
+    let imageUrl = urlCreator.createObjectURL(blob);
+
+    cardElement.href = imageUrl;
+    cardElement.style.display = 'unset';
+    imgElement.src = imageUrl;
+    cardElement.download = "card.png";
+    cardElement.click();
+}
+
 function loadFromExistingCard() {
     const data = new FormData();
     data.append("card", document.getElementById("existingFile").files[0]);
@@ -73,77 +106,22 @@ function loadFromExistingCard() {
     });
 }
 
-function getLocations() {
-    let locationsList = document.getElementById("location");
-
-    fetchWithTimeout(backendUrl + "/backend/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);
-            }
-        })
-    });
+function toggleDarkMode() {
+    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
+    else document.cookie = "darkMode=on";
+    refreshDarkMode();
 }
 
-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 fetchWithTimeout(backendUrl + "/backend/heartbeat", {
-            timeout: 5000,
-            method: 'GET',
-            mode: 'cors',
-            headers: {
-                'Accept': 'application/json'
-            }
-        });
-        if (response.status === 200) {
-            console.log('Backend up with code ', response.status);
-        } else {
-            console.log("Something weird happened: ", response.status);
-        }
-        statusCircle.classList.replace("loading", "connected");
-    } catch (err) {
-        console.log("Backend down with error ", err);
-        statusCircle.classList.replace("loading", "disconnected");
-    }
-    getLocations();
-}
-
-function saveBackendUrl() {
-    let url = document.getElementById("newBackendUrlInput").value;
-    document.getElementById("newBackendUrlInput").value = "";
-    if (!(url.includes("http://") || url.includes("https://") && url !== "")) {
-        url = "http://" + url;
-    }
-    backendUrl = url;
-    document.cookie = "backendUrl=" + backendUrl;
-    document.getElementById("displayedUrl").innerHTML = "Current Backend Url: " + backendUrl;
-    console.log("Saved new backendUrl ", backendUrl);
-    checkBackend().then();
-}
-
-function loadBackendUrl() {
-    let cookieArray = document.cookie.split(";");
-    for (let i = 0; i < cookieArray.length; i++) {
-        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");
+function refreshDarkMode() {
+    let darkMode = getCookie("darkMode") === "on";
+    if (darkMode) {
+        document.body.classList.add("dark-theme");
+        document.getElementById("theme").checked = true;
+    } else {
+        if (document.body.classList.contains("dark-theme")) {
+            document.body.classList.remove("dark-theme");
         }
+        document.getElementById("theme").checked = false;
     }
 }
 
@@ -161,38 +139,6 @@ async function fetchWithTimeout(resource, options = {}) {
     return response;
 }
 
-function downloadImage(arrayBuffer) {
-    const blob = new Blob([arrayBuffer], { type: "image/png" });
-    const link = document.createElement("a");
-    link.href = URL.createObjectURL(blob);
-    link.download = "vcard.png";
-
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-
-    setTimeout(() => {
-        URL.revokeObjectURL(link.href);
-    }, 100);
-}
-
-function toggleDarkMode() {
-    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
-    else document.cookie = "darkMode=on";
-    refreshDarkMode();
-}
-
-function refreshDarkMode() {
-    let darkMode = getCookie("darkMode") === "on";
-    if (darkMode) {
-        document.body.classList.add("dark-theme");
-    } else {
-        if (document.body.classList.contains("dark-theme")) {
-            document.body.classList.remove("dark-theme");
-        }
-    }
-}
-
 function getCookie(cookieName) {
     let cookieArray = document.cookie.split(";");
     for (let i = 0; i < cookieArray.length; i++) {
diff --git a/stylesheet.css b/stylesheet.css
index 3b4b46c..a1d3d05 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -155,7 +155,11 @@ input[type="checkbox"], input[type="radio"] {
 }
 
 .mt-5, .my-5 {
-  margin-top: 3rem !important;
+  margin-top: 1rem !important;
+}
+
+.mb-5 {
+  margin-bottom: 1rem !important;
 }
 
 .form-group {
@@ -192,6 +196,20 @@ input[type="checkbox"], input[type="radio"] {
   padding: .5rem 1rem;
 }
 
+.navbar-brand{
+  display:inline-block;
+  padding-top:.3125rem;
+  padding-bottom:.3125rem;
+  margin-right:1rem;
+  font-size:1.25rem;
+  line-height:inherit;
+  white-space:nowrap
+}
+
+.navbar-brand:focus, .navbar-brand:hover {
+  text-decoration:none;
+}
+
 .nav-align {
   width: fit-content;
   vertical-align: middle;
@@ -208,6 +226,11 @@ input[type="checkbox"], input[type="radio"] {
   align-items: center;
 }
 
+.card {
+  margin: auto;
+  width: 24em;
+}
+
 .circle {
   width: 40px;
   height: 40px;