Initial commit

src/lib/components/sections/ControlSection.svelte

@@ -0,0 +1,123 @@
+<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 gap-2">
+				<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 justify-between gap-2">
+				<div class="mb-4 flex flex-wrap gap-2">
+					{#if ledStatus.length > 0}
+						{#each ledStatus as led}
+							<input
+								type="color"
+								class="btn btn-square"
+								bind:value={led.hex}
+								onchange={checkSyncLeds}
+						/>
+					{/each}
+					{/if}
+					<Toggle label={m['sections.control.keepSameColor']()} bind:checked={keepLedsSameColor} />
+				</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 gap-2 justify-end">
+				<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>
+			<h3 class="mb-2 font-medium">{m['section.control.title']()}</h3>
+			<div class="flex gap-2 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>