Roman_Schenk
/
Bewaesserungsanlage
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Merge pull request 'Webserver_Layout Refactoring' (#4) from Webserver_Layout into master 

Reviewed-on: #4
This commit is contained in:
Roman Schenk 2022-08-26 15:45:39 -07:00
parent 4c77aa6070 453542d431
commit 18e8859523
5 changed files with 87 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
Webserver/Templates/dashboard/dashboard.html
View File

@ -26,6 +26,16 @@
</style>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
<script>
function refreshContent() {
executeAction('get_dashboard_pipeline_html', '0', '0', refreshPipeline);
{% for zone in zoneManager.zones %}
executeAction('get_zone_info', {{ zone.number }}, '0', refreshZone);
{% endfor %}
}
</script>
</head>
<body>
@ -78,42 +88,5 @@
</body>
</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" %}

2
Webserver/Templates/footer.html
View File

@ -10,6 +10,6 @@
<script>
refreshContent();
setInterval(refreshContent, {{ (zoneManager.systemSettings.cronJobFrequency + 5) * 1000 }})
</script>

73
Webserver/Templates/header.html
View File

@ -5,60 +5,25 @@
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='Styles/switch.css') }}">
<meta charset="UTF-8">
<script>
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
<script src="{{ url_for('static', filename='js/action.js') }}"></script>
<script src="{{ url_for('static', filename='js/webhook.js') }}"></script>
<script>
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
function executeAction(command, index, value, handleResponse) {
var url = '{{url_for("executeAction")}}';
var messageString = 'no';
var varString = 'command=' + command + '&index=' + index + '&value=' + value;
send_web_request(url, messageString, varString, handleResponse);
}
function executeActionByValueID(command, index, valueID, valueFactor){
var value = document.getElementById(valueID).value * valueFactor;
executeAction(command, index, value);
}
function switchZoneMode(autoMode, zone) {
executeAction('switch_zone_mode' ,zone, (autoMode ? 'automatic' : 'manual'));
sleep(1000).then(() => {
refreshContent();
});
}
function switchZoneState(command, zone, value) {
executeAction(command, zone, value);
sleep(1000).then(() => {
refreshContent();
});
}
function switchZoneStateByValueID(command, zone, valueID, valueFactor) {
executeActionByValueID(command, zone, valueID, valueFactor);
sleep(1000).then(() => {
refreshContent();
});
}
function deleteJobsForZone(command, zone) {
executeAction(command, zone);
sleep(1000).then(() => {
refreshContent();
});
}
function deleteJobById(command, jobId) {
executeAction(command, jobId);
sleep(1000).then(() => {
refreshContent();
});
}
</script>
function executeAction(command, index, value, handleResponse) {
var url = '{{url_for("executeAction")}}';
var messageString = 'no';
var varString = 'command=' + command + '&index=' + index + '&value=' + value;
send_web_request(url, messageString, varString, handleResponse);
}
function executeActionByValueID(command, index, valueID, valueFactor){
var value = document.getElementById(valueID).value * valueFactor;
executeAction(command, index, value);
}
</script>
</head>
<body>
@ -84,8 +49,6 @@
<img src="{{ url_for('static', filename='img/header/blumenbeet.jpg') }}" alt="" class="header-img">
</header>
<script src="{{ url_for('static', filename='js/action.js') }}"></script>
<script src="{{ url_for('static', filename='js/webhook.js') }}"></script>
</body>
</html>

31
Webserver/static/js/action.js
View File

@ -1 +1,32 @@
function switchZoneMode(autoMode, zone) {
executeAction('switch_zone_mode' ,zone, (autoMode ? 'automatic' : 'manual'));
sleep(1000).then(() => {
refreshContent();
});
}
function switchZoneState(command, zone, value) {
executeAction(command, zone, value);
sleep(1000).then(() => {
refreshContent();
});
}
function switchZoneStateByValueID(command, zone, valueID, valueFactor) {
executeActionByValueID(command, zone, valueID, valueFactor);
sleep(1000).then(() => {
refreshContent();
});
}
function deleteJobsForZone(command, zone) {
executeAction(command, zone);
sleep(1000).then(() => {
refreshContent();
});
}
function deleteJobById(command, jobId) {
executeAction(command, jobId);
sleep(1000).then(() => {
refreshContent();
});
}

27
Webserver/static/js/dashboard.js Normal file
View File

@ -0,0 +1,27 @@
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;
}