137 lines
3.7 KiB
Svelte
137 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages';
|
|
import { CardContainer, InputField, Toggle } from '$lib/components';
|
|
import { settings, status } from '$lib/stores';
|
|
import { onDestroy } from 'svelte';
|
|
import {
|
|
setCustomText,
|
|
setLEDcolor,
|
|
turnOffLeds,
|
|
restartClock,
|
|
forceFullRefresh,
|
|
generateRandomColor,
|
|
flashFrontlight,
|
|
turnOnFrontlight,
|
|
turnOffFrontlight
|
|
} from '$lib/clockControl';
|
|
import type { LedStatus } from '$lib/types';
|
|
|
|
let ledStatus = $state<LedStatus[]>([
|
|
{ hex: '#000000' },
|
|
{ hex: '#000000' },
|
|
{ hex: '#000000' },
|
|
{ hex: '#000000' }
|
|
]);
|
|
let customText = $state('');
|
|
let keepLedsSameColor = $state(false);
|
|
|
|
const checkSyncLeds = (e: Event) => {
|
|
if (keepLedsSameColor && e.target instanceof HTMLInputElement) {
|
|
const targetValue = e.target.value;
|
|
|
|
ledStatus.forEach((element, i) => {
|
|
if (ledStatus[i].hex != targetValue) {
|
|
ledStatus[i].hex = targetValue;
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
let firstLedDataSubscription = () => {};
|
|
|
|
firstLedDataSubscription = status.subscribe(async (val) => {
|
|
if (val && val.leds) {
|
|
ledStatus = val.leds.map((obj) => ({ ['hex']: obj['hex'] }));
|
|
|
|
for (let led of ledStatus) {
|
|
if (led['hex'] == '#000000') {
|
|
led['hex'] = generateRandomColor();
|
|
}
|
|
}
|
|
|
|
firstLedDataSubscription();
|
|
}
|
|
});
|
|
|
|
onDestroy(firstLedDataSubscription);
|
|
</script>
|
|
|
|
<CardContainer title={m['section.control.title']()}>
|
|
<div class="grid gap-4">
|
|
<div class="form-control">
|
|
<label class="label" for="customText">
|
|
<span class="label-text">{m['section.control.text']()}</span>
|
|
</label>
|
|
<div class="flex flex-col gap-2 md:flex-row">
|
|
<InputField
|
|
id="customText"
|
|
maxLength="7"
|
|
bind:value={customText}
|
|
placeholder={m['section.control.text']()}
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<button class="btn btn-primary" onclick={() => setCustomText(customText)}
|
|
>{m['section.control.showText']()}</button
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="">
|
|
<h3 class="mb-2 font-medium">{m['section.control.ledColor']()}</h3>
|
|
<div class="flex flex-col justify-between md:flex-row">
|
|
<div class="mb-4 flex flex-col flex-wrap gap-2">
|
|
<div class="flex gap-2">
|
|
{#if ledStatus.length > 0}
|
|
{#each ledStatus as led (led)}
|
|
<input
|
|
type="color"
|
|
class="btn btn-square"
|
|
bind:value={led.hex}
|
|
onchange={checkSyncLeds}
|
|
/>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<Toggle
|
|
label={m['sections.control.keepSameColor']()}
|
|
bind:checked={keepLedsSameColor}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="btn btn-secondary" onclick={turnOffLeds}
|
|
>{m['section.control.turnOff']()}</button
|
|
>
|
|
<button class="btn btn-primary" onclick={() => setLEDcolor(ledStatus)}
|
|
>{m['section.control.setColor']()}</button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if $settings.hasFrontlight && !$settings.flDisable}
|
|
<div>
|
|
<h3 class="mb-2 font-medium">{m['section.control.frontlight']()}</h3>
|
|
<div class="flex justify-end gap-2">
|
|
<button class="btn btn-secondary" onclick={() => turnOnFrontlight()}
|
|
>{m['section.control.turnOn']()}</button
|
|
>
|
|
<button class="btn btn-primary" onclick={() => turnOffFrontlight()}
|
|
>{m['section.control.turnOff']()}</button
|
|
>
|
|
<button class="btn btn-accent" onclick={() => flashFrontlight()}
|
|
>{m['section.control.flashFrontlight']()}</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div>
|
|
<div class="flex gap-2 md:justify-end">
|
|
<button class="btn btn-error" onclick={restartClock}>{m['button.restart']()}</button>
|
|
<button class="btn" onclick={forceFullRefresh}>{m['button.forceFullRefresh']()}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContainer>
|