Merge branch 'master' of https://repo.cimeyclust.com/CimeyClust/HabitTracker

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"

templates/components/scripts.html

@@ -66,27 +66,31 @@
 
 
     document.addEventListener('DOMContentLoaded', (event) => {
-        var el = document.querySelector('.task-list');
+        var elements = document.querySelectorAll('.task-list').values()
-        Sortable.create(el, {
-            handle: '.drag-handle',
-            animation: 150,
-            onEnd: function (evt) {
-                var habitId = el.children[evt.newIndex].id.split('-')[1];
-                var oldIndex = evt.oldIndex;
-                var newIndex = evt.newIndex;
 
-                axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
+        // loop through the elements
-                    headers: {
+        for (let el of elements) {
-                        'Content-Type': 'application/json'
+            Sortable.create(el, {
-                    }
+                handle: '.drag-handle',
-                }).then(function (response) {
+                animation: 150,
-                    // Handle the success response if needed
+                onEnd: function (evt) {
-                }).catch(function (error) {
+                    var habitId = el.children[evt.newIndex].id.split('-')[1];
-                    // Handle the error if needed
+                    var oldIndex = evt.oldIndex;
-                    console.error('Error:', error);
+                    var newIndex = evt.newIndex;
-                });
+
-            }
+                    axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
-        });
+                        headers: {
+                            'Content-Type': 'application/json'
+                        }
+                    }).then(function (response) {
+                        // Handle the success response if needed
+                    }).catch(function (error) {
+                        // Handle the error if needed
+                        console.error('Error:', error);
+                    });
+                }
+            });
+        }
     });