2022-08-27 00:29:22 +02:00
|
|
|
{% include "header.html" %}
|
2022-08-25 15:37:54 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="de">
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/dashboard.css') }}">
|
2022-08-27 00:29:22 +02:00
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/scrollingTable.css') }}">
|
2022-08-25 15:37:54 +02:00
|
|
|
|
|
|
|
|
<title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
@media screen and (min-width: 2051px){
|
|
|
|
|
#zones{
|
|
|
|
|
grid-template-rows: repeat( {{ (zoneManager.zones|length / 3) + 1 }} , minmax(150px, auto));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media screen and (max-width: 2050px) and (min-width: 1351px){
|
|
|
|
|
#zones{
|
|
|
|
|
grid-template-rows: repeat( {{ (zoneManager.zones|length / 2) + 1 }} , minmax(150px, auto));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media screen and (max-width: 1350px){
|
|
|
|
|
#zones{
|
|
|
|
|
grid-template-rows: repeat( {{ zoneManager.zones|length }} , minmax(150px, auto));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
|
|
|
|
|
<h2>{{ translater.getTranslation("Dashboard") }}</h2>
|
|
|
|
|
|
|
|
|
|
|
2022-08-27 00:29:22 +02:00
|
|
|
<div id="pipeline" class="scrollingtable">
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<table>
|
|
|
|
|
<caption>{{ translater.getTranslation("planed irrigationjobs") }}</caption>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th><div label="Nr."></div></th>
|
|
|
|
|
<th><div label="{{ translater.getTranslation("Zone") }}"></div></th>
|
|
|
|
|
<th><div label="{{ translater.getTranslation("planed duration") }}"></div></th>
|
|
|
|
|
<th><div label="{{ translater.getTranslation("delete") }}"></div></th>
|
|
|
|
|
<th class="scrollbarhead"></th> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="jobListBody">
|
|
|
|
|
{% include "dashboard/pipeline.html" %}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
Text unter Table
|
|
|
|
|
</div>
|
2022-08-25 15:37:54 +02:00
|
|
|
</div>
|
2022-08-27 00:29:22 +02:00
|
|
|
|
2022-08-25 15:37:54 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<h3>{{ translater.getTranslation("irrigation zones") }}</h3>
|
|
|
|
|
<div id="zones">
|
|
|
|
|
{% for zone in zoneManager.zones %}
|
|
|
|
|
<div id="zone_{{ zone.number }}" class="zone">
|
|
|
|
|
{% include "dashboard/zone.html" %}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
<p><br><br></p>
|
|
|
|
|
|
|
|
|
|
</body>
|
2022-08-27 00:29:22 +02:00
|
|
|
</html>
|
|
|
|
|
<script>
|
|
|
|
|
function refreshZone(zone_json) {
|
|
|
|
|
const zone = JSON.parse(zone_json);
|
|
|
|
|
document.getElementById("name_zone_" + zone.number).innerHTML = zone.name;
|
|
|
|
|
document.getElementById("inner_icon_state_zone_" + zone.number).className = 'inner_icon ' + (zone.state ? 'dot_green' : 'dot_red');
|
|
|
|
|
document.getElementById("state_text_zone_" + zone.number).innerHTML = zone.state_text;
|
|
|
|
|
document.getElementById("end_time_row_zone_" + zone.number).style.display = ((zone.setState == 1 || zone.setState == 2) ? 'table-row' : 'none');
|
|
|
|
|
document.getElementById("end_time_zone_" + zone.number).innerHTML = zone.endTimeSetState;
|
|
|
|
|
document.getElementById("planed_duration_row_zone_" + zone.number).style.display = ((zone.planedDuration > 0) ? 'table-row' : 'none');
|
|
|
|
|
document.getElementById("planed_duration_zone" + zone.number).innerHTML = zone.planedDuration/60;
|
|
|
|
|
document.getElementById("inner_icon_mode_zone_" + zone.number).innerHTML = zone.autoMode ? 'A' : 'M';
|
|
|
|
|
document.getElementById("slider_state_zone_" + zone.number).checked = zone.autoMode ? true : false;
|
|
|
|
|
document.getElementById("mode_text_zone_" + zone.number).innerHTML = zone.operationMode_text;
|
|
|
|
|
document.getElementById("inner_icon_humidity_zone_" + zone.number).className = 'inner_icon ' + ((zone.actualHumidity >= zone.desiredHumidity) ? 'dot_green' : 'dot_red');
|
|
|
|
|
document.getElementById("acutal_humidity_zone_" + zone.number).innerHTML = zone.actualHumidity;
|
|
|
|
|
document.getElementById("desired_humidity_zone_" + zone.number).innerHTML = zone.desiredHumidity;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function buttonDeleteJobById(jobId) {
|
|
|
|
|
deleteJobById('delete_job_by_id',jobId);
|
|
|
|
|
var jobToDelete = document.getElementById("job_" + jobId);
|
|
|
|
|
document.getElementById("jobListBody").removeChild(jobToDelete);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refreshPipeline(pipeline_html) {
|
|
|
|
|
document.getElementById("jobListBody").innerHTML = pipeline_html;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refreshContent() {
|
|
|
|
|
executeAction('get_dashboard_pipeline_html', '0', '0', refreshPipeline);
|
|
|
|
|
{% for zone in zoneManager.zones %}
|
|
|
|
|
executeAction('get_zone_info', {{ zone.number }}, '0', refreshZone);
|
|
|
|
|
{% endfor %}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
refreshContent();
|
|
|
|
|
</script>
|
|
|
|
|
{% include "footer.html" %}
|
