basic i18n

ref #1

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,7 @@
+languageIds:
+    - javascript
+    - svelte
+    - html
+monopoly: false
+refactorTemplates:
+    - "{$_('$1')}"

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "i18n-ally.localesPaths": "app/src/locales",
+    "i18n-ally.keystyle": "nested"
+}

app/package.json

@@ -8,7 +8,7 @@
 		"prepare": "husky install"
 	},
 	"devDependencies": {
-		"@svitejs/vite-plugin-svelte": "^0.11.0",
+		"@svitejs/vite-plugin-svelte": "^0.11.1",
 		"@tsconfig/svelte": "^1.0.10",
 		"@types/html-minifier": "^4.0.0",
 		"axios": "^0.21.1",
@@ -19,7 +19,7 @@
 		"prettier-plugin-svelte": "^2.2.0",
 		"svelte": "^3.35.0",
 		"svelte-preprocess": "^4.6.9",
-		"vite": "^2.0.5",
+		"vite": "^2.1.2",
-		"vite-plugin-windicss": "^0.8.2"
+		"vite-plugin-windicss": "^0.9.2"
 	}
 }

app/src/App.svelte

@@ -1,4 +1,12 @@
 <script>
+  import { addMessages, init } from "svelte-i18n";
+  import en from "./locales/en.json";
+  import de from "./locales/de.json";
+  addMessages("en", en);
+  addMessages("en-US", en);
+  addMessages("de", de);
+  addMessages("de-DE", de);
+  // 
   import Scanner from "./Scanner.svelte";
   import Login from "./Login.svelte";
   import Settings from "./Settings.svelte";
@@ -6,6 +14,11 @@
   $: is_configured = $apikey && $apikey !== "null" && $apikey !== "";
   $: settings_open = $page === "settings";
   console.log($page);
