org-todo-pwa/public/app.js

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            })
            .catch(error => {
                console.log('ServiceWorker registration failed: ', error);
            });
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const loginContainer = document.getElementById('loginContainer');
    const appContainer = document.getElementById('appContainer');
    const loginMessage = document.getElementById('loginMessage');

    // Check if user is already logged in
    if (sessionStorage.getItem('loggedIn') === 'true') {
        loginContainer.style.display = 'none';
        appContainer.style.display = 'block';
        loadTags();
    }

    loginForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        // Simple authentication check (replace with your own logic)
        if (username === 'fredrik' && password === 'apa') {
            sessionStorage.setItem('loggedIn', 'true');
            loginContainer.style.display = 'none';
            appContainer.style.display = 'block';
            loadTags();
        } else {
            loginMessage.textContent = 'Invalid username or password';
        }
    });

    document.getElementById('taskForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Get form values
        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} :${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',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(taskData)
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('responseMessage').textContent = data.message;
        })
        .catch(error => {
            document.getElementById('responseMessage').textContent = "Error saving task!";
        });
    });

    // 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')
            .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);
            });
    }
});