From a8b44b09a404aee477e735501b828d1b14aad311 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 7 Jun 2022 01:33:52 +0200
Subject: feat: Add inital translation support

---
 apps/projects/src/app/pages/data.svelte | 34 ++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

(limited to 'apps/projects/src/app/pages/data.svelte')

diff --git a/apps/projects/src/app/pages/data.svelte b/apps/projects/src/app/pages/data.svelte
index 070b98b..190c641 100644
--- a/apps/projects/src/app/pages/data.svelte
+++ b/apps/projects/src/app/pages/data.svelte
@@ -12,6 +12,7 @@
 	import {delete_time_entry, get_time_entries, get_time_entry} from "$shared/lib/api/time-entry";
 	import {seconds_to_hour_minute_string, is_guid, move_focus, unwrap_date_time_from_entry} from "$shared/lib/helpers";
 	import Button from "$shared/components/button.svelte";
+	import LL from "$app/lib/i18n/i18n-svelte";
 
 	let pageCount = 1;
 	let page = 1;
@@ -41,7 +42,10 @@
 
 	function set_duration_summary_string() {
 		if (entries.length > 0) {
-			durationSummary = `Showing ${entries.length} ${entries.length === 1 ? "entry" : "entries"}, totalling in ${seconds_to_hour_minute_string(secondsLogged)}`;
+			durationSummary = $LL.data.durationSummary({
+				entryCountString: `${entries.length} ${entries.length === 1 ? $LL.data.entry() : $LL.data.entries()}`,
+				totalHourMin: seconds_to_hour_minute_string(secondsLogged)
+			});
 		} else {
 			durationSummary = "";
 		}
@@ -61,7 +65,7 @@
 					date: date_time.start_date,
 					start: date_time.start_time,
 					stop: date_time.stop_time,
-					durationString: date_time.duration.hours + "h" + date_time.duration.minutes + "m",
+					durationString: date_time.duration.hours + $LL.data.hourSingleChar() + date_time.duration.minutes + $LL.data.minSingleChar(),
 					seconds: seconds,
 					category: entry.category,
 					labels: entry.labels,
@@ -126,7 +130,7 @@
 	}
 
 	async function handle_delete_entry_button_click(e, entryId) {
-		if (confirm("Are you sure you want to delete this entry?")) {
+		if (confirm($LL.data.confirmDeleteEntry())) {
 			const response = await delete_time_entry(entryId);
 			if (response.ok) {
 				const indexOfEntry = entries.findIndex((c) => c.id === entryId);
@@ -180,7 +184,7 @@
 	});
 </script>
 
-<Modal title="Edit entry"
+<Modal title="{$LL.data.editEntry()}"
        bind:functions={EditEntryModal}
        on:closed={() => EditEntryForm.reset()}>
     <EntryForm bind:functions={EditEntryForm}
@@ -216,7 +220,7 @@
 
     {#if currentTimespanFilter === TimeEntryQueryDuration.SPECIFIC_DATE}
         <div class="flex items-baseline margin-bottom-xxxxs justify-between">
-            <span class="text-sm color-contrast-medium margin-right-xs">Date:</span>
+            <span class="text-sm color-contrast-medium margin-right-xs">{$LL.data.date()}:</span>
             <span class="text-sm">
 				<input type="date"
                        class="border-none padding-0 color-inherit bg-transparent"
@@ -227,7 +231,7 @@
 
     {#if currentTimespanFilter === TimeEntryQueryDuration.DATE_RANGE}
         <div class="flex items-baseline margin-bottom-xxxxs justify-between">
-            <span class="text-sm color-contrast-medium margin-right-xs">From:</span>
+            <span class="text-sm color-contrast-medium margin-right-xs">{$LL.data.from()}:</span>
             <span class="text-sm">
 				<input type="date"
                        class="border-none padding-0 color-inherit bg-transparent"
@@ -236,7 +240,7 @@
         </div>
 
         <div class="flex items-baseline margin-bottom-xxxxs justify-between">
-            <span class="text-sm color-contrast-medium margin-right-xs">To:</span>
+            <span class="text-sm color-contrast-medium margin-right-xs">{$LL.data.to()}:</span>
             <span class="text-sm">
 				<input type="date"
                        class="border-none padding-0 color-inherit bg-transparent"
@@ -249,13 +253,13 @@
         <Button variant="subtle"
                 on:click={() => load_entries_with_filter(page)}
                 class="text-sm"
-                text="Save"/>
+                text="{$LL.data.use()}"/>
     </div>
 </div>
 
 <Layout>
     <Tile class="{isLoading ? 'c-disabled loading' : ''}">
-        <nav class="s-tabs text-sm">
+        <nav class="s-tabs text-sm hide">
             <ul class="s-tabs__list">
                 <li><span class="s-tabs__link s-tabs__link--current">All (21)</span></li>
                 <li><span class="s-tabs__link">Published (19)</span></li>
@@ -280,7 +284,7 @@
                 <TCell type="th"
                        style="width: 100px">
                     <div class="flex items-center justify-between">
-                        <span>Date</span>
+                        <span>{$LL.data.date()}</span>
                         <div class="date_filter_box_el cursor-pointer"
                              on:click={toggle_date_filter_box}>
                             <Icon name="{IconNames.funnel}"/>
@@ -291,21 +295,21 @@
                 <TCell type="th"
                        style="width: 100px">
                     <div class="flex items-center">
-                        <span>Duration</span>
+                        <span>{$LL.data.duration()}</span>
                     </div>
                 </TCell>
 
                 <TCell type="th"
                        style="width: 100px;">
                     <div class="flex items-center">
-                        <span>Category</span>
+                        <span>{$LL.data.category()}</span>
                     </div>
                 </TCell>
 
                 <TCell type="th"
                        style="width: 300px;">
                     <div class="flex items-center">
-                        <span>Description</span>
+                        <span>{$LL.data.description()}</span>
                     </div>
                 </TCell>
                 <TCell type="th"
@@ -366,7 +370,7 @@
                         <TCell type="th"
                                thScope="row"
                                colspan="7">
-                            {isLoading ? "Loading..." : "No entries"}
+                            {isLoading ? $LL.data.loading() + "..." : $LL.data.noEntries()}
                         </TCell>
                     </TRow>
                 {/if}
@@ -378,7 +382,7 @@
                 {#if durationSummary}
                     <small class={isLoading ? "c-disabled loading" : ""}>{durationSummary}</small>
                 {:else}
-                    <small class={isLoading ? "c-disabled loading" : ""}>No entries</small>
+                    <small class={isLoading ? "c-disabled loading" : ""}>{$LL.data.noEntries()}</small>
                 {/if}
             </p>
 
-- 
cgit v1.3