From 03107fb305ac2ae104a26ed6402c8d0a7758d5c8 Mon Sep 17 00:00:00 2001
From: Niko Reunanen <niko.reunanen@ntsol.io>
Date: Sat, 1 Mar 2025 09:32:54 +0200
Subject: [PATCH] Rename and restructure variables

---
 front-end/src/components/Controls.vue | 32 ++++++++++++++-------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/front-end/src/components/Controls.vue b/front-end/src/components/Controls.vue
index a984d4a..8bc5ba1 100644
--- a/front-end/src/components/Controls.vue
+++ b/front-end/src/components/Controls.vue
@@ -6,9 +6,11 @@ import DatePicker from "primevue/datepicker";
 import Dialog from "primevue/dialog";
 import { inject, ref } from "vue";
 
-const date = ref(new Date());
-const totalHours = ref(0);
-const totalHoursVisible = ref(false);
+const modalTotalHours = ref({
+  hours: 0,
+  visible: false,
+});
+const selectedDate = ref(new Date());
 
 const pb = inject("pb") as PocketBase;
 const props = defineProps<{ org: string; projects: Project[] }>();
@@ -16,21 +18,21 @@ const props = defineProps<{ org: string; projects: Project[] }>();
 const emits = defineEmits<{ date: [Date]; project: [string] }>();
 
 function setDate(offset: number) {
-  date.value = new Date(date.value.setDate(date.value.getDate() + offset));
-  emits("date", date.value);
+  selectedDate.value = new Date(selectedDate.value.setDate(selectedDate.value.getDate() + offset));
+  emits("date", selectedDate.value);
 }
 
-async function showTotalHours() {
-  const year = date.value.getFullYear();
-  const month = date.value.getMonth() + 1;
+async function showModalTotalHours() {
+  const year = selectedDate.value.getFullYear();
+  const month = selectedDate.value.getMonth() + 1;
   const monthDoubleDigit = month < 10 ? `0${month}` : month.toString();
   const organisation = props.org;
 
   const response = await pb.send(`/hours/${organisation}/${year}/${monthDoubleDigit}`, {});
 
   if (response.error === null) {
-    totalHours.value = Math.round(response.hours * 100) / 100;
-    totalHoursVisible.value = true;
+    modalTotalHours.value.hours = Math.round(response.hours * 100) / 100;
+    modalTotalHours.value.visible = true;
   } else {
     console.error(response.error);
   }
@@ -39,10 +41,10 @@ async function showTotalHours() {
 
 <template>
     <Button label="<" @click="setDate(-1)" style="margin-left: 20px;" />
-    <DatePicker v-model="date" style="width: 150px;" />
-    <Button label=">" @click="setDate(1)" />
-    <Button label="Total hours" @click="showTotalHours" style="margin-left: 20px;" />
-    <Dialog v-model:visible="totalHoursVisible" modal header="Total hours" :style="{ width: '25rem' }">
-        <p>Hours: {{ totalHours }}</p>
+    <DatePicker v-model="selectedDate" style="width: 150px; margin-left: 3px;" />
+    <Button label=">" @click="setDate(1)" style="margin-left: 3px;" />
+    <Button label="total hours" @click="showModalTotalHours" style="margin-left: 20px;" />
+    <Dialog v-model:visible="modalTotalHours.visible" modal header="Total hours" :style="{ width: '25rem' }">
+        <p>Hours: {{ modalTotalHours.hours }}</p>
     </Dialog>
 </template>
\ No newline at end of file