org-todo-pwa/public/js/main.js

import { checkSession, login, logout } from './auth.js';
import { saveTask } from './tasks.js';
import { saveTags, loadTags } from './tags.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);

                registration.onupdatefound = () => {
                    const installingWorker = registration.installing;
                    installingWorker.onstatechange = () => {
                        if (installingWorker.state === 'installed') {
                            if (navigator.serviceWorker.controller) {
                                // New update available
                                console.log('New content is available; please refresh.');
                                if (confirm('New version available. Do you want to update?')) {
                                    window.location.reload();
                                }
                            } else {
                                // Content is cached for offline use
                                console.log('Content is cached for offline use.');
                            }
                        }
                    };
                };
            })
            .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
    checkSession()
        .then(data => {
            if (data.loggedIn) {
                loginContainer.style.display = 'none';
                appContainer.style.display = 'block';
                loadTags().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(', ');
                            }
                        }
                    });
                });
            } 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;

        login(username, password)
            .then(response => {
                if (response.ok) {
                    sessionStorage.setItem('loggedIn', 'true');
                    loginContainer.style.display = 'none';
                    appContainer.style.display = 'block';
                    loadTags().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(', ');
                                }
                            }
                        });
                    });
                } else {
                    loginMessage.textContent = 'Invalid username or password';
                }
            })
            .catch(error => {
                loginMessage.textContent = 'Error logging in';
            });
    });

    logoutButton.addEventListener('click', function() {
        logout()
            .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
        saveTags(tags.split(',').map(tag => tag.trim()).filter(tag => tag))
            .then(() => {
                loadTags(); // Force refresh tags after saving
            });

        // Save task to server or IndexedDB if offline
        try {
            const data = await saveTask(taskData);
            document.getElementById('responseMessage').textContent = "Task saved successfully!";
            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!";
            }
        }
    });
});