Add sauna

webui/src/routes/chicken/+page.svelte

@@ -0,0 +1,152 @@
+<script>
+	import { bind, onMount } from "svelte/internal";
+	import icon from "../../../static/hahn.svg"
+
+	// base api url
+	let backend_url = "http://localhost:5000/gates";
+
+	let value_state_outer = "";
+	let value_open_times_outer = "";
+	let value_close_times_outer = "";
+
+	let options_state = [
+		{id: 1, text: "Schließen" },	// means "is open"
+		{id: 2, text: "Öffnen" },
+		{id: 3, text: "Schließt..." },
+		{id: 4, text: "Öffnet..." },
+	];
+	let options_open = [
+		{id: 1, text: "Sonnenaufgang"},
+		{id: 2, text: "08:00"},
+		{id: 3, text: "09:00"},
+		{id: 4, text: "10:00"},
+		{id: 5, text: "11:00"},
+		{id: 6, text: "12:00"}
+	];
+	let options_close = [
+		{id: 1, text: "Sonnenuntergang"},
+		{id: 2, text: "Sonnenuntergang + 30min"},
+		{id: 3, text: "16:00"},
+		{id: 4, text: "16:30"},
+		{id: 5, text: "17:00"},
+		{id: 6, text: "17:30"},
+		{id: 7, text: "18:00"},
+		{id: 8, text: "18:30"},
+		{id: 9, text: "19:00"},
+		{id: 10, text: "19:30"},
+		{id: 11, text: "20:00"},
+		{id: 12, text: "20:30"},
+		{id: 13, text: "21:00"},
+		{id: 14, text: "21:30"},
+		{id: 15, text: "22:00"},
+	];
+
+	function get_next_state(state) {
+		if(state == 1) {
+			return 2;
+		}
+		if(state == 2) {
+			return 1;
+		}
+	}
+
+	function handle_button_outer(event) {
+		console.log(value_state_outer)
+		for( var i = 0; i < options_state.length; i++) {
+			if(options_state[i].text == value_state_outer) {
+				fetch(backend_url + "/outer", {
+					method: "PATCH",
+					headers: {
+						'Content-type': 'application/json'
+					},
+					body: JSON.stringify({
+						outer_gate: {state: get_next_state(options_state[i].id)}
+					})
+				})
+				.then(response => response.json())
+				// .then(result => console.log(result))
+				break;
+			}
+		}
+	}
+
+	function handle_open_times_outer() {
+		alert(value_open_times_outer);
+	}
+
+	function handle_close_times_outer() {
+		alert(value_close_times_outer);
+	}
+
+	function set_state_outer(index) {
+		for( var i = 0; i < options_state.length; i++) {
+			if(options_state[i].id == index) {
+				value_state_outer = options_state[i].text;
+				break;
+			}
+		}
+	}
+
+	function get_gates() {
+		fetch(backend_url)
+		.then(response => response.json())
+		.then(data => {
+			set_state_outer(data.outer_gate.state)
+		}).catch(error => {
+			console.log(error);
+			return [];
+		});
+	}
+
+	setInterval(() => {
+		get_gates();
+	}, 1000)
+
+	onMount(async () => {
+		get_gates();
+	});
+</script>
+
+<svelte:head>
+	<title>Chicken</title>
+	<meta name="description" content="Chicken"/>
+</svelte:head>
+
+<section id='content_id' class='content'>
+	<figure>
+		<img src={icon} alt="Chicken" width=150/>
+	</figure>
+	<h1>Chicken</h1>
+	<hr>
+	<table>
+		<tr>
+			<td class="left">
+				<h2>Außenklappe</h2>
+			</td>
+			<td>
+				<input type="submit" enabled id="button_outer" value={value_state_outer} style="margin-left:55px;width:200px" on:click={(event) => handle_button_outer(event)}/>
+			</td>
+		</tr>
+		<tr>
+			<td class="left">Öffnen:</td>
+			<td class="input">
+				<select style="margin-left:55px;width:250px;" bind:value={value_open_times_outer} on:change={handle_open_times_outer}>
+					{#each options_open as option}
+						<option value={option}>{option.text}</option>
+					{/each}
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td class="left">Schließen:</td>
+			<td class="input">
+				<select style="margin-left:55px;width:250px;"  bind:value={value_close_times_outer} on:change={handle_close_times_outer}>
+					{#each options_close as option}
+						<option value={option}>{option.text}</option>
+					{/each}
+				</select>
+			</td>
+		</tr>
+	</table>
+	<hr>
+</section>