diff options
Diffstat (limited to 'apps/projects-web/src/app/pages/home.svelte')
| -rw-r--r-- | apps/projects-web/src/app/pages/home.svelte | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/apps/projects-web/src/app/pages/home.svelte b/apps/projects-web/src/app/pages/home.svelte new file mode 100644 index 0000000..c3e7af4 --- /dev/null +++ b/apps/projects-web/src/app/pages/home.svelte @@ -0,0 +1,167 @@ +<script lang="ts"> + import {IconNames} from "$shared/lib/configuration"; + import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto"; + import {Temporal} from "@js-temporal/polyfill"; + import {onMount} from "svelte"; + import Tile from "$shared/components/tile.svelte"; + import Button from "$shared/components/button.svelte"; + import Stopwatch from "$shared/components/stopwatch.svelte"; + import {Table, THead, TBody, TCell, TRow} from "$shared/components/table"; + import Layout from "./_layout.svelte"; + import EntryFrom from "$app/pages/views/entry-form/index.svelte"; + import {seconds_to_hour_minute_string, unwrap_date_time_from_entry} from "$shared/lib/helpers"; + import {TimeEntryQueryDuration} from "$shared/lib/models/TimeEntryQuery"; + import entries, {delete_entry_async, get_time_entry, reload_entries} from "$app/lib/stores/entries"; + + let currentTime = ""; + let isLoading = false; + let EditEntryForm: any; + let timeEntries = [] as Array<TimeEntryDto>; + let timeLoggedTodayString = "0h0m"; + + function set_current_time() { + currentTime = Temporal.Now.plainTimeISO().toLocaleString(undefined, { + timeStyle: "short", + }); + } + + async function on_edit_entry_button_click(event, entryId: string) { + const response = get_time_entry(entryId); + EditEntryForm.set_values(response); + } + + async function on_delete_entry_button_click(event, entryId: string) { + if (confirm("Are you sure you want to delete this entry?")) { + await delete_entry_async(entryId); + } + } + + async function load_todays_entries() { + await reload_entries({ + duration: TimeEntryQueryDuration.TODAY, + page: 1, + pageSize: 100, + }); + } + + function on_create_from_stopwatch(event) { + EditEntryForm.set_time({to: event.detail.to, from: event.detail.from}); + if (event.detail.description) { + EditEntryForm.set_description(event.detail.description); + } + } + + onMount(async () => { + set_current_time(); + setInterval(() => { + set_current_time(); + }, 1e4); + await load_todays_entries(); + entries.subscribe((val) => { + const newEntries = []; + let loggedSecondsToday = 0; + for (const entry of val) { + const date_time = unwrap_date_time_from_entry(entry); + newEntries.push({ + id: entry.id, + start: date_time.start_time, + stop: date_time.stop_time, + category: entry.category, + }); + loggedSecondsToday += (date_time.duration.hours * 60 * 60) + (date_time.duration.minutes * 60); + } + timeLoggedTodayString = seconds_to_hour_minute_string(loggedSecondsToday); + timeEntries = newEntries; + }); + }); +</script> + +<Layout> + <div class="grid gap-md margin-top-xs flex-row@md items-start flex-column-reverse"> + <Tile class="col"> + <h3 class="text-md padding-bottom-xxxs">New entry</h3> + <EntryFrom bind:functions={EditEntryForm}/> + </Tile> + <div class="col grid gap-sm"> + <Tile class="col-6@md col-12"> + <p class="text-xxl">{timeLoggedTodayString}</p> + <p class="text-xs margin-bottom-xxs">Logged time today</p> + <pre class="text-xxl">{currentTime}</pre> + <p class="text-xs">Current time</p> + </Tile> + <Tile class="col-6@md col-12"> + <Stopwatch on:create={on_create_from_stopwatch}> + <h3 slot="header" + class="text-md">Stopwatch</h3> + </Stopwatch> + </Tile> + <Tile class="col-12"> + <h3 class="text-md padding-bottom-xxxs">Today's entries</h3> + <div class="max-width-100% overflow-auto"> + <Table class="width-100% text-sm"> + <THead> + <TCell type="th" + class="text-left"> + <span>Category</span> + </TCell> + <TCell type="th" + class="text-left"> + <span>Timespan</span> + </TCell> + <TCell type="th" + class="text-right"> + <Button icon="{IconNames.refresh}" + variant="reset" + icon_width="1.2rem" + icon_height="1.2rem" + title="Refresh today's entries" + on:click={load_todays_entries}/> + </TCell> + </THead> + <TBody> + {#if timeEntries.length > 0} + {#each timeEntries as entry} + <TRow class="text-nowrap text-left" + data-id={entry.id}> + <TCell> + <span data-id={entry.category?.id}> + {entry.category?.name} + </span> + </TCell> + <TCell> + {entry.start.toLocaleString(undefined, {timeStyle: "short"})} + <span>-</span> + {entry.stop.toLocaleString(undefined, {timeStyle: "short"})} + </TCell> + <TCell class="flex flex-row justify-end items-center"> + <Button icon="{IconNames.pencilSquare}" + variant="reset" + icon_width="1.2rem" + icon_height="1.2rem" + on:click={(e) => on_edit_entry_button_click(e, entry.id)} + title="Edit entry"/> + <Button icon="{IconNames.trash}" + variant="reset" + icon_width="1.2rem" + icon_height="1.2rem" + on:click={(e) => on_delete_entry_button_click(e, entry.id)} + title="Delete entry"/> + </TCell> + </TRow> + {/each} + {:else} + <TRow class="text-nowrap"> + <TCell type="th" + thScope="row" + colspan="7"> + {isLoading ? "Loading..." : "No entries today"} + </TCell> + </TRow> + {/if} + </TBody> + </Table> + </div> + </Tile> + </div> + </div> +</Layout> |