PRODUCTION

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 mb-5 h1">Signature Card Creator</h1>
-                <h1 class="text-center mt-5 h1">** DEV ENV** - VCard Creator - ** DEV ENV **</h1>
+                <div class="card">
-                <a id="vcard" href="#"></a>
+                    <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();
+        loadLocations();
-        checkBackend();
 
-        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);

script.js

@@ -12,10 +12,30 @@ function handleCheckbox() {
     }
 }
 
-
+let backendUrl = "http://127.0.0.1:8080"
-let backendUrl = "http://127.0.0.1:8090"
 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() {
+function toggleDarkMode() {
-    let locationsList = document.getElementById("location");
+    if (getCookie("darkMode") === "on") document.cookie = "darkMode=off";
-
+    else document.cookie = "darkMode=on";
-    fetchWithTimeout(backendUrl + "/backend/data/locations", {
+    refreshDarkMode();
-        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() {
+function refreshDarkMode() {
-    const statusCircle = document.getElementById("statusCircle");
+    let darkMode = getCookie("darkMode") === "on";
-    const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
+    if (darkMode) {
-    statusCircle.classList.replace(previousState, "loading");
+        document.body.classList.add("dark-theme");
-    try {
+        document.getElementById("theme").checked = true;
-        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);
+        if (document.body.classList.contains("dark-theme")) {
-        }
+            document.body.classList.remove("dark-theme");
-        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");
         }
+        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++) {

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;