inprovements

templates/components/delete_button.html

@@ -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>

templates/components/habit_lists.html

@@ -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>
+        <h5 class="col-9">
-        <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
+            📋 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">
+            <div class="row mb-3 align-items-center">
-                <h2 class="col-9"></h2>
+
+                <! -- 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>

templates/components/scripts.html

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

templates/index.html

@@ -38,25 +38,7 @@
     {% include 'components/habit_lists.html' %}
 
 
-    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    {% include 'components/delete_button.html' %}
-        <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>
 
 </div>