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');
    const logoutButton = document.getElementById('logoutButton');
    const taskForm = document.getElementById('taskForm');
    const sidenav = document.querySelector('.sidenav');

    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
        console.error('One or more elements are missing in the DOM');
        return;
    }

    // Initialize Materialize components
    M.Sidenav.init(sidenav);

    // Calculate tomorrow's date
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(today.getDate() + 1);

    // Initialize datepicker with tomorrow as the default date
    M.Datepicker.init(document.querySelectorAll('.datepicker'), {
        format: 'yyyy-mm-dd',
        defaultDate: tomorrow,
        setDefaultDate: true,
        firstDay: 1
    });

    // Initialize timepicker
    M.Timepicker.init(document.querySelectorAll('.timepicker'), {
        twelveHour: false // Use 24-hour format
    });

    // Check if user is already logged in
    fetch('/check-session')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.loggedIn) {
                loginContainer.style.display = 'none';
                appContainer.style.display = 'block';
                loadTags();
            } else {
                loginContainer.style.display = 'block';
                appContainer.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error checking session:', error);
            loginMessage.textContent = 'Error checking session. Please try again later.';
        });

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

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

        // Send credentials to the server for validation
        fetch('/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic ' + btoa(username + ':' + password)
            }
        })
        .then(response => {
            if (response.ok) {
                sessionStorage.setItem('loggedIn', 'true');
                loginContainer.style.display = 'none';
                appContainer.style.display = 'block';
                loadTags();
            } else {
                loginMessage.textContent = 'Invalid username or password';
            }
        })
        .catch(error => {
            loginMessage.textContent = 'Error logging in';
        });
    });

    logoutButton.addEventListener('click', function() {
        fetch('/logout', {
            method: 'POST'
        })
        .then(response => {
            if (response.ok) {
                sessionStorage.removeItem('loggedIn');
                loginContainer.style.display = 'block';
                appContainer.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error logging out:', error);
        });
    });

    taskForm.addEventListener('submit', async 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 time = document.getElementById('time').value;
        const tagsInput = document.getElementById('tags').value;
        const tags = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag).join(':');

        // Combine scheduled date and time if time is provided
        const scheduledDateTime = time ? `${scheduled}T${time}:00` : scheduled;

        // Structure data for Org mode
        const taskData = {
            subject: tags ? `${subject} :${tags}:` : subject,
            description,
            scheduled: scheduledDateTime
        };

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

        // Save task to server or IndexedDB if offline
        if (navigator.onLine) {
            try {
                const response = await fetch('/add-task', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(taskData)
                });
                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');
                    loginContainer.style.display = 'block';
                    appContainer.style.display = 'none';
                } else {
                    document.getElementById('responseMessage').textContent = "Error saving task!";
                }
            }
        } else {
            try {
                // Save task to IndexedDB
                const db = await idb.openDB('org-todo-pwa', 1, {
                    upgrade(db) {
                        db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
                    }
                });
                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);
            }
        }
    });

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