UI and final stuff

dashboard/src/lib/sensor.ts

@@ -1,7 +1,7 @@
 import { browser } from '$app/environment';
 import { readable } from 'svelte/store';
 
-const url = 'http://192.168.116.72';
+const url = 'http://192.168.116.48';
 
 export type SensorData = {
 	temp: number;
@@ -10,6 +10,15 @@ export type SensorData = {
 	out2: boolean;
 };
 
+export type Settings = {
+	refreshInterval: number;
+	sensorPin: number;
+	onTemp: number;
+	onHum: number;
+	tempOffset: number;
+	humOffset: number;
+};
+
 const defaultData: SensorData = {
 	temp: 0,
 	hum: 0,
@@ -63,3 +72,33 @@ export async function setOnHum(hum: number) {
 		body: JSON.stringify({ onHum: hum }),
 	});
 }
+
+export async function setTempOffset(tempOffset: number) {
+	await fetch(`${url}/settings`, {
+		method: 'PATCH',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({ tempOffset }),
+	});
+}
+
+export async function setHumOffset(humOffset: number) {
+	await fetch(`${url}/settings`, {
+		method: 'PATCH',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({ humOffset }),
+	});
+}
+
+export async function getSettings(): Promise<Settings> {
+	const res = await fetch(`${url}/settings`, {
+		method: 'GET',
+		headers: { Accept: 'application/json' },
+	});
+	return await res.json();
+}

dashboard/src/routes/+page.svelte

@@ -1,56 +1,92 @@
 <script lang="ts">
-	import { sensor, setOnHum, setOnTemp, setOutput } from '../lib/sensor';
+	import { onMount } from 'svelte';
+	import {
+		getSettings,
+		sensor,
+		setHumOffset,
+		setOnHum,
+		setOnTemp,
+		setTempOffset,
+	} from '../lib/sensor';
 
 	let temp = 26;
 	let hum = 50;
+	let tempOffset = 0;
+	let humOffset = 0;
 
-	async function handleTempChange() {
-		await setOnTemp(temp);
-	}
+	let loading = true;
 
-	async function handleHumChange() {
-		await setOnHum(hum);
-	}
+	onMount(() => {
+		getSettings().then((settings) => {
+			temp = settings.onTemp;
+			hum = settings.onHum;
+			tempOffset = settings.tempOffset;
+			humOffset = settings.humOffset;
+
+			loading = false;
+		});
+	});
 </script>
 
-<p>Temperature {$sensor.temp} °C</p>
-<p>Humidity {$sensor.hum} %</p>
-
-<div class="form-control w-full p-16">
-	<label class="label cursor-pointer">
-		<span class="label-text">Heater</span>
-		<input
-			type="checkbox"
-			class="toggle"
-			checked={$sensor.out1}
-			on:change={(e) => setOutput(16, e.currentTarget.checked)}
-		/>
-	</label>
-	<label class="label cursor-pointer">
-		<span class="label-text">Dehumidifier</span>
-		<input
-			type="checkbox"
-			class="toggle"
-			checked={$sensor.out2}
-			on:change={(e) => setOutput(17, e.currentTarget.checked)}
-		/>
-	</label>
-	<span>{temp}</span>
+{#if loading}
+	<div class="w-screen h-screen flex items-center justify-center text-4xl">Loading</div>
+{:else}
+	<div class="flex items-center justify-center">
+		<div class="w-1/3 p-16 space-y-4">
+			<div class="flex gap-4">
+				<div class="rounded-box bg-base-200 w-1/2 text-center flex flex-col p-4">
+					Heater
+					<span class="text-4xl">{$sensor.out1 ? 'ON' : 'OFF'}</span>
+				</div>
+				<div class="rounded-box bg-base-200 w-1/2 text-center flex flex-col p-4">
+					Dehumidifier
+					<span class="text-4xl">{$sensor.out2 ? 'ON' : 'OFF'}</span>
+				</div>
+			</div>
+			<div class="rounded-box bg-base-200 p-8 text-center flex flex-col">
+				<span class="text-2xl">Temperature</span>
+				<span class="text-5xl my-2">{$sensor.temp}°C</span>
+				<span class="text-xl mb-2">Target: {temp}°C</span>
 				<input
 					type="range"
 					min="0"
 					max="100"
 					bind:value={temp}
 					class="range"
-		on:change={handleTempChange}
+					on:change={() => setOnTemp(temp)}
 				/>
-	<span>{hum}%</span>
+				<span class="text-xl mb-2 mt-4">Hysteresis: {tempOffset}°C</span>
+				<input
+					type="range"
+					min="-5"
+					max="5"
+					bind:value={tempOffset}
+					class="range"
+					on:change={() => setTempOffset(tempOffset)}
+				/>
+			</div>
+			<div class="rounded-box bg-base-200 p-8 text-center flex flex-col">
+				<span class="text-2xl">Humidity</span>
+				<span class="text-5xl my-2">{$sensor.hum}%</span>
+				<span class="text-xl mb-2">Target: {hum}%</span>
 				<input
 					type="range"
 					min="0"
 					max="100"
 					bind:value={hum}
 					class="range"
-		on:change={handleHumChange}
+					on:change={() => setOnHum(hum)}
+				/>
+				<span class="text-xl mb-2 mt-4">Hysteresis: {humOffset}%</span>
+				<input
+					type="range"
+					min="-5"
+					max="0"
+					bind:value={humOffset}
+					class="range"
+					on:change={() => setHumOffset(humOffset)}
 				/>
 			</div>
+		</div>
+	</div>
+{/if}