feat: Add inital translation support

1 files changed, 14 insertions, 13 deletions

diff --git a/apps/projects/src/app/pages/home.svelte b/apps/projects/src/app/pages/home.svelte
index 84d6728..33bb0d8 100644
--- a/apps/projects/src/app/pages/home.svelte
+++ b/apps/projects/src/app/pages/home.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import LL from "$app/lib/i18n/i18n-svelte";
     import {delete_time_entry, get_time_entries, get_time_entry, update_time_entry} from "$shared/lib/api/time-entry";
     import {IconNames, QueryKeys} from "$shared/lib/configuration";
     import {TimeEntryDto} from "$shared/lib/models/TimeEntryDto";
@@ -18,7 +19,7 @@
     let isLoading = false;
     let EditEntryForm: any;
     let timeEntries = [] as Array<TimeEntryDto>;
-    let timeLoggedTodayString = "0h0m";
+    let timeLoggedTodayString = "0" + $LL.home.hourSingleChar() + "0" + $LL.home.minSingleChar();
 
     const queryClient = useQueryClient();
     const queryResult = useQuery(QueryKeys.entries, async () => await get_time_entries({
@@ -49,7 +50,7 @@
     }
 
     async function on_delete_entry_button_click(event, entryId: string) {
-        if (confirm("Are you sure you want to delete this entry?")) {
+        if (confirm($LL.home.confirmDeleteEntry())) {
             $delete_entry_mutation.mutate(entryId);
         }
     }
@@ -88,34 +89,34 @@
 <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>
+            <h3 class="text-md padding-bottom-xxxs">{$LL.home.newEntry()}</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>
+                <p class="text-xs margin-bottom-xxs">{$LL.home.loggedTimeToday()}</p>
                 <pre class="text-xxl">{currentTime}</pre>
-                <p class="text-xs">Current time</p>
+                <p class="text-xs">{$LL.home.currentTime()}</p>
             </Tile>
             <Tile class="col-6@md col-12">
                 <Stopwatch on:create={on_create_from_stopwatch}>
                     <h3 slot="header"
-                        class="text-md">Stopwatch</h3>
+                        class="text-md">{$LL.home.stopwatch()}</h3>
                 </Stopwatch>
             </Tile>
             <Tile class="col-12">
-                <h3 class="text-md padding-bottom-xxxs">Today's entries</h3>
+                <h3 class="text-md padding-bottom-xxxs">{$LL.home.todayEntries()}</h3>
                 <div class="max-width-100% overflow-auto">
                     <Table class="width-100% text-sm">
                         <THead>
                         <TCell type="th"
                                class="text-left">
-                            <span>Category</span>
+                            <span>{$LL.home.category()}</span>
                         </TCell>
                         <TCell type="th"
                                class="text-left">
-                            <span>Timespan</span>
+                            <span>{$LL.home.timespan()}</span>
                         </TCell>
                         <TCell type="th"
                                class="text-right">
@@ -123,7 +124,7 @@
                                     variant="reset"
                                     icon_width="1.2rem"
                                     icon_height="1.2rem"
-                                    title="Refresh today's entries"
+                                    title="{$LL.home.refreshTodayEntries()}"
                                     on:click={() => queryClient.invalidateQueries(QueryKeys.entries)}/>
                         </TCell>
                         </THead>
@@ -148,13 +149,13 @@
                                                 icon_width="1.2rem"
                                                 icon_height="1.2rem"
                                                 on:click={(e) => on_edit_entry_button_click(e, entry.id)}
-                                                title="Edit entry"/>
+                                                title="{$LL.home.editEntry()}"/>
                                         <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"/>
+                                                title="{$LL.home.deleteEntry()}"/>
                                     </TCell>
                                 </TRow>
                             {/each}
@@ -163,7 +164,7 @@
                                 <TCell type="th"
                                        thScope="row"
                                        colspan="7">
-                                    {isLoading ? "Loading..." : "No entries today"}
+                                    {isLoading ? $LL.home.loading() + "..." : $LL.home.noEntriesToday()}
                                 </TCell>
                             </TRow>
                         {/if}