forked from btclock/webui
Lint and format all files
This commit is contained in:
parent
3eaf897dbb
commit
d25284e3a4
22 changed files with 1357 additions and 1280 deletions
|
|
@ -1,21 +1,19 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
Collapse,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Collapse,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
DropdownToggle
|
||||
Navbar,
|
||||
NavbarBrand
|
||||
} from 'sveltestrap';
|
||||
|
||||
import { locale, locales, waitLocale } from 'svelte-i18n';
|
||||
import type { LayoutLoad } from './$types';
|
||||
import { browser } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
import { locale, locales } from 'svelte-i18n';
|
||||
|
||||
export const setLocale = (lang: string) => () => {
|
||||
locale.set(lang);
|
||||
|
|
@ -33,7 +31,7 @@
|
|||
const lowercaseCode = languageCode.toLowerCase();
|
||||
|
||||
// Check if the language code is in the flagMap
|
||||
if (flagMap.hasOwnProperty(lowercaseCode)) {
|
||||
if (Object.prototype.hasOwnProperty.call(flagMap, lowercaseCode)) {
|
||||
return flagMap[lowercaseCode];
|
||||
} else {
|
||||
// Return null for unsupported language codes
|
||||
|
|
@ -50,7 +48,7 @@
|
|||
|
||||
const lowercaseCode = languageCode.toLowerCase();
|
||||
|
||||
return languageNames.hasOwnProperty(lowercaseCode)
|
||||
return Object.prototype.hasOwnProperty.call(languageNames, lowercaseCode)
|
||||
? languageNames[lowercaseCode][lowercaseCode]
|
||||
: null;
|
||||
};
|
||||
|
|
@ -71,7 +69,9 @@
|
|||
<DropdownToggle nav caret>{getFlagEmoji($locale)} {getLanguageName($locale)}</DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
{#each $locales as locale}
|
||||
<DropdownItem on:click={setLocale(locale)}>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem>
|
||||
<DropdownItem on:click={setLocale(locale)}
|
||||
>{getFlagEmoji(locale)} {getLanguageName(locale)}</DropdownItem
|
||||
>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
import "$lib/style/app.scss";
|
||||
import '$lib/style/app.scss';
|
||||
|
||||
|
||||
import { browser } from '$app/environment'
|
||||
import '$lib/i18n' // Import to initialize. Important :)
|
||||
import { locale, waitLocale } from 'svelte-i18n'
|
||||
import type { LayoutLoad } from './$types'
|
||||
import { browser } from '$app/environment';
|
||||
import '$lib/i18n'; // Import to initialize. Important :)
|
||||
import { locale, waitLocale } from 'svelte-i18n';
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
if (browser && localStorage.getItem('locale')) {
|
||||
locale.set(localStorage.getItem('locale'));
|
||||
} else if (browser) {
|
||||
locale.set(window.navigator.language)
|
||||
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;
|
||||
export const ssr = false;
|
||||
export const csr = true;
|
||||
export const csr = true;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,44 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { Col, Container, Row } from 'sveltestrap';
|
||||
import { Container, Row } from 'sveltestrap';
|
||||
|
||||
import Control from './Control.svelte';
|
||||
import Status from './Status.svelte';
|
||||
import Settings from './Settings.svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import Control from './Control.svelte';
|
||||
import Settings from './Settings.svelte';
|
||||
import Status from './Status.svelte';
|
||||
|
||||
let settings = writable({
|
||||
fgColor: "0"
|
||||
});
|
||||
fgColor: '0'
|
||||
});
|
||||
|
||||
let status = writable({
|
||||
data: ["L", "O", "A", "D", "I", "N", "G"],
|
||||
espFreeHeap: 0,
|
||||
espHeapSize: 0,
|
||||
connectionStatus: {
|
||||
"price": false,
|
||||
"blocks": false
|
||||
},
|
||||
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
|
||||
espFreeHeap: 0,
|
||||
espHeapSize: 0,
|
||||
connectionStatus: {
|
||||
price: false,
|
||||
blocks: false
|
||||
},
|
||||
leds: []
|
||||
});
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
fetch( PUBLIC_BASE_URL + `/api/settings`)
|
||||
fetch(PUBLIC_BASE_URL + `/api/settings`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.fgColor = String(data.fgColor);
|
||||
data.bgColor = String(data.bgColor);
|
||||
data.timePerScreen = data.timerSeconds / 60;
|
||||
data.timePerScreen = data.timerSeconds / 60;
|
||||
|
||||
if (data.fgColor> 65535) {
|
||||
data.fgColor = "65535";
|
||||
}
|
||||
if (data.fgColor > 65535) {
|
||||
data.fgColor = '65535';
|
||||
}
|
||||
|
||||
if (data.bgColor> 65535) {
|
||||
data.bgColor = "65535";
|
||||
}
|
||||
if (data.bgColor > 65535) {
|
||||
data.bgColor = '65535';
|
||||
}
|
||||
settings.set(data);
|
||||
});
|
||||
|
||||
|
|
@ -49,12 +48,12 @@
|
|||
status.set(data);
|
||||
});
|
||||
|
||||
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
|
||||
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
|
||||
|
||||
evtSource.addEventListener('status', (e) => {
|
||||
let dataObj = (JSON.parse(e.data));
|
||||
status.set(dataObj);
|
||||
});
|
||||
evtSource.addEventListener('status', (e) => {
|
||||
let dataObj = JSON.parse(e.data);
|
||||
status.set(dataObj);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -65,7 +64,7 @@
|
|||
<Container fluid>
|
||||
<Row>
|
||||
<Control bind:settings bind:status></Control>
|
||||
<Status bind:settings bind:status></Status>
|
||||
<Status bind:settings bind:status></Status>
|
||||
<Settings bind:settings></Settings>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,78 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
import { onDestroy } from 'svelte';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import type { Subscriber, Unsubscriber } from 'svelte/motion';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
Col,
|
||||
Container,
|
||||
Form,
|
||||
Input,
|
||||
Label,
|
||||
Row
|
||||
} from 'sveltestrap';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Form,
|
||||
Input,
|
||||
Label,
|
||||
Row
|
||||
} from 'sveltestrap';
|
||||
|
||||
export let settings = {};
|
||||
export let customText:String;
|
||||
export let ledColor:String = "#FFCC00";
|
||||
export let status:Writable<{leds:[]}>;
|
||||
let ledStatus = [];
|
||||
let keepLedsSameColor = false;
|
||||
export let settings = {};
|
||||
export let customText: string;
|
||||
export let ledColor: string = '#FFCC00';
|
||||
export let status: Writable<{ leds: [] }>;
|
||||
let ledStatus = [];
|
||||
let keepLedsSameColor = false;
|
||||
|
||||
const setCustomText = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(err => { });
|
||||
};
|
||||
const setCustomText = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/text/${customText}`).catch(() => {});
|
||||
};
|
||||
|
||||
const checkSyncLeds = (e:Event) => {
|
||||
console.log('checksyncleds', keepLedsSameColor);
|
||||
if (keepLedsSameColor) {
|
||||
console.log(e.target.value);
|
||||
const checkSyncLeds = (e: Event) => {
|
||||
console.log('checksyncleds', keepLedsSameColor);
|
||||
if (keepLedsSameColor) {
|
||||
console.log(e.target.value);
|
||||
|
||||
ledStatus.forEach((element, i) => {
|
||||
if (ledStatus[i].hex != e.target_value) {
|
||||
ledStatus[i].hex = e.target.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
ledStatus.forEach((element, i) => {
|
||||
if (ledStatus[i].hex != e.target_value) {
|
||||
ledStatus[i].hex = e.target.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const setLEDcolor = () => {
|
||||
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(ledStatus)
|
||||
}
|
||||
).catch(err => { });
|
||||
};
|
||||
const setLEDcolor = () => {
|
||||
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(ledStatus)
|
||||
}).catch(() => {});
|
||||
};
|
||||
|
||||
const turnOffLeds = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(err => { });
|
||||
};
|
||||
const turnOffLeds = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights/off`).catch(() => {});
|
||||
};
|
||||
|
||||
const restartClock = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(err => { });
|
||||
}
|
||||
const restartClock = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/restart`).catch(() => {});
|
||||
};
|
||||
|
||||
const forceFullRefresh = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(err => { });
|
||||
}
|
||||
const forceFullRefresh = () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/full_refresh`).catch(() => {});
|
||||
};
|
||||
|
||||
let firstLedDataSubscription = () => {};
|
||||
let firstLedDataSubscription = () => {};
|
||||
|
||||
firstLedDataSubscription = status.subscribe(async(val) => {
|
||||
if (val && val.leds) {
|
||||
ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
|
||||
firstLedDataSubscription();
|
||||
}
|
||||
})
|
||||
firstLedDataSubscription = status.subscribe(async (val) => {
|
||||
if (val && val.leds) {
|
||||
ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));
|
||||
firstLedDataSubscription();
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(firstLedDataSubscription);
|
||||
onDestroy(firstLedDataSubscription);
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
|
|
@ -87,48 +83,72 @@ onDestroy(firstLedDataSubscription);
|
|||
<CardBody>
|
||||
<Form>
|
||||
<Row>
|
||||
<Label md={6} for="customText">{ $_('section.control.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}" />
|
||||
<Input
|
||||
type="text"
|
||||
id="customText"
|
||||
bind:value={customText}
|
||||
bsSize="sm"
|
||||
maxLength={$settings.numScreens}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
|
||||
|
||||
<Button color="primary" on:click={setCustomText}>{$_('section.control.showText')}</Button>
|
||||
</Form>
|
||||
<hr />
|
||||
<h3>LEDs</h3>
|
||||
<Form>
|
||||
<Form>
|
||||
<Row>
|
||||
<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
|
||||
<Label md={6} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
|
||||
<Col md="6">
|
||||
<Row class="justify-content-between">
|
||||
{#if ledStatus}
|
||||
{#each ledStatus as led, i }
|
||||
<Col>
|
||||
<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
|
||||
</Col>
|
||||
{/each}
|
||||
{#each ledStatus as led, i}
|
||||
<Col>
|
||||
<Input
|
||||
type="color"
|
||||
id="ledColorPicker[{i}]"
|
||||
bind:value={led.hex}
|
||||
class="mx-auto"
|
||||
on:change={checkSyncLeds}
|
||||
/>
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
<Col>
|
||||
<Input bind:checked={keepLedsSameColor} type="switch" class="mx-auto" label="{ $_('sections.control.keepSameColor') }" />
|
||||
<Input
|
||||
bind:checked={keepLedsSameColor}
|
||||
type="switch"
|
||||
class="mx-auto"
|
||||
label={$_('sections.control.keepSameColor')}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
|
||||
<Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</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>{ $_('section.control.systemInfo') }</h3>
|
||||
<h3>{$_('section.control.systemInfo')}</h3>
|
||||
<ul class="small system_info">
|
||||
<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
|
||||
<li>{ $_('section.control.buildTime') }: {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>{ $_('section.control.hostname') }: {$settings.hostname}</li>
|
||||
<li>{$_('section.control.hostname')}: {$settings.hostname}</li>
|
||||
</ul>
|
||||
<Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
|
||||
<Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</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>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
<script lang="ts">
|
||||
export let status = {};
|
||||
export let status = {};
|
||||
|
||||
const isSplitText = (str:String) => {
|
||||
return str.includes("/");
|
||||
}
|
||||
const isSplitText = (str: string) => {
|
||||
return str.includes('/');
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="btcclock-wrapper" id="btcclock-wrapper">
|
||||
<div class="btclock">
|
||||
{#each status.data as char}
|
||||
{#if isSplitText(char)}
|
||||
<div class="splitText">
|
||||
{#each char.split("/") as part}
|
||||
<div class="flex-items">{part}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if char.length === 0 || char === " "}
|
||||
<div class="digit"> </div>
|
||||
{:else}
|
||||
<div class="digit">{char}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btclock">
|
||||
{#each status.data as char}
|
||||
{#if isSplitText(char)}
|
||||
<div class="splitText">
|
||||
{#each char.split('/') as part}
|
||||
<div class="flex-items">{part}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if char.length === 0 || char === ' '}
|
||||
<div class="digit"> </div>
|
||||
{:else}
|
||||
<div class="digit">{char}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,41 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { readonly, writable } from 'svelte/store';
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
import {
|
||||
Col,
|
||||
Container,
|
||||
Row,
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Form,
|
||||
FormGroup,
|
||||
FormText,
|
||||
Label,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputGroupText,
|
||||
Button
|
||||
Label,
|
||||
Row
|
||||
} from 'sveltestrap';
|
||||
|
||||
export let settings;
|
||||
|
||||
const onSave = async(e:Event) => {
|
||||
e.preventDefault();
|
||||
let formSettings = $settings;
|
||||
const onSave = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
let formSettings = $settings;
|
||||
|
||||
delete formSettings["gitRev"];
|
||||
delete formSettings["ip"];
|
||||
delete formSettings["lastBuildTime"];
|
||||
delete formSettings['gitRev'];
|
||||
delete formSettings['ip'];
|
||||
delete formSettings['lastBuildTime'];
|
||||
|
||||
const res = await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
|
||||
await fetch(`${PUBLIC_BASE_URL}/api/json/settings`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formSettings)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
|
|
@ -51,7 +46,9 @@
|
|||
<CardBody>
|
||||
<Form on:submit={onSave}>
|
||||
<Row>
|
||||
<Label md={6} for="fgColor" size="sm">{$_('section.settings.textColor', { default: 'Text color' })}</Label>
|
||||
<Label md={6} for="fgColor" size="sm"
|
||||
>{$_('section.settings.textColor', { default: 'Text color' })}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="select"
|
||||
|
|
@ -61,13 +58,13 @@
|
|||
bsSize="sm"
|
||||
class="form-select-sm"
|
||||
>
|
||||
<option value="0">{ $_('colors.black') }</option>
|
||||
<option value="65535">{ $_('colors.white') }</option>
|
||||
<option value="0">{$_('colors.black')}</option>
|
||||
<option value="65535">{$_('colors.white')}</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="bgColor" size="sm">{ $_('section.settings.backgroundColor') }</Label>
|
||||
<Label md={6} for="bgColor" size="sm">{$_('section.settings.backgroundColor')}</Label>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="select"
|
||||
|
|
@ -77,41 +74,45 @@
|
|||
bsSize="sm"
|
||||
class="form-select-sm"
|
||||
>
|
||||
<option value="0">{ $_('colors.black') }</option>
|
||||
<option value="65535">{ $_('colors.white') }</option>
|
||||
<option value="0">{$_('colors.black')}</option>
|
||||
<option value="65535">{$_('colors.white')}</option>
|
||||
</Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="timePerScreen" size="sm">{ $_('section.settings.timePerScreen') }</Label>
|
||||
<Label md={6} for="timePerScreen" size="sm">{$_('section.settings.timePerScreen')}</Label>
|
||||
<Col md="6">
|
||||
<InputGroup size="sm">
|
||||
<Input type="number" min={1} step="1" bind:value={$settings.timePerScreen} />
|
||||
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
|
||||
<InputGroupText>{$_('time.minutes')}</InputGroupText>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="fullRefreshMin" size="sm">{ $_('section.settings.fullRefreshEvery') }</Label>
|
||||
<Label md={6} for="fullRefreshMin" size="sm"
|
||||
>{$_('section.settings.fullRefreshEvery')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<InputGroup size="sm">
|
||||
<Input type="number" min={1} step="1" bind:value={$settings.fullRefreshMin} />
|
||||
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
|
||||
<InputGroupText>{$_('time.minutes')}</InputGroupText>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="minSecPriceUpd" size="sm">{ $_('section.settings.timeBetweenPriceUpdates') }</Label>
|
||||
<Label md={6} for="minSecPriceUpd" size="sm"
|
||||
>{$_('section.settings.timeBetweenPriceUpdates')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<InputGroup size="sm">
|
||||
<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
|
||||
<InputGroupText>{ $_('time.seconds') }</InputGroupText>
|
||||
<InputGroupText>{$_('time.seconds')}</InputGroupText>
|
||||
</InputGroup>
|
||||
<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
|
||||
<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="tzOffset" size="sm">{ $_('section.settings.timezoneOffset') }</Label>
|
||||
<Label md={6} for="tzOffset" size="sm">{$_('section.settings.timezoneOffset')}</Label>
|
||||
<Col md="6">
|
||||
<InputGroup size="sm">
|
||||
<Input
|
||||
|
|
@ -122,19 +123,19 @@
|
|||
id="tzOffset"
|
||||
bind:value={$settings.tzOffset}
|
||||
/>
|
||||
<InputGroupText>{ $_('time.minutes') }</InputGroupText>
|
||||
<InputGroupText>{$_('time.minutes')}</InputGroupText>
|
||||
</InputGroup>
|
||||
<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
|
||||
<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="ledBrightness" size="sm">{ $_('section.settings.ledBrightness') }</Label>
|
||||
<Label md={6} for="ledBrightness" size="sm">{$_('section.settings.ledBrightness')}</Label>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="range"
|
||||
name="ledBrightness"
|
||||
id="ledBrightness"
|
||||
bind:value={$settings.ledBrightness}
|
||||
bind:value={$settings.ledBrightness}
|
||||
min={0}
|
||||
max={255}
|
||||
step={1}
|
||||
|
|
@ -142,67 +143,117 @@
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
|
||||
<Col md="6">
|
||||
<Label md={6} for="mempoolInstance" size="sm"
|
||||
>{$_('section.settings.mempoolnstance')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="text"
|
||||
bind:value={$settings.mempoolInstance}
|
||||
name="mempoolInstance"
|
||||
id="mempoolInstance"
|
||||
bsSize="sm"
|
||||
>
|
||||
</Input>
|
||||
></Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
|
||||
<Col md="6">
|
||||
<Label md={6} for="hostnamePrefix" size="sm"
|
||||
>{$_('section.settings.hostnamePrefix')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="text"
|
||||
bind:value={$settings.hostnamePrefix}
|
||||
name="hostnamePrefix"
|
||||
id="hostnamePrefix"
|
||||
bsSize="sm"
|
||||
>
|
||||
</Input>
|
||||
></Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md="6">
|
||||
<Input
|
||||
id="ledTestOnPower"
|
||||
bind:checked={$settings.ledTestOnPower}
|
||||
type="switch"
|
||||
bsSize="sm"
|
||||
label={$_('section.settings.ledPowerOnTest')}
|
||||
/>
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input
|
||||
id="ledFlashOnUpd"
|
||||
bind:checked={$settings.ledFlashOnUpd}
|
||||
type="switch"
|
||||
bsSize="sm"
|
||||
label={$_('section.settings.ledFlashOnBlock')}
|
||||
/>
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input
|
||||
id="stealFocus"
|
||||
bind:checked={$settings.stealFocus}
|
||||
type="switch"
|
||||
bsSize="sm"
|
||||
label={$_('section.settings.StealFocusOnNewBlock')}
|
||||
/>
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<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')} ({$_('restartRequired')})"
|
||||
/>
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<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')} ({$_('restartRequired')})"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md="6">
|
||||
<Input id="ledTestOnPower" bind:checked={$settings.ledTestOnPower} type="switch" bsSize="sm" label="{ $_('section.settings.ledPowerOnTest') }" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="ledFlashOnUpd" bind:checked={$settings.ledFlashOnUpd} type="switch" bsSize="sm" label="{ $_('section.settings.ledFlashOnBlock') }" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<Input id="stealFocus" bind:checked={$settings.stealFocus} type="switch" bsSize="sm" label="{ $_('section.settings.StealFocusOnNewBlock') }" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<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') } ({ $_('restartRequired') })" />
|
||||
</Col>
|
||||
<Col md="6">
|
||||
<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') } ({ $_('restartRequired') })" />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<h3>{ $_('section.settings.screens') }</h3>
|
||||
{#if $settings.screens}
|
||||
{#each $settings.screens as s}
|
||||
<Col md="6">
|
||||
<Input id="screens_{s.id}" bind:checked={s.enabled} type="switch" bsSize="sm" label="{s.name}" />
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
</Row>
|
||||
<Button type="reset" color="secondary">{ $_('button.reset') }</Button>
|
||||
<Button color="primary">{ $_('button.save') }</Button>
|
||||
<Row>
|
||||
<h3>{$_('section.settings.screens')}</h3>
|
||||
{#if $settings.screens}
|
||||
{#each $settings.screens as s}
|
||||
<Col md="6">
|
||||
<Input
|
||||
id="screens_{s.id}"
|
||||
bind:checked={s.enabled}
|
||||
type="switch"
|
||||
bsSize="sm"
|
||||
label={s.name}
|
||||
/>
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
</Row>
|
||||
<Button type="reset" color="secondary">{$_('button.reset')}</Button>
|
||||
<Button color="primary">{$_('button.save')}</Button>
|
||||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,71 @@
|
|||
<script lang="ts">
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
import { PUBLIC_BASE_URL } from '$env/static/public';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { writable, type Writable } from 'svelte/store';
|
||||
import { Row, Input, Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
|
||||
import { writable } from 'svelte/store';
|
||||
import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Input,
|
||||
Progress,
|
||||
Row
|
||||
} from 'sveltestrap';
|
||||
import Rendered from './Rendered.svelte';
|
||||
|
||||
export let settings;
|
||||
export let status:Writable<{}>;
|
||||
|
||||
const toTime = (secs:Number) => {
|
||||
var hours = Math.floor(secs / (60 * 60));
|
||||
export let settings;
|
||||
export let status: writable<object>;
|
||||
|
||||
var divisor_for_minutes = secs % (60 * 60);
|
||||
var minutes = Math.floor(divisor_for_minutes / 60);
|
||||
const toTime = (secs: number) => {
|
||||
var hours = Math.floor(secs / (60 * 60));
|
||||
|
||||
var divisor_for_seconds = divisor_for_minutes % 60;
|
||||
var seconds = Math.ceil(divisor_for_seconds);
|
||||
var divisor_for_minutes = secs % (60 * 60);
|
||||
var minutes = Math.floor(divisor_for_minutes / 60);
|
||||
|
||||
var obj = {
|
||||
"h": hours,
|
||||
"m": minutes,
|
||||
"s": seconds
|
||||
};
|
||||
return obj;
|
||||
}
|
||||
var divisor_for_seconds = divisor_for_minutes % 60;
|
||||
var seconds = Math.ceil(divisor_for_seconds);
|
||||
|
||||
const toUptimeString = (secs:Number):String => {
|
||||
let time = toTime(secs);
|
||||
var obj = {
|
||||
h: hours,
|
||||
m: minutes,
|
||||
s: seconds
|
||||
};
|
||||
return obj;
|
||||
};
|
||||
|
||||
return `${time.h}h ${time.m}m ${time.s}s`;
|
||||
}
|
||||
const toUptimestring = (secs: number): string => {
|
||||
let time = toTime(secs);
|
||||
|
||||
let memoryFreePercent:number = 50;
|
||||
let lightMode:boolean = false;
|
||||
return `${time.h}h ${time.m}m ${time.s}s`;
|
||||
};
|
||||
|
||||
status.subscribe((value: {}) => {
|
||||
memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
|
||||
});
|
||||
let memoryFreePercent: number = 50;
|
||||
let lightMode: boolean = false;
|
||||
|
||||
settings.subscribe((value: {}) => {
|
||||
lightMode = value.bgColor > value.fgColor;
|
||||
});
|
||||
status.subscribe((value: object) => {
|
||||
memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
|
||||
});
|
||||
|
||||
const setScreen = (id:number) => () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
|
||||
}
|
||||
settings.subscribe((value: object) => {
|
||||
lightMode = value.bgColor > value.fgColor;
|
||||
});
|
||||
|
||||
const toggleTimer = (currentStatus:boolean) => () => {
|
||||
if (currentStatus) {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
|
||||
} else {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
|
||||
}
|
||||
}
|
||||
|
||||
const isLightMode = () => {
|
||||
return $settings.bgColor > $settings.fgColor;
|
||||
}
|
||||
const setScreen = (id: number) => () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
|
||||
};
|
||||
|
||||
const toggleTimer = (currentStatus: boolean) => (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (currentStatus) {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/action/pause`);
|
||||
} else {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
|
|
@ -68,64 +74,86 @@
|
|||
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
{#if $settings.screens}
|
||||
<div class="d-flex justify-content-center">
|
||||
<ButtonGroup size="sm">
|
||||
{#each $settings.screens as s}
|
||||
<Button color="outline-primary" active={$status.currentScreen == s.id} on:click={setScreen(s.id)}>{s.name}</Button>
|
||||
{/each}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<hr>
|
||||
{#if $status.data}
|
||||
<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>
|
||||
<Row class="justify-content-evenly">
|
||||
{#if $status.leds}
|
||||
{#each $status.leds as led}
|
||||
<Col>
|
||||
<Input type="color" id="ledColorPicker" bind:value="{led.hex}" class="mx-auto" disabled />
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
</Row>
|
||||
<hr>
|
||||
<Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>{ $_('section.status.memoryFree') } </div>
|
||||
<div>{ Math.round($status.espFreeHeap / 1024) } / { Math.round($status.espHeapSize / 1024) } KiB</div>
|
||||
</div>
|
||||
<hr>
|
||||
{ $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
|
||||
<br>
|
||||
<p>
|
||||
{ $_('section.status.wsPriceConnection') }:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.price}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</span>
|
||||
-
|
||||
{ $_('section.status.wsMempoolConnection') }:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.blocks}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</span><br>
|
||||
{#if $settings.fetchEurPrice}
|
||||
<small>{ $_('section.status.fetchEuroNote') }</small>
|
||||
{/if}
|
||||
</p>
|
||||
</CardBody>
|
||||
|
||||
</Card>
|
||||
{#if $settings.screens}
|
||||
<div class="d-flex justify-content-center">
|
||||
<ButtonGroup size="sm">
|
||||
{#each $settings.screens as s}
|
||||
<Button
|
||||
color="outline-primary"
|
||||
active={$status.currentScreen == s.id}
|
||||
on:click={setScreen(s.id)}>{s.name}</Button
|
||||
>
|
||||
{/each}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<hr />
|
||||
{#if $status.data}
|
||||
<section class={lightMode ? 'lightMode' : ''}>
|
||||
<Rendered status={$status}></Rendered>
|
||||
</section>
|
||||
{$_('section.status.screenCycle')}:
|
||||
<a
|
||||
href={'#'}
|
||||
style="cursor: pointer"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-pressed="false"
|
||||
on:click={toggleTimer($status.timerRunning)}
|
||||
>{#if $status.timerRunning}⏵ {$_('timer.running')}{:else}⏸ {$_(
|
||||
'timer.stopped'
|
||||
)}{/if}</a
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
<hr />
|
||||
<Row class="justify-content-evenly">
|
||||
{#if $status.leds}
|
||||
{#each $status.leds as led}
|
||||
<Col>
|
||||
<Input
|
||||
type="color"
|
||||
id="ledColorPicker"
|
||||
bind:value={led.hex}
|
||||
class="mx-auto"
|
||||
disabled
|
||||
/>
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
</Row>
|
||||
<hr />
|
||||
<Progress striped value={memoryFreePercent}>{memoryFreePercent}%</Progress>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>{$_('section.status.memoryFree')}</div>
|
||||
<div>
|
||||
{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
|
||||
<br />
|
||||
<p>
|
||||
{$_('section.status.wsPriceConnection')}:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.price}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</span>
|
||||
-
|
||||
{$_('section.status.wsMempoolConnection')}:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.blocks}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</span><br />
|
||||
{#if $settings.fetchEurPrice}
|
||||
<small>{$_('section.status.fetchEuroNote')}</small>
|
||||
{/if}
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,31 @@
|
|||
<script lang="ts">
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { Col, Container, Row, Button } from 'sveltestrap';
|
||||
import { Button, Container } from 'sveltestrap';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
//import * as swaggerJson from '../../../static/swagger.json';
|
||||
// import SwaggerUI from 'swagger-ui';
|
||||
import 'swagger-ui/dist/swagger-ui.css';
|
||||
|
||||
let swaggerLoaded:boolean = false;
|
||||
let swaggerLoaded: boolean = false;
|
||||
|
||||
onMount(async () => {
|
||||
// @ts-ignore
|
||||
loadSwagger();
|
||||
});
|
||||
|
||||
const loadSwagger = () => {
|
||||
if (!SwaggerUIBundle)
|
||||
return;
|
||||
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
|
||||
if (!SwaggerUIBundle) return; // eslint-disable-line
|
||||
swaggerLoaded = true;
|
||||
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
|
||||
// eslint-disable-next-line
|
||||
window.ui = SwaggerUIBundle({
|
||||
url: '/swagger.json',
|
||||
dom_id: '#swagger-ui-container',
|
||||
presets: [
|
||||
// @ts-ignore
|
||||
SwaggerUIBundle.presets.apis,
|
||||
// @ts-ignore
|
||||
SwaggerUIStandalonePreset
|
||||
],
|
||||
// layout: "StandaloneLayout",
|
||||
});
|
||||
}
|
||||
|
||||
url: '/swagger.json',
|
||||
dom_id: '#swagger-ui-container',
|
||||
presets: [
|
||||
// @ts-expect-error: SwaggerUIBundle is loaded from external script from CDN
|
||||
SwaggerUIBundle.presets.apis, // eslint-disable-line
|
||||
// @ts-expect-error: SwaggerUIStandalonePreset is loaded from external script from CDN
|
||||
SwaggerUIStandalonePreset // eslint-disable-line
|
||||
]
|
||||
// layout: "StandaloneLayout",
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -54,11 +49,9 @@
|
|||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
|
||||
</svelte:head>
|
||||
|
||||
<Container fluid class="bg-light">
|
||||
<section class:invisible={swaggerLoaded}><Button on:click="{loadSwagger}">Load</Button></section>
|
||||
<section class:invisible={swaggerLoaded}><Button on:click={loadSwagger}>Load</Button></section>
|
||||
<div id="swagger-ui-container" />
|
||||
|
||||
</Container>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue