From 1122de442bf2160ddb3d8860864457f4a3c62be9 Mon Sep 17 00:00:00 2001
From: Fredrik Wahlberg <fredrik@wahlberg.se>
Date: Sat, 25 Jan 2025 11:21:26 +0100
Subject: [PATCH] Refactor navigation and form elements for improved usability
 and localization

---
 public/app.js     | 30 +++++++++--------------
 public/index.html | 62 +++++++++++++++++++++--------------------------
 public/style.css  | 11 ++-------
 3 files changed, 41 insertions(+), 62 deletions(-)

diff --git a/public/app.js b/public/app.js
index 6d2d714..fcb4d3f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -17,17 +17,20 @@ document.addEventListener('DOMContentLoaded', function() {
     const loginMessage = document.getElementById('loginMessage');
     const logoutButton = document.getElementById('logoutButton');
     const taskForm = document.getElementById('taskForm');
-    const hamburgerButton = document.getElementById('hamburgerButton');
-    const menuContent = document.getElementById('menuContent');
+    const sidenav = document.querySelector('.sidenav');
 
-    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !hamburgerButton || !menuContent) {
+    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
         console.error('One or more elements are missing in the DOM');
         return;
     }
 
-    // Toggle the hamburger menu
-    hamburgerButton.addEventListener('click', function() {
-        menuContent.classList.toggle('show');
+    // Initialize Materialize components
+    M.Sidenav.init(sidenav);
+    M.Datepicker.init(document.querySelectorAll('.datepicker'), {
+        format: 'yyyy-mm-dd',
+        defaultDate: new Date(),
+        setDefaultDate: true,
+        firstDay: 1
     });
 
     // Check if user is already logged in
@@ -130,6 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 });
                 const data = await response.json();
                 document.getElementById('responseMessage').textContent = data.message;
+                taskForm.reset(); // Reset the form after saving the task
             } catch (error) {
                 if (error.status === 401) {
                     sessionStorage.removeItem('loggedIn');
@@ -149,6 +153,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 });
                 await db.add('tasks', taskData);
                 document.getElementById('responseMessage').textContent = "Task saved offline!";
+                taskForm.reset(); // Reset the form after saving the task
             } catch (error) {
                 document.getElementById('responseMessage').textContent = "Error saving task offline!";
                 console.error('Error saving task offline:', error);
@@ -156,19 +161,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Set tomorrow's date as the default for the date input
-    const today = new Date();
-    const tomorrow = new Date(today);
-    tomorrow.setDate(today.getDate() + 1);
-    const tomorrowString = tomorrow.toISOString().split('T')[0];
-    document.getElementById('scheduled').value = tomorrowString;
-
-    // Initialize flatpickr with Swedish locale and Monday as the first day of the week
-    flatpickr("#scheduled", {
-        weekNumbers: true, // Show week numbers
-        firstDayOfWeek: 1 // Start weeks on Monday
-    });
-
     // Load tags from server and initialize autocomplete
     function loadTags() {
         fetch('/get-tags')
diff --git a/public/index.html b/public/index.html
index f7d48fb..7b08529 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,12 +17,12 @@
         <h1 class="center-align">Logga in</h1>
         <form id="loginForm">
             <div class="input-field">
-                <label for="username">Användarnamn:</label>
-                <input type="text" id="username" placeholder="Username" required>
+                <input type="text" id="username" placeholder="Användarnamn" required>
+                <label for="username">Användarnamn</label>
             </div>
             <div class="input-field">
-                <label for="password">Lösenord:</label>
-                <input type="password" id="password" placeholder="Password" required>
+                <input type="password" id="password" placeholder="Lösenord" required>
+                <label for="password">Lösenord</label>
             </div>
             <button class="btn waves-effect waves-light" type="submit">Login</button>
         </form>
@@ -31,49 +31,43 @@
 
     <div id="appContainer" class="container" style="display:none;">
         <h1 class="center-align">TODO</h1>
-        <div class="menu">
-            <button class="hamburger" id="hamburgerButton">&#9776;</button>
-            <div class="menu-content" id="menuContent">
-                <button id="logoutButton" class="btn waves-effect waves-light">Logout</button>
+        <nav style="display:none;">
+            <div class="nav-wrapper">
+                <a href="#" class="brand-logo">Menu</a>
+                <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+                <ul class="right hide-on-med-and-down">
+                    <li><a id="logoutButton" class="hide-on-med-and-down">Logout</a></li>
+                </ul>
             </div>
-        </div>
+        </nav>
+
+        <ul class="sidenav" id="mobile-demo">
+            <li><a id="logoutButton">Logout</a></li>
+        </ul>
+
         <form id="taskForm">
             <div class="input-field">
-                <label for="subject">Uppgift:</label>
-                <input type="text" id="subject" placeholder="Subject" required autocomplete="off">
+                <input type="text" id="subject" placeholder="Uppgift" required autocomplete="off">
+                <label for="subject">Uppgift</label>
             </div>
-
             <div class="input-field">
-                <label for="description">Beskrivning:</label>
-                <textarea id="description" class="materialize-textarea" placeholder="Description"></textarea>
+                <textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
+                <label for="description">Beskrivning</label>
             </div>
-
             <div class="input-field">
-                <label for="scheduled">Datum:</label>
-                <input type="date" id="scheduled" lang="sv-SE" required>
+                <input type="text" id="scheduled" class="datepicker" required>
+                <label for="scheduled">Planerat datum</label>
             </div>
-
             <div class="input-field">
-                <label for="tags">Taggar (separera med komma):</label>
-                <input type="text" id="tags" class="autocomplete" placeholder="Tags" autocomplete="off">
+                <input type="text" id="tags" placeholder="Taggar">
+                <label for="tags">Taggar</label>
             </div>
-
-            <button class="btn waves-effect waves-light" type="submit">Spara</button>
+            <button class="btn waves-effect waves-light" type="submit">Save Task</button>
+            <p id="responseMessage"></p>
         </form>
-        <p id="responseMessage" class="center-align"></p>
     </div>
 
-    <script src="app.js"></script>
-    <script>
-      // Set today's date as the default for the date input
-      const today = new Date().toISOString().split('T')[0];
-      document.getElementById('scheduled').value = today;
-      // Initialize flatpickr with Swedish locale and Monday as the first day of the week
-      flatpickr("#scheduled", {
-          weekNumbers: true, // Show week numbers
-          firstDayOfWeek: 1 // Start weeks on Monday
-      });
-    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="app.js"></script>
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
index 8441460..eb8a5b3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,11 +1,5 @@
 body {
     font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f4f4f9;
 }
 
 .container {
@@ -22,8 +16,7 @@ h1 {
 
 #responseMessage {
     text-align: center;
-    color: green;
-}
+    color: green;}
 
 .menu {
     position: relative;
@@ -62,4 +55,4 @@ h1 {
 
 .menu.show .menu-content {
     display: block;
-}
+}
\ No newline at end of file