Re-add garden interface
This commit is contained in:
parent
6ebf407e43
commit
7c4a6a3a56
@ -101,6 +101,14 @@ def index():
|
||||
draw_temperature_image()
|
||||
return render_template('index.html')
|
||||
|
||||
@app.route('/garden')
|
||||
def garden():
|
||||
return render_template('garden.html')
|
||||
|
||||
@app.route('/greenhouse')
|
||||
def greenhouse_1():
|
||||
return render_template('greenhouse.html')
|
||||
|
||||
@app.route('/sample/<idx>', methods=['GET'])
|
||||
def get_sample(idx='0'):
|
||||
"""Handle GET to /sample/<idx>"""
|
||||
|
116
greenhouseui/static/scripts/garden.js
Normal file
116
greenhouseui/static/scripts/garden.js
Normal file
@ -0,0 +1,116 @@
|
||||
var on_switch_water = function() {
|
||||
var state = true;
|
||||
if(document.getElementById("water_switch").value == "ausschalten") {
|
||||
state = false;
|
||||
}
|
||||
var json_str = JSON.stringify({"id": "3", "waterstate": state});
|
||||
patch_sample(json_str);
|
||||
}
|
||||
|
||||
var on_switch_auto_state = function() {
|
||||
var state = true;
|
||||
if(document.getElementById("auto_switch").value == "ausschalten") {
|
||||
state = false;
|
||||
}
|
||||
var json_str = JSON.stringify({"water": {"id": "3", "autostate": state}});
|
||||
patch_config(json_str);
|
||||
}
|
||||
|
||||
var on_change_config = function() {
|
||||
var on_time_one = document.getElementById("water_on_one").value;
|
||||
var off_time_one = document.getElementById("water_off_one").value;
|
||||
var on_time_two = document.getElementById("water_on_two").value;
|
||||
var off_time_two = document.getElementById("water_off_two").value;
|
||||
var json_str = JSON.stringify({"water": {"id": "3", "times": [{"on_time": on_time_one, "off_time": off_time_one}, {"on_time": on_time_two, "off_time": off_time_two}]}});
|
||||
patch_config(json_str);
|
||||
}
|
||||
|
||||
var http_patch_config = new XMLHttpRequest();
|
||||
http_patch_config.onreadystatechange = function () {
|
||||
if (http_patch_config.readyState === 4) {
|
||||
var status = http_patch_config.status;
|
||||
if (status === 0 || (status >= 200 && status < 400)) {
|
||||
// The request has been completed successfully
|
||||
parse_config(http_patch_config.responseText);
|
||||
}
|
||||
} else {
|
||||
// request error
|
||||
}
|
||||
}
|
||||
var patch_config = function(config) {
|
||||
http_patch_config.abort();
|
||||
http_patch_config.open("PATCH", "/config");
|
||||
http_patch_config.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
||||
http_patch_config.send(config);
|
||||
}
|
||||
|
||||
var patch_http = new XMLHttpRequest();
|
||||
var patch_sample = function(sample) {
|
||||
patch_http.abort();
|
||||
patch_http.open("PATCH", "/sample");
|
||||
patch_http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
|
||||
patch_http.send(sample);
|
||||
}
|
||||
|
||||
var parse_config = function (event) {
|
||||
var config = JSON.parse(event)
|
||||
var output = "einschalten"
|
||||
var visibility = 'hidden'
|
||||
if(config.water && config.water.id == '3') {
|
||||
if(config.water.autostate) {
|
||||
output = "ausschalten"
|
||||
visibility = "visible"
|
||||
document.getElementById("water_on_one").value = config.water.times[0].on_time;
|
||||
document.getElementById("water_off_one").value = config.water.times[0].off_time;
|
||||
document.getElementById("water_on_two").value = config.water.times[1].on_time;
|
||||
document.getElementById("water_off_two").value = config.water.times[1].off_time;
|
||||
}
|
||||
document.getElementById("auto_switch").value = output;
|
||||
document.getElementById("water_times").style.visibility = visibility
|
||||
}
|
||||
}
|
||||
|
||||
var parse_sample = function (event) {
|
||||
var sample = JSON.parse(event)
|
||||
if(sample.water && sample.water.id == '3') {
|
||||
var switch_caption = "einschalten";
|
||||
if(sample.water.state) {
|
||||
switch_caption = "ausschalten";
|
||||
}
|
||||
document.getElementById("water_switch").value = switch_caption;
|
||||
}
|
||||
}
|
||||
|
||||
var http = new XMLHttpRequest();
|
||||
http.onreadystatechange = function () {
|
||||
if (http.readyState === 4) {
|
||||
var status = http.status;
|
||||
if (status === 0 || (status >= 200 && status < 400)) {
|
||||
// The request has been completed successfully
|
||||
parse_sample(http.responseText);
|
||||
setTimeout(function () {
|
||||
http.open("GET", 'sample/3');
|
||||
http.send();
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
// request error
|
||||
}
|
||||
}
|
||||
http.open("GET", "sample/3");
|
||||
http.send();
|
||||
|
||||
var http_get_config = new XMLHttpRequest();
|
||||
http_get_config.onreadystatechange = function () {
|
||||
if (http_get_config.readyState === 4) {
|
||||
var status = http_get_config.status;
|
||||
if (status === 0 || (status >= 200 && status < 400)) {
|
||||
// The request has been completed successfully
|
||||
parse_config(http_get_config.responseText);
|
||||
}
|
||||
} else {
|
||||
// request error
|
||||
}
|
||||
}
|
||||
http_get_config.open("GET", "config/3");
|
||||
http_get_config.send();
|
@ -161,7 +161,7 @@ http.onreadystatechange = function () {
|
||||
setTimeout(function () {
|
||||
http.open("GET", 'sample/1');
|
||||
http.send();
|
||||
}, 500);
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
// request error
|
||||
|
76
greenhouseui/templates/garden.html
Normal file
76
greenhouseui/templates/garden.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Garten</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
<script src="/static/scripts/garden.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Garten</h1>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td class="left">Bewässerung</td>
|
||||
<td class="input">
|
||||
<input id="water_switch" type="submit" value="" onclick="on_switch_water()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Zeigesteuerte Bewässerung </td>
|
||||
<td class="input">
|
||||
<input id="auto_switch" type="submit" value="einschalten" onclick="on_switch_auto_state()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="water_times" style="visibility:hidden;">
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td>Vormittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Nachmittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<nav>
|
||||
<a href="/">Home</a> | 
|
||||
<a href="/greenhouse" class="center">Gewächshaus</a> | 
|
||||
<a href="/garden" class="center">Garten</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</html>
|
124
greenhouseui/templates/greenhouse.html
Normal file
124
greenhouseui/templates/greenhouse.html
Normal file
@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gewächshaus</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
<script src="/static/scripts/greenhouse.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gewächshaus</h1>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td><h3>Temperatur </h3></td>
|
||||
<td><h3 id="temperature_value"></h3></td>
|
||||
<td><h3> °C</h3></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
<img src="{{url_for('static', filename='greenhouse_temperature.png')}}"/>
|
||||
</div>
|
||||
<div>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td class="table_left" id="heat_switch_label" style="visibility: hidden;">Heizung </td>
|
||||
<td class="input">
|
||||
<input id="heat_switch" style="visibility: hidden;" type="submit" value="" onclick="on_switch_heat()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left">Frostwächter</td>
|
||||
<td class="input">
|
||||
<input id="heat_auto_switch" type="submit" value="" onclick="on_switch_heat_autostate()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_temperatures_on" style="visibility: hidden;">
|
||||
<td class="table_left">Einschalttemperatur</td>
|
||||
<td>
|
||||
<table class="center">
|
||||
<td class="input">
|
||||
<input id="decrease_on_temperature" type="submit" value="-" onclick="on_decrease_on_temperature()"></input>
|
||||
</td>
|
||||
<td id="on_temperature"></td>
|
||||
<td class="input">
|
||||
<input id="increase_on_temperature" type="submit" value="+" onclick="on_increase_on_temperature()"></input>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_temperatures_off" style="visibility: hidden;">
|
||||
<td class="table_left">Ausschalttemperatur</td>
|
||||
<td>
|
||||
<table class="center">
|
||||
<td class="input">
|
||||
<input id="decrease_off_temperature" type="submit" value="-" onclick="on_decrease_off_temperature()"></input>
|
||||
</td>
|
||||
<td id="off_temperature"></td>
|
||||
<td class="input">
|
||||
<input id="increase_off_temperature" type="submit" value="+" onclick="on_increase_off_temperature()"></input>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left" id="water_switch_label" style="visibility: hidden;">Bewässerung</td>
|
||||
<td class="input">
|
||||
<input id="water_switch" style="visibility: hidden;" type="submit" value="" onclick="on_switch_water()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left">Zeigesteuerte Bewässerung </td>
|
||||
<td class="input">
|
||||
<input id="water_auto_switch" type="submit" value="" onclick="on_switch_water_auto_state()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_times_before_noon" style="visibility: hidden;">
|
||||
<td>Vormittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_times_afternoon" style="visibility: hidden;">
|
||||
<td>Nachmittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<footer>
|
||||
<nav>
|
||||
<a href="/">Home</a> | 
|
||||
<a href="/greenhouse" class="center">Gewächshaus</a> | 
|
||||
<a href="/garden" class="center">Garten</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</html>
|
@ -1,117 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gewächshaus</title>
|
||||
<title>Garten</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/static/css/style.css" rel="stylesheet">
|
||||
<script src="/static/scripts/greenhouse.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Gewächshaus</h1>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td><h3>Temperatur </h3></td>
|
||||
<td><h3 id="temperature_value"></h3></td>
|
||||
<td><h3> °C</h3></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div>
|
||||
<img src="{{url_for('static', filename='greenhouse_temperature.png')}}"/>
|
||||
</div>
|
||||
<div>
|
||||
<table class="center">
|
||||
<tr>
|
||||
<td class="table_left" id="heat_switch_label" style="visibility: hidden;">Heizung </td>
|
||||
<td class="input">
|
||||
<input id="heat_switch" style="visibility: hidden;" type="submit" value="" onclick="on_switch_heat()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left">Frostwächter</td>
|
||||
<td class="input">
|
||||
<input id="heat_auto_switch" type="submit" value="" onclick="on_switch_heat_autostate()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_temperatures_on" style="visibility: hidden;">
|
||||
<td class="table_left">Einschalttemperatur</td>
|
||||
<td>
|
||||
<table class="center">
|
||||
<td class="input">
|
||||
<input id="decrease_on_temperature" type="submit" value="-" onclick="on_decrease_on_temperature()"></input>
|
||||
</td>
|
||||
<td id="on_temperature"></td>
|
||||
<td class="input">
|
||||
<input id="increase_on_temperature" type="submit" value="+" onclick="on_increase_on_temperature()"></input>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_temperatures_off" style="visibility: hidden;">
|
||||
<td class="table_left">Ausschalttemperatur</td>
|
||||
<td>
|
||||
<table class="center">
|
||||
<td class="input">
|
||||
<input id="decrease_off_temperature" type="submit" value="-" onclick="on_decrease_off_temperature()"></input>
|
||||
</td>
|
||||
<td id="off_temperature"></td>
|
||||
<td class="input">
|
||||
<input id="increase_off_temperature" type="submit" value="+" onclick="on_increase_off_temperature()"></input>
|
||||
</td>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left" id="water_switch_label" style="visibility: hidden;">Bewässerung</td>
|
||||
<td class="input">
|
||||
<input id="water_switch" style="visibility: hidden;" type="submit" value="" onclick="on_switch_water()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="table_left">Zeigesteuerte Bewässerung </td>
|
||||
<td class="input">
|
||||
<input id="water_auto_switch" type="submit" value="" onclick="on_switch_water_auto_state()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_times_before_noon" style="visibility: hidden;">
|
||||
<td>Vormittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_one" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="config_times_afternoon" style="visibility: hidden;">
|
||||
<td>Nachmittag</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Einschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_on_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ausschaltzeit</td>
|
||||
<td class="input">
|
||||
<input type="text" id="water_off_two" style="width: 70px;" onchange="on_change_config()"></input>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h1>Garten</h1>
|
||||
<div class="center">
|
||||
<a href="/greenhouse">Gewächshaus</a><br>
|
||||
<a href="/garden">Garten</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<a href="/">Home</a> | 
|
||||
<a href="/greenhouse" class="center">Gewächshaus</a> | 
|
||||
<a href="/garden" class="center">Garten</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user