i18n run: Added keys 🌍

ref #93

src/components/dashboard/Dashboard.svelte

@@ -201,7 +201,7 @@
             viewBox="0 0 640 512"><path
               fill="currentColor"
               d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
-          <span>Scanstations</span>
+          <span>{$_('scanstations')}</span>
         </a>
       {/if}
       <a

src/components/scanstations/AddScanStationModal.svelte

@@ -37,7 +37,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: "Scanstation is being added...",
+        text: $_('scanstation-is-being-added'),
         duration: -1,
       }).showToast();
       let postdata = {
@@ -53,7 +53,7 @@
           modal_open = false;
           //
           Toastify({
-            text: "Scanstation added",
+            text: $_('scanstation-added'),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -111,12 +111,11 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                Create a new scanstation
+                {$_('create-a-new-scanstation')}
               </h3>
               <div class="mt-2 mb-6">
                 <p class="text-sm text-gray-500">
-                  Please provide the required information to create a new
-                  scanstation
+                  {$_('please-provide-the-required-information-to-create-a-new-scanstation')}
                 </p>
               </div>
               <div class="grid grid-cols-6 gap-6">
@@ -136,11 +135,11 @@
                 <div class="col-span-6">
                   <label
                     for="description"
-                    class="block text-sm font-medium text-gray-700">Description</label>
+                    class="block text-sm font-medium text-gray-700">{$_('description')}</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="Description"
+                    placeholder="{$_('description')}"
                     bind:value={description}
                     type="text"
                     name="description"
@@ -149,7 +148,7 @@
                 <div class="col-span-6">
                   <label
                     for="enabled"
-                    class="ml-1 font-medium text-gray-700">Enabled</label>
+                    class="ml-1 font-medium text-gray-700">{$_('enabled')}</label>
                   <br />
                   <p class="text-gray-500">
                     <input
@@ -161,7 +160,7 @@
                       type="checkbox"
                       checked={enabled}
                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    This scanstation is {#if enabled}enabled{:else}disabled{/if}
+                    {$_('this-scanstation-is')} {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
                   </p>
                 </div>
               </div>

src/components/scanstations/ConfirmScanStationDeletion.svelte

@@ -19,7 +19,7 @@
     )
       .then((resp) => {
         Toastify({
-          text: "Station deleted",
+          text: $_('station-deleted'),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -66,7 +66,7 @@
                     'do-you-want-to-delete-this-donor-with-all-related-donations'
                   )}
                   <br /> 
-                  All associated scans will get deleted as well
+                  {$_('all-associated-scans-will-get-deleted-as-well')}
                 </p>
               </div>
             </div>
@@ -77,13 +77,13 @@
             on:click={deleteStation}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-            Confirm, delete station with all scans
+            {$_('confirm-delete-station-with-all-scans')}
           </button>
           <button
             on:click={cancelDelete}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            Cancel, keep station
+            {$_('cancel-keep-station')}
           </button>
         </div>
       </div>

src/components/scanstations/ScanStationDetail.svelte

@@ -4,7 +4,6 @@
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
-  import { edit } from "marked/src/helpers";
   import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
   let data_loaded = false;
   let modal_open;
@@ -32,7 +31,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: "Station is being updated",
+        text: $_('station-is-being-updated'),
         duration: 2500,
       }).showToast();
       ScanStationService.scanStationControllerPut(original_data.id, editable)
@@ -40,7 +39,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
           Object.assign(original_data, editable);
           original_data = original_data;
           Toastify({
-            text: "Updated station",
+            text: $_('updated-station'),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -53,7 +52,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
     ScanStationService.scanStationControllerRemove(original_data.id, false)
       .then((resp) => {
         Toastify({
-          text: "Station deleted",
+          text: $_('station-deleted'),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -68,7 +67,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
 
 <ConfirmScanStationDeletion bind:modal_open bind:delete_station />
 {#await promise}
-  Loading station details
+  {$_('loading-station-details')}
 {:then}
   <section class="container p-5 select-none">
     <div class="flex flex-row mb-4">
@@ -86,7 +85,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
                   d="M2 22a8 8 0 1 1 16 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm10 4h4v2h-4v-2zm-3-5h7v2h-7v-2zm2-5h5v2h-5V7z" /></svg>
             </li>
             <li class="flex items-center ml-2">
-              <a class="mr-2" href="./">Scanstation</a><svg
+              <a class="mr-2" href="./">{$_('scanstation')}</a><svg
                 stroke="currentColor"
                 fill="none"
                 stroke-width="2"
@@ -130,8 +129,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
                 delete_triggered = true;
               }}
               type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
-              station</button>
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-station')}</button>
           {/if}
         {/if}
         {#if !delete_triggered}
@@ -161,10 +159,10 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
     <div class="text-sm w-full">
       <label
         for="description"
-        class="font-medium text-gray-700">Description</label>
+        class="font-medium text-gray-700">{$_('description')}</label>
       <input
         autocomplete="off"
-        placeholder="Description"
+        placeholder="{$_('description')}"
         type="text"
         bind:value={editable.description}
         name="description"
@@ -173,7 +171,7 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
     <div class="text-sm w-full">
       <label
         for="enabled"
-        class="ml-1 font-medium text-gray-700">Enabled</label>
+        class="ml-1 font-medium text-gray-700">{$_('enabled')}</label>
       <br />
       <p class="text-gray-500">
         <input
@@ -185,8 +183,8 @@ import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
           type="checkbox"
           checked={editable.enabled}
           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-        This scanstation is
-        {#if editable.enabled}enabled{:else}disabled{/if}
+        {$_('this-scanstation-is')}
+        {#if editable.enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
       </p>
     </div>
   </section>

src/components/scanstations/ScanStations.svelte

@@ -9,7 +9,7 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Scanstations
+    {$_('scanstations')}
     {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:CREATE')}
       <button
         on:click={() => {
@@ -17,7 +17,7 @@
         }}
         type="button"
         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-        Create a new scanstation
+        {$_('create-a-new-scanstation')}
       </button>
     {/if}
   </span>

src/components/scanstations/ScanStationsEmptyState.svelte

@@ -1,7 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
 import AddScanStationModal from "./AddScanStationModal.svelte";
-  // import AddContactModal from "./AddContactModal.svelte";
   import scanstations_empty from "./scanstations_empty.svg";
   let modal_open = false;
   let current_stations = [];
@@ -10,8 +9,8 @@ import AddScanStationModal from "./AddScanStationModal.svelte";
 <div class="text-center items-center justify-center">
   <p class="mb-16 text-lg text-gray-500">
     <img class="w-full h-44" src={scanstations_empty} alt="" />
-    <span class="font-bold">You don't have any scanstations yet.</span><br />
-    <span>Add the first scanstation</span>
+    <span class="font-bold">{$_('you-dont-have-any-scanstations-yet')}.</span><br />
+    <span>{$_('add-the-first-scanstation')}</span>
   </p>
 </div>
 

src/components/scanstations/ScanStationsOverview.svelte

@@ -29,7 +29,7 @@
     <div
       class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
       role="alert">
-      <p class="font-bold">Scanstations are being loaded</p>
+      <p class="font-bold">{$_('scanstations-are-being-loaded')}</p>
       <p class="text-sm">{$_('this-might-take-a-moment')}</p>
     </div>
   {:then}
@@ -50,17 +50,17 @@
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Track
+                {$_('track')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Description
+                {$_('description')}
               </th>
               <th
                 scope="col"
                 class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Enabled
+                {$_('enabled')}
               </th>
               <th scope="col" class="relative px-6 py-3">
                 <span class="sr-only">{$_('action')}</span>
@@ -119,7 +119,7 @@
                             .then((resp) => {
                               current_stations = current_stations.filter((obj) => obj.id !== s.id);
                               Toastify({
-                                text: 'Station deleted',
+                                text: $_('station-deleted'),
                                 duration: 500,
                                 backgroundColor:
                                   'linear-gradient(to right, #00b09b, #96c93d)',

src/locales/en.json

@@ -307,5 +307,26 @@
   "verfuegbare": "availdable",
   "welcome_wavinghand": "Welcome 👋",
   "you-can-now-use-your-new-password-to-log-in-to-your-account": "You can now use your new password to log in to your account! 🎉",
-    "zip-postal-code": "ZIP/ postal code"
+  "zip-postal-code": "ZIP/ postal code",
+  "scanstations": "Scanstations",
+  "you-dont-have-any-scanstations-yet": "You don't have any scanstations yet",
+  "add-the-first-scanstation": "Add the first scanstation",
+  "create-a-new-scanstation": "Create a new scanstation",
+  "scanstations-are-being-loaded": "Scanstations are being loaded",
+  "track": "Track",
+  "enabled": "Enabled",
+  "station-is-being-updated": "Station is being updated",
+  "updated-station": "Updated station",
+  "station-deleted": "Station deleted",
+  "scanstation": "Scanstation",
+  "loading-station-details": "Loading station details",
+  "delete-station": "Delete station",
+  "this-scanstation-is": "This scanstation is",
+  "disabled": "disabled",
+  "all-associated-scans-will-get-deleted-as-well": "All associated scans will get deleted as well",
+  "confirm-delete-station-with-all-scans": "Confirm, delete station with all scans",
+  "cancel-keep-station": "Cancel, keep station",
+  "scanstation-is-being-added": "Scanstation is being added...",
+  "scanstation-added": "Scanstation added",
+  "please-provide-the-required-information-to-create-a-new-scanstation": "Please provide the required information to create a new scanstation"
 }