Hugging Face's logo

Spaces:
federi
/
taskflow
Running

App Files Community
taskflow / index.html
federi's picture
federi
Add 3 files
3b10dbb verified
raw
history blame contribute delete
63.9 kB
 <!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskFlow - Gestione Attività</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Animation for task completion */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.task-item {
animation: fadeIn 0.3s ease-out forwards;
}
/* Calendar day highlight */
.current-day {
background-color: #3b82f6;
color: white;
border-radius: 50%;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-indigo-700 text-white">
<div class="flex items-center justify-center h-16 px-4">
<div class="flex items-center">
<i class="fas fa-tasks text-2xl mr-2"></i>
<span class="text-xl font-semibold">TaskFlow</span>
</div>
</div>
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
<div class="space-y-1">
<button id="all-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md group">
<i class="fas fa-list mr-3"></i>
Tutte le attività
</button>
<button id="today-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
<i class="fas fa-calendar-day mr-3"></i>
Oggi
</button>
<button id="upcoming-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
<i class="fas fa-calendar-week mr-3"></i>
Prossimi
</button>
<button id="important-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
<i class="fas fa-star mr-3"></i>
Importanti
</button>
<button id="completed-tasks-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
<i class="fas fa-check-circle mr-3"></i>
Completate
</button>
</div>
<div class="mt-8">
<h3 class="px-4 text-xs font-semibold text-indigo-200 uppercase tracking-wider">Categorie</h3>
<div class="mt-2 space-y-1" id="categories-list">
<!-- Categories will be added dynamically -->
</div>
<div class="mt-2">
<button id="add-category-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group">
<i class="fas fa-plus mr-3"></i>
Aggiungi categoria
</button>
</div>
</div>
<div class="mt-auto mb-4">
<div class="flex items-center px-4 py-2 text-sm text-indigo-200">
<i class="fas fa-moon mr-3"></i>
Modalità scura
<label class="ml-auto relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="dark-mode-toggle" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile sidebar -->
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-10">
<div class="flex justify-around">
<button id="mobile-all-tasks" class="p-4 text-indigo-600">
<i class="fas fa-list text-xl"></i>
</button>
<button id="mobile-today-tasks" class="p-4 text-gray-500">
<i class="fas fa-calendar-day text-xl"></i>
</button>
<button id="mobile-add-task" class="p-4 text-gray-500">
<i class="fas fa-plus-circle text-2xl text-indigo-600"></i>
</button>
<button id="mobile-upcoming-tasks" class="p-4 text-gray-500">
<i class="fas fa-calendar-week text-xl"></i>
</button>
<button id="mobile-important-tasks" class="p-4 text-gray-500">
<i class="fas fa-star text-xl"></i>
</button>
</div>
</div>
<!-- Main content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top navigation -->
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center">
<button id="sidebar-toggle" class="md:hidden text-gray-500 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
<h1 id="current-view" class="ml-4 text-lg font-semibold text-gray-900">Tutte le attività</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="search-btn" class="p-1 text-gray-500 hover:text-gray-700">
<i class="fas fa-search"></i>
</button>
<div id="search-container" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-10">
<input type="text" id="search-input" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Cerca attività...">
</div>
</div>
<button id="add-task-btn" class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<i class="fas fa-plus mr-2"></i>
<span class="hidden md:inline">Nuova attività</span>
</button>
</div>
</div>
<!-- Content area -->
<div class="flex flex-1 overflow-hidden">
<!-- Task list -->
<div class="flex-1 overflow-y-auto p-4">
<div id="task-list-container">
<div id="no-tasks-message" class="flex flex-col items-center justify-center h-64 text-gray-500">
<i class="fas fa-tasks text-5xl mb-4"></i>
<p class="text-xl">Nessuna attività trovata</p>
<button id="add-first-task-btn" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
Aggiungi la tua prima attività
</button>
</div>
<div id="task-list" class="space-y-3">
<!-- Tasks will be added dynamically -->
</div>
</div>
</div>
<!-- Calendar and task details (hidden on mobile) -->
<div class="hidden lg:flex lg:flex-col w-80 border-l border-gray-200 bg-white">
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-semibold">Calendario</h2>
<div class="mt-4">
<div class="flex justify-between items-center mb-4">
<button id="prev-month" class="p-1 rounded-full hover:bg-gray-100">
<i class="fas fa-chevron-left"></i>
</button>
<h3 id="current-month" class="font-medium">Settembre 2023</h3>
<button id="next-month" class="p-1 rounded-full hover:bg-gray-100">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div id="calendar" class="grid grid-cols-7 gap-1">
<!-- Calendar days will be added dynamically -->
</div>
</div>
</div>
<div class="flex-1 overflow-y-auto p-4">
<h2 class="text-lg font-semibold mb-4">Dettagli attività</h2>
<div id="task-details" class="hidden">
<h3 id="task-detail-title" class="text-xl font-semibold mb-2"></h3>
<div class="flex items-center text-sm text-gray-500 mb-4">
<i class="far fa-calendar-alt mr-2"></i>
<span id="task-detail-date"></span>
</div>
<div class="mb-4">
<span id="task-detail-category" class="inline-block px-2 py-1 text-xs font-semibold rounded-full"></span>
</div>
<p id="task-detail-description" class="text-gray-700 mb-4"></p>
<div class="flex space-x-2">
<button id="edit-task-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
Modifica
</button>
<button id="delete-task-btn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
Elimina
</button>
</div>
</div>
<div id="no-task-selected" class="flex flex-col items-center justify-center h-64 text-gray-500">
<i class="fas fa-info-circle text-5xl mb-4"></i>
<p class="text-center">Seleziona un'attività per visualizzare i dettagli</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add/Edit Task Modal -->
<div id="task-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 id="modal-title" class="text-lg leading-6 font-medium text-gray-900 mb-4">
Nuova attività
</h3>
<form id="task-form" class="space-y-4">
<input type="hidden" id="task-id">
<div>
<label for="task-title" class="block text-sm font-medium text-gray-700">Titolo</label>
<input type="text" id="task-title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
</div>
<div>
<label for="task-description" class="block text-sm font-medium text-gray-700">Descrizione</label>
<textarea id="task-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="task-date" class="block text-sm font-medium text-gray-700">Data</label>
<input type="date" id="task-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="task-time" class="block text-sm font-medium text-gray-700">Ora</label>
<input type="time" id="task-time" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
<div>
<label for="task-category" class="block text-sm font-medium text-gray-700">Categoria</label>
<div class="flex mt-1">
<select id="task-category" class="flex-1 border border-gray-300 rounded-l-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="">Nessuna categoria</option>
</select>
<button type="button" id="new-category-btn" class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 bg-gray-50 text-gray-500 hover:bg-gray-100 rounded-r-md">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="flex items-center">
<input type="checkbox" id="task-important" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="task-important" class="ml-2 block text-sm text-gray-700">Contrassegna come importante</label>
</div>
</form>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" id="save-task-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Salva
</button>
<button type="button" id="cancel-task-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Annulla
</button>
</div>
</div>
</div>
</div>
<!-- Add Category Modal -->
<div id="category-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
Nuova categoria
</h3>
<form id="category-form" class="space-y-4">
<div>
<label for="category-name" class="block text-sm font-medium text-gray-700">Nome categoria</label>
<input type="text" id="category-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
</div>
<div>
<label for="category-color" class="block text-sm font-medium text-gray-700">Colore</label>
<select id="category-color" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="bg-red-500 text-red-100">Rosso</option>
<option value="bg-blue-500 text-blue-100">Blu</option>
<option value="bg-green-500 text-green-100">Verde</option>
<option value="bg-yellow-500 text-yellow-100">Giallo</option>
<option value="bg-purple-500 text-purple-100">Viola</option>
<option value="bg-pink-500 text-pink-100">Rosa</option>
<option value="bg-indigo-500 text-indigo-100">Indaco</option>
<option value="bg-gray-500 text-gray-100">Grigio</option>
</select>
</div>
</form>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" id="save-category-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Salva
</button>
<button type="button" id="cancel-category-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Annulla
</button>
</div>
</div>
</div>
</div>
<script>
// State management
const state = {
tasks: [],
categories: [
{ id: 1, name: "Lavoro", color: "bg-blue-500 text-blue-100" },
{ id: 2, name: "Personale", color: "bg-green-500 text-green-100" },
{ id: 3, name: "Studio", color: "bg-purple-500 text-purple-100" }
],
currentView: 'all',
selectedTask: null,
currentMonth: new Date().getMonth(),
currentYear: new Date().getFullYear(),
darkMode: false
};
// DOM Elements
const elements = {
// Sidebar
sidebarToggle: document.getElementById('sidebar-toggle'),
// Views
currentView: document.getElementById('current-view'),
allTasksBtn: document.getElementById('all-tasks-btn'),
todayTasksBtn: document.getElementById('today-tasks-btn'),
upcomingTasksBtn: document.getElementById('upcoming-tasks-btn'),
importantTasksBtn: document.getElementById('important-tasks-btn'),
completedTasksBtn: document.getElementById('completed-tasks-btn'),
// Mobile views
mobileAllTasks: document.getElementById('mobile-all-tasks'),
mobileTodayTasks: document.getElementById('mobile-today-tasks'),
mobileUpcomingTasks: document.getElementById('mobile-upcoming-tasks'),
mobileImportantTasks: document.getElementById('mobile-important-tasks'),
mobileAddTask: document.getElementById('mobile-add-task'),
// Task list
taskListContainer: document.getElementById('task-list-container'),
noTasksMessage: document.getElementById('no-tasks-message'),
taskList: document.getElementById('task-list'),
addFirstTaskBtn: document.getElementById('add-first-task-btn'),
// Task details
taskDetails: document.getElementById('task-details'),
noTaskSelected: document.getElementById('no-task-selected'),
taskDetailTitle: document.getElementById('task-detail-title'),
taskDetailDate: document.getElementById('task-detail-date'),
taskDetailCategory: document.getElementById('task-detail-category'),
taskDetailDescription: document.getElementById('task-detail-description'),
editTaskBtn: document.getElementById('edit-task-btn'),
deleteTaskBtn: document.getElementById('delete-task-btn'),
// Calendar
calendar: document.getElementById('calendar'),
currentMonthDisplay: document.getElementById('current-month'),
prevMonth: document.getElementById('prev-month'),
nextMonth: document.getElementById('next-month'),
// Search
searchBtn: document.getElementById('search-btn'),
searchContainer: document.getElementById('search-container'),
searchInput: document.getElementById('search-input'),
// Add task
addTaskBtn: document.getElementById('add-task-btn'),
// Task modal
taskModal: document.getElementById('task-modal'),
modalTitle: document.getElementById('modal-title'),
taskForm: document.getElementById('task-form'),
taskId: document.getElementById('task-id'),
taskTitle: document.getElementById('task-title'),
taskDescription: document.getElementById('task-description'),
taskDate: document.getElementById('task-date'),
taskTime: document.getElementById('task-time'),
taskCategory: document.getElementById('task-category'),
taskImportant: document.getElementById('task-important'),
newCategoryBtn: document.getElementById('new-category-btn'),
saveTaskBtn: document.getElementById('save-task-btn'),
cancelTaskBtn: document.getElementById('cancel-task-btn'),
// Categories
categoriesList: document.getElementById('categories-list'),
addCategoryBtn: document.getElementById('add-category-btn'),
// Category modal
categoryModal: document.getElementById('category-modal'),
categoryForm: document.getElementById('category-form'),
categoryName: document.getElementById('category-name'),
categoryColor: document.getElementById('category-color'),
saveCategoryBtn: document.getElementById('save-category-btn'),
cancelCategoryBtn: document.getElementById('cancel-category-btn'),
// Dark mode
darkModeToggle: document.getElementById('dark-mode-toggle')
};
// Initialize the app
function init() {
// Load sample tasks if none exist
if (state.tasks.length === 0) {
loadSampleTasks();
}
// Set up event listeners
setupEventListeners();
// Render initial views
renderCategories();
renderTaskCategories();
renderCalendar();
renderTasks();
// Set current date in date picker
const today = new Date();
const formattedDate = today.toISOString().split('T')[0];
elements.taskDate.value = formattedDate;
// Check for dark mode preference
checkDarkModePreference();
}
// Load sample tasks
function loadSampleTasks() {
const sampleTasks = [
{
id: 1,
title: "Completare il progetto TaskFlow",
description: "Implementare tutte le funzionalità principali del task manager",
date: "2023-09-15",
time: "15:00",
category: 1,
important: true,
completed: false
},
{
id: 2,
title: "Fare la spesa settimanale",
description: "Acquistare frutta, verdura e altri generi alimentari",
date: "2023-09-10",
time: "10:00",
category: 2,
important: false,
completed: false
},
{
id: 3,
title: "Studiare per l'esame di JavaScript",
description: "Rivedere i concetti avanzati di JavaScript e fare esercizi pratici",
date: "2023-09-20",
time: "14:00",
category: 3,
important: true,
completed: false
},
{
id: 4,
title: "Incontrare il team di sviluppo",
description: "Discutere i progressi del progetto e pianificare le prossime attività",
date: "2023-09-12",
time: "09:30",
category: 1,
important: true,
completed: false
},
{
id: 5,
title: "Andare in palestra",
description: "Allenamento completo di 1 ora",
date: "2023-09-08",
time: "18:00",
category: 2,
important: false,
completed: true
}
];
state.tasks = sampleTasks;
}
// Set up event listeners
function setupEventListeners() {
// Sidebar toggle
elements.sidebarToggle.addEventListener('click', toggleSidebar);
// View buttons
elements.allTasksBtn.addEventListener('click', () => switchView('all'));
elements.todayTasksBtn.addEventListener('click', () => switchView('today'));
elements.upcomingTasksBtn.addEventListener('click', () => switchView('upcoming'));
elements.importantTasksBtn.addEventListener('click', () => switchView('important'));
elements.completedTasksBtn.addEventListener('click', () => switchView('completed'));
// Mobile view buttons
elements.mobileAllTasks.addEventListener('click', () => switchView('all'));
elements.mobileTodayTasks.addEventListener('click', () => switchView('today'));
elements.mobileUpcomingTasks.addEventListener('click', () => switchView('upcoming'));
elements.mobileImportantTasks.addEventListener('click', () => switchView('important'));
elements.mobileAddTask.addEventListener('click', openAddTaskModal);
// Add task buttons
elements.addTaskBtn.addEventListener('click', openAddTaskModal);
elements.addFirstTaskBtn.addEventListener('click', openAddTaskModal);
// Task modal
elements.saveTaskBtn.addEventListener('click', saveTask);
elements.cancelTaskBtn.addEventListener('click', closeTaskModal);
elements.newCategoryBtn.addEventListener('click', openAddCategoryModal);
// Category modal
elements.addCategoryBtn.addEventListener('click', openAddCategoryModal);
elements.saveCategoryBtn.addEventListener('click', saveCategory);
elements.cancelCategoryBtn.addEventListener('click', closeCategoryModal);
// Search
elements.searchBtn.addEventListener('click', toggleSearch);
elements.searchInput.addEventListener('input', handleSearch);
// Calendar navigation
elements.prevMonth.addEventListener('click', goToPreviousMonth);
elements.nextMonth.addEventListener('click', goToNextMonth);
// Dark mode toggle
elements.darkModeToggle.addEventListener('change', toggleDarkMode);
}
// Toggle sidebar on mobile
function toggleSidebar() {
const sidebar = document.querySelector('.md\\:hidden');
if (sidebar) {
sidebar.classList.toggle('hidden');
}
}
// Switch between views
function switchView(view) {
state.currentView = view;
// Update active button in sidebar
updateActiveViewButton();
// Update current view title
updateViewTitle();
// Render tasks for the selected view
renderTasks();
// Close search if open
elements.searchContainer.classList.add('hidden');
}
// Update active view button in sidebar
function updateActiveViewButton() {
// Reset all buttons
const viewButtons = [
elements.allTasksBtn,
elements.todayTasksBtn,
elements.upcomingTasksBtn,
elements.importantTasksBtn,
elements.completedTasksBtn
];
viewButtons.forEach(button => {
button.classList.remove('bg-indigo-800', 'text-white');
button.classList.add('text-indigo-100', 'hover:text-white', 'hover:bg-indigo-600');
});
// Set active button
let activeButton;
switch (state.currentView) {
case 'all':
activeButton = elements.allTasksBtn;
break;
case 'today':
activeButton = elements.todayTasksBtn;
break;
case 'upcoming':
activeButton = elements.upcomingTasksBtn;
break;
case 'important':
activeButton = elements.importantTasksBtn;
break;
case 'completed':
activeButton = elements.completedTasksBtn;
break;
}
if (activeButton) {
activeButton.classList.remove('text-indigo-100', 'hover:text-white', 'hover:bg-indigo-600');
activeButton.classList.add('bg-indigo-800', 'text-white');
}
// Update mobile buttons
const mobileButtons = [
elements.mobileAllTasks,
elements.mobileTodayTasks,
elements.mobileUpcomingTasks,
elements.mobileImportantTasks
];
mobileButtons.forEach(button => {
button.classList.remove('text-indigo-600');
button.classList.add('text-gray-500');
});
let mobileActiveButton;
switch (state.currentView) {
case 'all':
mobileActiveButton = elements.mobileAllTasks;
break;
case 'today':
mobileActiveButton = elements.mobileTodayTasks;
break;
case 'upcoming':
mobileActiveButton = elements.mobileUpcomingTasks;
break;
case 'important':
mobileActiveButton = elements.mobileImportantTasks;
break;
}
if (mobileActiveButton) {
mobileActiveButton.classList.remove('text-gray-500');
mobileActiveButton.classList.add('text-indigo-600');
}
}
// Update view title
function updateViewTitle() {
let title;
switch (state.currentView) {
case 'all':
title = 'Tutte le attività';
break;
case 'today':
title = 'Attività di oggi';
break;
case 'upcoming':
title = 'Prossime attività';
break;
case 'important':
title = 'Attività importanti';
break;
case 'completed':
title = 'Attività completate';
break;
default:
title = 'Tutte le attività';
}
elements.currentView.textContent = title;
}
// Render tasks based on current view
function renderTasks() {
let filteredTasks = [];
switch (state.currentView) {
case 'all':
filteredTasks = state.tasks.filter(task => !task.completed);
break;
case 'today':
const today = new Date().toISOString().split('T')[0];
filteredTasks = state.tasks.filter(task => task.date === today && !task.completed);
break;
case 'upcoming':
const todayDate = new Date();
todayDate.setHours(0, 0, 0, 0);
filteredTasks = state.tasks.filter(task => {
const taskDate = new Date(task.date);
return taskDate >= todayDate && !task.completed;
});
break;
case 'important':
filteredTasks = state.tasks.filter(task => task.important && !task.completed);
break;
case 'completed':
filteredTasks = state.tasks.filter(task => task.completed);
break;
}
// Sort tasks by date and time
filteredTasks.sort((a, b) => {
const dateA = new Date(`${a.date}T${a.time || '00:00'}`);
const dateB = new Date(`${b.date}T${b.time || '00:00'}`);
return dateA - dateB;
});
// Clear task list
elements.taskList.innerHTML = '';
if (filteredTasks.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
} else {
elements.noTasksMessage.classList.add('hidden');
elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
// Add tasks to the list
filteredTasks.forEach(task => {
const taskElement = createTaskElement(task);
elements.taskList.appendChild(taskElement);
});
}
}
// Create task element
function createTaskElement(task) {
const taskElement = document.createElement('div');
taskElement.className = 'task-item bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer';
taskElement.dataset.taskId = task.id;
// Format date
const taskDate = new Date(task.date);
const formattedDate = taskDate.toLocaleDateString('it-IT', {
weekday: 'short',
day: 'numeric',
month: 'short'
});
// Format time if exists
let timeHtml = '';
if (task.time) {
timeHtml = `<span class="text-gray-500 ml-2">${task.time}</span>`;
}
// Get category
let categoryHtml = '';
if (task.category) {
const category = state.categories.find(cat => cat.id === task.category);
if (category) {
categoryHtml = `<span class="inline-block px-2 py-1 text-xs font-semibold rounded-full ${category.color}">${category.name}</span>`;
}
}
// Important icon
const importantIcon = task.important ? '<i class="fas fa-star text-yellow-500 mr-2"></i>' : '';
taskElement.innerHTML = `
<div class="flex items-start justify-between">
<div class="flex items-center">
<button class="complete-task-btn mr-3 p-1 rounded-full border border-gray-300 hover:bg-gray-100">
<i class="fas fa-check text-gray-400"></i>
</button>
<div>
<h3 class="font-medium text-gray-900">${importantIcon}${task.title}</h3>
<div class="flex items-center mt-1 text-sm text-gray-500">
<i class="far fa-calendar-alt mr-1"></i>
<span>${formattedDate}</span>
${timeHtml}
</div>
</div>
</div>
<div>
${categoryHtml}
</div>
</div>
`;
// Add event listeners
const completeBtn = taskElement.querySelector('.complete-task-btn');
completeBtn.addEventListener('click', (e) => {
e.stopPropagation();
toggleTaskCompletion(task.id);
});
taskElement.addEventListener('click', () => showTaskDetails(task.id));
return taskElement;
}
// Toggle task completion
function toggleTaskCompletion(taskId) {
const taskIndex = state.tasks.findIndex(task => task.id === taskId);
if (taskIndex !== -1) {
state.tasks[taskIndex].completed = !state.tasks[taskIndex].completed;
renderTasks();
// If viewing completed tasks, keep the task in the list
if (state.currentView === 'completed' && state.tasks[taskIndex].completed) {
// Do nothing, task will stay in the list
} else {
// Otherwise, remove the task from the current view
const taskElement = document.querySelector(`.task-item[data-task-id="${taskId}"]`);
if (taskElement) {
taskElement.remove();
// Show no tasks message if list is empty
if (elements.taskList.children.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
}
}
}
// Update task details if the task is selected
if (state.selectedTask && state.selectedTask.id === taskId) {
showTaskDetails(taskId);
}
}
}
// Show task details
function showTaskDetails(taskId) {
const task = state.tasks.find(task => task.id === taskId);
if (task) {
state.selectedTask = task;
// Format date
const taskDate = new Date(task.date);
const formattedDate = taskDate.toLocaleDateString('it-IT', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric'
});
// Format time if exists
let timeHtml = '';
if (task.time) {
timeHtml = ` alle ${task.time}`;
}
// Get category
let categoryHtml = '';
if (task.category) {
const category = state.categories.find(cat => cat.id === task.category);
if (category) {
categoryHtml = `<span class="${category.color}">${category.name}</span>`;
}
}
// Important icon
const importantIcon = task.important ? '<i class="fas fa-star text-yellow-500 mr-2"></i>' : '';
// Update task details
elements.taskDetailTitle.innerHTML = `${importantIcon}${task.title}`;
elements.taskDetailDate.textContent = `${formattedDate}${timeHtml}`;
if (categoryHtml) {
elements.taskDetailCategory.innerHTML = categoryHtml;
elements.taskDetailCategory.classList.remove('hidden');
} else {
elements.taskDetailCategory.classList.add('hidden');
}
elements.taskDetailDescription.textContent = task.description || 'Nessuna descrizione fornita';
// Show details and hide placeholder
elements.taskDetails.classList.remove('hidden');
elements.noTaskSelected.classList.add('hidden');
}
}
// Open add task modal
function openAddTaskModal() {
elements.modalTitle.textContent = 'Nuova attività';
elements.taskId.value = '';
elements.taskTitle.value = '';
elements.taskDescription.value = '';
// Set today's date as default
const today = new Date();
const formattedDate = today.toISOString().split('T')[0];
elements.taskDate.value = formattedDate;
elements.taskTime.value = '';
elements.taskCategory.value = '';
elements.taskImportant.checked = false;
elements.taskModal.classList.remove('hidden');
}
// Open edit task modal
function openEditTaskModal(taskId) {
const task = state.tasks.find(task => task.id === taskId);
if (task) {
elements.modalTitle.textContent = 'Modifica attività';
elements.taskId.value = task.id;
elements.taskTitle.value = task.title;
elements.taskDescription.value = task.description || '';
elements.taskDate.value = task.date;
elements.taskTime.value = task.time || '';
elements.taskCategory.value = task.category || '';
elements.taskImportant.checked = task.important || false;
elements.taskModal.classList.remove('hidden');
}
}
// Close task modal
function closeTaskModal() {
elements.taskModal.classList.add('hidden');
}
// Save task
function saveTask() {
const title = elements.taskTitle.value.trim();
if (!title) {
alert('Il titolo è obbligatorio');
return;
}
const taskData = {
id: elements.taskId.value ? parseInt(elements.taskId.value) : Date.now(),
title: title,
description: elements.taskDescription.value.trim(),
date: elements.taskDate.value,
time: elements.taskTime.value || null,
category: elements.taskCategory.value ? parseInt(elements.taskCategory.value) : null,
important: elements.taskImportant.checked,
completed: false
};
if (elements.taskId.value) {
// Update existing task
const taskIndex = state.tasks.findIndex(task => task.id === taskData.id);
if (taskIndex !== -1) {
state.tasks[taskIndex] = {
...state.tasks[taskIndex],
...taskData
};
}
} else {
// Add new task
state.tasks.push(taskData);
}
closeTaskModal();
renderTasks();
// If we're editing, update the task details
if (state.selectedTask && state.selectedTask.id === taskData.id) {
showTaskDetails(taskData.id);
}
}
// Delete task
function deleteTask() {
if (state.selectedTask) {
if (confirm('Sei sicuro di voler eliminare questa attività?')) {
const taskId = state.selectedTask.id;
state.tasks = state.tasks.filter(task => task.id !== taskId);
// Remove task from list
const taskElement = document.querySelector(`.task-item[data-task-id="${taskId}"]`);
if (taskElement) {
taskElement.remove();
}
// Hide task details
elements.taskDetails.classList.add('hidden');
elements.noTaskSelected.classList.remove('hidden');
state.selectedTask = null;
// Show no tasks message if list is empty
if (elements.taskList.children.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
}
renderTasks();
}
}
}
// Render categories in sidebar and task form
function renderCategories() {
// Clear categories list
elements.categoriesList.innerHTML = '';
// Add categories to sidebar
state.categories.forEach(category => {
const categoryElement = document.createElement('button');
categoryElement.className = 'flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:text-white hover:bg-indigo-600 rounded-md group';
categoryElement.dataset.categoryId = category.id;
categoryElement.innerHTML = `
<span class="inline-block w-3 h-3 rounded-full ${category.color.replace('text-', 'bg-').split(' ')[0]} mr-3"></span>
${category.name}
`;
categoryElement.addEventListener('click', () => filterByCategory(category.id));
elements.categoriesList.appendChild(categoryElement);
});
}
// Render task categories in select dropdown
function renderTaskCategories() {
// Clear select
elements.taskCategory.innerHTML = '<option value="">Nessuna categoria</option>';
// Add categories to select
state.categories.forEach(category => {
const option = document.createElement('option');
option.value = category.id;
option.textContent = category.name;
elements.taskCategory.appendChild(option);
});
}
// Filter tasks by category
function filterByCategory(categoryId) {
state.currentView = 'category';
state.selectedCategory = categoryId;
// Update view title
const category = state.categories.find(cat => cat.id === categoryId);
elements.currentView.textContent = `Categoria: ${category.name}`;
// Render tasks
renderTasksByCategory(categoryId);
// Update active buttons
updateActiveViewButton();
}
// Render tasks by category
function renderTasksByCategory(categoryId) {
const filteredTasks = state.tasks.filter(task =>
task.category === categoryId && !task.completed
);
// Clear task list
elements.taskList.innerHTML = '';
if (filteredTasks.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
} else {
elements.noTasksMessage.classList.add('hidden');
elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
// Add tasks to the list
filteredTasks.forEach(task => {
const taskElement = createTaskElement(task);
elements.taskList.appendChild(taskElement);
});
}
}
// Open add category modal
function openAddCategoryModal() {
elements.categoryName.value = '';
elements.categoryColor.value = 'bg-blue-500 text-blue-100';
elements.categoryModal.classList.remove('hidden');
// Close task modal if open
closeTaskModal();
}
// Close category modal
function closeCategoryModal() {
elements.categoryModal.classList.add('hidden');
}
// Save category
function saveCategory() {
const name = elements.categoryName.value.trim();
if (!name) {
alert('Il nome della categoria è obbligatorio');
return;
}
const categoryData = {
id: Date.now(),
name: name,
color: elements.categoryColor.value
};
state.categories.push(categoryData);
closeCategoryModal();
renderCategories();
renderTaskCategories();
}
// Toggle search
function toggleSearch() {
elements.searchContainer.classList.toggle('hidden');
if (!elements.searchContainer.classList.contains('hidden')) {
elements.searchInput.focus();
}
}
// Handle search
function handleSearch() {
const query = elements.searchInput.value.toLowerCase();
if (query === '') {
renderTasks();
return;
}
const filteredTasks = state.tasks.filter(task =>
task.title.toLowerCase().includes(query) ||
(task.description && task.description.toLowerCase().includes(query))
);
// Clear task list
elements.taskList.innerHTML = '';
if (filteredTasks.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
} else {
elements.noTasksMessage.classList.add('hidden');
elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
// Add tasks to the list
filteredTasks.forEach(task => {
const taskElement = createTaskElement(task);
elements.taskList.appendChild(taskElement);
});
}
}
// Render calendar
function renderCalendar() {
// Clear calendar
elements.calendar.innerHTML = '';
// Set month and year in header
const monthNames = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
elements.currentMonthDisplay.textContent = `${monthNames[state.currentMonth]} ${state.currentYear}`;
// Get first day of month and total days in month
const firstDay = new Date(state.currentYear, state.currentMonth, 1).getDay();
const daysInMonth = new Date(state.currentYear, state.currentMonth + 1, 0).getDate();
// Adjust first day (Sunday = 0 in JavaScript, but we want Monday as first day)
const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
// Add day names
const dayNames = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
dayNames.forEach(day => {
const dayElement = document.createElement('div');
dayElement.className = 'text-center text-sm font-medium text-gray-500 py-1';
dayElement.textContent = day;
elements.calendar.appendChild(dayElement);
});
// Add empty cells for days before the first day of the month
for (let i = 0; i < adjustedFirstDay; i++) {
const emptyElement = document.createElement('div');
emptyElement.className = 'h-8';
elements.calendar.appendChild(emptyElement);
}
// Add day cells
const today = new Date();
const currentDay = today.getDate();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'text-center py-1 cursor-pointer hover:bg-gray-100';
// Highlight current day
if (day === currentDay && state.currentMonth === currentMonth && state.currentYear === currentYear) {
dayElement.classList.add('current-day');
}
dayElement.textContent = day;
// Add event listener
dayElement.addEventListener('click', () => {
filterByDate(day);
});
elements.calendar.appendChild(dayElement);
}
// Add tasks indicators
state.tasks.forEach(task => {
if (!task.completed) {
const taskDate = new Date(task.date);
if (taskDate.getMonth() === state.currentMonth && taskDate.getFullYear() === state.currentYear) {
const day = taskDate.getDate();
const dayElement = elements.calendar.children[adjustedFirstDay + day + 6]; // +6 for day names
if (dayElement) {
const indicator = document.createElement('div');
indicator.className = 'w-1 h-1 mx-auto rounded-full bg-indigo-500';
dayElement.appendChild(indicator);
}
}
}
});
}
// Filter by date
function filterByDate(day) {
const date = new Date(state.currentYear, state.currentMonth, day);
const formattedDate = date.toISOString().split('T')[0];
state.currentView = 'date';
elements.currentView.textContent = `Attività per ${day}/${state.currentMonth + 1}/${state.currentYear}`;
const filteredTasks = state.tasks.filter(task =>
task.date === formattedDate && !task.completed
);
// Clear task list
elements.taskList.innerHTML = '';
if (filteredTasks.length === 0) {
elements.noTasksMessage.classList.remove('hidden');
elements.taskListContainer.classList.add('flex', 'items-center', 'justify-center');
} else {
elements.noTasksMessage.classList.add('hidden');
elements.taskListContainer.classList.remove('flex', 'items-center', 'justify-center');
// Add tasks to the list
filteredTasks.forEach(task => {
const taskElement = createTaskElement(task);
elements.taskList.appendChild(taskElement);
});
}
// Update active buttons
updateActiveViewButton();
}
// Go to previous month
function goToPreviousMonth() {
if (state.currentMonth === 0) {
state.currentMonth = 11;
state.currentYear--;
} else {
state.currentMonth--;
}
renderCalendar();
}
// Go to next month
function goToNextMonth() {
if (state.currentMonth === 11) {
state.currentMonth = 0;
state.currentYear++;
} else {
state.currentMonth++;
}
renderCalendar();
}
// Check dark mode preference
function checkDarkModePreference() {
const darkModePref = localStorage.getItem('darkMode') === 'true';
if (darkModePref) {
enableDarkMode();
} else {
disableDarkMode();
}
}
// Toggle dark mode
function toggleDarkMode() {
if (state.darkMode) {
disableDarkMode();
} else {
enableDarkMode();
}
}
// Enable dark mode
function enableDarkMode() {
document.documentElement.classList.add('dark');
localStorage.setItem('darkMode', 'true');
state.darkMode = true;
elements.darkModeToggle.checked = true;
}
// Disable dark mode
function disableDarkMode() {
document.documentElement.classList.remove('dark');
localStorage.setItem('darkMode', 'false');
state.darkMode = false;
elements.darkModeToggle.checked = false;
}
// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', init);
// Add event listeners for task details buttons
document.addEventListener('click', function(e) {
if (e.target.id === 'edit-task-btn') {
openEditTaskModal(state.selectedTask.id);
} else if (e.target.id === 'delete-task-btn') {
deleteTask();
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=federi/taskflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>