Spaces:

Fadikkop
/

taskforge-pro

Running

App Files Files Community

Fadikkop commited on Nov 30, 2025

Commit

ed0e7ff

verified ·

1 Parent(s): df67172

Promote version 4e9dea2 to main

Browse files

Promoted commit 4e9dea2414107edb6f5eff48279f88ea9f8aaf7e to main branch

Files changed (3) hide show

components/task-item.js +25 -20
index.html +10 -11
script.js +16 -30

components/task-item.js CHANGED Viewed

@@ -218,12 +218,12 @@ class TaskItem extends HTMLElement {
             </style>
             <div class="task-header">
                 <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''}>
-                <span class="task-title">${title}</span>
                 <div class="task-actions">
                     <button class="focus-btn" title="Pomodoro starten">
                         <i data-feather="clock"></i>
                     </button>
-                    <button class="task-action" title="Bearbeiten">
                         <i data-feather="edit-2"></i>
                     </button>
                     <button class="task-action" title="Löschen">
@@ -231,7 +231,8 @@ class TaskItem extends HTMLElement {
                     </button>
                 </div>
             </div>
-<div class="task-info">
                 <span class="time-info">${formatTime(spentTime)} / ${formatTime(estimatedTime)}</span>
                 <div class="tags">${tagElements}</div>
             </div>
@@ -269,26 +270,30 @@ class TaskItem extends HTMLElement {
             icon.outerHTML = feather.icons[iconName].toSvg({ width: 16, height: 16 });
         });
     }
     setupEventListeners() {
-        const focusBtn = this.shadowRoot.querySelector('.focus-btn');
-        const editBtn = this.shadowRoot.querySelector('.task-action[title="Bearbeiten"]');
-        const deleteBtn = this.shadowRoot.querySelector('.task-action[title="Löschen"]');
-        const checkbox = this.shadowRoot.querySelector('.task-checkbox');
-        if (focusBtn) {
-            focusBtn.addEventListener('click', (e) => this.handleFocus(e));
-        }
-        if (editBtn) {
-            editBtn.addEventListener('click', (e) => this.handleEdit(e));
-        }
-        if (deleteBtn) {
-            deleteBtn.addEventListener('click', (e) => this.handleDelete(e));
-        }
-        if (checkbox) {
-            checkbox.addEventListener('change', (e) => this.handleToggleComplete(e));
-        }
     }
-handleToggleComplete(e) {
         const completed = e.target.checked;
         this.dispatchEvent(new CustomEvent('toggle-complete', {
             detail: { taskId: this.getAttribute('task-id'), completed },

             </style>
             <div class="task-header">
                 <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''}>
+<span class="task-title">${title}</span>
                 <div class="task-actions">
                     <button class="focus-btn" title="Pomodoro starten">
                         <i data-feather="clock"></i>
                     </button>
+<button class="task-action" title="Bearbeiten">
                         <i data-feather="edit-2"></i>
                     </button>
                     <button class="task-action" title="Löschen">
                     </button>
                 </div>
             </div>
+            <div class="task-info">
                 <span class="time-info">${formatTime(spentTime)} / ${formatTime(estimatedTime)}</span>
                 <div class="tags">${tagElements}</div>
             </div>
             icon.outerHTML = feather.icons[iconName].toSvg({ width: 16, height: 16 });
         });
     }
     setupEventListeners() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            const target = e.target.closest('button');
+            if (target) {
+                const action = target.getAttribute('title');
+                if (action === 'Bearbeiten') {
+                    this.handleEdit(e);
+                } else if (action === 'Löschen') {
+                    this.handleDelete(e);
+                } else if (action === 'Pomodoro starten') {
+                    this.handleFocus(e);
+                }
+            }
+        });
+        this.shadowRoot.addEventListener('change', (e) => {
+            if (e.target.classList.contains('task-checkbox')) {
+                this.handleToggleComplete(e);
+            }
+        });
     }
+    handleToggleComplete(e) {
         const completed = e.target.checked;
         this.dispatchEvent(new CustomEvent('toggle-complete', {
             detail: { taskId: this.getAttribute('task-id'), completed },

index.html CHANGED Viewed

@@ -6,6 +6,7 @@
     <title>TaskForge Pro</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -15,14 +16,14 @@
             <div class="flex items-center justify-between">
                 <h1 class="text-2xl font-bold text-orange-500">TaskForge Pro</h1>
                 <nav class="flex items-center space-x-4">
-                    <a href="#" id="view-home" class="nav-btn active" data-view="home">
                         <i data-feather="home"></i> Übersicht
-                </a>
-                    <a href="#" id="view-settings" class="nav-btn" data-view="settings">
                         <i data-feather="settings"></i> Einstellungen
-                </a>
                 </nav>
-</div>
         </div>
     </header>
 <!-- Main Content -->
@@ -192,20 +193,18 @@
     <!-- FAB Buttons -->
     <div class="fixed bottom-6 right-6 flex flex-col space-y-3">
         <button id="focus-fab" class="p-4 bg-orange-500 hover:bg-orange-600 rounded-full shadow-lg transition transform hover:scale-110">
-                <i data-feather="clock"></i>
             </button>
             <button id="add-task-fab" class="p-4 bg-emerald-500 hover:bg-emerald-600 rounded-full shadow-lg transition transform hover:scale-110">
                 <i data-feather="plus"></i>
             </button>
         </div>
 <script src="components/task-item.js"></script>
     <script src="components/tag-item.js"></script>
     <script src="script.js"></script>
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        feather.replace();
-    });
-</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <title>TaskForge Pro</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
             <div class="flex items-center justify-between">
                 <h1 class="text-2xl font-bold text-orange-500">TaskForge Pro</h1>
                 <nav class="flex items-center space-x-4">
+                    <button id="view-home" class="nav-btn active" data-view="home">
                         <i data-feather="home"></i> Übersicht
+                </button>
+                    <button id="view-settings" class="nav-btn" data-view="settings">
                         <i data-feather="settings"></i> Einstellungen
+                </button>
                 </nav>
+            </div>
         </div>
     </header>
 <!-- Main Content -->
     <!-- FAB Buttons -->
     <div class="fixed bottom-6 right-6 flex flex-col space-y-3">
         <button id="focus-fab" class="p-4 bg-orange-500 hover:bg-orange-600 rounded-full shadow-lg transition transform hover:scale-110">
+                <i data-feather="focus"></i>
             </button>
             <button id="add-task-fab" class="p-4 bg-emerald-500 hover:bg-emerald-600 rounded-full shadow-lg transition transform hover:scale-110">
                 <i data-feather="plus"></i>
             </button>
         </div>
+        <timeline-sidebar id="timeline-sidebar"></timeline-sidebar>
 <script src="components/task-item.js"></script>
     <script src="components/tag-item.js"></script>
+    <script src="components/timeline-tasks.js"></script>
     <script src="script.js"></script>
+<script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -21,7 +21,6 @@ document.addEventListener('DOMContentLoaded', () => {
     initializeUI();
     setupEventListeners();
     render();
-    feather.replace();
 });
 // Local Storage
 function loadFromLocalStorage() {
@@ -83,20 +82,22 @@ function updateCurrentTime() {
     document.getElementById('current-time').textContent = timeString;
 }
 function setupEventListeners() {
-// Navigation
     document.querySelectorAll('.nav-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
-            e.preventDefault();
             const view = e.currentTarget.dataset.view;
             switchView(view);
         });
     });
-// FAB buttons
     document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
     document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
     // Add task modal
     document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
     document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
     // Settings
     document.getElementById('import-btn').addEventListener('click', handleImport);
     document.getElementById('export-btn').addEventListener('click', handleExport);
@@ -104,11 +105,13 @@ function setupEventListeners() {
     document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
     document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
     // Focus mode
     document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
     document.getElementById('focus-play').addEventListener('click', resumePomodoro);
     document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
-// Event delegation for task item events
     document.addEventListener('delete-task', (e) => {
         deleteTask(e.detail.taskId);
     });
@@ -124,7 +127,8 @@ function setupEventListeners() {
     document.addEventListener('add-time', (e) => {
         addTimeToTask(e.detail.taskId, e.detail.minutes);
     });
-// Timeline sidebar events
     const timelineSidebar = document.getElementById('timeline-sidebar');
     if (timelineSidebar) {
         timelineSidebar.addEventListener('task-dropped', (e) => {
@@ -208,6 +212,7 @@ function closeAddTaskModal() {
     modal.classList.add('hidden');
     document.getElementById('add-task-form').reset();
 }
 function handleAddTask(e) {
     e.preventDefault();
@@ -226,6 +231,7 @@ function handleAddTask(e) {
     closeAddTaskModal();
 }
 function renderModalTags() {
     const container = document.getElementById('modal-tags-list');
     container.innerHTML = state.tags.map(tag => `
@@ -394,9 +400,6 @@ function renderTasks() {
     // Replace feather icons
     feather.replace();
-    // Re-attach event listeners to task items after render
-    reattachTaskEventListeners();
 }
 function renderProgressBars() {
     // Overall progress
@@ -649,8 +652,8 @@ function savePomodoroSettings() {
 function initializeTimeline() {
     // Setup drag start for task items
     document.addEventListener('dragstart', (e) => {
-        if (e.target.tagName === 'TASK-ITEM') {
-            const taskId = e.target.getAttribute('task-id');
             e.dataTransfer.setData('text/plain', taskId);
         }
     });
@@ -711,10 +714,12 @@ function formatTime(minutes) {
     const m = minutes % 60;
     return `${h}h${m > 0 ? ` ${m}m` : ''}`;
 }
 // Request notification permission
 if ('Notification' in window && Notification.permission === 'default') {
     Notification.requestPermission();
 }
 // New functions for task management
 function addTimeToTask(taskId, minutes) {
     const task = state.tasks.find(t => t.id === taskId);
@@ -725,9 +730,6 @@ function addTimeToTask(taskId, minutes) {
     }
 }
-// Fix missing global functions
-window.startFocusModeWithId = startFocusModeWithId;
-window.formatTime = formatTime;
 function setupTaskDragAndDrop() {
     const openContainer = document.getElementById('open-tasks');
     const completedContainer = document.getElementById('completed-tasks');
@@ -750,22 +752,6 @@ function setupTaskDragAndDrop() {
     });
 }
-function reattachTaskEventListeners() {
-    document.querySelectorAll('task-item').forEach(taskEl => {
-        // Remove existing listeners and re-add
-        const taskId = taskEl.getAttribute('task-id');
-        // Add event listeners for checkbox toggle
-        const checkbox = taskEl.shadowRoot?.querySelector('.task-checkbox');
-        if (checkbox) {
-            checkbox.addEventListener('change', (e) => {
-                const completed = e.target.checked;
-                toggleTaskComplete(taskId, completed);
-            });
-        }
-    });
-}
 function getDragAfterElement(container, y) {
     const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));

     initializeUI();
     setupEventListeners();
     render();
 });
 // Local Storage
 function loadFromLocalStorage() {
     document.getElementById('current-time').textContent = timeString;
 }
 function setupEventListeners() {
+    // Navigation
     document.querySelectorAll('.nav-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
             const view = e.currentTarget.dataset.view;
             switchView(view);
         });
     });
+    // FAB buttons
     document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
     document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
     // Add task modal
     document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
     document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
     // Settings
     document.getElementById('import-btn').addEventListener('click', handleImport);
     document.getElementById('export-btn').addEventListener('click', handleExport);
     document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
     document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
     // Focus mode
     document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
     document.getElementById('focus-play').addEventListener('click', resumePomodoro);
     document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
+    // Event delegation for task item events
     document.addEventListener('delete-task', (e) => {
         deleteTask(e.detail.taskId);
     });
     document.addEventListener('add-time', (e) => {
         addTimeToTask(e.detail.taskId, e.detail.minutes);
     });
+    // Timeline sidebar events
     const timelineSidebar = document.getElementById('timeline-sidebar');
     if (timelineSidebar) {
         timelineSidebar.addEventListener('task-dropped', (e) => {
     modal.classList.add('hidden');
     document.getElementById('add-task-form').reset();
 }
 function handleAddTask(e) {
     e.preventDefault();
     closeAddTaskModal();
 }
 function renderModalTags() {
     const container = document.getElementById('modal-tags-list');
     container.innerHTML = state.tags.map(tag => `
     // Replace feather icons
     feather.replace();
 }
 function renderProgressBars() {
     // Overall progress
 function initializeTimeline() {
     // Setup drag start for task items
     document.addEventListener('dragstart', (e) => {
+            if (e.target.tagName === 'TASK-ITEM') {
+                const taskId = e.target.getAttribute('task-id');
             e.dataTransfer.setData('text/plain', taskId);
         }
     });
     const m = minutes % 60;
     return `${h}h${m > 0 ? ` ${m}m` : ''}`;
 }
 // Request notification permission
 if ('Notification' in window && Notification.permission === 'default') {
     Notification.requestPermission();
 }
 // New functions for task management
 function addTimeToTask(taskId, minutes) {
     const task = state.tasks.find(t => t.id === taskId);
     }
 }
 function setupTaskDragAndDrop() {
     const openContainer = document.getElementById('open-tasks');
     const completedContainer = document.getElementById('completed-tasks');
     });
 }
 function getDragAfterElement(container, y) {
     const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));