137 lines
5.6 KiB
HTML
137 lines
5.6 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<h1>{% block title %} Partey! {% endblock %}</h1>
|
|
<meta id="my-data" data-alarms="{{alarms}}" data-logs="{{logs}}">
|
|
<div class="grid-container">
|
|
<div class="savedLogs">
|
|
<h3>Logs</h3>
|
|
{% for log in logs %}
|
|
<div>
|
|
{{ log.datetime }}: {{ log.message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="savedAlarms" id="upcomingAlarms">
|
|
<h3>Anstehende Alarme</h3>
|
|
{% for alarm in alarms %}
|
|
<div>
|
|
{{ alarms[alarm].datetime }}: {{ alarms[alarm].message }} <input style="text-align: right;" type="button" value="❌" onclick="deleteAlarm({{alarm}})"/>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="log">
|
|
<form method="post" action="/sendLog">
|
|
|
|
<div class="form-group">
|
|
<label for="logMessage">Log:</label>
|
|
<input type="text" name="logMessage"
|
|
class="form-control"
|
|
value="{{ request.form['logMessage'] }}"></input>
|
|
<input type="submit" id="saveLog" value="Speichern" style="margin-top: 3mm;"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="alarms">
|
|
<form method="post" action="/setAlarm">
|
|
|
|
<div class="form-group">
|
|
<div class="datetime" style="padding-left: 3mm;">
|
|
<input type="date" name="date"
|
|
class="form-control"
|
|
value="{{ request.form['date'] }}" style="width: 150px;"></input>
|
|
</div>
|
|
<div class="datetime">
|
|
<input type="time" name="time" class="form-control"
|
|
value="{{ request.form['time'] }}" style="width: 85px;" required></input>
|
|
</div>
|
|
<div style="padding: 3mm;">
|
|
<label for="alarmMessage">Alarm-Text</label>
|
|
<input type="text" name="alarmMessage"
|
|
class="form-control"
|
|
value="{{ request.form['alarmMessage'] }}" required></input>
|
|
</div>
|
|
<input type="submit" id="saveAlarm" value="Speichern" style="padding-left: 3mm; margin-left: 3mm;"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="previousAlarms" id="previousAlarms">
|
|
<h3>Vergangene Alarme</h3>
|
|
<script>
|
|
alarms = {{ alarms|tojson }};
|
|
console.log(alarms);
|
|
async function postAlarm(alarm){
|
|
var body = JSON.stringify(alarm)
|
|
const response = await fetch("http://127.0.0.1:5000/alarms", {
|
|
method: "POST",
|
|
body: body,
|
|
});
|
|
fetch("/processAlarm", {
|
|
method: "GET"
|
|
}).then(response => {
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
upcomingAlarms.innerHTML = html
|
|
})
|
|
fetch("/processpAlarm", {
|
|
method: "GET"
|
|
}).then(response => {
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
previousAlarms.innerHTML = html
|
|
})
|
|
}
|
|
async function deleteAlarm(id){
|
|
const response = await fetch("http://127.0.0.1:5000/deletealarm", {
|
|
method: "POST",
|
|
body: id,
|
|
});
|
|
fetch("/processAlarm", {
|
|
method: "GET"
|
|
}).then(response => {
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
upcomingAlarms.innerHTML = html
|
|
})
|
|
fetch("/processpAlarm", {
|
|
method: "GET"
|
|
}).then(response => {
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
previousAlarms.innerHTML = html
|
|
})
|
|
}
|
|
|
|
function checkAlarms(){
|
|
for(var i = 0; i < alarms.length; i++){
|
|
|
|
const [dateComponents, timeComponents] = alarms[i].datetime.split(' ');
|
|
|
|
const [day, month, year] = dateComponents.split('.');
|
|
const [hours, minutes] = timeComponents.split(':');
|
|
|
|
const date = new Date(+year, +month - 1, +day, +hours, +minutes);
|
|
if(date <=new Date()){
|
|
postAlarm(alarms[i]);
|
|
alert(alarms[i].message);
|
|
alarms.splice(i, 1);
|
|
|
|
}
|
|
}
|
|
setTimeout(checkAlarms, 15000);
|
|
}
|
|
checkAlarms();
|
|
</script>
|
|
{% for alarm in previousAlarms %}
|
|
<div>
|
|
{{ previousAlarms[alarm].datetime }}: {{ previousAlarms[alarm].message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %} |