Indicate current day with color and text.

manud99 · Oct 6, 2023 · 8ceb317 · 8ceb317
1 parent 00c24e2
commit 8ceb317
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/List.vue b/src/components/List.vue
@@ -52,11 +52,15 @@ function getEntriesForDay(day: number): TimeEntry[] {
             <div
                 :class="[
                     'flex flex-wrap justify-between',
-                    'text-xs font-semibold tracking-wide text-left text-gray-500 uppercase',
-                    'border-b bg-gray-50 p-2 md:px-4 md:py-3',
+                    'text-xs font-semibold tracking-wide text-left uppercase',
+                    'border-b p-2 md:px-4 md:py-3',
+                    getDateOfDay(day).isToday() ? 'bg-green-200 text-gray-600' : 'bg-gray-50 text-gray-500',
                 ]"
             >
-                <div>{{ getDateOfDay(day).getFullDate() }}</div>
+                <div>
+                    {{ getDateOfDay(day).getFullDate() }}
+                    <span v-if="getDateOfDay(day).isToday()">– Heute</span>
+                </div>
                 <div>Total: {{ getHoursOfDay(day) }}</div>
             </div>
             <div v-for="entry in getEntriesForDay(day)">

diff --git a/src/utils/CustomDate.ts b/src/utils/CustomDate.ts
@@ -83,6 +83,10 @@ export default class CustomDate {
         );
     }
 
+    isToday(): boolean {
+        return this.isOnSameDay(CustomDate.now());
+    }
+
     isSmallerThan(other: CustomDate): boolean {
         return this.date.valueOf() < other.date.valueOf();
     }