adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 03:32:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add sidebar timer start/stop and live timer updates

Browse Source
This commit is contained in:
Gregor Vostrak
2024-03-14 23:52:50 +01:00
parent 81e133528a
commit fb04cff7c1
4 changed files with 66 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/Components/CurrentSidebarTimer.vue
View File

@@ -1,13 +1,36 @@
<script setup lang="ts">
import TimeTrackerStartStop from '@/Components/common/TimeTrackerStartStop.vue';
import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import dayjs from 'dayjs';
import { formatHumanReadableDuration } from '@/utils/time';
const store = useCurrentTimeEntryStore();
const { currentTimeEntry, now, isActive } = storeToRefs(store);
const { onToggleButtonPress } = store;
const currentTime = computed(() => {
if (now.value && currentTimeEntry.value.start) {
const startTime = dayjs(currentTimeEntry.value.start);
const diff = now.value.diff(startTime, 's');
// return dayjs(diff).utc().format('HH:mm:ss');
return formatHumanReadableDuration(diff);
}
return formatHumanReadableDuration(0);
});
</script>
<template>
<div class="py-4 px-2 flex justify-between items-center">
<div>
<div class="text-muted font-extrabold text-xs">Current Timer</div>
<div class="text-white font-medium text-lg py-1">1h 23min</div>
<div class="text-white font-medium text-lg py-1">
{{ currentTime }}
</div>
</div>
<TimeTrackerStartStop size="base"></TimeTrackerStartStop>
<TimeTrackerStartStop
:active="isActive"
@changed="onToggleButtonPress"
size="base"></TimeTrackerStartStop>
</div>
</template>