diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json index 95a92d5..2c8dc8b 100644 --- a/src/lib/locales/en.json +++ b/src/lib/locales/en.json @@ -15,9 +15,32 @@ "hostnamePrefix": "Hostname prefix", "StealFocusOnNewBlock": "Steal focus on new block", "useBigCharsMcap": "Use big characters for market cap", - "otaUpdates": "OTA updates (restart required)", - "enableMdns": "mDNS (restart required)", - "fetchEuroPrice": "Fetch € price (restart required)" + "otaUpdates": "OTA updates", + "enableMdns": "mDNS", + "fetchEuroPrice": "Fetch € price", + "shortAmountsWarning": "Short amounts might shorten lifespan.", + "tzOffsetHelpText": "A restart is required to apply TZ offset.", + "screens": "Screens" + }, + "control": { + "systemInfo": "System info", + "version": "Version", + "buildTime": "Build time", + "ledColor": "LED color", + "turnOff": "Turn off", + "setColor": "Set color", + "showText": "Show text", + "text": "Text", + "title": "Control" + }, + "status": { + "title": "Status", + "screenCycle": "Screen cycle", + "memoryFree": "Memory free", + "wsPriceConnection": "WS Price connection", + "wsMempoolConnection": "WS Mempool.space connection", + "fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌ since it uses another data source.", + "uptime": "Uptime" } }, "colors": { @@ -27,5 +50,16 @@ "time": { "minutes": "minutes", "seconds": "seconds" + }, + "restartRequired": "restart required", + "button": { + "save": "Save", + "reset": "Reset", + "restart": "Restart", + "forceFullRefresh": "Force full refresh" + }, + "timer": { + "running": "running", + "stopped": "stopped" } } diff --git a/src/lib/locales/es.json b/src/lib/locales/es.json index 8272457..bf534b8 100644 --- a/src/lib/locales/es.json +++ b/src/lib/locales/es.json @@ -1,7 +1,65 @@ { - "section": { - "settings": { - "title": "Configuración" - } + "section": { + "settings": { + "title": "Configuración", + "textColor": "Color de texto", + "backgroundColor": "Color de fondo", + "ledBrightness": "Brillo LED", + "screens": "Pantallas", + "shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.", + "fullRefreshEvery": "Actualización completa cada", + "timePerScreen": "Tiempo por pantalla", + "tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.", + "timezoneOffset": "Compensación de zona horaria", + "StealFocusOnNewBlock": "Presta atención al nuevo bloque", + "ledFlashOnBlock": "El LED parpadea con un bloque nuevo", + "useBigCharsMcap": "Utilice caracteres grandes para la market cap", + "fetchEuroPrice": "Obtener precio en €", + "timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios", + "ledPowerOnTest": "Prueba de encendido del LED", + "enableMdns": "mDNS", + "hostnamePrefix": "Prefijo de nombre de host", + "mempoolnstance": "Instancia de Mempool", + "otaUpdates": "Actualización por aire" + }, + "control": { + "turnOff": "Apagar", + "setColor": "Establecer el color", + "version": "Versión", + "ledColor": "color del LED", + "systemInfo": "Info del sistema", + "showText": "Poner texto", + "text": "Texto", + "title": "Control", + "buildTime": "Tiempo de construcción" + }, + "status": { + "memoryFree": "Memoria RAM libre", + "wsPriceConnection": "Conexión WebSocket Precio", + "wsMempoolConnection": "Conexión WebSocket Mempool.space", + "screenCycle": "Rotacion de pantalla", + "uptime": "Tiempo de funcionamiento", + "fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.", + "title": "Estado" } -} \ No newline at end of file + }, + "button": { + "save": "Guardar", + "reset": "Restaurar", + "restart": "Reiniciar", + "forceFullRefresh": "Forzar refresco" + }, + "colors": { + "black": "Negro", + "white": "Blanco" + }, + "restartRequired": "reinicio requerido", + "time": { + "minutes": "minutos", + "seconds": "segundos" + }, + "timer": { + "running": "funcionando", + "stopped": "detenido" + } +} diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json index ecf6cdf..7028b52 100644 --- a/src/lib/locales/nl.json +++ b/src/lib/locales/nl.json @@ -8,7 +8,39 @@ "timezoneOffset": "Tijdzone afwijking", "ledBrightness": "LED helderheid", "timePerScreen": "Tijd per scherm", - "fullRefreshEvery": "Volledig verversen" + "fullRefreshEvery": "Volledig verversen elke", + "shortAmountsWarning": "Lage waardes verkorten levensduur", + "tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.", + "enableMdns": "mDNS", + "ledPowerOnTest": "LED test bij aanzetten", + "StealFocusOnNewBlock": "Pak aandacht bij nieuw blok", + "ledFlashOnBlock": "Knipper led bij nieuw blok", + "useBigCharsMcap": "Gebruik grote tekens bij market cap", + "fetchEuroPrice": "Toon € prijs", + "screens": "Schermen", + "hostnamePrefix": "Hostnaam voorvoegsel", + "mempoolnstance": "Mempool instantie", + "otaUpdates": "OTA updates" + }, + "control": { + "systemInfo": "Systeeminformatie", + "version": "Versie", + "buildTime": "Bouwtijd", + "setColor": "Kleur instellen", + "turnOff": "Uitzetten", + "ledColor": "LED kleur", + "showText": "Toon tekst", + "text": "Tekst", + "title": "Besturing" + }, + "status": { + "title": "Status", + "memoryFree": "Geheugen vrij", + "screenCycle": "Scherm cyclus", + "wsPriceConnection": "WS Prijs verbinding", + "wsMempoolConnection": "WS Mempool.space verbinding", + "fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.", + "uptime": "Uptime" } }, "colors": { @@ -18,5 +50,16 @@ "time": { "minutes": "minuten", "seconds": "seconden" + }, + "restartRequired": "herstart nodig", + "button": { + "save": "Opslaan", + "reset": "Herstel", + "restart": "Herstart", + "forceFullRefresh": "Forceer scherm verversen" + }, + "timer": { + "running": "actief", + "stopped": "gestopt" } } diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss index 8b4a44d..3678098 100644 --- a/src/lib/style/app.scss +++ b/src/lib/style/app.scss @@ -9,6 +9,12 @@ $form-range-track-bg: #fff; $color-mode-type: media-query; $font-family-base: "Ubuntu"; +$font-size-base: 0.9rem; +//$font-size-sm: $font-size-base * .875 !default; +//$form-label-font-size: $font-size-base * .575 !default; +//$input-btn-font-size-sm: 0.4rem; +//$form-label-font-size: 0.4rem; +$input-font-size-sm: $font-size-base * .875; // $border-radius: .675rem; @@ -77,6 +83,17 @@ nav { padding: 10px; max-width: 700px; margin: 0 auto; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + align-content: stretch; + font-family: 'Oswald', sans-serif; + + >div { + padding: 5px; + } .digit, .splitText, @@ -97,44 +114,20 @@ nav { } } -.btclock { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - align-content: stretch; - font-family: 'Oswald', sans-serif; -} - -.btclock>div { - padding: 5px; -} - -.fg-ffff .btclock>div { +.darkMode .btclock>div { color: #fff; border-color: #fff; } -.bg-ffff .btclock>div { +.lightMode .btclock>div { background: #fff; } -.fg-f800 .btclock>div { - color: #f00; - border-color: #f00; -} - -.bg-f800 .btclock>div { - background: #f00; -} - -.fg-0 .btclock>div { +.lightMode .btclock>div { color: #000; - border-color: #000; } -.bg-0 .btclock>div { +.darkMode .btclock>div { background: #000; } @@ -180,15 +173,14 @@ nav { #customText { text-transform: uppercase; } - -#toggleTimerArea { - cursor: pointer; -} - .system_info { padding: 0; li { list-style: none; } +} + +.card-title { + margin-bottom: 0; } \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e2b6375..982cbc8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -12,12 +12,14 @@ DropdownToggle } from 'sveltestrap'; - import { locale, locales } from 'svelte-i18n'; + import { locale, locales, waitLocale } from 'svelte-i18n'; + import type { LayoutLoad } from './$types'; + import { browser } from '$app/environment'; export const setLocale = (lang: string) => () => { locale.set(lang); + localStorage.setItem("locale", lang) } - diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 3ba2108..a9bc794 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -7,10 +7,12 @@ import { locale, waitLocale } from 'svelte-i18n' import type { LayoutLoad } from './$types' export const load: LayoutLoad = async () => { - if (browser) { + if (browser && localStorage.getItem('locale')) { + locale.set(localStorage.getItem('locale')); + } else if (browser) { locale.set(window.navigator.language) } - await waitLocale() + await waitLocale(); } export const prerender = true; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b808ac4..0aefe4b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -25,6 +25,10 @@ if (data.fgColor> 65535) { data.fgColor = "65535"; } + + if (data.bgColor> 65535) { + data.bgColor = "65535"; + } settings.set(data); }); }); diff --git a/src/routes/Control.svelte b/src/routes/Control.svelte index 36979bc..ef16389 100644 --- a/src/routes/Control.svelte +++ b/src/routes/Control.svelte @@ -52,37 +52,37 @@ const forceFullRefresh = () => {
- + - +

