153 lines
3.4 KiB
Svelte
153 lines
3.4 KiB
Svelte
<script>
|
|
import { bind, onMount } from "svelte/internal";
|
|
import icon from "$lib/images/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>
|