Make frontend partially functional

pages/index.html

@@ -16,11 +16,11 @@
     <main class="container">
         <h2 style="margin-bottom:0;"><label for="day">Your day so far:</label></h2>
         <textarea id="day" name="Day entry" cols="40" rows="10" style="max-width: 640px; width: 100%"></textarea>
-        <div class="grid"><button onclick="console.log('Test save')">Save</button></div>
+        <div class="grid"><button onclick="saveToday()">Save</button></div>
 
         <h2><label for="log">Log</label></h2>
         <input type="text" id="log" name="log" style="max-width: 640px; width: 100%"/>
-        <div class="grid"><button onclick="console.log('Test log save')">Save</button></div>
+        <div class="grid"><button onclick="saveLog()">Save</button></div>
     </main>
     <footer class="container">
         <p><a href="/page/sitemap" class="no-accent"></a> v0.0.1 | PoC using <a href="https://picocss.com">PicoCSS</a></p>
@@ -34,7 +34,67 @@
         timeField.innerText = todayDate.toISOString().split('T')[0]
 
     }
-
     updateTime()
+
+    async function postData(url = "", data = "") {
+        const response = await fetch(url, {
+            method: "POST",
+            credentials: "same-origin",
+            headers: {
+                "Content-Type": "text/plain",
+            },
+            redirect: "follow",
+            referrerPolicy: "no-referrer",
+            body: data,
+        });
+        if (response.ok) {
+            return response.text();
+        } else {
+            return response.status
+        }
+    }
+
+    async function getData(url = "", data = "") {
+        const response = await fetch(url, {
+            method: "GET",
+            credentials: "same-origin",
+            redirect: "follow",
+            referrerPolicy: "no-referrer"
+        });
+        if (response.ok) {
+            return response.text();
+        } else {
+            console.log(response.text())
+            return response.status
+            // return "Error"
+        }
+    }
+
+    function saveLog() {
+        let logField = document.getElementById("log")
+        postData("/api/log", logField.value).then((data) => {
+            if (data !== 500) {
+                logField.value = ""
+            }
+        });
+    }
+
+    function saveToday() {
+        let logField = document.getElementById("day")
+        postData("/api/today", logField.value).then((data) => {
+            console.log(data);
+        });
+    }
+    function loadToday() {
+        let dayField = document.getElementById("day")
+        getData("/api/today", dayField.value).then((data) => {
+            if (data !== 404) {
+                dayField.value = data
+            } else {
+                dayField.value = ""
+            }
+        });
+    }
+    loadToday()
 </script>
 </html>