From 21764214c257949844d87e445f1a9f2736a20561 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Fri, 10 Jun 2022 00:35:22 +0200
Subject: feat: Add translations to stopwatch.svelte

This commit also demonstrates how to do i18n across apps.
---
 .../src/components/blowout-toolbelt.svelte         |  2 +-
 apps/web-shared/src/components/stopwatch.svelte    | 35 +++++++++++++++-------
 2 files changed, 25 insertions(+), 12 deletions(-)

(limited to 'apps/web-shared/src/components')

diff --git a/apps/web-shared/src/components/blowout-toolbelt.svelte b/apps/web-shared/src/components/blowout-toolbelt.svelte
index 69e9902..b611a2d 100644
--- a/apps/web-shared/src/components/blowout-toolbelt.svelte
+++ b/apps/web-shared/src/components/blowout-toolbelt.svelte
@@ -32,7 +32,7 @@
         right: 0 !important;
     }
 </style>
-<aside class="blowout position-fixed bg-light inner-glow shadow-xs padding-xxs bottom-50% right-0 z-index-2 {expanded ? 'expanded' : ''}">
+<aside class="blowout position-fixed bg-light inner-glow shadow-xs padding-xxs bottom-50% right-0 z-index-popover {expanded ? 'expanded' : ''}">
     <LocaleSwitcher bind:show="{localeSwitcher.show}"
                     glow="{false}"
                     on:change={locale_change}
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}
 />
-- 
cgit v1.3