1
0
Fork 0
forked from btclock/webui

All translations complete

This commit is contained in:
Djuri Baars 2023-11-17 13:12:22 +01:00
parent 1f382fc8b4
commit 4471ab9ef4
10 changed files with 219 additions and 73 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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)
}
</script>
<Navbar expand="md">

View file

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

View file

@ -25,6 +25,10 @@
if (data.fgColor> 65535) {
data.fgColor = "65535";
}
if (data.bgColor> 65535) {
data.bgColor = "65535";
}
settings.set(data);
});
});

View file

@ -52,37 +52,37 @@ const forceFullRefresh = () => {
<CardBody>
<Form>
<Row>
<Label md={6} for="customText" size="sm">Text</Label>
<Label md={6} for="customText">{ $_('section.control.text') }</Label>
<Col md="6">
<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
</Col>
</Row>
<Button color="primary" on:click={setCustomText}>Show text</Button>
<Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
</Form>
<hr />
<h3>LEDs</h3>
<Form>
<Row>
<Label md={6} for="ledColorPicker" size="sm">LEDs color</Label>
<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
<Col md="6">
<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
</Col>
</Row>
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>Turn off</Button>
<Button color="primary" on:click={setLEDcolor}>Set color</Button>
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
<Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
</Form>
<hr />
<h3>System info</h3>
<h3>{ $_('section.control.systemInfo') }</h3>
<ul class="small system_info">
<li>Version: {$settings.gitRev}</li>
<li>Build time: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
<li>IP: {$settings.ip}</li>
<li>Hostname: {$settings.hostname}</li>
</ul>
<Button color="danger" id="restartBtn" on:click="{restartClock}">Restart</Button>
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">Force full refresh</Button>
<Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
</CardBody>
</Card>
</Col>

View file

@ -107,7 +107,7 @@
<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
<InputGroupText>{ $_('time.seconds') }</InputGroupText>
</InputGroup>
<FormText>Short amounts might shorten lifespan.</FormText>
<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
</Col>
</Row>
<Row>
@ -124,7 +124,7 @@
/>
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
</InputGroup>
<FormText>A restart is required to apply TZ offset.</FormText>
<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
</Col>
</Row>
<Row>
@ -181,18 +181,18 @@
<Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="{ $_('section.settings.useBigCharsMcap') }" />
</Col>
<Col md="6">
<Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') }" />
<Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') } ({ $_('restartRequired') })" />
</Col>
<Col md="6">
<Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') }" />
<Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') } ({ $_('restartRequired') })" />
</Col>
<Col md="6">
<Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') }" />
<Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') } ({ $_('restartRequired') })" />
</Col>
</Row>
<Row>
<h3>Screens</h3>
<h3>{ $_('section.settings.screens') }</h3>
{#if $settings.screens}
{#each $settings.screens as s}
<Col md="6">
@ -201,8 +201,8 @@
{/each}
{/if}
</Row>
<Button type="reset" color="secondary">Reset</Button>
<Button color="primary">Save</Button>
<Button type="reset" color="secondary">{ $_('button.reset') }</Button>
<Button color="primary">{ $_('button.save') }</Button>
</Form>
</CardBody>
</Card>

View file

@ -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;
}
</script>
<Col>
@ -92,21 +101,23 @@
</ButtonGroup>
<hr>
{#if $status.data}
<Rendered status="{$status}"></Rendered>
Screen cycle: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; running{:else}&#9208; stopped{/if}</a>
<section class={lightMode ? 'lightMode': ''}>
<Rendered status="{$status}"></Rendered>
</section>
{ $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; { $_('timer.running') }{:else}&#9208; { $_('timer.stopped') }{/if}</a>
{/if}
{/if}
<hr>
<Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
<div class="d-flex justify-content-between">
<div>Memory free </div>
<div>{ $_('section.status.memoryFree') } </div>
<div>{ Math.round($status.espFreeHeap / 1024) } / { Math.round($status.espHeapSize / 1024) } KiB</div>
</div>
<hr>
Uptime: {toUptimeString($status.espUptime)}
{ $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
<br>
<p>
WS Price connection:
{ $_('section.status.wsPriceConnection') }:
<span>
{#if $status.connectionStatus && $status.connectionStatus.price}
&#9989;
@ -115,7 +126,7 @@
{/if}
</span>
-
WS Mempool.space connection:
{ $_('section.status.wsMempoolConnection') }:
<span>
{#if $status.connectionStatus && $status.connectionStatus.blocks}
&#9989;
@ -124,7 +135,7 @@
{/if}
</span><br>
{#if $settings.fetchEurPrice}
<small>If you use "Fetch &euro; price" the WS Price connection will show &#10060; since it uses another data source.</small>
<small>{ $_('section.status.fetchEuroNote') }</small>
{/if}
</p>
</CardBody>