Add js function to show alerts when updating http functions

app.py

@@ -102,7 +102,7 @@ def create_http_function():
         return render_template("dashboard/http_functions.html", http_functions=http_functions)
     except Exception as e:
         print(e)
-        return render_template("dashboard/http_functions/new.html", name=name, script=script_content)
+        return { "status": "error", "message": str(e) }
 
 @ app.route("/dashboard/http_functions/edit_form", methods=["GET"])
 def get_http_function_edit_form():
@@ -122,10 +122,10 @@ def edit_http_function():
         environment_info = json.dumps(eval(request.json.get('environment_info')))
         
         db.edit_http_function(name, script_content, environment_info)
-        return render_template("dashboard/http_functions/edit.html", name=name, script=script_content, environment_info=environment_info)
+        return { "status": "success", "message": f'{name} updated' }
     except Exception as e:
         print(e)
-        return render_template("dashboard/http_functions/edit.html", name=name, script=script_content)
+        return { "status": "error", "message": str(e) }
 
 @ app.route("/dashboard/http_functions/delete", methods=["DELETE"])
 def delete_http_function():
@@ -137,7 +137,7 @@ def delete_http_function():
         http_functions = create_http_functions_view_model(http_functions)
         return render_template("dashboard/http_functions.html", http_functions=http_functions)
     except Exception as e:
-        return jsonify({'error': str(e)}), 500
+        return jsonify({"status": 'error', "message": str(e)}), 500
 
 @ app.route("/dashboard/timer_functions", methods=["GET"])
 def dashboard_timer_functions():

templates/base.html

@@ -28,5 +28,33 @@
         {% block content %}
 
         {% endblock %}
+    </div>
 
+    <div id="alert-container" class="fixed top-10 right-10 z-50"></div>
+
+    <script>
+        function showAlert(message, type = 'success', duration = 1500) {
+            const alertContainer = document.getElementById('alert-container');
+            const alertDiv = document.createElement('div');
+
+            const icon = type === 'success'
+                ? '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>'  // SVG for success icon
+                : '<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01"></path></svg>'; // SVG for error icon
+
+            const baseClasses = "flex items-center p-4 mb-4 text-sm text-white rounded-lg shadow-md transition-opacity duration-300";
+            alertDiv.className = `${baseClasses} ${type === 'success' ? 'bg-green-400' : 'bg-red-400'}`;
+            alertDiv.innerHTML = `${icon}<span class="ml-3">${message}</span>`;
+
+
+
+            // Append alert div to the container
+            alertContainer.appendChild(alertDiv);
+
+            // Remove the alert after 'duration' milliseconds
+            setTimeout(() => {
+                alertDiv.style.opacity = '0';
+                setTimeout(() => alertContainer.removeChild(alertDiv), 300);
+            }, duration);
+        }
+    </script>
 </body>

templates/dashboard/http_functions/edit.html

@@ -190,10 +190,9 @@
             },
             body: JSON.stringify({ name, script_content, environment_info }),
         })
-            .then(response => response.text())
+            .then(response => response.json())
-            .then(text => {
+            .then(json => {
-                document.querySelector('#container').innerHTML = text
+                showAlert(json.message, json.status)
-                htmx.process(htmx.find('#container'))
             })
     })
 </script>