LEDs

- + - - + +
-

System info

+

{ $_('section.control.systemInfo') }

- - + + diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte index d4557f8..994548a 100644 --- a/src/routes/Settings.svelte +++ b/src/routes/Settings.svelte @@ -107,7 +107,7 @@ { $_('time.seconds') } - Short amounts might shorten lifespan. + { $_('section.settings.shortAmountsWarning') } @@ -124,7 +124,7 @@ /> { $_('time.minutes') } - A restart is required to apply TZ offset. + { $_('section.settings.tzOffsetHelpText') } @@ -181,18 +181,18 @@ - + - + - + -

Screens

+

{ $_('section.settings.screens') }

{#if $settings.screens} {#each $settings.screens as s} @@ -201,8 +201,8 @@ {/each} {/if} - - + + diff --git a/src/routes/Status.svelte b/src/routes/Status.svelte index 326e192..83fd979 100644 --- a/src/routes/Status.svelte +++ b/src/routes/Status.svelte @@ -8,6 +8,7 @@ import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap'; import Rendered from './Rendered.svelte'; + export let settings; const status = writable({ data: ["L", "O", "A", "D", "I", "N", "G"], @@ -58,11 +59,16 @@ } let memoryFreePercent:number = 50; - + let lightMode:boolean = false; + status.subscribe((value) => { memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100); }); + settings.subscribe((value) => { + lightMode = value.bgColor > value.fgColor; + }); + const setScreen = (id:number) => () => { fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { }); } @@ -75,7 +81,10 @@ } } - export let settings; + const isLightMode = () => { + return $settings.bgColor > $settings.fgColor; + } + @@ -92,21 +101,23 @@
{#if $status.data} - - Screen cycle: {#if $status.timerRunning}⏵ running{:else}⏸ stopped{/if} +
+ +
+ { $_('section.status.screenCycle') }: {#if $status.timerRunning}⏵ { $_('timer.running') }{:else}⏸ { $_('timer.stopped') }{/if} {/if} {/if}
{ memoryFreePercent }%
-
Memory free
+
{ $_('section.status.memoryFree') }
{ Math.round($status.espFreeHeap / 1024) } / { Math.round($status.espHeapSize / 1024) } KiB
- Uptime: {toUptimeString($status.espUptime)} + { $_('section.status.uptime') }: {toUptimeString($status.espUptime)}

- WS Price connection: + { $_('section.status.wsPriceConnection') }: {#if $status.connectionStatus && $status.connectionStatus.price} ✅ @@ -115,7 +126,7 @@ {/if} - - WS Mempool.space connection: + { $_('section.status.wsMempoolConnection') }: {#if $status.connectionStatus && $status.connectionStatus.blocks} ✅ @@ -124,7 +135,7 @@ {/if}
{#if $settings.fetchEurPrice} - If you use "Fetch € price" the WS Price connection will show ❌ since it uses another data source. + { $_('section.status.fetchEuroNote') } {/if}