kdmukai/webui
1
0
Fork 0
forked from btclock/webui
Code Pull requests Activity

Rewrite display status style

Browse source
This commit is contained in:
Djuri 2024-08-31 17:10:26 +02:00
parent 21a7192e6d
commit a2ef9fb343
6 changed files with 163 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/routes/+page.svelte
View file

@ -122,10 +122,11 @@
</svelte:head>
<Container fluid>
<Row cols={{ xl: 3, md: 2, sm: 1 }}>
<Control bind:settings bind:status></Control>
<Status bind:settings bind:status></Status>
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData}></Settings>
<Row>
<Control bind:settings bind:status lg="3" xxl="4"></Control>
<Status bind:settings bind:status lg="6" xxl="4"></Status>
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
></Settings>
</Row>
</Container>
<div class="position-fixed bottom-0 end-0 p-2">

10
src/routes/Control.svelte
View file

@ -95,9 +95,17 @@
});
onDestroy(firstLedDataSubscription);
// You can also add more props if needed
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script>
<Col>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card>
<CardHeader>
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>

13
src/routes/Rendered.svelte
View file

@ -7,16 +7,23 @@
const isSplitText = (str: string) => {
return str.includes('/');
};
export let className = 'btclock-wrapper';
</script>
<div class="btclock-wrapper" id="btclock-wrapper">
<div class={className}>
<div class="btclock">
{#each status.data as char}
{#if isSplitText(char)}
<div class="splitText">
{#each char.split('/') as part}
{#if char.split('/').length}
<span class="top-text">{char.split('/')[0]}</span>
<hr />
<span class="bottom-text">{char.split('/')[1]}</span>
{/if}
<!-- {#each char.split('/') as part}
<div class="flex-items">{part}</div>
{/each}
{/each} -->
</div>
{:else if char.startsWith('mdi')}
<div class="digit icon">

46
src/routes/Settings.svelte
View file

@ -96,9 +96,17 @@
}
});
};
// You can also add more props if needed
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script>
<Col>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card>
<CardHeader>
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
@ -437,7 +445,7 @@
</Col>
</Row>
<Row>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="ledTestOnPower"
bind:checked={$settings.ledTestOnPower}
@ -446,7 +454,7 @@
label={$_('section.settings.ledPowerOnTest')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="ledFlashOnUpd"
bind:checked={$settings.ledFlashOnUpd}
@ -455,7 +463,7 @@
label={$_('section.settings.ledFlashOnBlock')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="stealFocus"
bind:checked={$settings.stealFocus}
@ -464,7 +472,7 @@
label={$_('section.settings.StealFocusOnNewBlock')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="mcapBigChar"
bind:checked={$settings.mcapBigChar}
@ -473,7 +481,7 @@
label={$_('section.settings.useBigCharsMcap')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="otaEnabled"
bind:checked={$settings.otaEnabled}
@ -482,7 +490,7 @@
label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="mdnsEnabled"
bind:checked={$settings.mdnsEnabled}
@ -491,7 +499,7 @@
label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="fetchEurPrice"
bind:checked={$settings.fetchEurPrice}
@ -500,7 +508,7 @@
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="useBlkCountdown"
bind:checked={$settings.useBlkCountdown}
@ -509,7 +517,7 @@
label={$_('section.settings.useBlkCountdown')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="useSatsSymbol"
bind:checked={$settings.useSatsSymbol}
@ -518,7 +526,7 @@
label={$_('section.settings.useSatsSymbol')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="suffixPrice"
bind:checked={$settings.suffixPrice}
@ -527,7 +535,7 @@
label={$_('section.settings.suffixPrice')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="disableLeds"
bind:checked={$settings.disableLeds}
@ -536,7 +544,7 @@
label={$_('section.settings.disableLeds')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="ownDataSource"
bind:checked={$settings.ownDataSource}
@ -546,7 +554,7 @@
/>
</Col>
{#if $settings.nostrRelay}
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="useNostr"
bind:checked={$settings.useNostr}
@ -557,7 +565,7 @@
</Col>
{/if}
{#if 'nostrZapNotify' in $settings}
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="nostrZapNotify"
bind:checked={$settings.nostrZapNotify}
@ -568,7 +576,7 @@
</Col>
{/if}
{#if 'bitaxeEnabled' in $settings}
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="bitaxeEnabled"
bind:checked={$settings.bitaxeEnabled}
@ -579,7 +587,7 @@
</Col>
{/if}
{#if $settings.hasFrontlight}
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="flAlwaysOn"
bind:checked={$settings.flAlwaysOn}
@ -588,7 +596,7 @@
label={$_('section.settings.flAlwaysOn')}
/>
</Col>
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="flFlashOnUpd"
bind:checked={$settings.flFlashOnUpd}
@ -604,7 +612,7 @@
<h3>{$_('section.settings.screens')}</h3>
{#if $settings.screens}
{#each $settings.screens as s}
<Col md="6">
<Col md="6" xl="12" xxl="6">
<Input
id="screens_{s.id}"
bind:checked={s.enabled}

13
src/routes/Status.svelte
View file

@ -79,9 +79,16 @@
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
}
};
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script>
<Col>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card>
<CardHeader>
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
@ -101,8 +108,8 @@
</div>
<hr />
{#if $status.data}
<section class={lightMode ? 'lightMode' : ''}>
<Rendered status={$status}></Rendered>
<section class={lightMode ? 'lightMode' : 'darkMode'}>
<Rendered status={$status} className="rbtclock"></Rendered>
</section>
{$_('section.status.screenCycle')}:
<a