+  // 
+  init({
+    fallbackLocale: "en-US",
+    initialLocale: $lang
+  });
 </script>
 
 {#if settings_open && is_configured}

app/src/Login.svelte

@@ -1,6 +1,7 @@
 <script>
   import { apikey, lang, stationinfo } from "./store.js";
   import axios from "axios";
+import { _ ,locale} from "svelte-i18n";
   let token;
   $: error = false;
   $: errormessage = "";
@@ -8,6 +9,9 @@
     token?.length === 44 &&
     token.split(".")[0].length === 7 &&
     isUUID(token.split(".")[1]);
+    function isLocale(l){
+return $locale == l;
+    }
   function isUUID(uuid) {
     let s = "" + uuid;
 
@@ -34,12 +38,12 @@
     <div
       class="flex flex-col justify-center md:justify-start my-auto pt-8 md:pt-0 px-8 md:px-24 lg:px-32"
     >
-      <p class="text-center text-3xl">Configuration</p>
+      <p class="text-center text-3xl">{$_('configuration')}</p>
       <p class="text-center">
-        Please provide the scan client token.<br /><a
+        {$_('please_provide_the_scan_client_token')}<br /><a
           target="_blank"
           class="underline"
-          href="https://docs.lauf-fuer-kaya.de/">See our configuration guide.</a
+          href="https://docs.lauf-fuer-kaya.de/">{$_('see_our_configuration_guide')}</a
         >
       </p>
       {#if error}
@@ -48,8 +52,7 @@
             class="text-white px-6 py-4 border-0 rounded relative bg-red-500 mt-2"
           >
             <span class="inline-block align-middle">
-              <b class="capitalize">Error!</b><br />The provided scan station
+              <b class="capitalize">{$_('error')}</b><br />{$_('the_provided_scan_station_token_is_invalid')}<br />{$_('please_check_your_token_and_try_again')}
-              token is invalid.<br />Please check your token and try again...
             </span>
           </div>
         {/if}
@@ -58,8 +61,7 @@
             class="text-white px-6 py-4 border-0 rounded relative bg-red-500 mt-2"
           >
             <span class="inline-block align-middle">
-              <b class="capitalize">Error!</b><br />The provided scan station is
+              <b class="capitalize">{$_('error')}</b><br />{$_('the_provided_scan_station_is_disabled')}
-              disabled.
             </span>
           </div>
         {/if}
@@ -90,11 +92,11 @@
         }}
       >
         <div class="flex flex-col pt-4">
-          <label for="token" class="text-lg">Client Token</label>
+          <label for="token" class="text-lg">{$_('client_token')}</label>
           <input
             type="text"
             id="token"
-            placeholder="Client Token"
+            :placeholder={$_('client_token')}
             bind:value={token}
             class:border-red-500={!isTokenValid}
             class:border-solid={!isTokenValid}
@@ -103,7 +105,7 @@
           />
         </div>
         {#if !isTokenValid}
-          <span class="text-sm">Please provide a valid client token...</span>
+          <span class="text-sm">{$_('please_provide_a_valid_client_token')}</span>
         {/if}
         <button
           disabled={!isTokenValid}
@@ -112,7 +114,7 @@
           id="configure"
           type="submit"
           class="bg-black text-white font-bold text-lg hover:bg-gray-700 p-2 mt-8 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-          >Configure</button
+          >{$_('configure')}</button
         >
       </form>
       <div class="text-center pt-12 pb-12">
@@ -139,16 +141,19 @@
         </p>
       </div>
     </div>
-
+{$locale}
+{JSON.stringify($locale)}
     <div class="w-full p-3">
       <div class="inline-block mr-2 mt-2">
         <button
           on:click={() => {
-            lang.set("de-DE");
+            // lang.set("de-DE");
+            locale.set("de-DE");
           }}
           type="button"
-          class:bg-blue-700={$lang === "de-DE"}
+          class:bg-black={$locale !== "de-DE"}
-          class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700"
+          class:bg-blue-700={JSON.stringify($locale) == "de-DE"}
+          class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700"
           >Deutsch
           <svg
             class="h-4 inline"
@@ -169,11 +174,13 @@
       <div class="inline-block mr-2 mt-2">
         <button
           on:click={() => {
-            lang.set("en-EN");
+            // lang.set("en-US");
+            locale.set("en-US");
           }}
           type="button"
-          class:bg-blue-700={$lang === "en-EN"}
+          class:bg-black={$locale !== "en-US"}
-          class="bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700"
+          class:bg-blue-700={$locale !== "en-US"}
+          class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md hover:bg-blue-700"
           >English
           <svg
             class="h-4 inline"

app/src/Scanner.svelte

@@ -1,5 +1,6 @@
 <script>
   import axios from "axios";
+import { _ } from "svelte-i18n";
   import { apikey, lang, page, stationinfo } from "./store.js";
   function init(el) {
     el.focus();
@@ -73,9 +74,22 @@
                 const minutes = (time.getMinutes() + "").padStart(2, "0");
                 const seconds = (time.getSeconds() + "").padStart(2, "0");
                 lastscan_time = hours + ":" + minutes + ":" + seconds;
-                response.data.lapTime = Math.floor(response.data.lapTime / 60) + 'min ' + (Math.floor(response.data.lapTime % 60) + "").padStart(2, "0") + "s"
+                response.data.lapTime =
+                  Math.floor(response.data.lapTime / 60) +
+                  "min " +
+                  (Math.floor(response.data.lapTime % 60) + "").padStart(
+                    2,
+                    "0"
+                  ) +
+                  "s";
                 lastscan_laptime = response.data.lapTime;
-                lastscan_totaldistance = Math.floor(response.data.runner.distance / 1000) + 'km ' + (Math.floor(response.data.runner.distance % 1000) + "").padStart(3, "0") + "m"
+                lastscan_totaldistance =
+                  Math.floor(response.data.runner.distance / 1000) +
+                  "km " +
+                  (
+                    Math.floor(response.data.runner.distance % 1000) + ""
+                  ).padStart(3, "0") +
+                  "m";
               })
               .catch((e) => {
                 lastscan_error = e.response.data.message;

app/src/locales/de.json

@@ -0,0 +1,9 @@
+{
+  "english": "Englisch",
+  "the_provided_scan_station_token_is_invalid": "",
+  "configuration": "Konfiguration",
+  "please_provide_the_scan_client_token": "Bitte gebe den Scan-Client-Token an.",
+  "the_provided_scan_station_is_disabled": "Die angegebene Scanstation ist deaktiviert.",
+  "see_our_configuration_guide": "Siehe dir unsere Konfigurationsanleitung an.",
+  "please_provide_a_valid_client_token": "Bitte gebe einen gültigen Client-Token an ..."
+}

app/src/locales/en.json

@@ -0,0 +1,14 @@
+{
+  "please_provide_the_scan_client_token": "Please provide the scan client token.",
+  "configuration": "Configuration",
+  "see_our_configuration_guide": "See our configuration guide.",
+  "error": "Error!",
+  "the_provided_scan_station_token_is_invalid": "The provided scan station token is invalid.",
+  "please_check_your_token_and_try_again": "Please check your token and try again...",
+  "the_provided_scan_station_is_disabled": "The provided scan station is disabled.",
+  "client_token": "Client Token",
+  "please_provide_a_valid_client_token": "Please provide a valid client token...",
+  "configure": "Configure",
+  "german": "Deutsch",
+  "english": "English"
+}

package.json

@@ -16,11 +16,11 @@
 		"@electron-forge/maker-rpm": "^6.0.0-beta.54",
 		"@electron-forge/maker-squirrel": "^6.0.0-beta.54",
 		"@electron-forge/maker-zip": "^6.0.0-beta.54",
-		"electron-nightly": "14.0.0-nightly.20210311",
+		"electron-nightly": "14.0.0-nightly.20210318"
-		"husky": "^5.1.3"
 	},
 	"dependencies": {
-		"electron-squirrel-startup": "^1.0.0"
+		"electron-squirrel-startup": "^1.0.0",
+		"svelte-i18n": "^3.3.7"
 	},
 	"config": {
 		"forge": {
@@ -28,7 +28,9 @@
 			"makers": [
 				{
 					"name": "@electron-forge/maker-zip",
-					"platforms": [ "darwin" ],
+					"platforms": [
+						"darwin"
+					],
 					"config": {
 						"name": "lfk__scanclient"
 					}