Spaces:

manyone
/

manyone-space

Running

File size: 28,226 Bytes

39524b7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</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>
        .kanban-column {
            min-height: 300px;
            background-color: #f3f4f6;
            border-radius: 0.5rem;
            padding: 1rem;
        }
        .task-card {
            transition: all 0.3s ease;
            cursor: grab;
        }
        .task-card:active {
            cursor: grabbing;
        }
        .task-card.dragging {
            opacity: 0.5;
            transform: scale(1.05);
        }
        .kanban-column.highlight {
            background-color: #e5e7eb;
        }
        .view-option.active {
            background-color: #3b82f6;
            color: white;
        }
        .category-work { border-left: 4px solid #3b82f6; }
        .category-errand { border-left: 4px solid #10b981; }
        .category-home { border-left: 4px solid #f59e0b; }
        .category-social { border-left: 4px solid #8b5cf6; }
        .status-todo { background-color: #f3f4f6; }
        .status-in-progress { background-color: #bfdbfe; }
        .status-done { background-color: #dcfce7; }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-gray-800">Task Manager</h1>
            <p class="text-gray-600">Organize your tasks efficiently</p>
        </header>

        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-center mb-6">
                <div class="flex space-x-2">
                    <button id="list-view-btn" class="view-option active px-4 py-2 rounded-lg border border-gray-300">
                        <i class="fas fa-list mr-2"></i>List View
                    </button>
                    <button id="kanban-view-btn" class="view-option px-4 py-2 rounded-lg border border-gray-300">
                        <i class="fas fa-columns mr-2"></i>Kanban Board
                    </button>
                    <button id="card-view-btn" class="view-option px-4 py-2 rounded-lg border border-gray-300">
                        <i class="fas fa-grip mr-2"></i>Card View
                    </button>
                </div>
                <button id="add-task-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-plus mr-2"></i>Add Task
                </button>
            </div>

            <div class="mb-6 flex flex-wrap gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Category</label>
                    <select id="category-filter" class="border border-gray-300 rounded-md px-3 py-2 w-full">
                        <option value="all">All Categories</option>
                        <option value="work">Work</option>
                        <option value="errand">Errand</option>
                        <option value="home">Home</option>
                        <option value="social">Social</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status</label>
                    <select id="status-filter" class="border border-gray-300 rounded-md px-3 py-2 w-full">
                        <option value="all">All Statuses</option>
                        <option value="to-do">To Do</option>
                        <option value="in-progress">In Progress</option>
                        <option value="done">Done</option>
                    </select>
                </div>
                <div id="kanban-grouping-controls" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Group By</label>
                    <select id="kanban-group-by" class="border border-gray-300 rounded-md px-3 py-2 w-full">
                        <option value="status">Status</option>
                        <option value="category">Category</option>
                    </select>
                </div>
            </div>

            <!-- List View -->
            <div id="list-view" class="view-content">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="task-list" class="bg-white divide-y divide-gray-200">
                        <!-- Tasks will be populated here -->
                    </tbody>
                </table>
            </div>

            <!-- Kanban View -->
            <div id="kanban-view" class="view-content hidden">
                <div id="kanban-board" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Kanban columns will be populated here -->
                </div>
            </div>

            <!-- Card View -->
            <div id="card-view" class="view-content hidden">
                <div id="card-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Cards will be populated here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Task Modal -->
    <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 id="modal-title" class="text-xl font-semibold text-gray-800">Add New Task</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="task-form">
                <input type="hidden" id="task-id">
                <div class="mb-4">
                    <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                    <textarea id="task-description" rows="3" class="border border-gray-300 rounded-md px-3 py-2 w-full" required></textarea>
                </div>
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label for="task-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                        <select id="task-category" class="border border-gray-300 rounded-md px-3 py-2 w-full" required>
                            <option value="work">Work</option>
                            <option value="errand">Errand</option>
                            <option value="home">Home</option>
                            <option value="social">Social</option>
                        </select>
                    </div>
                    <div>
                        <label for="task-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                        <select id="task-status" class="border border-gray-300 rounded-md px-3 py-2 w-full" required>
                            <option value="to-do">To Do</option>
                            <option value="in-progress">In Progress</option>
                            <option value="done">Done</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-task" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        Save Task
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Sample initial tasks
        let tasks = [
            { id: 1, description: "Complete project report", category: "work", status: "in-progress" },
            { id: 2, description: "Buy groceries", category: "errand", status: "to-do" },
            { id: 3, description: "Call mom", category: "social", status: "to-do" },
            { id: 4, description: "Fix leaking faucet", category: "home", status: "done" },
            { id: 5, description: "Prepare presentation for meeting", category: "work", status: "to-do" },
            { id: 6, description: "Go to the gym", category: "social", status: "in-progress" },
            { id: 7, description: "Pay electricity bill", category: "errand", status: "to-do" },
            { id: 8, description: "Organize closet", category: "home", status: "to-do" },
            { id: 9, description: "Team lunch", category: "social", status: "done" },
            { id: 10, description: "Review code changes", category: "work", status: "in-progress" },
            { id: 11, description: "Pick up dry cleaning", category: "errand", status: "done" },
            { id: 12, description: "Water plants", category: "home", status: "to-do" }
        ];

        // DOM elements
        const listView = document.getElementById('list-view');
        const kanbanView = document.getElementById('kanban-view');
        const cardView = document.getElementById('card-view');
        const listViewBtn = document.getElementById('list-view-btn');
        const kanbanViewBtn = document.getElementById('kanban-view-btn');
        const cardViewBtn = document.getElementById('card-view-btn');
        const taskList = document.getElementById('task-list');
        const kanbanBoard = document.getElementById('kanban-board');
        const cardContainer = document.getElementById('card-container');
        const addTaskBtn = document.getElementById('add-task-btn');
        const taskModal = document.getElementById('task-modal');
        const closeModal = document.getElementById('close-modal');
        const cancelTask = document.getElementById('cancel-task');
        const taskForm = document.getElementById('task-form');
        const modalTitle = document.getElementById('modal-title');
        const taskIdInput = document.getElementById('task-id');
        const taskDescription = document.getElementById('task-description');
        const taskCategory = document.getElementById('task-category');
        const taskStatus = document.getElementById('task-status');
        const categoryFilter = document.getElementById('category-filter');
        const statusFilter = document.getElementById('status-filter');
        const kanbanGroupingControls = document.getElementById('kanban-grouping-controls');
        const kanbanGroupBy = document.getElementById('kanban-group-by');

        // View management
        function showView(view) {
            document.querySelectorAll('.view-content').forEach(v => v.classList.add('hidden'));
            document.querySelectorAll('.view-option').forEach(btn => btn.classList.remove('active'));
            
            view.classList.remove('hidden');
            
            if (view === listView) {
                listViewBtn.classList.add('active');
                kanbanGroupingControls.classList.add('hidden');
                renderListView();
            } else if (view === kanbanView) {
                kanbanViewBtn.classList.add('active');
                kanbanGroupingControls.classList.remove('hidden');
                renderKanbanView();
            } else if (view === cardView) {
                cardViewBtn.classList.add('active');
                kanbanGroupingControls.classList.add('hidden');
                renderCardView();
            }
        }

        // Render functions
        function renderListView() {
            const filteredTasks = filterTasks();
            taskList.innerHTML = '';
            
            filteredTasks.forEach(task => {
                const row = document.createElement('tr');
                row.className = `status-${task.status.replace(' ', '-')}`;
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">${task.description}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            ${getCategoryColorClass(task.category)}">
                            ${capitalizeFirstLetter(task.category)}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                            ${getStatusColorClass(task.status)}">
                            ${capitalizeFirstLetter(task.status.replace('-', ' '))}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button class="edit-task text-blue-600 hover:text-blue-900 mr-3" data-id="${task.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;
                
                taskList.appendChild(row);
            });
            
            // Add event listeners to edit and delete buttons
            document.querySelectorAll('.edit-task').forEach(btn => {
                btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
            });
            
            document.querySelectorAll('.delete-task').forEach(btn => {
                btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
            });
        }

        function renderKanbanView() {
            const groupBy = kanbanGroupBy.value;
            const filteredTasks = filterTasks();
            
            // Define groups based on selection
            let groups = [];
            if (groupBy === 'status') {
                groups = ['to-do', 'in-progress', 'done'];
            } else {
                groups = ['work', 'errand', 'home', 'social'];
            }
            
            kanbanBoard.innerHTML = '';
            
            groups.forEach(group => {
                const columnTasks = filteredTasks.filter(task => 
                    groupBy === 'status' ? task.status === group : task.category === group
                );
                
                const column = document.createElement('div');
                column.className = 'kanban-column';
                column.dataset.group = group;
                
                const columnTitle = document.createElement('h3');
                columnTitle.className = 'text-lg font-semibold mb-4';
                columnTitle.textContent = capitalizeFirstLetter(group.replace('-', ' '));
                
                column.appendChild(columnTitle);
                
                const tasksContainer = document.createElement('div');
                tasksContainer.className = 'space-y-3';
                
                columnTasks.forEach(task => {
                    const taskCard = document.createElement('div');
                    taskCard.className = `task-card p-3 rounded-md shadow-sm bg-white ${groupBy === 'category' ? `category-${task.category}` : ''}`;
                    taskCard.draggable = true;
                    taskCard.dataset.id = task.id;
                    
                    taskCard.innerHTML = `
                        <div class="text-sm mb-2">${task.description}</div>
                        <div class="flex justify-between items-center text-xs">
                            <span class="px-2 py-1 rounded-full ${groupBy === 'status' ? getCategoryColorClass(task.category) : getStatusColorClass(task.status)}">
                                ${capitalizeFirstLetter(groupBy === 'status' ? task.category : task.status.replace('-', ' '))}
                            </span>
                            <div>
                                <button class="edit-task text-blue-600 hover:text-blue-900 mr-2" data-id="${task.id}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `;
                    
                    tasksContainer.appendChild(taskCard);
                });
                
                column.appendChild(tasksContainer);
                kanbanBoard.appendChild(column);
            });
            
            // Add event listeners to edit and delete buttons
            document.querySelectorAll('.edit-task').forEach(btn => {
                btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
            });
            
            document.querySelectorAll('.delete-task').forEach(btn => {
                btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
            });
            
            // Setup drag and drop
            setupDragAndDrop();
        }

        function renderCardView() {
            const filteredTasks = filterTasks();
            cardContainer.innerHTML = '';
            
            filteredTasks.forEach(task => {
                const card = document.createElement('div');
                card.className = `task-card p-4 rounded-lg shadow-sm bg-white ${getStatusClass(task.status)} category-${task.category}`;
                
                card.innerHTML = `
                    <div class="text-sm mb-3">${task.description}</div>
                    <div class="flex justify-between items-center text-xs">
                        <span class="px-2 py-1 rounded-full ${getCategoryColorClass(task.category)}">
                            ${capitalizeFirstLetter(task.category)}
                        </span>
                        <span class="px-2 py-1 rounded-full ${getStatusColorClass(task.status)}">
                            ${capitalizeFirstLetter(task.status.replace('-', ' '))}
                        </span>
                    </div>
                    <div class="mt-3 flex justify-end space-x-2">
                        <button class="edit-task text-blue-600 hover:text-blue-900" data-id="${task.id}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                cardContainer.appendChild(card);
            });
            
            // Add event listeners to edit and delete buttons
            document.querySelectorAll('.edit-task').forEach(btn => {
                btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
            });
            
            document.querySelectorAll('.delete-task').forEach(btn => {
                btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
            });
        }

        // Task CRUD operations
        function addTask(task) {
            task.id = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
            tasks.push(task);
            renderCurrentView();
        }

        function updateTask(updatedTask) {
            const index = tasks.findIndex(t => t.id === parseInt(updatedTask.id));
            if (index !== -1) {
                tasks[index] = updatedTask;
                renderCurrentView();
            }
        }

        function deleteTask(id) {
            if (confirm('Are you sure you want to delete this task?')) {
                tasks = tasks.filter(task => task.id !== parseInt(id));
                renderCurrentView();
            }
        }

        function editTask(id) {
            const task = tasks.find(t => t.id === parseInt(id));
            if (task) {
                modalTitle.textContent = 'Edit Task';
                taskIdInput.value = task.id;
                taskDescription.value = task.description;
                taskCategory.value = task.category;
                taskStatus.value = task.status;
                showModal();
            }
        }

        // Modal functions
        function showModal() {
            taskModal.classList.remove('hidden');
        }

        function hideModal() {
            taskModal.classList.add('hidden');
            taskForm.reset();
            taskIdInput.value = '';
        }

        // Helper functions
        function filterTasks() {
            const category = categoryFilter.value;
            const status = statusFilter.value;
            
            return tasks.filter(task => {
                const categoryMatch = category === 'all' || task.category === category;
                const statusMatch = status === 'all' || task.status === status.replace(' ', '-');
                return categoryMatch && statusMatch;
            });
        }

        function getCategoryColorClass(category) {
            switch(category) {
                case 'work': return 'bg-blue-100 text-blue-800';
                case 'errand': return 'bg-green-100 text-green-800';
                case 'home': return 'bg-yellow-100 text-yellow-800';
                case 'social': return 'bg-purple-100 text-purple-800';
                default: return 'bg-gray-100 text-gray-800';
            }
        }

        function getStatusColorClass(status) {
            switch(status) {
                case 'to-do': return 'bg-gray-100 text-gray-800';
                case 'in-progress': return 'bg-blue-100 text-blue-800';
                case 'done': return 'bg-green-100 text-green-800';
                default: return 'bg-gray-100 text-gray-800';
            }
        }

        function getStatusClass(status) {
            return `status-${status.replace(' ', '-')}`;
        }

        function capitalizeFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        function renderCurrentView() {
            if (!listView.classList.contains('hidden')) {
                renderListView();
            } else if (!kanbanView.classList.contains('hidden')) {
                renderKanbanView();
            } else if (!cardView.classList.contains('hidden')) {
                renderCardView();
            }
        }

        // Drag and drop functionality
        function setupDragAndDrop() {
            const taskCards = document.querySelectorAll('.task-card');
            const kanbanColumns = document.querySelectorAll('.kanban-column');
            
            let draggedItem = null;
            
            taskCards.forEach(card => {
                card.addEventListener('dragstart', (e) => {
                    draggedItem = card;
                    setTimeout(() => {
                        card.classList.add('dragging');
                    }, 0);
                });
                
                card.addEventListener('dragend', () => {
                    card.classList.remove('dragging');
                    draggedItem = null;
                });
            });
            
            kanbanColumns.forEach(column => {
                column.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    column.classList.add('highlight');
                });
                
                column.addEventListener('dragleave', () => {
                    column.classList.remove('highlight');
                });
                
                column.addEventListener('drop', (e) => {
                    e.preventDefault();
                    column.classList.remove('highlight');
                    
                    if (draggedItem) {
                        const taskId = parseInt(draggedItem.dataset.id);
                        const newGroup = column.dataset.group;
                        const groupBy = kanbanGroupBy.value;
                        
                        const task = tasks.find(t => t.id === taskId);
                        if (task) {
                            if (groupBy === 'status') {
                                task.status = newGroup;
                            } else {
                                task.category = newGroup;
                            }
                            
                            renderKanbanView();
                        }
                    }
                });
            });
        }

        // Event listeners
        listViewBtn.addEventListener('click', () => showView(listView));
        kanbanViewBtn.addEventListener('click', () => showView(kanbanView));
        cardViewBtn.addEventListener('click', () => showView(cardView));
        
        addTaskBtn.addEventListener('click', () => {
            modalTitle.textContent = 'Add New Task';
            taskIdInput.value = '';
            taskForm.reset();
            showModal();
        });
        
        closeModal.addEventListener('click', hideModal);
        cancelTask.addEventListener('click', hideModal);
        
        taskForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            const taskData = {
                id: taskIdInput.value ? parseInt(taskIdInput.value) : null,
                description: taskDescription.value,
                category: taskCategory.value,
                status: taskStatus.value
            };
            
            if (taskData.id) {
                updateTask(taskData);
            } else {
                addTask(taskData);
            }
            
            hideModal();
        });
        
        categoryFilter.addEventListener('change', renderCurrentView);
        statusFilter.addEventListener('change', renderCurrentView);
        kanbanGroupBy.addEventListener('change', renderKanbanView);
        
        // Initialize
        showView(listView);
    </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=manyone/manyone-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>