You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
16 KiB
299 lines
16 KiB
{% extends 'app/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
|
|
<script>
|
|
document.getElementById('body').classList.replace('bg-white-color','bg-blue-color');
|
|
document.getElementById('header-color-block').classList.replace('bg-white-color','bg-blue-color');
|
|
document.getElementById('HeaderText').style.display = 'block';
|
|
document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
|
|
</script>
|
|
|
|
<div class="container" id="welcome_content">
|
|
<br>
|
|
<h1>Wilkommen!</h1>
|
|
<p>
|
|
Schön das du hier bist!
|
|
<br>Ich wünsche dir viel Freude mit der App.
|
|
<br>Diese ist noch ganz neu und wächst immer weiter!
|
|
<br>
|
|
<br><b>Hinweis:</b>
|
|
<br>Die App rundet immer ab 15min auf die nächste halbe Stunde auf.
|
|
<br>In Zukunft wird dies einstellbar sein.
|
|
<br>
|
|
<br><b>Verwendung:</b>
|
|
<br>Diese Daten liegen erstmal lokal auf deinem Handy. In Zukunft wird es so sein,
|
|
<br>das du dir einen Account anlegen kannst und die Daten gesichert werden und du auch über andere Geräte darauf zugreifen kannst.
|
|
<br><i style="color: red">Wenn du <u>aktuell</u> die App löscht, sind <u>alle</u> Daten weg!</i>
|
|
<br>
|
|
<br><b>Datenschutz</b>
|
|
<br>Sowohl jetzt, als auch mit einem Account werden keine Personen bezogenen Daten gesammelt oder gesichert.
|
|
</p>
|
|
<br>
|
|
<button class="btn btn-primary" id="allOk">Alles klar</button>
|
|
</div>
|
|
|
|
<div class="container mt-5" id="update_content">
|
|
|
|
{% include 'app/updateinfo.html' %}
|
|
|
|
<button class="btn btn-primary" id="allUpdateOk">Alles klar</button>
|
|
</div>
|
|
|
|
<div class="d-none" id="dashboard">
|
|
<div class="row justify-content-around mt-3" style="width: 100vw; color: black;">
|
|
<div class="col-11" id="dashbord_year_area" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<div class="row justify-content-between">
|
|
<p class="col-6" style="font-size: 1rem; margin-top: -0.75rem;"><b>Jahr:</b> <span id="yearHours"></span>h/600h</p>
|
|
<p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> <span id="yearRest"></span>h</p>
|
|
</div>
|
|
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
|
|
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 0.5%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarYear"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-11 mt-4" id="dashbord_month_area" style="padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
|
|
<div class="row justify-content-between">
|
|
<p class="col-7" style="font-size: 1.25rem;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
|
|
<input type="number" class="d-none" id="MonthSumHours">
|
|
<p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> <span id="monthRest"></span>h</p>
|
|
</div>
|
|
|
|
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem">
|
|
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); height: 5px; width: 1%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarMonth"></div>
|
|
</div>
|
|
|
|
<div class="row justify-content-around">
|
|
<button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">Dienst: <span id="monthHourService"></span>h</button>
|
|
<button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">LDC: <span id="monthHourLDC"></span>h</button>
|
|
<button class="col-3 mt-3 badge badge-primary" style="height: 25px; border: none;">Übrig: <span id="monthHourOther"></span>h</button>
|
|
</div>
|
|
|
|
<div class="row justify-content-around align-middle monthEntrys mt-3" style="max-height: 2.5rem; width: 99%; margin-left: 1%;">
|
|
<span class="col-2 btn btn-secondary" id="btn-month-before" onclick="event.stopPropagation();"><</span>
|
|
<p class="col-6" style="text-align:center; width: 100%; font-size: 1.75rem; margin: 0;"><b id="actualMonthName"></b></p>
|
|
<span class="col-2 btn btn-secondary" id="btn-month-next" onclick="event.stopPropagation();">></span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-around" style="width: 100vw; color: black; padding-top: 2rem;">
|
|
<div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<p style="font-size: 1.2rem;"><b>Timer</b></p>
|
|
<div class="row justify-content-between" style="margin-top: -1rem;">
|
|
<p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;">:00</i></p>
|
|
<div class="col-7 row justify-content-center">
|
|
<img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
|
|
<img id="pauseTimer" src="{% static 'app/images/pause.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px;">
|
|
<img id="resetTimer" src="{% static 'app/images/stop.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
|
|
<div class="col-12" id="ActivitysTable" style="height: 40vh; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;">
|
|
<div class="row justify-content-between align-items-center m-0" style="width: 100%;position: sticky; top: 0; background-color: white; padding-top: 1rem; z-index: 100;">
|
|
<p class="col-5" style="font-size: 1.2rem; margin: 0 1rem 0 -1rem;" ><b>Aktivitäten</b></p>
|
|
<!-- <span class="col-2" style="margin-left: 32%; padding: 0;"><img id="resetTimer" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="height: 35px"></span> -->
|
|
<button type="button" id="openNewEntryForm" class="offset-2 col-2 btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button>
|
|
<button type="button" id="sortmenubutton" class="offset-1 col-2 btn btn-light"><img id="openViewOfEntryIcon" src="{% static 'app/images/sorting.png' %}" alt="open" class="img-fluid"></button>
|
|
</div>
|
|
<table class="table table-striped" style="z-index: 1;">
|
|
<tbody id="entriesTableBody" style="overflow-y: auto; max-height: 70%;"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
.table td {
|
|
text-overflow:initial;
|
|
max-width: 100px;
|
|
}
|
|
|
|
tbody tr {
|
|
position: relative;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
tbody tr.swipe-left {
|
|
transform: translateX(0%);
|
|
}
|
|
|
|
tbody tr.swipe-left .delete-btn {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<!-- NEUER EINTRAGModal -->
|
|
<div class="modal fade" id="newEntryModal" tabindex="-1" aria-labelledby="newEntryModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="newEntryModalLabel">Neuer Eintrag</h5>
|
|
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen">X</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form method="POST" action="">
|
|
{% csrf_token %}
|
|
<!-- Dauer in Stunden und Minuten -->
|
|
<div class="form-row">
|
|
<div class="form-group col-7">
|
|
<p><b>Dauer</b></p>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="stunden" placeholder="00" min="0" max="99" maxlength="2" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">h</span>
|
|
</div>
|
|
<input type="number" class="form-control" id="minuten" placeholder="00" min="0" max="59" maxlength="2" value="0" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datum -->
|
|
<div class="form-group">
|
|
<p><b>Datum</b></p>
|
|
<input type="date" class="form-control" id="datum" required>
|
|
</div>
|
|
|
|
<!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
|
|
<div class="form-group">
|
|
<p><b>Optionen:</b></p>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="ldcCheck" name="optionen" value="LDC">
|
|
<label class="form-check-label" for="ldcCheck">LDC</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="sonstigesCheck" name="optionen" value="Sonstiges">
|
|
<label class="form-check-label" for="sonstigesCheck">Sonstiges</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Textfeld für Sonstiges (versteckt, wenn Sonstiges nicht gewählt ist) -->
|
|
<div class="form-group" id="sonstiges-text" style="display:none;">
|
|
<!--
|
|
<label for="sonstigesInput">Beschreibung:</label>
|
|
-->
|
|
<input type="text" class="form-control" id="sonstigesInput" placeholder="max. 10 Zeichen" maxlength="10">
|
|
</div>
|
|
<button type="button" class="btn btn-light disabled" id="newEntrySubmitButton" data-bs-dismiss="modal">Hinzufügen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- EINTRAG BEARBEITEN -->
|
|
<div class="modal fade" id="editEntryModel" tabindex="-1" aria-labelledby="editEntryModel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="newEntryModalLabel">Eintrag bearbeiten</h5>
|
|
<button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal" aria-label="Schließen" id="closeEditWindowButton">X</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form method="POST" action="">
|
|
{% csrf_token %}
|
|
<input type="text" name="editEntryID" id="editEntryID" class="d-none">
|
|
<!-- Dauer in Stunden und Minuten -->
|
|
<div class="form-row">
|
|
<div class="form-group col-7">
|
|
<p><b>Dauer</b></p>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control editItem" id="editStunden" placeholder="00" min="0" max="99" maxlength="2" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">h</span>
|
|
</div>
|
|
<input type="number" class="form-control editItem" id="editMinuten" placeholder="00" min="0" max="59" maxlength="2" value="0" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Datum -->
|
|
<div class="form-group">
|
|
<p><b>Datum</b></p>
|
|
<input type="date" class="form-control editItem" id="editDatum" required>
|
|
</div>
|
|
|
|
<!-- Auswahl LDC oder Sonstiges (Checkboxen) -->
|
|
<div class="form-group">
|
|
<p><b>Optionen:</b></p>
|
|
<div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input editItem" type="checkbox" id="editldcCheck" name="editldcCheck" value="LDC">
|
|
<label class="form-check-label" for="editldcCheck">LDC</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input editItem" type="checkbox" id="editsonstigesCheck" name="editsonstigesCheck" value="Sonstiges">
|
|
<label class="form-check-label" for="editsonstigesCheck">Sonstiges</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Textfeld für Sonstiges (versteckt, wenn Sonstiges nicht gewählt ist) -->
|
|
<div class="form-group" id="edit-sonstiges-text" style="display:none;">
|
|
<!--
|
|
<label for="sonstigesInput">Beschreibung:</label>
|
|
-->
|
|
<input type="text" class="form-control editItem" id="editsonstigesInput" placeholder="max. 10 Zeichen" maxlength="10">
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="editEntrySubmitButton" data-bs-dismiss="modal">Speichern</button>
|
|
<button type="button" class="btn btn-danger" id="DeleteEntryButton" data-bs-dismiss="modal">Löschen</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script>
|
|
|
|
// Setze das heutige Datum als Standardwert
|
|
document.getElementById('datum').value = new Date().toISOString().split('T')[0];
|
|
|
|
/* Verarbeitung der Einstellungen */
|
|
|
|
const settingsIcon = document.getElementById('settings_icon')
|
|
settingsIcon.addEventListener('click', () => {
|
|
document.getElementById('header-bg-block').classList.replace('HeaderDefaultHeightbg', 'openSettingsbg')
|
|
document.getElementById('header-bg-block').classList.replace('closeSettingsbg', 'openSettingsbg')
|
|
document.getElementById('header-color-block').classList.replace('HeaderDefaultHeightcolor', 'openSettingscolor')
|
|
document.getElementById('header-color-block').classList.replace('closeSettingscolor', 'openSettingscolor')
|
|
document.getElementById('refresh_icon').style.opacity = 0;
|
|
document.getElementById('settings_icon').classList.add('d-none');
|
|
document.getElementById('settings_close_icon').classList.remove('d-none');
|
|
})
|
|
document.getElementById('settings_close_icon').addEventListener('click', () => {
|
|
document.getElementById('header-bg-block').classList.replace('openSettingsbg', 'closeSettingsbg')
|
|
document.getElementById('header-color-block').classList.add('openSettingscolor', 'closeSettingscolor')
|
|
document.getElementById('settings_icon').classList.remove('d-none');
|
|
document.getElementById('settings_close_icon').classList.add('d-none');
|
|
document.getElementById('refresh_icon').style.opacity = 1;
|
|
})
|
|
</script>
|
|
|
|
<script src="{% static 'app/js/home.js' %}"></script>
|
|
<script src="{% static 'app/js/timer.js' %}"></script>
|
|
<script src="{% static 'app/js/welcomeControl.js' %}"></script>
|
|
<script src="{% static 'app/js/UpdateInfoControl.js' %}"></script>
|
|
{% endblock %}
|