Finished habit deletion feature

app.py

@@ -124,7 +124,7 @@ def index():
         name = "Hallo " + current_user.name
     else:
         habits = []
-        name = "Bitte melde dich an, du Vollhorst."
+        name = "Bitte melde dich an."
 
     # Add checked attribute to habits (if they have been checked today)
     for habit in habits:
@@ -357,6 +357,24 @@ def check_habit():
         "unchecked": not delete_tracking
     }
 
+@app.route('/delete', methods=['POST'])
+@login_required
+def delete_habit():
+    habit_id = request.get_json()["habitId"]
+
+    habit = Habit.get(habit_id)
+
+    if habit is None:
+        return {"error": "Habit not found"}
+
+    # Check if habit belongs to user
+    if habit.user_id != current_user.id:
+        return {"error": "Habit does not belong to user"}
+
+    habit.delete()
+
+    return {}
+
 
 # Run the application
 if __name__ == '__main__':

templates/index.html

@@ -77,7 +77,7 @@
     </script>
 
     <div class="col-sm-12 col-md-7 col-12">
-        <div class="row">
+        <div class="row mb-3">
             <h2 class="col-10">Task List</h2>
             <a class="col-2 btn btn-primary" role="button" href="/habit">
                 Task erstellen
@@ -86,7 +86,7 @@
 
         <ul class="task-list row">
             {% for habit in habits %}
-            <li class="row col-md-4">
+            <li class="row d-flex align-items-center mb-2" id="habit-{{habit.id}}">
                 <div class="col-auto">
                     <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox" id="{{habit.id}}" onclick="sendPostRequest('{{habit.id}}')">
                 </div>
@@ -95,12 +95,15 @@
                     {{ habit.name }}
                 </div>
 
-            </li>
+                <div class="col-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-
-            <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                     {{ habit.note }}
                 </div>
 
+                <button type="button" class="btn btn-xs btn-danger rounded-circle" style="width: 40px; height: 40px" onclick="deleteHabit('{{habit.id}}')">
+                    <i class="bi bi-trash3"></i>
+                </button>
+            </li>
+
             {% endfor %}
         </ul>
     </div>
@@ -126,6 +129,25 @@
                 console.error('Error:', error);
             });
         }
+
+        function deleteHabit(habitId) {
+            // Make a POST request to /delete with the habit id
+            axios.post('/delete', { habitId: habitId }, {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then(function (response) {
+                // Handle the success response if needed
+                console.log(response.data);
+
+                // Remove the habit from the DOM
+                var habitElement = document.getElementById("habit-" + habitId);
+                habitElement.remove();
+            }).catch(function (error) {
+                // Handle the error if needed
+                console.error('Error:', error);
+            });
+        }
     </script>
 </div>
 

templates/layouts/main.html

@@ -8,6 +8,7 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="/static/main.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!-- Axios Library-->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>