forked from btclock/webui
All translations complete
This commit is contained in:
parent
1f382fc8b4
commit
4471ab9ef4
10 changed files with 219 additions and 73 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@
|
|||
if (data.fgColor> 65535) {
|
||||
data.fgColor = "65535";
|
||||
}
|
||||
|
||||
if (data.bgColor> 65535) {
|
||||
data.bgColor = "65535";
|
||||
}
|
||||
settings.set(data);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}⏵ running{:else}⏸ 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}⏵ { $_('timer.running') }{:else}⏸ { $_('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}
|
||||
✅
|
||||
|
|
@ -115,7 +126,7 @@
|
|||
{/if}
|
||||
</span>
|
||||
-
|
||||
WS Mempool.space connection:
|
||||
{ $_('section.status.wsMempoolConnection') }:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.blocks}
|
||||
✅
|
||||
|
|
@ -124,7 +135,7 @@
|
|||
{/if}
|
||||
</span><br>
|
||||
{#if $settings.fetchEurPrice}
|
||||
<small>If you use "Fetch € price" the WS Price connection will show ❌ since it uses another data source.</small>
|
||||
<small>{ $_('section.status.fetchEuroNote') }</small>
|
||||
{/if}
|
||||
</p>
|
||||
</CardBody>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue