Fetenzentrale/templates/todo.html

65 lines
2.0 KiB
HTML

{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} ToDos {% endblock %}</h1>
<div id="todoList" class="savedTodos">
{% for todo in todos %}
<div>
{% if todos[todo].done%}
<input type="checkbox" style="margin-right: 2mm; " onclick="checkTodo({{todo}})" checked/><font color="green">{{todos[todo].message}}</font>
{% else %}
<input type="checkbox" style="margin-right: 2mm; " onclick="checkTodo({{todo}})"/>{{todos[todo].message}}
{% endif %}
</div>
{% endfor %}
</div>
<form method="post" action="/sendTodo">
<div class="form-group" style="margin-left:2mm">
<label for="todoMessage">Todo:</label>
<input type="text" name="todoMessage" style="width:90%"
class="form-control"
value="{{ request.form['todoMessage'] }}" required></input>
<input type="submit" id="saveTodo" value="Speichern" style="margin-top: 3mm;"/>
</div>
</form>
<script>
async function checkTodo(id){
const response = await fetch("http://127.0.0.1:5000/checktodo", {
method: "POST",
body: id,
});
fetch("/reloadChecklist", {
method: "GET"
}).then(response => {
return response.text();
})
.then(html => {
todoList.innerHTML = html
})
}
// check alarms in here too
alarms = {{ alarms|tojson }};
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>
{% endblock %}