Lint and format all files
This commit is contained in:
Djuri Baars
parent
3eaf897dbb
commit
d25284e3a4
@ -18,6 +18,9 @@ module.exports = {
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
rules: {
|
||||
'no-empty': ['error', { allowEmptyCatch: true }]
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
|
||||
10
.github/workflows/workflow.yml
vendored
10
.github/workflows/workflow.yml
vendored
@ -3,7 +3,7 @@ name: BTClock WebUI CI
|
||||
on: [push]
|
||||
|
||||
env:
|
||||
PUBLIC_BASE_URL: ""
|
||||
PUBLIC_BASE_URL: ''
|
||||
|
||||
jobs:
|
||||
check-changes:
|
||||
@ -12,13 +12,13 @@ jobs:
|
||||
all_changed_and_modified_files_count: ${{ steps.changed-files.outputs.all_changed_and_modified_files_count }}
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v2
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Get changed files count
|
||||
id: changed-files
|
||||
uses: tj-actions/changed-files@v40.1.1
|
||||
with:
|
||||
files_ignore: "doc/**,README.md,Dockerfile,.*"
|
||||
files_ignore: 'doc/**,README.md,Dockerfile,.*'
|
||||
files_ignore_separator: ','
|
||||
- name: Print changed files count
|
||||
run: >
|
||||
@ -33,7 +33,7 @@ jobs:
|
||||
contents: write
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
- uses: actions/setup-node@v3
|
||||
@ -84,7 +84,7 @@ jobs:
|
||||
tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
|
||||
commit: main
|
||||
name: release-${{ steps.getBlockHeight.outputs.blockHeight }}
|
||||
artifacts: "littlefs.bin,webui.tgz"
|
||||
artifacts: 'littlefs.bin,webui.tgz'
|
||||
allowUpdates: true
|
||||
removeArtifacts: true
|
||||
makeLatest: true
|
||||
@ -8,7 +8,7 @@ node_modules
|
||||
!.env.example
|
||||
dist/
|
||||
build_gz
|
||||
|
||||
dist/**
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import type { Handle } from '@sveltejs/kit'
|
||||
import { locale } from 'svelte-i18n'
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
import { locale } from 'svelte-i18n';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const lang = event.request.headers.get('accept-language')?.split(',')[0]
|
||||
const lang = event.request.headers.get('accept-language')?.split(',')[0];
|
||||
if (lang) {
|
||||
locale.set(lang)
|
||||
locale.set(lang);
|
||||
}
|
||||
return resolve(event)
|
||||
}
|
||||
return resolve(event);
|
||||
};
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
import { browser } from '$app/environment'
|
||||
import { init, register } from 'svelte-i18n'
|
||||
import { browser } from '$app/environment';
|
||||
import { init, register } from 'svelte-i18n';
|
||||
|
||||
const defaultLocale = 'en'
|
||||
const defaultLocale = 'en';
|
||||
|
||||
register('en', () => import('../locales/en.json'))
|
||||
register('nl', () => import('../locales/nl.json'))
|
||||
register('es', () => import('../locales/es.json'))
|
||||
register('en', () => import('../locales/en.json'));
|
||||
register('nl', () => import('../locales/nl.json'));
|
||||
register('es', () => import('../locales/es.json'));
|
||||
|
||||
init({
|
||||
fallbackLocale: defaultLocale,
|
||||
initialLocale: browser ? browser && localStorage.getItem('locale') ? localStorage.getItem('locale') : window.navigator.language : defaultLocale,
|
||||
})
|
||||
initialLocale: browser
|
||||
? browser && localStorage.getItem('locale')
|
||||
? localStorage.getItem('locale')
|
||||
: window.navigator.language
|
||||
: defaultLocale
|
||||
});
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
@import "../node_modules/bootstrap/scss/variables-dark";
|
||||
@import '../node_modules/bootstrap/scss/functions';
|
||||
@import '../node_modules/bootstrap/scss/variables';
|
||||
@import '../node_modules/bootstrap/scss/variables-dark';
|
||||
|
||||
//@import "@fontsource/antonio/latin-400.css";
|
||||
@import "@fontsource/ubuntu/latin-400.css";
|
||||
@import "@fontsource/oswald/latin-400.css";
|
||||
@import '@fontsource/ubuntu/latin-400.css';
|
||||
@import '@fontsource/oswald/latin-400.css';
|
||||
|
||||
$form-range-track-bg: #fff;
|
||||
$color-mode-type: media-query;
|
||||
$font-family-base: "Ubuntu";
|
||||
$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;
|
||||
$input-font-size-sm: $font-size-base * 0.875;
|
||||
|
||||
// $border-radius: .675rem;
|
||||
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/maps";
|
||||
@import "../node_modules/bootstrap/scss/utilities";
|
||||
@import '../node_modules/bootstrap/scss/mixins';
|
||||
@import '../node_modules/bootstrap/scss/maps';
|
||||
@import '../node_modules/bootstrap/scss/utilities';
|
||||
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
@import "../node_modules/bootstrap/scss/reboot";
|
||||
@import "../node_modules/bootstrap/scss/type";
|
||||
@import "../node_modules/bootstrap/scss/containers";
|
||||
@import "../node_modules/bootstrap/scss/grid";
|
||||
@import "../node_modules/bootstrap/scss/forms";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
@import "../node_modules/bootstrap/scss/button-group";
|
||||
@import "../node_modules/bootstrap/scss/pagination";
|
||||
@import '../node_modules/bootstrap/scss/root';
|
||||
@import '../node_modules/bootstrap/scss/reboot';
|
||||
@import '../node_modules/bootstrap/scss/type';
|
||||
@import '../node_modules/bootstrap/scss/containers';
|
||||
@import '../node_modules/bootstrap/scss/grid';
|
||||
@import '../node_modules/bootstrap/scss/forms';
|
||||
@import '../node_modules/bootstrap/scss/buttons';
|
||||
@import '../node_modules/bootstrap/scss/button-group';
|
||||
@import '../node_modules/bootstrap/scss/pagination';
|
||||
|
||||
@import "../node_modules/bootstrap/scss/dropdown";
|
||||
@import '../node_modules/bootstrap/scss/dropdown';
|
||||
|
||||
@import "../node_modules/bootstrap/scss/navbar";
|
||||
@import "../node_modules/bootstrap/scss/nav";
|
||||
@import "../node_modules/bootstrap/scss/card";
|
||||
@import "../node_modules/bootstrap/scss/progress";
|
||||
@import '../node_modules/bootstrap/scss/navbar';
|
||||
@import '../node_modules/bootstrap/scss/nav';
|
||||
@import '../node_modules/bootstrap/scss/card';
|
||||
@import '../node_modules/bootstrap/scss/progress';
|
||||
|
||||
@import "../node_modules/bootstrap/scss/helpers";
|
||||
@import "../node_modules/bootstrap/scss/utilities/api";
|
||||
@import '../node_modules/bootstrap/scss/helpers';
|
||||
@import '../node_modules/bootstrap/scss/utilities/api';
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
html {
|
||||
@ -48,10 +48,15 @@ $input-font-size-sm: $font-size-base * .875;
|
||||
}
|
||||
|
||||
button.btn,
|
||||
input[type="button"].btn,
|
||||
input[type="submit"].btn,
|
||||
input[type="reset"].btn {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
|
||||
input[type='button'].btn,
|
||||
input[type='submit'].btn,
|
||||
input[type='reset'].btn {
|
||||
@include button-size(
|
||||
$btn-padding-y-sm,
|
||||
$btn-padding-x-sm,
|
||||
$font-size-sm,
|
||||
$btn-border-radius-sm
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,7 +66,6 @@ $input-font-size-sm: $font-size-base * .875;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@ -93,7 +97,7 @@ nav {
|
||||
align-content: stretch;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
|
||||
>div {
|
||||
> div {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@ -116,26 +120,26 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.darkMode .btclock>div {
|
||||
.darkMode .btclock > div {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.lightMode .btclock>div {
|
||||
.lightMode .btclock > div {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.lightMode .btclock>div {
|
||||
.lightMode .btclock > div {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.darkMode .btclock>div {
|
||||
.darkMode .btclock > div {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.splitText {
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 1.0rem;
|
||||
font-size: 1rem;
|
||||
padding-top: 8px !important;
|
||||
padding-bottom: 9px !important;
|
||||
}
|
||||
@ -169,7 +173,7 @@ nav {
|
||||
}
|
||||
|
||||
.digit-blank {
|
||||
content: "abc";
|
||||
content: 'abc';
|
||||
}
|
||||
|
||||
#customText {
|
||||
|
||||
@ -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,19 +1,18 @@
|
||||
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)
|
||||
locale.set(window.navigator.language);
|
||||
}
|
||||
await waitLocale();
|
||||
}
|
||||
};
|
||||
|
||||
export const prerender = true;
|
||||
export const ssr = false;
|
||||
|
||||
@ -1,44 +1,43 @@
|
||||
<script lang="ts">
|
||||
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"],
|
||||
data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
|
||||
espFreeHeap: 0,
|
||||
espHeapSize: 0,
|
||||
connectionStatus: {
|
||||
"price": false,
|
||||
"blocks": false
|
||||
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;
|
||||
|
||||
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);
|
||||
});
|
||||
@ -52,7 +51,7 @@
|
||||
const evtSource = new EventSource(`${PUBLIC_BASE_URL}/events`);
|
||||
|
||||
evtSource.addEventListener('status', (e) => {
|
||||
let dataObj = (JSON.parse(e.data));
|
||||
let dataObj = JSON.parse(e.data);
|
||||
status.set(dataObj);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,36 +1,33 @@
|
||||
<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 {
|
||||
import {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Container,
|
||||
Form,
|
||||
Input,
|
||||
Label,
|
||||
Row
|
||||
} from 'sveltestrap';
|
||||
} 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) => {
|
||||
const checkSyncLeds = (e: Event) => {
|
||||
console.log('checksyncleds', keepLedsSameColor);
|
||||
if (keepLedsSameColor) {
|
||||
console.log(e.target.value);
|
||||
@ -41,9 +38,9 @@ const checkSyncLeds = (e:Event) => {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const setLEDcolor = () => {
|
||||
const setLEDcolor = () => {
|
||||
console.log(`${PUBLIC_BASE_URL}/api/lights/${ledColor}`);
|
||||
fetch(`${PUBLIC_BASE_URL}/api/lights`, {
|
||||
headers: {
|
||||
@ -51,32 +48,31 @@ const setLEDcolor = () => {
|
||||
},
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(ledStatus)
|
||||
}
|
||||
).catch(err => { });
|
||||
};
|
||||
}).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) => {
|
||||
firstLedDataSubscription = status.subscribe(async (val) => {
|
||||
if (val && val.leds) {
|
||||
ledStatus = val.leds.map((obj) => ({ ["hex"]: obj["hex"] }));
|
||||
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>
|
||||
<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 }
|
||||
{#each ledStatus as led, i}
|
||||
<Col>
|
||||
<Input type="color" id="ledColorPicker[{i}]" bind:value="{led.hex}" class="mx-auto" on:change="{checkSyncLeds}" />
|
||||
<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,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
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">
|
||||
@ -11,11 +11,11 @@
|
||||
{#each status.data as char}
|
||||
{#if isSplitText(char)}
|
||||
<div class="splitText">
|
||||
{#each char.split("/") as part}
|
||||
{#each char.split('/') as part}
|
||||
<div class="flex-items">{part}</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if char.length === 0 || char === " "}
|
||||
{:else if char.length === 0 || char === ' '}
|
||||
<div class="digit"> </div>
|
||||
{:else}
|
||||
<div class="digit">{char}</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 { _ } 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) => {
|
||||
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",
|
||||
'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,13 +123,13 @@
|
||||
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"
|
||||
@ -142,7 +143,9 @@
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="mempoolInstance" size="sm">{ $_('section.settings.mempoolnstance') }</Label>
|
||||
<Label md={6} for="mempoolInstance" size="sm"
|
||||
>{$_('section.settings.mempoolnstance')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="text"
|
||||
@ -150,12 +153,13 @@
|
||||
name="mempoolInstance"
|
||||
id="mempoolInstance"
|
||||
bsSize="sm"
|
||||
>
|
||||
</Input>
|
||||
></Input>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Label md={6} for="hostnamePrefix" size="sm">{ $_('section.settings.hostnamePrefix') }</Label>
|
||||
<Label md={6} for="hostnamePrefix" size="sm"
|
||||
>{$_('section.settings.hostnamePrefix')}</Label
|
||||
>
|
||||
<Col md="6">
|
||||
<Input
|
||||
type="text"
|
||||
@ -163,46 +167,93 @@
|
||||
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') }" />
|
||||
<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') }" />
|
||||
<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') }" />
|
||||
<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') }" />
|
||||
<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') })" />
|
||||
<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') })" />
|
||||
<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') })" />
|
||||
<Input
|
||||
id="fetchEurPrice"
|
||||
bind:checked={$settings.fetchEurPrice}
|
||||
type="switch"
|
||||
bsSize="sm"
|
||||
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<h3>{ $_('section.settings.screens') }</h3>
|
||||
<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}" />
|
||||
<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>
|
||||
<Button type="reset" color="secondary">{$_('button.reset')}</Button>
|
||||
<Button color="primary">{$_('button.save')}</Button>
|
||||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@ -1,16 +1,26 @@
|
||||
<script lang="ts">
|
||||
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<{}>;
|
||||
export let status: writable<object>;
|
||||
|
||||
const toTime = (secs:Number) => {
|
||||
const toTime = (secs: number) => {
|
||||
var hours = Math.floor(secs / (60 * 60));
|
||||
|
||||
var divisor_for_minutes = secs % (60 * 60);
|
||||
@ -20,46 +30,42 @@
|
||||
var seconds = Math.ceil(divisor_for_seconds);
|
||||
|
||||
var obj = {
|
||||
"h": hours,
|
||||
"m": minutes,
|
||||
"s": seconds
|
||||
h: hours,
|
||||
m: minutes,
|
||||
s: seconds
|
||||
};
|
||||
return obj;
|
||||
}
|
||||
};
|
||||
|
||||
const toUptimeString = (secs:Number):String => {
|
||||
const toUptimestring = (secs: number): string => {
|
||||
let time = toTime(secs);
|
||||
|
||||
return `${time.h}h ${time.m}m ${time.s}s`;
|
||||
}
|
||||
};
|
||||
|
||||
let memoryFreePercent:number = 50;
|
||||
let lightMode:boolean = false;
|
||||
let memoryFreePercent: number = 50;
|
||||
let lightMode: boolean = false;
|
||||
|
||||
status.subscribe((value: {}) => {
|
||||
memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
|
||||
status.subscribe((value: object) => {
|
||||
memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
|
||||
});
|
||||
|
||||
settings.subscribe((value: {}) => {
|
||||
settings.subscribe((value: object) => {
|
||||
lightMode = value.bgColor > value.fgColor;
|
||||
});
|
||||
|
||||
const setScreen = (id:number) => () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
|
||||
}
|
||||
const setScreen = (id: number) => () => {
|
||||
fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(() => {});
|
||||
};
|
||||
|
||||
const toggleTimer = (currentStatus:boolean) => () => {
|
||||
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`);
|
||||
}
|
||||
}
|
||||
|
||||
const isLightMode = () => {
|
||||
return $settings.bgColor > $settings.fgColor;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<Col>
|
||||
@ -72,39 +78,62 @@
|
||||
<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>
|
||||
<Button
|
||||
color="outline-primary"
|
||||
active={$status.currentScreen == s.id}
|
||||
on:click={setScreen(s.id)}>{s.name}</Button
|
||||
>
|
||||
{/each}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<hr>
|
||||
<hr />
|
||||
{#if $status.data}
|
||||
<section class={lightMode ? 'lightMode': ''}>
|
||||
<Rendered status="{$status}"></Rendered>
|
||||
<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>
|
||||
{$_('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>
|
||||
<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 />
|
||||
<Input
|
||||
type="color"
|
||||
id="ledColorPicker"
|
||||
bind:value={led.hex}
|
||||
class="mx-auto"
|
||||
disabled
|
||||
/>
|
||||
</Col>
|
||||
{/each}
|
||||
{/if}
|
||||
</Row>
|
||||
<hr>
|
||||
<Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
|
||||
<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>{$_('section.status.memoryFree')}</div>
|
||||
<div>
|
||||
{Math.round($status.espFreeHeap / 1024)} / {Math.round($status.espHeapSize / 1024)} KiB
|
||||
</div>
|
||||
<hr>
|
||||
{ $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
|
||||
<br>
|
||||
</div>
|
||||
<hr />
|
||||
{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
|
||||
<br />
|
||||
<p>
|
||||
{ $_('section.status.wsPriceConnection') }:
|
||||
{$_('section.status.wsPriceConnection')}:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.price}
|
||||
✅
|
||||
@ -113,19 +142,18 @@
|
||||
{/if}
|
||||
</span>
|
||||
-
|
||||
{ $_('section.status.wsMempoolConnection') }:
|
||||
{$_('section.status.wsMempoolConnection')}:
|
||||
<span>
|
||||
{#if $status.connectionStatus && $status.connectionStatus.blocks}
|
||||
✅
|
||||
{:else}
|
||||
❌
|
||||
{/if}
|
||||
</span><br>
|
||||
</span><br />
|
||||
{#if $settings.fetchEurPrice}
|
||||
<small>{ $_('section.status.fetchEuroNote') }</small>
|
||||
<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
|
||||
],
|
||||
// @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>
|
||||
|
||||
@ -13,9 +13,7 @@
|
||||
"paths": {
|
||||
"/status": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Get current status",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -26,9 +24,7 @@
|
||||
},
|
||||
"/system_status": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Get system status",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -39,9 +35,7 @@
|
||||
},
|
||||
"/settings": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Get current settings",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -57,9 +51,7 @@
|
||||
}
|
||||
},
|
||||
"post": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Save current settings",
|
||||
"requestBody": {
|
||||
"content": {
|
||||
@ -77,9 +69,7 @@
|
||||
}
|
||||
},
|
||||
"patch": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Save current settings",
|
||||
"requestBody": {
|
||||
"content": {
|
||||
@ -99,9 +89,7 @@
|
||||
},
|
||||
"/action/pause": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"timer"
|
||||
],
|
||||
"tags": ["timer"],
|
||||
"summary": "Pause screen rotation",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -112,9 +100,7 @@
|
||||
},
|
||||
"/action/timer_restart": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"timer"
|
||||
],
|
||||
"tags": ["timer"],
|
||||
"summary": "Restart screen rotation",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -125,9 +111,7 @@
|
||||
},
|
||||
"/show/screen/{id}": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"screens"
|
||||
],
|
||||
"tags": ["screens"],
|
||||
"summary": "Set screen to show",
|
||||
"parameters": [
|
||||
{
|
||||
@ -150,9 +134,7 @@
|
||||
},
|
||||
"/show/text/{text}": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"screens"
|
||||
],
|
||||
"tags": ["screens"],
|
||||
"summary": "Set text to show",
|
||||
"parameters": [
|
||||
{
|
||||
@ -175,9 +157,7 @@
|
||||
},
|
||||
"/show/custom": {
|
||||
"post": {
|
||||
"tags": [
|
||||
"screens"
|
||||
],
|
||||
"tags": ["screens"],
|
||||
"summary": "Set text to show (advanced)",
|
||||
"requestBody": {
|
||||
"content": {
|
||||
@ -197,9 +177,7 @@
|
||||
},
|
||||
"/full_refresh": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Force full refresh of all displays",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -210,9 +188,7 @@
|
||||
},
|
||||
"/lights": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"lights"
|
||||
],
|
||||
"tags": ["lights"],
|
||||
"summary": "Get LEDs status",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -228,9 +204,7 @@
|
||||
}
|
||||
},
|
||||
"patch": {
|
||||
"tags": [
|
||||
"lights"
|
||||
],
|
||||
"tags": ["lights"],
|
||||
"summary": "Set individual LEDs",
|
||||
"requestBody": {
|
||||
"content": {
|
||||
@ -253,9 +227,7 @@
|
||||
},
|
||||
"/lights/{color}": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"lights"
|
||||
],
|
||||
"tags": ["lights"],
|
||||
"summary": "Turn on LEDs with specific color",
|
||||
"parameters": [
|
||||
{
|
||||
@ -278,9 +250,7 @@
|
||||
},
|
||||
"/lights/off": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"lights"
|
||||
],
|
||||
"tags": ["lights"],
|
||||
"summary": "Turn LEDs off",
|
||||
"responses": {
|
||||
"200": {
|
||||
@ -291,9 +261,7 @@
|
||||
},
|
||||
"/restart": {
|
||||
"get": {
|
||||
"tags": [
|
||||
"system"
|
||||
],
|
||||
"tags": ["system"],
|
||||
"summary": "Restart BTClock",
|
||||
"responses": {
|
||||
"200": {
|
||||
|
||||
@ -149,9 +149,9 @@ paths:
|
||||
schema:
|
||||
$ref: '#/components/schemas/ArrayOfLedsInput'
|
||||
responses:
|
||||
"200":
|
||||
'200':
|
||||
description: succesful operation
|
||||
"400":
|
||||
'400':
|
||||
description: invalid colors or wrong amount of LEDs
|
||||
/lights/{color}:
|
||||
get:
|
||||
@ -211,7 +211,7 @@ components:
|
||||
hex:
|
||||
type: string
|
||||
pattern: ^#(?:[0-9a-fA-F]{3}){1,2}$
|
||||
example: "#FFCC00"
|
||||
example: '#FFCC00'
|
||||
RgbColorValueAndHex:
|
||||
allOf:
|
||||
- $ref: '#/components/schemas/RgbColorValues'
|
||||
|
||||
@ -5,16 +5,14 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess({
|
||||
|
||||
}),
|
||||
build: {
|
||||
preprocess: vitePreprocess({}),
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
assetFilenames: '[hash]'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
@ -24,11 +22,11 @@ build: {
|
||||
// these options are set automatically — see below
|
||||
pages: 'dist',
|
||||
assets: 'dist',
|
||||
fallback: "bundle.html",
|
||||
fallback: 'bundle.html',
|
||||
precompress: false,
|
||||
strict: true
|
||||
}),
|
||||
appDir: "build",
|
||||
appDir: 'build'
|
||||
// inlineStyleThreshold: 9999999999
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,61 +1,71 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
import * as fs from 'fs'
|
||||
import * as path from 'path'
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
const doRewrap = ({ cssClass }) => {
|
||||
try {
|
||||
if (fs.existsSync(path.resolve(__dirname, 'dist/bundle.js'))) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
} catch(e) {}
|
||||
console.log("\nStart re-wrapping...")
|
||||
fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function(err, data){
|
||||
} catch (e) {}
|
||||
console.log('\nStart re-wrapping...');
|
||||
fs.readFile(path.resolve(__dirname, 'dist/bundle.html'), 'utf8', function (err, data) {
|
||||
if (!data) {
|
||||
console.log(`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`)
|
||||
return
|
||||
console.log(
|
||||
`[Error]: No bundle.html generated, check svelte.config.js -> config.kit.adapter -> fallback: "bundle.html"`
|
||||
);
|
||||
return;
|
||||
}
|
||||
let matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm)
|
||||
const matchData = data.match(/(?<=<script\b[^>]*>)([\s\S]*?)(?=<\/script>)/gm);
|
||||
if (matchData) {
|
||||
let cleanData = matchData[0].trim()
|
||||
.replace(`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`, `document.querySelector(".${cssClass}")`)
|
||||
const cleanData = matchData[0]
|
||||
.trim()
|
||||
.replace(
|
||||
`document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode`,
|
||||
`document.querySelector(".${cssClass}")`
|
||||
);
|
||||
fs.writeFile(path.resolve(__dirname, 'dist/bundle.js'), cleanData, (err) => {
|
||||
if (err)
|
||||
console.log(err)
|
||||
if (err) console.log(err);
|
||||
else {
|
||||
try {
|
||||
fs.rename(path.resolve(__dirname,'dist/index.page'), path.resolve(__dirname, 'dist/index.html'), (err) => { })
|
||||
} catch (e) { }
|
||||
fs.rename(
|
||||
path.resolve(__dirname, 'dist/index.page'),
|
||||
path.resolve(__dirname, 'dist/index.html'),
|
||||
() => {}
|
||||
);
|
||||
} catch (e) {}
|
||||
try {
|
||||
fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'))
|
||||
} catch (e) { }
|
||||
console.log("Finished: bundle.js + index.html have been regenerated.\n")
|
||||
fs.unlinkSync(path.resolve(__dirname, 'dist/bundle.html'));
|
||||
} catch (e) {}
|
||||
console.log('Finished: bundle.js + index.html have been regenerated.\n');
|
||||
}
|
||||
})
|
||||
} else
|
||||
console.log(`[Error]: No proper <script> tag found in bundle.html`)
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
} else console.log(`[Error]: No proper <script> tag found in bundle.html`);
|
||||
});
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit(), {
|
||||
plugins: [
|
||||
sveltekit(),
|
||||
{
|
||||
name: 'postbuild-command',
|
||||
closeBundle: {
|
||||
order: 'post',
|
||||
handler() {
|
||||
setTimeout(() => doRewrap({ cssClass: "overlay" }), Math.random()*500+500)
|
||||
setTimeout(() => doRewrap({ cssClass: 'overlay' }), Math.random() * 500 + 500);
|
||||
}
|
||||
}
|
||||
}],
|
||||
}
|
||||
],
|
||||
build: {
|
||||
minify: true,
|
||||
cssCodeSplit: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: () => 'app',
|
||||
assetFileNames: "[name][extname]"
|
||||
assetFileNames: '[name][extname]'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user