From 53463d4e857c0909f18b5b50e5a98b457a672a90 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Tue, 30 Jul 2024 13:32:21 +0200
Subject: [PATCH] feat: highlight current time slot in Kanblendar

Added functionality to highlight the current time slot in the Kanblendar application for better time tracking. This feature updates every minute and visually indicates the active time slot by applying a specific CSS class.
---
 kanblendar.css |  6 ++++++
 kanblendar.js  | 24 +++++++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/kanblendar.css b/kanblendar.css
index 4e3d731..5c8567c 100644
--- a/kanblendar.css
+++ b/kanblendar.css
@@ -126,4 +126,10 @@
     padding: 0.5em 1em;
     border-radius: 5px;
     cursor: pointer;
+}
+
+/* Current Time Highlight */
+.kanblendar-current-time {
+    background-color: #ffeb3b; /* Highlight color */
+    border-color: #fbc02d;
 }
\ No newline at end of file
diff --git a/kanblendar.js b/kanblendar.js
index 96fdf68..b56ec57 100644
--- a/kanblendar.js
+++ b/kanblendar.js
@@ -57,9 +57,27 @@ class Kanblendar {
             console.log(`Task ${e.detail.taskId} moved to ${e.detail.newParent}`);
         });
 
-        this.generateKanbanColumns();
-        this.initDragAndDrop();
-        this.requestNotificationPermission();
+        this.generateKanbanColumns(); // Generate the kanban columns
+        this.initDragAndDrop(); // Initialize drag and drop functionality
+        this.requestNotificationPermission(); // Request permission for notifications
+        this.highlightCurrentTimeSlot(); // Highlight the current time slot
+        setInterval(() => this.highlightCurrentTimeSlot(), 60000); // Update highlight every minute
+    }
+
+    highlightCurrentTimeSlot() {
+        const now = new Date();
+        const currentTime = `${now.getHours()}:${now.getMinutes() < 10 ? '0' : ''}${now.getMinutes()}`;
+
+        document.querySelectorAll('.kanblendar-time-slot').forEach(slot => {
+            const startTime = slot.dataset.startTime;
+            const endTime = this.addMinutes(this.parseTime(startTime), this.config.interval).toTimeString().slice(0, 5);
+
+            if (currentTime >= startTime && currentTime < endTime) {
+                slot.classList.add('kanblendar-current-time');
+            } else {
+                slot.classList.remove('kanblendar-current-time');
+            }
+        });
     }
 
     createModal() {