Added list_attribute addition

templates/components/habit_lists.html

@@ -1,6 +1,6 @@
 <div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
 
-    <! -- Listen erstellen -->
+    <!-- Listen erstellen -->
     <div class="row mb-3">
         <h5 class="col-9">
             📋 Gewohnheiten
@@ -11,7 +11,7 @@
         </a>
     </div>
 
-    <! -- Tabs zur Auswahl -->
+    <!-- Tabs zur Auswahl -->
     <ul class="nav nav-tabs card-header-tabs" role="tablist">
         {% for habit_list in habit_lists %}
 
@@ -25,6 +25,39 @@
         </li>
         {% endfor %}
     </ul>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Select all the tab links
+            const tabLinks = document.querySelectorAll('.nav-link');
+
+            tabLinks.forEach(function(link) {
+                // Add a click event listener to each tab link
+                link.addEventListener('click', function(e) {
+                    // Prevent the default action
+                    e.preventDefault();
+
+                    // Get the tab ID
+                    const tabId = this.getAttribute('href').match(/simple-tabpanel-(\d+)/)[1];
+
+                    // Update the URL with the new query parameter
+                    const newUrl = updateQueryStringParameter(window.location.href, 'list', tabId);
+                    window.history.pushState({path:newUrl}, '', newUrl);
+                });
+            });
+
+            // Update the URL with the new query parameter
+            function updateQueryStringParameter(uri, key, value) {
+                var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
+                if (uri.match(re)) {
+                    return uri.replace(re, '$1' + key + "=" + value + '$2');
+                }
+                else {
+                    return uri + separator + key + "=" + value;
+                }
+            }
+        });
+    </script>
 
     <div class="tab-content pt-5" id="tab-content">
         {% for habit_list in habit_lists %}
@@ -32,7 +65,7 @@
              id="simple-tabpanel-{{habit_list.id}}" role="tabpanel" aria-labelledby="simple-tab-{{habit_list.id}}">
             <div class="row mb-3 align-items-center">
 
-                <! -- Personen die zur Liste gehören -->
+                <!-- Personen die zur Liste gehören -->
                 <div class="col-2">
                     <div class="avatar-stack">
                         <img class="avatar" src="/images/avatar/1.jpg"/>
@@ -42,7 +75,7 @@
                     </div>
                 </div>
 
-                <! -- Knopf für das Hinzufügen einer Person zur gemeinsamen Liste -->
+                <!-- 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;">
@@ -54,7 +87,7 @@
 
                 <div class="col-6"></div>
 
-                <! -- neue Gewohnheiten erstellen -->
+                <!-- neue Gewohnheiten erstellen -->
                 <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">
                     Gewohnheit erstellen
                 </a>
@@ -64,30 +97,30 @@
                 {% for habit in habit_list.habits %}
                 <li class="row d-flex align-items-center mb-2" id="habit-{{ habit.id }}">
 
-                    <! -- Handle zum verschieben -->
+                    <!-- Handle zum verschieben -->
                     <div class="col-auto drag-handle" style="cursor: grab;">
                         <i class="bi bi-grip-vertical"></i>
                     </div>
 
-                    <! -- Checkbox -->
+                    <!-- 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 -->
+                    <!-- Name -->
                     <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                         {{ habit.name }}
                     </div>
 
-                    <! -- Beschreibung -->
+                    <!-- 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 -->
+                    <!-- Streak -->
                     <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                         {% if not habit.streak == 0 %}
                         {{ habit.streak }} 🔥
@@ -95,14 +128,14 @@
 
                     </div>
 
-                    <! -- Knopf für das Löschen einer Gewohnheit -->
+                    <!-- 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 -->
+                    <!-- Knopf für die Einstellungen einer Gewohnheit -->
                     <button type="button" class="btn"
                             style="width: 40px; height: 40px; min-height: 3em;">
 
@@ -110,7 +143,7 @@
 
                     </button>
 
-                    <! -- Progressbar -->
+                    <!-- Progressbar -->
                     <div class="col-12">
                         <div class="progress" style="height: 2px; width: 90%">
                             <div class="progress-bar" id="progress-bar-{{ habit.id }}" role="progressbar"