Tagghantering, fix #3

public/app.js

@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', function() {
     if (sessionStorage.getItem('loggedIn') === 'true') {
         loginContainer.style.display = 'none';
         appContainer.style.display = 'block';
+        loadTags();
     }
 
     loginForm.addEventListener('submit', function(e) {
@@ -33,6 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
             sessionStorage.setItem('loggedIn', 'true');
             loginContainer.style.display = 'none';
             appContainer.style.display = 'block';
+            loadTags();
         } else {
             loginMessage.textContent = 'Invalid username or password';
         }
@@ -45,14 +47,31 @@ document.addEventListener('DOMContentLoaded', function() {
         const subject = document.getElementById('subject').value;
         const description = document.getElementById('description').value;
         const scheduled = document.getElementById('scheduled').value;
+        const tagsInput = document.getElementById('tags').value;
+        const tags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag).join(':');
 
         // Structure data for Org mode
         const taskData = {
-            subject,
+            subject: `${subject} :${tags}:`,
             description,
             scheduled
         };
 
+        // Save tags to server
+        const savedTags = JSON.parse(localStorage.getItem('tags')) || [];
+        const newTags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag && !savedTags.includes(tag));
+        const allTags = [...savedTags, ...newTags];
+        localStorage.setItem('tags', JSON.stringify(allTags));
+        fetch('/save-tags', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ tags: allTags })
+        }).then(() => {
+            loadTags(); // Force refresh tags after saving
+        });
+
         // Send data to backend using fetch
         fetch('/add-task', {
             method: 'POST',
@@ -82,4 +101,32 @@ document.addEventListener('DOMContentLoaded', function() {
         weekNumbers: true, // Show week numbers
         firstDayOfWeek: 1 // Start weeks on Monday
     });
+
+    // Load tags from server and initialize autocomplete
+    function loadTags() {
+        fetch('/get-tags')
+            .then(response => response.json())
+            .then(tags => {
+                localStorage.setItem('tags', JSON.stringify(tags));
+                const autocompleteData = {};
+                tags.forEach(tag => {
+                    autocompleteData[tag] = null; // Materialize autocomplete requires a key-value pair
+                });
+
+                const tagsInput = document.getElementById('tags');
+                M.Autocomplete.init(tagsInput, {
+                    data: autocompleteData,
+                    onAutocomplete: function(selectedTag) {
+                        const currentTags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag);
+                        if (!currentTags.includes(selectedTag)) {
+                            currentTags.push(selectedTag);
+                            tagsInput.value = currentTags.join(', ');
+                        }
+                    }
+                });
+            })
+            .catch(error => {
+                console.error('Error loading tags:', error);
+            });
+    }
 });

public/index.html

@@ -47,6 +47,11 @@
                 <input type="date" id="scheduled" lang="sv-SE" required>
             </div>
 
+            <div class="input-field">
+                <label for="tags">Tags (separated by commas):</label>
+                <input type="text" id="tags" class="autocomplete">
+            </div>
+
             <button class="btn waves-effect waves-light" type="submit">Spara</button>
         </form>
         <p id="responseMessage" class="center-align"></p>

public/service-worker.js

@@ -15,9 +15,14 @@ self.addEventListener('install', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
-    event.respondWith(
-        caches.match(event.request).then((cachedResponse) => {
-            return cachedResponse || fetch(event.request);
-        })
-    );
+    if (event.request.url.includes('/get-tags') || event.request.url.includes('/save-tags')) {
+        // Bypass cache for tags endpoints
+        event.respondWith(fetch(event.request));
+    } else {
+        event.respondWith(
+            caches.match(event.request).then((cachedResponse) => {
+                return cachedResponse || fetch(event.request);
+            })
+        );
+    }
 });