New progress bar, bug fixes

.prettierrc.json

@@ -4,5 +4,5 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "all"
 }

src/assets/main.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

src/components/DaySummary.vue

@@ -4,13 +4,14 @@ import { format, formatDuration } from 'date-fns'
 import { de } from 'date-fns/locale'
 import { computed } from 'vue'
 import { getRatio } from '../lib/date-fns/getRatio'
+import HoursProgress from './HoursProgress.vue'
 
 const timesStore = useTimesStore()
 
 const lessThan8Hours = computed(() => (timesStore.workTimeOfSelectedDay.hours ?? 0) < 8)
 
 const remainingLabel = computed(() =>
-  lessThan8Hours.value ? '8 Stunden erreicht in' : 'Überstunden'
+  lessThan8Hours.value ? '8 Stunden erreicht in' : 'Überstunden',
 )
 </script>
 
@@ -22,7 +23,7 @@ const remainingLabel = computed(() =>
         {{
           formatDuration(timesStore.workTimeOfSelectedDay, {
             format: ['hours', 'minutes'],
-            locale: de
+            locale: de,
           }) || '-'
         }}
       </div>
@@ -34,7 +35,7 @@ const remainingLabel = computed(() =>
         {{
           formatDuration(timesStore.remainingWorkTimeOfSelectedDay, {
             format: ['hours', 'minutes'],
-            locale: de
+            locale: de,
           })
         }}
       </div>
@@ -51,22 +52,8 @@ const remainingLabel = computed(() =>
       </template>
     </div>
 
-    <div class="flex flex-col col-span-2">
-      <div class="flex justify-between items-end">
-        <div class="w-0.5 h-3 bg-black"></div>
-        <template v-for="i in 8" :key="i">
-          <div class="w-px h-1 bg-gray-400"></div>
-          <div class="w-px h-2 bg-gray-500"></div>
-          <div class="w-px h-1 bg-gray-400"></div>
-          <div class="w-0.5 h-3 bg-black"></div>
-        </template>
-      </div>
-
-      <progress
-        class="w-full appearance-none [&::-webkit-progress-bar]:h-4 [&::-webkit-progress-bar]:bg-white [&::-webkit-progress-bar]:border-solid [&::-webkit-progress-bar]:border-2 [&::-webkit-progress-bar]:border-black [&::-webkit-progress-value]:bg-emerald-600"
-        :value="getRatio(timesStore.workTimeOfSelectedDay, { hours: 8 })"
-        max="1"
-      ></progress>
+    <div class="col-span-2">
+      <HoursProgress :value="timesStore.workTimeOfSelectedDay"></HoursProgress>
     </div>
 
     <div>
@@ -75,7 +62,7 @@ const remainingLabel = computed(() =>
         {{
           formatDuration(timesStore.breakTimeOfSelectedDay, {
             format: ['hours', 'minutes'],
-            locale: de
+            locale: de,
           }) || '-'
         }}
       </div>

src/components/DaysListItem.vue

@@ -12,7 +12,7 @@ const timesStore = useTimesStore()
     class="px-3 py-2 cursor-default text-center rounded select-none"
     :class="{
       'hover:bg-gray-200': !isSameDay(timesStore.selectedDay, day),
-      'bg-gray-300': isSameDay(timesStore.selectedDay, day)
+      'bg-gray-300': isSameDay(timesStore.selectedDay, day),
     }"
     @click="timesStore.setSelectedDay(day)"
   >

src/components/HoursProgress.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{ value: Duration }>()
+
+function getSegmentWidth(index: number): string {
+  if (index <= (props.value.hours ?? 0)) {
+    return '100%'
+  }
+
+  if (index > (props.value.hours ?? 0) + 1) {
+    return '0%'
+  }
+
+  return `${(100 / 60) * (props.value.minutes ?? 0)}%`
+}
+</script>
+
+<template>
+  <div class="flex gap-1">
+    <template v-for="i in 11" :key="i">
+      <div
+        class="flex h-3 rounded-full flex-grow overflow-hidden"
+        :class="{ 'bg-sky-200': i <= 8, 'bg-yellow-200': i > 8 && i <= 10, 'bg-rose-200': i > 10 }"
+      >
+        <div
+          class="h-full"
+          :class="{ 'bg-sky-800': i <= 8, 'bg-yellow-800': i > 8 && i <= 10, 'bg-rose-800': i > 10 }"
+          :style="{ width: getSegmentWidth(i) }"
+        ></div>
+      </div>
+    </template>
+  </div>
+</template>

src/components/ToolbarButton.vue

@@ -1,5 +1,7 @@
 <template>
-  <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded border border-gray-300 hover:border-gray-400 active:border-gray-400 cursor-default select-none">
+  <button
+    class="px-3 py-1 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded border border-gray-300 hover:border-gray-400 active:border-gray-400 cursor-default select-none"
+  >
     <slot></slot>
   </button>
-</template>
+</template>

src/components/UiStack.vue

@@ -2,4 +2,4 @@
   <div class="flex flex-col gap-4">
     <slot></slot>
   </div>
-</template>
+</template>

src/lib/date-fns/getRatio.ts

@@ -4,5 +4,5 @@ export function getRatio(duration: Duration, compareDuration: Duration): number
   const baseDate = new Date(0)
   const compareDate = add(baseDate, compareDuration)
   const date = add(baseDate, duration)
-  return 1 / compareDate.getTime() * date.getTime()
+  return (1 / compareDate.getTime()) * date.getTime()
 }

src/lib/date/sortDates.ts

@@ -1,3 +1,8 @@
-export function sortDates(dateA: Date, dateB: Date): number {
-  return dateB.getTime() - dateA.getTime()
-}
+export function sortDates(reverse = false): (dateA: Date, dateB: Date) => number {
+  return (dateA, dateB) => {
+    if (reverse) {
+      return dateA.getTime() - dateB.getTime()
+    }
+    return dateB.getTime() - dateA.getTime()
+  }
+}

src/stores/times.ts

@@ -20,7 +20,7 @@ export const useTimesStore = defineStore('times', () => {
 
   watchEffect(() => {
     const serializedTimestamps = JSON.stringify(
-      timestamps.value.map((timestamp) => timestamp.getTime())
+      timestamps.value.map((timestamp) => timestamp.getTime()),
     )
     localStorage.setItem(timestampsStorageKey, serializedTimestamps)
   })
@@ -34,9 +34,13 @@ export const useTimesStore = defineStore('times', () => {
       }
     }
 
-    days.sort(sortDates)
+    days.sort(sortDates())
 
-    const today = new Date(currentTime.value.getFullYear(), currentTime.value.getMonth(), currentTime.value.getDate())
+    const today = new Date(
+      currentTime.value.getFullYear(),
+      currentTime.value.getMonth(),
+      currentTime.value.getDate(),
+    )
 
     if (!isSameDay(days[0], today)) {
       days.unshift(today)
@@ -52,7 +56,9 @@ export const useTimesStore = defineStore('times', () => {
   })
 
   const timestampsOfSelectedDay = computed((): Date[] => {
-    return timestamps.value.filter((timestamp) => isSameDay(timestamp, selectedDay.value))
+    const result = timestamps.value.filter((timestamp) => isSameDay(timestamp, selectedDay.value))
+    result.sort(sortDates(true))
+    return result
   })
 
   const workTimeOfSelectedDay = computed((): Duration => {
@@ -63,7 +69,7 @@ export const useTimesStore = defineStore('times', () => {
     list.forEach((timestamp, index) => {
       if (index % 2 === 0) return
       workTimeDurations.push(
-        intervalToDuration({ start: timestampsOfSelectedDay.value[index - 1], end: timestamp })
+        intervalToDuration({ start: timestampsOfSelectedDay.value[index - 1], end: timestamp }),
       )
     })
 
@@ -81,7 +87,7 @@ export const useTimesStore = defineStore('times', () => {
       if (index % 2 === 1 || index === 0) return
 
       breakTimeDurations.push(
-        intervalToDuration({ start: timestampsOfSelectedDay.value[index - 1], end: timestamp })
+        intervalToDuration({ start: timestampsOfSelectedDay.value[index - 1], end: timestamp }),
       )
     })
 
@@ -112,7 +118,6 @@ export const useTimesStore = defineStore('times', () => {
     },
     addTime(time: Date) {
       timestamps.value.push(time)
-      timestamps.value.sort(sortDates)
     },
     addCurrentTime() {
       this.addTime(new Date())