Split app.js in to smaller chunks

public/js/main.js

@@ -0,0 +1,171 @@
+import { checkSession, login, logout } from './auth.js';
+import { saveTask } from './tasks.js';
+import { saveTags, loadTags } from './tags.js';
+
+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 = 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!";
+            }
+        }
+    });
+});