118 lines
4.8 KiB
JavaScript
118 lines
4.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
console.log('main.js: DOMContentLoaded event fired.');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const sidebarToggle = document.getElementById('sidebar-toggle');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const mainContent = document.querySelector('.main-content');
|
|
const currentTheme = localStorage.getItem('theme');
|
|
|
|
if (currentTheme) {
|
|
document.body.classList.add(currentTheme);
|
|
if (currentTheme === 'dark-mode') {
|
|
themeToggle.checked = true;
|
|
}
|
|
}
|
|
|
|
themeToggle.addEventListener('change', function () {
|
|
if (this.checked) {
|
|
document.body.classList.remove('light-mode');
|
|
document.body.classList.add('dark-mode');
|
|
localStorage.setItem('theme', 'dark-mode');
|
|
} else {
|
|
document.body.classList.remove('dark-mode');
|
|
document.body.classList.add('light-mode');
|
|
localStorage.setItem('theme', 'light-mode');
|
|
}
|
|
});
|
|
|
|
sidebarToggle.addEventListener('click', function () {
|
|
sidebar.classList.toggle('collapsed');
|
|
// Adjust main content margin only if not on mobile
|
|
if (window.innerWidth > 768) {
|
|
mainContent.classList.toggle('expanded');
|
|
}
|
|
});
|
|
|
|
const addTaskForm = document.getElementById('addTaskForm');
|
|
if (addTaskForm) {
|
|
addTaskForm.addEventListener('submit', async function (e) {
|
|
console.log('main.js: addTaskForm submitted.');
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
formData.append('action', 'addTask');
|
|
|
|
try {
|
|
const response = await fetch('index.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
alert(result.message);
|
|
this.reset(); // Clear form fields
|
|
// Close modal
|
|
const addTaskModal = bootstrap.Modal.getInstance(document.getElementById('addTaskModal'));
|
|
if (addTaskModal) {
|
|
addTaskModal.hide();
|
|
}
|
|
loadTasks(); // Refresh tasks list
|
|
} else {
|
|
alert('Error: ' + result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding task:', error);
|
|
alert('An unexpected error occurred while adding the task. Check console for details.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to load and display tasks
|
|
async function loadTasks() {
|
|
console.log('main.js: loadTasks() called.');
|
|
const tasksListDiv = document.getElementById('tasksList');
|
|
if (!tasksListDiv) return;
|
|
|
|
tasksListDiv.innerHTML = '<div class="text-center p-5">Loading tasks...</div>'; // Loading indicator
|
|
|
|
try {
|
|
const response = await fetch('index.php?action=getTasks');
|
|
const result = await response.json();
|
|
|
|
if (result.success && result.tasks) {
|
|
tasksListDiv.innerHTML = ''; // Clear loading indicator
|
|
if (result.tasks.length === 0) {
|
|
tasksListDiv.innerHTML = '<div class="col-12"><p class="text-center">No tasks yet. Add one!</p></div>';
|
|
return;
|
|
}
|
|
result.tasks.forEach(task => {
|
|
const taskCard = `
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card surface h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title">${task.title}</h5>
|
|
<p class="card-text">${task.description}</p>
|
|
<span class="badge bg-primary">${task.status}</span>
|
|
</div>
|
|
<div class="card-footer text-muted">
|
|
Created: ${new Date(task.created_at).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
tasksListDiv.innerHTML += taskCard;
|
|
});
|
|
} else {
|
|
tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>Error loading tasks: ' + (result.message || 'Unknown error') + '</p></div>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching tasks:', error);
|
|
tasksListDiv.innerHTML = '<div class="col-12 text-danger text-center"><p>An unexpected error occurred while fetching tasks. Check console for details.</p></div>';
|
|
}
|
|
}
|
|
|
|
// Initial load of tasks
|
|
loadTasks();
|
|
});
|