feat: Add translations to stopwatch.svelte

This commit also demonstrates how to do i18n across apps.

1 files changed, 24 insertions, 11 deletions

diff --git a/apps/web-shared/src/components/stopwatch.svelte b/apps/web-shared/src/components/stopwatch.svelte
index 3ed0d0e..1c602c8 100644
--- a/apps/web-shared/src/components/stopwatch.svelte
+++ b/apps/web-shared/src/components/stopwatch.svelte
@@ -2,6 +2,10 @@
     import Button from "$shared/components/button.svelte";
     import {Textarea} from "$shared/components/form";
     import {StorageKeys} from "$shared/lib/configuration";
+    import {TranslationFunctions} from "$shared/lib/i18n/i18n-types";
+    import {loadLocaleAsync} from "$shared/lib/i18n/i18n-util.async";
+    import {i18nObject} from "$shared/lib/i18n/i18n-util";
+    import {currentLocale} from "$shared/lib/locale";
     import {StoreType, writable_persistent} from "$shared/lib/persistent-store";
     import {Temporal} from "@js-temporal/polyfill";
     import {createEventDispatcher, onMount} from "svelte";
@@ -24,6 +28,7 @@
     });
 
     let timeString;
+    let LL = i18nObject($currentLocale);
 
     $: if ($state.hours || $state.minutes || $state.seconds) {
         timeString = $state.hours.toLocaleString(undefined, {minimumIntegerDigits: 2})
@@ -33,15 +38,22 @@
         timeString = "--:--:--";
     }
 
-    onMount(() => {
+    currentLocale.subscribe(async val => {
+        await loadLocaleAsync(val);
+        LL = i18nObject(val);
+    });
+
+    onMount(async () => {
         start_if_running();
+        await loadLocaleAsync($currentLocale);
+        LL = i18nObject($currentLocale);
     });
 
     function start_if_running() {
         if ($state.isRunning) {
             if (Temporal.PlainDateTime.compare($state.lastStep, Temporal.Now.plainDateTimeISO()) == -1) {
                 const duration = Temporal.Now.plainDateTimeISO().since($state.lastStep, {smallestUnit: "second"});
-                console.log("lastStep",$state.lastStep.toString());
+                console.log("lastStep", $state.lastStep.toString());
                 console.log("duration", duration.toString());
                 console.log(duration.seconds);
                 // for (let i = 0; i < steps; i++) {
@@ -152,23 +164,23 @@
                 on:click={on_start_stop}/>
 
         {#if $state.startTime}
-            <Button title="Reset"
-                    text="Reset"
+            <Button title="{LL.stopwatch.reset()}"
+                    text="{LL.stopwatch.reset()}"
                     variant="link"
                     class="bg-error-lighter@hover color-white@hover"
                     on:click={reset}/>
             {#if !$state.isRunning}
-                <Button title="Round up"
-                        text="Round up"
+                <Button title="{LL.stopwatch.roundUp()}"
+                        text="{LL.stopwatch.roundUp()}"
                         variant="link"
                         on:click={on_round_up}/>
-                <Button title="Round down"
-                        text="Round down"
+                <Button title="{LL.stopwatch.roundDown()}"
+                        text="{LL.stopwatch.roundDown()}"
                         variant="link"
                         on:click={on_round_down}/>
                 {#if $state.minutes > 0 || $state.hours > 0}
-                    <Button title="Create entry"
-                            text="Create entry"
+                    <Button title="{LL.stopwatch.createEntry()}"
+                            text="{LL.stopwatch.createEntry()}"
                             variant="link"
                             on:click={on_create_entry}/>
                 {/if}
@@ -176,8 +188,9 @@
         {/if}
     </div>
 </div>
+
 <Textarea class="width-100% margin-top-xs"
-          placeholder="What's your focus?"
+          placeholder="{LL.stopwatch.whatsYourFocus()}"
           rows="1"
           bind:value={$state.note}
 />