CimeyClust/HabitTracker
1
1
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

inprovements

Browse Source
This commit is contained in:
janphilippweinsheimer 2024-02-28 10:46:26 +01:00
parent 9e1bd7b65e
commit ba8bc06d89
5 changed files with 77 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
templates/components/delete_button.html Normal file
View File

@ -0,0 +1,20 @@
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Bestätige</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Möchtest du dieses Habit wirklich löschen?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">abbrechen</button>
<button type="button" class="btn btn-primary btn-danger" data-bs-dismiss="modal"
onclick="deleteHabit(selectedHabitId)">Löschen
</button>
</div>
</div>
</div>
</div>

63
templates/components/habit_lists.html
View File

@ -1,11 +1,17 @@
<div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
<! -- Listen erstellen -->
<div class="row mb-3">
<h5 class="col-9">📋 Gewohnheiten</h5>
<a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
<h5 class="col-9">
📋 Gewohnheiten
</h5>
<a class="col-3 btn btn-primary p" role="button" href="/habit-list">
Neue Liste erstellen
</a>
</div>
<! -- Tabs zur Auswahl -->
<ul class="nav nav-tabs card-header-tabs" role="tablist">
{% for habit_list in habit_lists %}
@ -24,8 +30,31 @@
{% for habit_list in habit_lists %}
<div class="tab-pane {% if habit_list == habit_lists[0] %} active {% endif %}"
id="simple-tabpanel-{{habit_list.id}}" role="tabpanel" aria-labelledby="simple-tab-{{habit_list.id}}">
<div class="row mb-3">
<h2 class="col-9"></h2>
<div class="row mb-3 align-items-center">
<! -- Personen die zur Liste gehören -->
<div class="col-2">
<div class="avatar-stack">
<img class="avatar" src="/images/avatar/1.jpg"/>
<img class="avatar" src="/images/avatar/2.jpg"/>
<img class="avatar" src="/images/avatar/4.jpg"/>
<img class="avatar" src="/images/avatar/5.jpg"/>
</div>
</div>
<! -- Knopf für das Hinzufügen einer Person zur gemeinsamen Liste -->
<div class="col-1">
<button type="button" class="btn"
style="width: 40px; height: 40px; min-height: 3em;">
<i class="bi bi-plus"></i>
</button>
</div>
<div class="col-6"></div>
<! -- neue Gewohnheiten erstellen -->
<a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">
Gewohnheit erstellen
</a>
@ -34,25 +63,31 @@
<ul class="task-list row">
{% for habit in habit_list.habits %}
<li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
<! -- Handle zum verschieben -->
<div class="col-auto drag-handle" style="cursor: grab;">
<i class="bi bi-grip-vertical"></i>
</div>
<! -- Checkbox -->
<div class="col-auto">
<input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
id="{{ habit.id }}"
onclick="sendPostRequest('{{ habit.id }}')">
</div>
<! -- Name -->
<div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{{ habit.name }}
</div>
<div class="col-5 text-black text-opacity-50"
<! -- Beschreibung -->
<div class="col-md-3 d-none d-md-block text-black text-opacity-50"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{{ habit.note }}
</div>
<! -- Streak -->
<div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
{% if not habit.streak == 0 %}
{{ habit.streak }} 🔥
@ -60,11 +95,22 @@
</div>
<button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal"
<! -- Knopf für das Löschen einer Gewohnheit -->
<button type="button" class="btn btn-xs me-3" data-bs-toggle="modal"
data-bs-target="#exampleModal" style="width: 40px; height: 40px"
onclick="setSelectedHabitId({{ habit.id }})">
<i class="bi bi-trash3"></i>
</button>
<! -- Knopf für die Einstellungen einer Gewohnheit -->
<button type="button" class="btn"
style="width: 40px; height: 40px; min-height: 3em;">
<i class="bi bi-gear"></i>
</button>
<! -- Progressbar -->
<div class="col-12">
<div class="progress" style="height: 2px; width: 90%">
<div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"
@ -74,7 +120,6 @@
</div>
</div>
</li>
{% endfor %}
</ul>
</div>

1
templates/components/scripts.html
View File

@ -1,3 +1,4 @@
<script>
function checkCompletionAndAnimate(habitId, percentage) {
var progressBar = document.getElementById("progress-bar-" + habitId);

20
templates/index.html
View File

@ -38,25 +38,7 @@
{% include 'components/habit_lists.html' %}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Bestätige</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Möchtest du dieses Habit wirklich löschen?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-danger" data-bs-dismiss="modal"
onclick="deleteHabit(selectedHabitId)">Löschen
</button>
</div>
</div>
</div>
</div>
{% include 'components/delete_button.html' %}
</div>