EOD

index.html

@@ -35,6 +35,11 @@
             <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">
+            <button class="btn btn-primary nav-align" id="getFileDataBtn">Edit</button>
+        </div>
     </nav>
 
     <main class="page contact-page">
@@ -97,6 +102,7 @@
 
         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);
     </script>
 </body>

script.js

@@ -31,7 +31,7 @@ function submitForm() {
 
     console.log(body);
 
-    fetchWithTimeout(backendUrl, {
+    fetchWithTimeout(backendUrl + "/backend/generate", {
         timeout: 5000,
         method: 'POST',
         mode: 'cors',
@@ -45,11 +45,25 @@ function submitForm() {
     });
 }
 
+function loadFromExistingCard() {
+    fetchWithTimeout(backendUrl + "/backend/edit", {
+        timeout: 5000,
+        method: 'POST',
+        mode: 'cors',
+        Headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'image/png'
+        },
+        body: document.getElementById("existingFile").files[0]
+    }).then(response => response.json(res => {
+
+    }))
+}
 
 function getLocations() {
     let locationsList = document.getElementById("location");
 
-    fetchWithTimeout(backendUrl + "/data/locations", {
+    fetchWithTimeout(backendUrl + "/backend/data/locations", {
         timeout: 5000,
         method: 'GET',
         mode: 'cors',
@@ -72,7 +86,7 @@ async function checkBackend() {
     const previousState = statusCircle.classList.contains("connected") ? "connected" : "disconnected";
     statusCircle.classList.replace(previousState, "loading");
     try {
-        const response = await fetchWithTimeout(backendUrl + "/heartbeat", {
+        const response = await fetchWithTimeout(backendUrl + "/backend/heartbeat", {
             timeout: 5000,
             method: 'GET',
             mode: 'cors',