basic i18n

ref #1
2021-03-18 18:15:54 +01:00 · 2021-03-18 18:15:54 +01:00 · 16d9a6dda8
parent 0ebabe239c
commit 16d9a6dda8
9 changed files with 109 additions and 39 deletions
--- a/.vscode/i18n-ally-custom-framework.yml
+++ b/.vscode/i18n-ally-custom-framework.yml
@ -0,0 +1,7 @@
+languageIds:
+    - javascript
+    - svelte
+    - html
+monopoly: false
+refactorTemplates:
+    - "{$_('$1')}"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,4 @@
+{
+    "i18n-ally.localesPaths": "app/src/locales",
+    "i18n-ally.keystyle": "nested"
+}
--- a/app/package.json
+++ b/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-plugin-windicss": "^0.8.2"
+		"vite": "^2.1.2",
+		"vite-plugin-windicss": "^0.9.2"
 	}
 }
--- a/app/src/App.svelte
+++ b/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}
--- a/app/src/Login.svelte
+++ b/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
-              token is invalid.<br />Please check your token and try again...
+              <b class="capitalize">{$_('error')}</b><br />{$_('the_provided_scan_station_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
-              disabled.
+              <b class="capitalize">{$_('error')}</b><br />{$_('the_provided_scan_station_is_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 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-black={$locale !== "de-DE"}
+          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 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-black={$locale !== "en-US"}
+          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"
--- a/app/src/Scanner.svelte
+++ b/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();
@ -20,22 +21,22 @@
 </script>

 <div class="min-h-screen">
-<div class="bg-white shadow p-2">
-  <div class="flex flex-wrap -mx-1 overflow-hidden">
-    <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
-      <img src="/favicon.png" alt="" class="h-14 mx-auto" />
-    </div>
+  <div class="bg-white shadow p-2">
+    <div class="flex flex-wrap -mx-1 overflow-hidden">
+      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
+        <img src="/favicon.png" alt="" class="h-14 mx-auto" />
+      </div>

-    <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
-      Lauf Für Kaya! Scan 📷
-    </div>
+      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
+        Lauf Für Kaya! Scan 📷
+      </div>

-    <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
-      {JSON.parse($stationinfo).track.name} - #{JSON.parse($stationinfo).track
-        .id} - {JSON.parse($stationinfo).track.distance}m
+      <div class="my-1 px-1 w-1/3 overflow-hidden text-center self-center">
+        {JSON.parse($stationinfo).track.name} - #{JSON.parse($stationinfo).track
+          .id} - {JSON.parse($stationinfo).track.distance}m
+      </div>
    </div>
  </div>
-</div>

  <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
    {hours}:{minutes}:{seconds}
@ -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;
--- a/app/src/locales/de.json
+++ b/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 ..."
+}
--- a/app/src/locales/en.json
+++ b/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"
+}
--- a/package.json
+++ b/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",
-		"husky": "^5.1.3"
+		"electron-nightly": "14.0.0-nightly.20210318"
 	},
 	"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"
 					}