Add js function to show alerts when updating http 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(text => {
-                document.querySelector('#container').innerHTML = text
-                htmx.process(htmx.find('#container'))
+            .then(response => response.json())
+            .then(json => {
+                showAlert(json.message, json.status)
             })
     })
 </script>