Task Management Dashboard - Copy this Html, Bootstrap Component to your project
Falla piu bella e moderna con animazioni e trasperenze ombre ecc <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Gestore Task</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/6.1.1/css/all.min.css"> <style> body { font family: 'Segoe UI', Tahoma, Geneva, Verdana, sans serif; } .sidebar { background color: #f8f9fa; height: 100vh; padding: 20px; } .main content { padding: 20px; } .task item { margin bottom: 10px; } </style> </head> <body> <div class="container fluid"> <div class="row"> <! Sidebar > <nav class="col md 3 col lg 2 d md block sidebar collapse"> <h3>Categorie</h3> <ul class="nav flex column" id="categories"> <! Le categorie verranno caricate qui > </ul> <hr> <h4>Aggiungi Categoria</h4> <input type="text" id="newCategory" class="form control mb 2" placeholder="Nome categoria"> <button onclick="addCategory()" class="btn btn primary btn sm">Aggiungi</button> </nav> <! Contenuto principale > <main class="col md 9 ms sm auto col lg 10 px md 4 main content"> <h1 class="mt 4 mb 4">Gestore Task</h1> <! Form per creare/modificare task > <div class="card mb 4"> <div class="card body"> <h2 id="formTitle">Crea Nuovo Task</h2> <input type="hidden" id="taskId"> <div class="mb 3"> <input type="text" id="taskName" class="form control" placeholder="Nome del task"> </div> <div class="mb 3"> <select id="taskScript" class="form select"> <option value="">Seleziona uno script</option> <! Gli script verranno caricati qui dinamicamente > </select> </div> <div class="mb 3"> <select id="taskType" class="form select" onchange="showScheduleOptions()"> <option value="">Seleziona tipo di cadenza</option> <option value="interval">Intervallo</option> <option value="daily">Giornaliero</option> <option value="weekly">Settimanale</option> <option value="monthly">Mensile</option> </select> </div> <div id="scheduleOptions" class="mb 3"> <! Le opzioni di pianificazione verranno caricate qui dinamicamente > </div> <div class="mb 3"> <select id="taskCategory" class="form select"> <option value="">Nessuna categoria</option> <! Le opzioni delle categorie verranno caricate qui > </select> </div> <button onclick="saveTask()" id="saveButton" class="btn btn primary">Salva Task</button> <button onclick="resetForm()" class="btn btn secondary">Annulla</button> </div> </div> <! Lista dei task > <div class="card"> <div class="card body"> <h2>Lista Task</h2> <div id="tasks"> <! I task verranno caricati qui > </div> </div> </div> </main> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/js/bootstrap.bundle.min.js"></script> <script> let currentCategory = null; function loadCategories() { fetch('/categories') .then(response => response.json()) .then(categories => { const categoryList = document.getElementById('categories'); const categorySelect = document.getElementById('taskCategory'); categoryList.innerHTML = '<li class="nav item"><a class="nav link" href="#" onclick="loadTasks()">Tutti i task</a></li>'; categorySelect.innerHTML = '<option value="">Nessuna categoria</option>'; categories.forEach(category => { const li = document.createElement('li'); li.className = 'nav item'; const a = document.createElement('a'); a.className = 'nav link'; a.href = '#'; a.textContent = category.name; a.onclick = () => loadTasks(category.id); li.appendChild(a); categoryList.appendChild(li); const option = document.createElement('option'); option.value = category.id; option.textContent = category.name; categorySelect.appendChild(option); }); }); } function loadTasks(categoryId = null) { currentCategory = categoryId; const url = categoryId ? `/tasks?category=${categoryId}` : '/tasks'; fetch(url) .then(response => response.json()) .then(tasks => { const taskList = document.getElementById('tasks'); taskList.innerHTML = ''; tasks.forEach(task => { const taskDiv = document.createElement('div'); taskDiv.className = 'task item d flex justify content between align items center'; taskDiv.innerHTML = ` <span>${task.name} (Prossima esecuzione: ${new Date(task.next_run_time).toLocaleString()})</span> <div> <button onclick="toggleTaskStatus('${task.id}', '${task.status}')" class="btn btn sm btn outline ${task.status === 'attivo' ? 'success' : 'warning'}"> ${task.status === 'attivo' ? 'Attivo' : 'Non attivo'} </button> <button onclick="editTask('${task.id}')" class="btn btn sm btn outline primary"><i class="fas fa edit"></i></button> <button onclick="deleteTask('${task.id}')" class="btn btn sm btn outline danger"><i class="fas fa trash"></i></button> </div> `; taskList.appendChild(taskDiv); }); }); } function showScheduleOptions() { const taskType = document.getElementById('taskType').value; const scheduleOptions = document.getElementById('scheduleOptions'); scheduleOptions.innerHTML = ''; switch (taskType) { case 'interval': scheduleOptions.innerHTML = ` <input type="number" id="intervalSeconds" class="form control" placeholder="Intervallo in secondi"> `; break; case 'daily': scheduleOptions.innerHTML = ` <input type="time" id="dailyTime" class="form control"> `; break; case 'weekly': scheduleOptions.innerHTML = ` <select id="weekDay" class="form select mb 2"> <option value="0">Lunedì</option> <option value="1">Martedì</option> <option value="2">Mercoledì</option> <option value="3">Giovedì</option> <option value="4">Venerdì</option> <option value="5">Sabato</option> <option value="6">Domenica</option> </select> <input type="time" id="weeklyTime" class="form control"> `; break; case 'monthly': scheduleOptions.innerHTML = ` <input type="number" id="monthDay" class="form control mb 2" min="1" max="31" placeholder="Giorno del mese"> <input type="time" id="monthlyTime" class="form control"> `; break; } } function saveTask() { const id = document.getElementById('taskId').value; const name = document.getElementById('taskName').value; const script = document.getElementById('taskScript').value; const taskType = document.getElementById('taskType').value; const categoryId = document.getElementById('taskCategory').value; if (!name || !script || !taskType) { alert('Per favore, compila tutti i campi obbligatori.'); return; } let scheduleData; switch (taskType) { case 'interval': const intervalSeconds = document.getElementById('intervalSeconds').value; scheduleData = { interval: parseInt(intervalSeconds) }; break; case 'daily': const dailyTime = document.getElementById('dailyTime').value; const [dailyHour, dailyMinute] = dailyTime.split(':'); scheduleData = { cron: { hour: dailyHour, minute: dailyMinute } }; break; case 'weekly': const weekDay = document.getElementById('weekDay').value; const weeklyTime = document.getElementById('weeklyTime').value; const [weeklyHour, weeklyMinute] = weeklyTime.split(':'); scheduleData = { cron: { day_of_week: weekDay, hour: weeklyHour, minute: weeklyMinute } }; break; case 'monthly': const monthDay = document.getElementById('monthDay').value; const monthlyTime = document.getElementById('monthlyTime').value; const [monthlyHour, monthlyMinute] = monthlyTime.split(':'); scheduleData = { cron: { day: monthDay, hour: monthlyHour, minute: monthlyMinute } }; break; } const method = id ? 'PUT' : 'POST'; const url = id ? `/tasks/${id}` : '/tasks'; const taskData = { name, script, ...scheduleData }; if (categoryId) { taskData.category_id = parseInt(categoryId); } console.log('Sending task data:', taskData); // Log dei dati inviati fetch(url, { method: method, headers: { 'Content Type': 'application/json' }, body: JSON.stringify(taskData) }) .then(response => { if (!response.ok) { return response.text().then(text => { throw new Error(`Errore del server: ${response.status} ${response.statusText}\n${text}`); }); } return response.json(); }) .then(data => { alert(data.message); resetForm(); loadTasks(currentCategory); }) .catch(error => { console.error('Errore dettagliato:', error); alert('Si è verificato un errore durante il salvataggio del task: ' + error.message); }); } function editTask(taskId) { fetch(`/tasks/${taskId}`) .then(response => response.json()) .then(task => { document.getElementById('taskId').value = task.id; document.getElementById('taskName').value = task.name; document.getElementById('taskScript').value = task.script || ''; document.getElementById('taskCategory').value = task.category_id || ''; document.getElementById('formTitle').textContent = 'Modifica Task'; document.getElementById('saveButton').textContent = 'Aggiorna Task'; // Imposta il tipo di task e mostra le opzioni di pianificazione appropriate if (task.interval !== undefined) { document.getElementById('taskType').value = 'interval'; showScheduleOptions(); document.getElementById('intervalSeconds').value = task.interval; } else if (task.cron) { if (task.cron.day_of_week !== undefined) { document.getElementById('taskType').value = 'weekly'; showScheduleOptions(); document.getElementById('weekDay').value = task.cron.day_of_week; document.getElementById('weeklyTime').value = `${task.cron.hour.padStart(2, '0')}:${task.cron.minute.padStart(2, '0')}`; } else if (task.cron.day !== undefined) { document.getElementById('taskType').value = 'monthly'; showScheduleOptions(); document.getElementById('monthDay').value = task.cron.day; document.getElementById('monthlyTime').value = `${task.cron.hour.padStart(2, '0')}:${task.cron.minute.padStart(2, '0')}`; } else { document.getElementById('taskType').value = 'daily'; showScheduleOptions(); document.getElementById('dailyTime').value = `${task.cron.hour.padStart(2, '0')}:${task.cron.minute.padStart(2, '0')}`; } } // Scorri fino al form di modifica document.querySelector('.card.mb 4').scrollIntoView({ behavior: 'smooth' }); }) .catch(error => { console.error('Errore nel caricamento del task:', error); alert('Si è verificato un errore nel caricamento del task. Controlla la console per i dettagli.'); }); } function deleteTask(taskId) { if (confirm('Sei sicuro di voler eliminare questo task?')) { fetch(`/tasks/${taskId}`, { method: 'DELETE' }) .then(response => response.json()) .then(data => { alert(data.message); loadTasks(currentCategory); }); } } function resetForm() { document.getElementById('taskId').value = ''; document.getElementById('taskName').value = ''; document.getElementById('taskType').value = ''; document.getElementById('taskCategory').value = ''; document.getElementById('scheduleOptions').innerHTML = ''; document.getElementById('formTitle').textContent = 'Crea Nuovo Task'; document.getElementById('saveButton').textContent = 'Salva Task'; } function addCategory() { const name = document.getElementById('newCategory').value; if (!name) { alert('Per favore, inserisci il nome della categoria.'); return; } fetch('/categories', { method: 'POST', headers: { 'Content Type': 'application/json' }, body: JSON.stringify({ name }) }) .then(response => response.json()) .then(data => { alert(data.message); document.getElementById('newCategory').value = ''; loadCategories(); }); } function toggleTaskStatus(taskId, currentStatus) { const newStatus = currentStatus === 'attivo' ? 'non attivo' : 'attivo'; fetch(`/tasks/${taskId}/status`, { method: 'PUT', headers: { 'Content Type': 'application/json' }, body: JSON.stringify({ status: newStatus }) }) .then(response => response.json()) .then(data => { alert(data.message); loadTasks(currentCategory); }) .catch(error => { console.error('Errore:', error); alert('Si è verificato un errore nel cambiare lo status del task.'); }); } function loadScripts() { fetch('/scripts') .then(response => response.json()) .then(scripts => { const scriptSelect = document.getElementById('taskScript'); scriptSelect.innerHTML = '<option value="">Seleziona uno script</option>'; scripts.forEach(script => { const option = document.createElement('option'); option.value = script; option.textContent = script; scriptSelect.appendChild(option); }); }); } // Carica categorie, script e task all'avvio loadCategories(); loadScripts(); loadTasks(); </script> </body> </html>
