HabitList Drag and Drop

It works now, yay!

app.py

@@ -64,7 +64,10 @@ def index():
         day = None
         heatmap_color = None
 
-    # Sort habits by whether they have been checked today and then by slot
+    # Sort habit_lists based on their order attribute
+    habit_lists = sorted(habit_lists, key=lambda habitList: habitList.slot)
+
+    # Sort habits within each habit_list by slot
     for habit_list in habit_lists:
         habit_list.habits = sorted(habit_list.get_habits(), key=lambda habit: (habit.checked, habit.slot))
         for habit in habit_list.get_habits():
@@ -704,7 +707,7 @@ def deny_list():
 @login_required
 def reorder_habit_list():
     new_index = request.get_json()["newIndex"] + 1
-    habitList = HabitList.get(request.get_json()["habitListId"])
+    habitList = HabitList.get(request.get_json()["listId"])
 
     if habitList is None:
         return {"error": "HabitList not found"}
@@ -714,7 +717,7 @@ def reorder_habit_list():
     if current_user not in users:
         return {"error": "HabitList does not belong to user"}
 
-    habitList.update_slot(new_index)
+    habitList.update_slot(current_user.id, new_index)
 
     return {}
 ###########################################################

static/script/script-index.js

@@ -164,6 +164,35 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
+document.addEventListener('DOMContentLoaded', () => {
+    const listElements = document.querySelectorAll('.nav-tabs').values();
+
+    // Loop through the list elements
+    for (let listEl of listElements) {
+        Sortable.create(listEl, {
+            handle: '.nav-link', // Use the nav-link as the handle for dragging
+            animation: 150,
+            onEnd: function (evt) {
+                const listId = evt.item.id.split('-')[1];
+                const oldIndex = evt.oldIndex;
+                const newIndex = evt.newIndex;
+
+                // Send a POST request to reorder the list
+                axios.post('/reorder-list', { listId: listId, 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);
+                });
+            }
+        });
+    }
+});
+
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 })

templates/components/habit_lists.html

@@ -1,3 +1,4 @@
+<!--suppress HtmlUnknownTarget -->
 <div class="flex-fill col-md-7 col-lg-8 col-12 card bg-light p-6 mb-6">
 
     <!-- Listen erstellen -->
@@ -43,8 +44,8 @@
 
             // Update the URL with the new query parameter
             function updateQueryStringParameter(uri, key, value) {
-                var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
-                var separator = uri.indexOf('?') !== -1 ? "&" : "?";
+                const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+                const separator = uri.indexOf('?') !== -1 ? "&" : "?";
                 if (uri.match(re)) {
                     return uri.replace(re, '$1' + key + "=" + value + '$2');
                 }
@@ -88,7 +89,7 @@
                         {% for user in habit_list.get_users() %}
                         {% if current_user.id != user.id %}
                         <img class="avatar" src="/{{user.profile_image}}" data-toggle="tooltip" data-placement="top"
-                             title="{{user.name}}"/>
+                             title="{{user.name}}" alt=""/>
                         {% endif %}
                         {% endfor %}
                     </div>
@@ -121,7 +122,7 @@
                             {% for user in habit_list.get_users() %}
                             {% if current_user.id != user.id %}
                             <img class="avatar" src="/{{user.profile_image}}" data-toggle="tooltip" data-placement="top"
-                                 title="{{user.name}}"/>
+                                 title="{{user.name}}" alt=""/>
                             {% endif %}
                             {% endfor %}
                         </div>
@@ -150,8 +151,7 @@
                     <!-- Checkbox -->
                     <div class="col-auto">
                         <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
-                               id="{{ habit.id }}"
-                               onclick="sendPostRequest('{{ habit.id }}')">
+                                id="{{ habit.id }}" onclick="sendPostRequest('{{ habit.id }}')">
                     </div>
 
                     <!-- Name -->