lfk/scanclient
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases 19 Wiki Activity

basic i18n

Browse Source 
ref #1
This commit is contained in:
Philipp Dormann
2021-03-18 18:15:54 +01:00
parent 0ebabe239c
commit 16d9a6dda8
9 changed files with 109 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.vscode/i18n-ally-custom-framework.yml vendored Normal file
View File

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

4
.vscode/settings.json vendored Normal file
View File

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

6
app/package.json
View File

@@ -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"
}
}

13
app/src/App.svelte
View File

@@ -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}

43
app/src/Login.svelte
View File

@@ -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"

42
app/src/Scanner.svelte
View File

@@ -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;

9
app/src/locales/de.json Normal file
View File

@@ -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 ..."
}

14
app/src/locales/en.json Normal file
View File

@@ -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"
}

10
package.json
View File

@@ -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"
}