Add option to restart the timer.

README.md

@@ -52,3 +52,4 @@ Timy is open-sourced software licensed under the MIT license. See [LICENSE.txt](
 ## Credits
 
 Template is adapted from: https://github.com/estevanmaito/windmill-dashboard
+Icons are from: https://iconmonstr.com/

src/icons/ArrowDown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/arrow-65-svg/
 </script>
 
 <template>

src/icons/ArrowLeft.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/arrow-64-svg/
 </script>
 
 <template>

src/icons/ArrowRight.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/arrow-63-svg/
 </script>
 
 <template>

src/icons/ArrowUp.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/arrow-66-svg/
 </script>
 
 <template>

src/icons/Cross.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/x-mark-lined-svg/
 </script>
 
 <template>

src/icons/Garbage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/trash-can-28-svg/
 </script>
 
 <template>

src/icons/Pencil.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/pencil-lined-svg/
 </script>
 
 <template>

src/icons/Plus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/plus-2-svg/
 </script>
 
 <template>

src/icons/Reload.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { size } = defineProps<{ size: number }>();
+// Source: https://iconmonstr.com/reload-lined-svg/
+</script>
+
+<template>
+    <svg
+        class="fill-current"
+        :width="size"
+        :height="size"
+        clip-rule="evenodd"
+        fill-rule="evenodd"
+        stroke-linejoin="round"
+        stroke-miterlimit="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m3.508 6.726c1.765-2.836 4.911-4.726 8.495-4.726 5.518 0 9.997 4.48 9.997 9.997 0 5.519-4.479 9.999-9.997 9.999-5.245 0-9.553-4.048-9.966-9.188-.024-.302.189-.811.749-.811.391 0 .715.3.747.69.351 4.369 4.012 7.809 8.47 7.809 4.69 0 8.497-3.808 8.497-8.499 0-4.689-3.807-8.497-8.497-8.497-3.037 0-5.704 1.597-7.206 3.995l1.991.005c.414 0 .75.336.75.75s-.336.75-.75.75h-4.033c-.414 0-.75-.336-.75-.75v-4.049c0-.414.336-.75.75-.75s.75.335.75.75z"
+            fill-rule="nonzero"
+        />
+    </svg>
+</template>

src/main.ts

@@ -2,9 +2,9 @@ import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
 import gapiPlugin from "./google/plugin";
-import { storeFirstOpenedTime } from "./utils/firstOpened";
+import { autoStartDay } from "./utils/timeKeeper";
 
-storeFirstOpenedTime();
+autoStartDay();
 
 const app = createApp(App);
 

src/modals/EditTimeEntryModal.vue

@@ -10,7 +10,7 @@ import SelectField, { Option } from "../components/SelectField.vue";
 import TimeField from "../components/TimeField.vue";
 import { getSubject, getSubjects, subjects } from "../utils/subjects";
 import { timeEntries } from "../utils/timeEntries";
-import { firstOpened } from "../utils/firstOpened";
+import { startTime } from "../utils/timeKeeper";
 import { validate, RuleType, validationErrors } from "../utils/validation";
 import CustomDate from "../utils/CustomDate";
 
@@ -65,8 +65,8 @@ watch(show, (val) => {
 
         if (todaysEntries.length) {
             start = todaysEntries[todaysEntries.length - 1].end;
-        } else if (firstOpened.value && nowRounded.isOnSameDay(firstOpened.value)) {
-            start = firstOpened.value.roundedToQuarterHours();
+        } else if (startTime.value && nowRounded.isOnSameDay(startTime.value)) {
+            start = startTime.value.roundedToQuarterHours();
         } else {
             const midnight = new Date(nowRounded.date);
             midnight.setHours(0, 0, 0, 0);

src/pages/Dashboard.vue

@@ -7,14 +7,13 @@ import Page from "../blocks/Page.vue";
 import Section from "../blocks/Section.vue";
 import Button, { ButtonSize } from "../components/Button.vue";
 import Calendar from "../components/Calendar.vue";
-import type { Field } from "../components/Table.vue";
 import Tabs from "../components/Tabs.vue";
 import type { Tab } from "../components/Tabs.vue";
 import WeekSlider from "../components/WeekSlider.vue";
 import IconPlus from "../icons/Plus.vue";
+import IconReload from "../icons/Reload.vue";
 import EditTimeEntryModal from "../modals/EditTimeEntryModal.vue";
 import CustomDate from "../utils/CustomDate";
-import { firstOpened } from "../utils/firstOpened";
 import {
     timeEntries,
     loading,
@@ -32,6 +31,7 @@ import { getQueryParam, updateQueryParam } from "../utils/queryParams";
 import EditSubjectModal from "../modals/EditSubjectModal.vue";
 import { updateSubject } from "../utils/subjects";
 import List from "../components/List.vue";
+import { startTime, setStartTime } from "../utils/timeKeeper";
 
 const tabs: Tab[] = [
     { id: "list", label: "Liste" },
@@ -94,6 +94,10 @@ function onKeyPress(event: KeyboardEvent) {
     }
 }
 
+function resetStartTime() {
+    setStartTime(CustomDate.now());
+}
+
 onMounted(() => {
     activeTab.value = getQueryParam("tab") || activeTab.value;
     const weekStart = getQueryParam("weekStart");
@@ -124,10 +128,20 @@ if (ready) {
     <Page title="Übersicht">
         <Section class="flex flex-wrap gap-4 justify-between items-center p-4 bg-white">
             <div class="font-semibold text-gray-600 text-lg">Heute ist ein schöner Tag, mach was Gutes daraus!</div>
-            <div class="flex flex-wrap items-center">
-                <div v-if="firstOpened" class="text-sm text-gray-600 md:mr-4 mb-2 md:mb-0">
-                    Heute geöffnet um: {{ firstOpened.getTime() }}
+            <div class="flex flex-wrap gap-2 items-center">
+                <div v-if="startTime" class="text-sm text-center text-gray-600">
+                    Gestartet um: {{ startTime.getTime() }}<br />
                 </div>
+                <Button
+                    class="flex justify-center items-center w-full md:w-auto"
+                    color="green"
+                    :size="ButtonSize.LG"
+                    label="Jetzt neu starten"
+                    @click="resetStartTime"
+                >
+                    <IconReload class="mr-2" :size="16" />
+                    Jetzt neu starten
+                </Button>
                 <Button
                     class="flex justify-center items-center w-full md:w-auto"
                     label="Neues Eintrag erstellen"

src/utils/timeKeeper.ts

@@ -0,0 +1,20 @@
+import { Ref, ref } from "vue";
+import CustomDate from "./CustomDate";
+
+export const startTime: Ref<CustomDate | null> = ref(null);
+const TIMY_START_TIME: string = "timy_start_time";
+
+export function autoStartDay() {
+    // Record time when the app was first opened that day
+    const now = CustomDate.now();
+    startTime.value = new CustomDate(window.localStorage.getItem(TIMY_START_TIME) || "");
+
+    if (!startTime.value.isValidDate() || !startTime.value.isOnSameDay(now)) {
+        setStartTime(now);
+    }
+}
+
+export function setStartTime(date: CustomDate) {
+    startTime.value = date;
+    window.localStorage.setItem(TIMY_START_TIME, startTime.value.toString());
+}