In function editor template modify add/delete functionality so it uses htmx.ajax and updates url

app.py

@@ -126,18 +126,18 @@ def get_http_function_add_form():
 def create_http_function():
     try:
         user_id = current_user.id
-        name = request.json.get('name')
+        name = request.form.get('name')
-        script_content = request.json.get('script_content')
+        script_content = request.form.get('script_content')
-        environment_info = request.json.get('environment_info')
+        environment_info = request.form.get('environment_info')
-        is_public = request.json.get('is_public')
+        is_public = request.form.get('is_public')
-        log_request = request.json.get('log_request')
+        log_request = request.form.get('log_request')
-        log_response = request.json.get('log_response')
+        log_response = request.form.get('log_response')
 
         db.create_new_http_function(user_id, name, script_content, environment_info, is_public, log_request, log_response)
         
         http_functions = db.get_http_functions_for_user(user_id)
         http_functions = create_http_functions_view_model(http_functions)
-        return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
+        return render_template("dashboard/http_functions/overview.html", http_functions=http_functions), 200, {"HX-Push-Url": url_for('dashboard_http_functions')}
     except Exception as e:
         print(e)
         return { "status": "error", "message": str(e) }
@@ -179,17 +179,17 @@ def edit_http_function(function_id):
         print(e)
         return { "status": "error", "message": str(e) }
 
-@ app.route("/dashboard/http_functions/delete", methods=["DELETE"])
+@ app.route("/dashboard/http_functions/<int:function_id>/delete", methods=["DELETE"])
 @login_required
-def delete_http_function():
+def delete_http_function(function_id):
     try:
         user_id = current_user.id
         name = request.args.get('name')
-        db.delete_http_function(user_id, name)
+        db.delete_http_function(user_id, function_id)
         
         http_functions = db.get_http_functions_for_user(user_id)
         http_functions = create_http_functions_view_model(http_functions)
-        return render_template("dashboard/http_functions/overview.html", http_functions=http_functions)
+        return render_template("dashboard/http_functions/overview.html", http_functions=http_functions), 200, {"HX-Push-Url": url_for('dashboard_http_functions')}
     except Exception as e:
         return jsonify({"status": 'error', "message": str(e)}), 500
 

db.py

@@ -80,9 +80,9 @@ class DataBase():
         self.execute(
             'UPDATE http_functions SET environment_info=%s, invoked_count = invoked_count + 1 WHERE user_id=%s AND NAME=%s', [json.dumps(environment_info), user_id, name], commit=True)
 
-    def delete_http_function(self, user_id, name):
+    def delete_http_function(self, user_id, function_id):
         self.execute(
-            'DELETE FROM http_functions WHERE user_id=%s AND NAME=%s', [user_id, name], commit=True)
+            'DELETE FROM http_functions WHERE user_id=%s AND id=%s', [user_id, function_id], commit=True)
 
     def add_http_function_invocation(self, http_function_id, status, request_data, response_data, logs):
         self.execute(

templates/function_editor.html

@@ -276,8 +276,8 @@
         </button>
         <button
             class="bg-transparent hover:bg-red-500 text-red-700 font-semibold hover:text-white py-2 px-4 border border-red-500 hover:border-transparent rounded flex mr-2 items-center"
-            hx-delete="{{ url_for('delete_http_function', name=name) }}" hx-target="#container" hx-swap="innerHTML"
+            hx-delete="{{ url_for('delete_http_function', function_id=function_id) }}" hx-target="#container"
-            hx-confirm="Are you sure you want to delete {{ name }}?" hx-push-url="true">
+            hx-swap="innerHTML" hx-confirm="Are you sure you want to delete {{ name }}?" hx-push-url="true">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-4 h-4 mr-2">
                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -337,18 +337,13 @@
                 let log_request = document.querySelector('#log_request').checked
                 let log_response = document.querySelector('#log_response').checked
 
-                fetch("{{ url_for('create_http_function') }}", {
+                htmx.ajax('POST', "{{ url_for('create_http_function') }}", {
-                    method: 'POST',
+                    target: '#container',
-                    headers: {
+                    swap: 'innerHTML',
-                        'Content-Type': 'application/json',
+                    values: { name, script_content, environment_info, is_public, log_request, log_response }
-                    },
+                });
-                    body: JSON.stringify({ name, script_content, environment_info, is_public, log_request, log_response }),
+
-                })
+
-                    .then(response => response.text())
-                    .then(text => {
-                        document.querySelector('#container').innerHTML = text
-                        htmx.process(htmx.find('#container'))
-                    })
             })
         </script>
         {% endif %}