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.
323 lines
19 KiB
323 lines
19 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; white-space: nowrap;"><b>Jahr:</b> <span id="yearHours"></span>h/600h<span id="rule55Badge" class="badge badge-warning d-none" title="55h-Regel aktiv: Monate mit LDC/Sonstiges werden auf 55h gedeckelt" style="font-size: 0.55rem; vertical-align: middle; margin-left: 0.25rem;">55h</span></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>
|
|
|
|
<!-- justify-content-around verteilt die Badges wie bisher auf die verfügbare Breite,
|
|
solange sie passen; erst wenn der individuell vergebene Schnellwahl-Titel (siehe
|
|
Einstellungen) zu lang wird, greift overflow-x: auto statt eines Umbruchs. -->
|
|
<div class="d-flex justify-content-around mt-3" style="overflow-x: auto; gap: 0.5rem; padding-bottom: 2px;">
|
|
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Dienst: <span id="monthHourService"></span>h</button>
|
|
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;"><span id="monthHourLDCLabel">LDC</span>: <span id="monthHourLDC"></span>h</button>
|
|
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Ü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" id="timerCard" 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 style="position: sticky; top: 0; background-color: white; padding-top: 1rem; z-index: 100; width: 100%;">
|
|
<div class="d-flex justify-content-between align-items-center" style="width: 100%;">
|
|
<p style="font-size: 1.2rem; margin: 0;" ><b>Aktivitäten</b></p>
|
|
<div class="d-flex align-items-center" style="gap: 0.5rem;">
|
|
<button type="button" id="openNewEntryForm" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal" style="width: 45px; height: 45px; padding: 0;"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button>
|
|
<button type="button" id="toggleSortOptions" class="btn btn-light" title="Filter/Sortierung ein-/ausblenden" style="width: 45px; height: 45px; padding: 0;"><img id="toggleSortOptionsIcon" src="{% static 'app/images/more.png' %}" alt="filter" class="img-fluid"></button>
|
|
<button type="button" id="openViewOfEntry" class="btn btn-light" title="Tabelle maximieren" style="width: 45px; height: 45px; padding: 0;"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid"></button>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center" id="sortOptionsRow" style="width: 100%; margin-top: 0.5rem; gap: 0.5rem;">
|
|
<!-- Eigener Dropdown statt <select>, damit das Auswahlmenü nicht als winziges natives
|
|
Popup irgendwo auf dem Bildschirm erscheint, sondern direkt unter dem Button. -->
|
|
<div style="position: relative; flex: 1;">
|
|
<button type="button" id="sortFieldButton" class="btn btn-light btn-sm" style="font-size: 0.85rem; width: 100%; text-align: left;">
|
|
<span id="sortFieldLabel">Datum</span> ▾
|
|
</button>
|
|
<div id="sortFieldMenu" class="d-none" style="position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.25rem; background-color: white; border-radius: 0.5rem; box-shadow: 0 0 0.5rem gray; z-index: 200; overflow: hidden;">
|
|
<div class="sortFieldOption" data-value="date" data-label="Datum" style="padding: 0.5rem 0.75rem; font-size: 0.85rem;">Datum</div>
|
|
<div class="sortFieldOption" data-value="duration" data-label="Dauer" style="padding: 0.5rem 0.75rem; font-size: 0.85rem;">Dauer</div>
|
|
<div class="sortFieldOption" data-value="type" data-label="Typ" style="padding: 0.5rem 0.75rem; font-size: 0.85rem;">Typ</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" id="sortDirectionToggle" class="btn btn-light btn-sm" style="font-size: 0.85rem; flex: 1;" title="Sortierrichtung umkehren">
|
|
<span id="sortDirectionIcon">A → Z</span>
|
|
</button>
|
|
</div>
|
|
</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">
|
|
<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" id="ldcCheckLabel">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">
|
|
<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" id="editldcCheckLabel">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/home01.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 %}
|