diff --git a/firmware/website/src/routes/index.svelte b/firmware/website/src/routes/index.svelte
index 331439d..aabfd6a 100644
--- a/firmware/website/src/routes/index.svelte
+++ b/firmware/website/src/routes/index.svelte
@@ -2,11 +2,11 @@
import { onMount } from "svelte";
import { location, replace } from 'svelte-spa-router';
import { t } from "../i18n/store";
- import ControlTab from "../components/control/controlTab.svelte";
- import ConfigTab from "../components/config/configTab.svelte";
+ import { controlStore } from "../stores/controlStore";
+ import ControlTab from "../components/controlTab/controlTab.svelte";
+ import ConfigTab from "../components/configTab/configTab.svelte";
import TabButton from "../components/common/tabButton.svelte";
import TabBar from "../components/common/tabBar.svelte";
- import { controlStore } from "../stores/controlStore";
type Tab = "control" | "config";
diff --git a/firmware/website/src/stores/configSchemaStore.ts b/firmware/website/src/stores/configSchemaStore.ts
new file mode 100644
index 0000000..e69de29
diff --git a/firmware/website/src/stores/configSegmentStore.ts b/firmware/website/src/stores/configSegmentStore.ts
new file mode 100644
index 0000000..bdc9d19
--- /dev/null
+++ b/firmware/website/src/stores/configSegmentStore.ts
@@ -0,0 +1,59 @@
+import { writable } from 'svelte/store';
+import { requestJson } from '../utils/apiClient';
+
+export interface Segment {
+ id: string; // Client-generated ID (index fallback, API does not provide IDs)
+ name: string;
+ start: number;
+ leds: number;
+}
+
+// Exact API response type
+interface ApiSegmentResponse {
+ segments: {
+ name: string;
+ start: number;
+ leds: number;
+ }[];
+}
+
+function createSegmentStore() {
+ const { subscribe, set } = writable
([]);
+
+ async function fetchSegments() {
+ const response = await requestJson('/api/wled/config');
+ // Use API response directly
+ const segments: Segment[] = response.segments.map((seg, index) => ({
+ id: index.toString(),
+ name: seg.name,
+ start: seg.start,
+ leds: seg.leds
+ }));
+ set(segments);
+ }
+
+ async function updateSegments(segments: Segment[]) {
+ // Send all segments as array in API format
+ const apiPayload = {
+ segments: segments.map(seg => ({
+ name: seg.name,
+ start: seg.start,
+ leds: seg.leds
+ }))
+ };
+ await requestJson(`/api/wled/config`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(apiPayload)
+ });
+ await fetchSegments(); // Refresh store after update
+ }
+
+ return {
+ subscribe,
+ fetchSegments,
+ updateSegments
+ };
+}
+
+export const segmentStore = createSegmentStore();
diff --git a/firmware/website/src/stores/controlStore.ts b/firmware/website/src/stores/controlStore.ts
index 365bed9..ec25337 100644
--- a/firmware/website/src/stores/controlStore.ts
+++ b/firmware/website/src/stores/controlStore.ts
@@ -1,6 +1,7 @@
import { writable } from 'svelte/store';
import { createLogger } from '../utils/logger';
import { createLatestOnlySender } from './utils';
+import { requestJson, resolveHost } from '../utils/apiClient';
// Types for state and REST/WebSocket messages
export interface ControlState {
@@ -37,17 +38,6 @@ const WS_RECONNECT_DELAY_MS = 3000;
const isBrowser = typeof window !== 'undefined';
-const resolveHost = () => {
- if (import.meta.env.DEV) return 'system-control.local';
- return isBrowser ? window.location.host : '';
-};
-
-const buildBaseUrl = (host: string) => {
- if (!host) return '';
- const protocol = isBrowser ? window.location.protocol : import.meta.env.DEV ? 'http:' : 'https:';
- return `${protocol}//${host}`;
-};
-
const buildWebSocketUrl = (host: string) => {
if (!isBrowser) return '';
const wsProtocol =
@@ -77,7 +67,6 @@ const createControlStore = () => {
type StoreInvalidate = Parameters[1];
const host = resolveHost();
- const baseUrl = buildBaseUrl(host);
const wsUrl = buildWebSocketUrl(host);
let ws: WebSocket | null = null;
@@ -104,21 +93,6 @@ const createControlStore = () => {
}, WS_RECONNECT_DELAY_MS);
};
- async function requestJson(path: string, init?: RequestInit): Promise {
- log.debug('HTTP request', { path, method: init?.method ?? 'GET' });
- const res = await fetch(`${baseUrl}${path}`, init);
- if (!res.ok) {
- log.warn('HTTP request failed', {
- path,
- status: res.status,
- statusText: res.statusText
- });
- throw new Error(`Request failed: ${res.status} ${res.statusText}`);
- }
- log.debug('HTTP request succeeded', { path, status: res.status });
- return (await res.json()) as T;
- }
-
async function fetchState() {
const data = await requestJson>(STATUS_ENDPOINT);
applyState(data);
diff --git a/firmware/website/src/utils/apiClient.ts b/firmware/website/src/utils/apiClient.ts
new file mode 100644
index 0000000..b82fd04
--- /dev/null
+++ b/firmware/website/src/utils/apiClient.ts
@@ -0,0 +1,40 @@
+import { createLogger } from './logger';
+
+const isBrowser = typeof window !== 'undefined';
+
+export const resolveHost = () => {
+ if (import.meta.env.DEV) return 'system-control.local';
+ return isBrowser ? window.location.host : '';
+};
+
+export const buildBaseUrl = (host: string) => {
+ if (!host) return '';
+ const protocol = isBrowser ? window.location.protocol : import.meta.env.DEV ? 'http:' : 'https:';
+ return `${protocol}//${host}`;
+};
+
+const host = resolveHost();
+export const baseUrl = buildBaseUrl(host);
+
+const log = createLogger('apiClient');
+
+/**
+ * Führt einen fetch-Request durch, prüft auf Fehler und parst die JSON-Antwort.
+ */
+export async function requestJson(path: string, init?: RequestInit): Promise {
+ log.debug('HTTP request', { path, method: init?.method ?? 'GET' });
+
+ const res = await fetch(`${baseUrl}${path}`, init);
+
+ if (!res.ok) {
+ log.warn('HTTP request failed', {
+ path,
+ status: res.status,
+ statusText: res.statusText
+ });
+ throw new Error(`Request failed: ${res.status} ${res.statusText}`);
+ }
+
+ log.debug('HTTP request succeeded', { path, status: res.status });
+ return (await res.json()) as T;
+}
diff --git a/firmware/website/src/utils/logger.ts b/firmware/website/src/utils/logger.ts
index 0458faf..fb1b3cc 100644
--- a/firmware/website/src/utils/logger.ts
+++ b/firmware/website/src/utils/logger.ts
@@ -28,5 +28,3 @@ export const createLogger = (scope: string): Record<'debug' | 'info' | 'warn' |
warn: (message, meta) => emit(console.warn, scope, message, meta),
error: (message, meta) => emit(console.error, scope, message, meta)
});
-
-