-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use more and new micro icons, update dependencies
- Loading branch information
Showing
19 changed files
with
482 additions
and
362 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| save-exact=true |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,6 @@ | |
| grid-template: | ||
| 'header header' auto | ||
| 'left main' 1fr | ||
| / 300px 1fr; | ||
| / 360px 1fr; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <script setup lang="ts"> | ||
| import { absDuration } from '@/lib/date-fns/absDuration' | ||
| import { formatDuration } from '@/lib/date-fns/formatDuration' | ||
| import { getDurationSign } from '@/lib/date-fns/getDurationSign' | ||
| import { | ||
| ArrowTrendingDownIcon as ArrowTrendingDownIconSmall, | ||
| ArrowTrendingUpIcon as ArrowTrendingUpIconSmall, | ||
| FlagIcon as FlagIconSmall, | ||
| TrophyIcon as TrophyIconSmall, | ||
| PauseCircleIcon as PauseCircleIconSmall, | ||
| PlayCircleIcon as PlayCircleIconSmall, | ||
| } from '@heroicons/vue/16/solid' | ||
| import { | ||
| ArrowTrendingDownIcon as ArrowTrendingDownIconBig, | ||
| ArrowTrendingUpIcon as ArrowTrendingUpIconBig, | ||
| FlagIcon as FlagIconBig, | ||
| TrophyIcon as TrophyIconBig, | ||
| PauseCircleIcon as PauseCircleIconBig, | ||
| PlayCircleIcon as PlayCircleIconBig, | ||
| } from '@heroicons/vue/24/outline' | ||
| import { type Duration, format } from 'date-fns' | ||
| import { de } from 'date-fns/locale' | ||
| import { computed } from 'vue' | ||
| import DayProgressBar from './DayProgressBar.vue' | ||
| import UiInlineStack from './UiInlineStack.vue' | ||
| const props = defineProps<{ | ||
| worktime: Duration | ||
| breaktime: Duration | ||
| remaining?: Duration | ||
| targetTime?: Date | ||
| isToday?: boolean | ||
| workTimeIsLessThan8Hours?: boolean | ||
| size: 'small' | 'big' | ||
| }>() | ||
| const hasOvertime = computed((): boolean => { | ||
| if (props.remaining === undefined) { | ||
| return false | ||
| } | ||
| return getDurationSign(props.remaining) === -1 | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="grid gap-2"> | ||
| <DayProgressBar :value="props.worktime"></DayProgressBar> | ||
|
|
||
| <div class="flex gap-4" :class="{ 'text-xs': size === 'small', 'text-sm': size === 'big' }"> | ||
| <UiInlineStack> | ||
| <template v-if="size === 'small'"> | ||
| <PlayCircleIconSmall class="w-4 h-4 text-sky-600"></PlayCircleIconSmall> | ||
| </template> | ||
| <template v-if="size === 'big'"> | ||
| <PlayCircleIconBig class="w-6 h-6 text-sky-600"></PlayCircleIconBig> | ||
| </template> | ||
|
|
||
| <span class="font-mono">{{ formatDuration(worktime) }}</span> | ||
| </UiInlineStack> | ||
|
|
||
| <template v-if="remaining !== undefined"> | ||
| <UiInlineStack> | ||
| <template v-if="isToday"> | ||
| <template v-if="hasOvertime"> | ||
| <TrophyIconSmall | ||
| v-if="size === 'small'" | ||
| class="w-4 h-4 text-yellow-500" | ||
| ></TrophyIconSmall> | ||
| <TrophyIconBig v-if="size === 'big'" class="w-6 h-6 text-yellow-500"></TrophyIconBig> | ||
| </template> | ||
| <template v-else> | ||
| <FlagIconSmall | ||
| v-if="size === 'small'" | ||
| class="w-4 h-4 text-emerald-600" | ||
| ></FlagIconSmall> | ||
| <FlagIconBig v-if="size === 'big'" class="w-6 h-6 text-emerald-600"></FlagIconBig> | ||
| </template> | ||
| </template> | ||
| <template v-else> | ||
| <template v-if="hasOvertime"> | ||
| <ArrowTrendingUpIconSmall | ||
| v-if="size === 'small'" | ||
| class="w-4 h-4 text-sky-600" | ||
| ></ArrowTrendingUpIconSmall> | ||
| <ArrowTrendingUpIconBig | ||
| v-if="size === 'big'" | ||
| class="w-6 h-6 text-sky-600" | ||
| ></ArrowTrendingUpIconBig> | ||
| </template> | ||
| <template v-else> | ||
| <ArrowTrendingDownIconSmall | ||
| v-if="size === 'small'" | ||
| class="w-4 h-4 text-orange-600" | ||
| ></ArrowTrendingDownIconSmall> | ||
| <ArrowTrendingDownIconBig | ||
| v-if="size === 'big'" | ||
| class="w-6 h-6 text-orange-600" | ||
| ></ArrowTrendingDownIconBig> | ||
| </template> | ||
| </template> | ||
|
|
||
| <span class="font-mono">{{ formatDuration(absDuration(remaining)) }}</span> | ||
|
|
||
| <template v-if="targetTime !== undefined"> | ||
| <span>um </span> | ||
| <span class="font-mono font-bold">{{ | ||
| format(targetTime, 'HH:mm', { locale: de }) | ||
| }}</span> | ||
| </template> | ||
| </UiInlineStack> | ||
| </template> | ||
|
|
||
| <UiInlineStack class="ml-auto"> | ||
| <PauseCircleIconSmall | ||
| v-if="size === 'small'" | ||
| class="w-4 h-4 text-yellow-600" | ||
| ></PauseCircleIconSmall> | ||
| <PauseCircleIconBig | ||
| v-if="size === 'big'" | ||
| class="w-6 h-6 text-yellow-600" | ||
| ></PauseCircleIconBig> | ||
|
|
||
| <span class="font-mono">{{ formatDuration(breaktime) }}</span> | ||
| </UiInlineStack> | ||
| </div> | ||
| </div> | ||
| </template> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,22 @@ | ||
| <script setup lang="ts"> | ||
| import { useTimesStore } from '@/stores/times' | ||
| import { format, formatDuration } from 'date-fns' | ||
| import { de } from 'date-fns/locale' | ||
| import { computed } from 'vue' | ||
| import HoursProgress from './HoursProgress.vue' | ||
| import DayProgress from './DayProgress.vue' | ||
| const timesStore = useTimesStore() | ||
| const lessThan8Hours = computed(() => (timesStore.workTimeOfSelectedDay.hours ?? 0) < 8) | ||
| const remainingLabel = computed(() => | ||
| lessThan8Hours.value ? '8 Stunden erreicht in' : 'Überstunden', | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="text-lg font-bold mb-2">Zusammenfassung</div> | ||
| <div class="grid grid-cols-[1fr,auto] gap-2"> | ||
| <div> | ||
| <div class="text-gray-500">Arbeitszeit</div> | ||
| <div class="font-bold"> | ||
| {{ | ||
| formatDuration(timesStore.workTimeOfSelectedDay, { | ||
| format: ['hours', 'minutes'], | ||
| locale: de, | ||
| }) || '-' | ||
| }} | ||
| </div> | ||
| </div> | ||
| <div class="text-right"> | ||
| <div class="text-gray-500">{{ remainingLabel }}</div> | ||
| <div> | ||
| <span class="font-bold"> | ||
| {{ | ||
| formatDuration(timesStore.remainingWorkTimeOfSelectedDay, { | ||
| format: ['hours', 'minutes'], | ||
| locale: de, | ||
| }) | ||
| }} | ||
| </span> | ||
| <template v-if="lessThan8Hours && timesStore.selectedDayIsToday"> | ||
| <span> um </span> | ||
| <span class="font-bold"> | ||
| {{ | ||
| format(timesStore.timeAfterRemainingWorkTimeOfSelectedDay, 'HH:mm', { locale: de }) | ||
| }} | ||
| </span> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| <div class="col-span-2"> | ||
| <HoursProgress :value="timesStore.workTimeOfSelectedDay"></HoursProgress> | ||
| </div> | ||
| <div> | ||
| <div class="text-gray-500">Pausenzeit</div> | ||
| <div class="font-bold"> | ||
| {{ | ||
| formatDuration(timesStore.breakTimeOfSelectedDay, { | ||
| format: ['hours', 'minutes'], | ||
| locale: de, | ||
| }) || '-' | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <DayProgress | ||
| :worktime="timesStore.workTimeOfSelectedDay" | ||
| :breaktime="timesStore.breakTimeOfSelectedDay" | ||
| :remaining="timesStore.remainingWorkTimeOfSelectedDay" | ||
| :is-today="timesStore.selectedDayIsToday" | ||
| :work-time-is-less-than8-hours="timesStore.workTimeOfSelectedDayIsLessThan8Hours" | ||
| :target-time=" | ||
| timesStore.workTimeOfSelectedDayIsLessThan8Hours && timesStore.selectedDayIsToday | ||
| ? timesStore.timeAfterRemainingWorkTimeOfSelectedDay | ||
| : undefined | ||
| " | ||
| size="big" | ||
| ></DayProgress> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.