nreunane/hour-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename and restructure variables

Browse source
This commit is contained in:
Niko Reunanen 2025-03-01 09:32:54 +02:00
parent ff6804a6e7
commit 03107fb305
Signed by: nreunane
GPG key ID: D192625387DB0F16
1 changed files with 17 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
front-end/src/components/Controls.vue
View file

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