From 25178b5aadc402ad124663b2f723a2d91e1a468d Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 28 Mar 2024 21:26:49 +1100
Subject: [PATCH] Packaging a few small changes

* Make edit http function endpoint accept function id rather than name
* Move show alert js function to function editor template as its only used here
* Added a note that previous commit (API -> isolator request was changed from global routing to inter app routing) (It sped things up, but not its regressed; need to look into this further)
---
 app.py                         | 12 ++++-----
 db.py                          |  6 ++---
 templates/base.html            | 28 ---------------------
 templates/function_editor.html | 46 ++++++++++++++++++++++++++++------
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/app.py b/app.py
index f7bb776..fedb6a2 100644
--- a/app.py
+++ b/app.py
@@ -35,7 +35,8 @@ class User(UserMixin):
             return User(id=str(user_data['id']), username=user_data['username'], password_hash=user_data['password_hash'], created_at=user_data['created_at'])
         return None
 
-
+# Swith to inter app routing, which results in speed up from ~400ms to ~270ms
+# https://stackoverflow.com/questions/76886643/linking-two-not-exposed-dokku-apps
 API_URL = os.environ.get('API_URL', 'http://isolator.web:5000/execute') # 'https://isolator.peterstockings.com/execute' 'http://127.0.0.1:5000/execute'
 
 DEFAULT_FUNCTION_NAME = 'foo'
@@ -159,20 +160,19 @@ def get_http_function_edit_form(function_id):
         return render_block(app.jinja_env, 'dashboard/http_functions/edit.html', 'page', user_id=user_id, function_id=function_id, name=name, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
     return render_template("dashboard/http_functions/edit.html", user_id=user_id, name=name, function_id=function_id, script=script, environment_info=environment_info, is_public=is_public, log_request=log_request, log_response=log_response)
 
-@ app.route("/dashboard/http_functions/edit", methods=["POST"])
+@ app.route("/dashboard/http_functions/<int:function_id>/edit", methods=["POST"])
 @login_required
-def edit_http_function():
+def edit_http_function(function_id):
     try:
         user_id = current_user.id
         name = request.json.get('name')
-        updated_name = request.json.get('updated_name')
         script_content = request.json.get('script_content')
         environment_info = request.json.get('environment_info')
         is_public = request.json.get('is_public')
         log_request = request.json.get('log_request')
         log_response = request.json.get('log_response')
         
-        db.edit_http_function(user_id, name, updated_name, script_content, environment_info, is_public, log_request, log_response)
+        db.edit_http_function(user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response)
 
         return { "status": "success", "message": f'{name} updated' }
     except Exception as e:
@@ -206,7 +206,7 @@ def get_http_function_logs(function_id):
         return render_block(app.jinja_env, 'dashboard/http_functions/logs.html', 'page', user_id=user_id, function_id=function_id, name=name, http_function_invocations=http_function_invocations)
     return render_template("dashboard/http_functions/logs.html", user_id=user_id, name=name, function_id=function_id, http_function_invocations=http_function_invocations)
 
-@ app.route("/http_functions/<int:function_id>/client", methods=["GET"])
+@ app.route("/dashboard/http_functions/<int:function_id>/client", methods=["GET"])
 @login_required
 def client(function_id):
     user_id = current_user.id
diff --git a/db.py b/db.py
index a7d8609..a2921ba 100644
--- a/db.py
+++ b/db.py
@@ -69,10 +69,10 @@ class DataBase():
             commit=True
         )
 
-    def edit_http_function(self, user_id, name, updated_name, script_content, environment_info, is_public, log_request, log_response):
+    def edit_http_function(self, user_id, function_id, name, script_content, environment_info, is_public, log_request, log_response):
         self.execute(
-            'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s WHERE user_id=%s AND NAME=%s',
-            [updated_name, script_content, environment_info, is_public, log_request, log_response, user_id, name],
+            'UPDATE http_functions SET NAME=%s, script_content=%s, environment_info=%s, is_public=%s, log_request=%s, log_response=%s WHERE user_id=%s AND id=%s',
+            [name, script_content, environment_info, is_public, log_request, log_response, user_id, function_id],
             commit=True
         )
     
diff --git a/templates/base.html b/templates/base.html
index a842288..6631653 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -83,32 +83,4 @@
 
         {% 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>
\ No newline at end of file
diff --git a/templates/function_editor.html b/templates/function_editor.html
index 20f6908..977f0d7 100644
--- a/templates/function_editor.html
+++ b/templates/function_editor.html
@@ -288,32 +288,29 @@
         </button>
         <script>
             document.querySelector('#edit-http-function').addEventListener('click', () => {
-                let name = "{{ name }}";
-                let updated_name = document.querySelector('#function-name').value;
+                let name = document.querySelector('#function-name').value;
                 let script_content = editor.getValue().trim();
                 let environment_info = editor_environment.getValue().trim();
                 let is_public = document.querySelector('#is_public').checked
                 let log_request = document.querySelector('#log_request').checked
                 let log_response = document.querySelector('#log_response').checked
 
-                fetch("{{ url_for('edit_http_function') }}", {
+                fetch("{{ url_for('edit_http_function', function_id=function_id) }}", {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({ name, updated_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.json())
                     .then(json => {
-                        if (name != updated_name) {
+                        if ("{{ name }}" != name) {
                             htmx.ajax('GET', "{{ url_for('get_http_function_edit_form', function_id=function_id) }}", {
                                 target: '#container',
                                 swap: 'innerHTML'
                             });
                         }
-                        else {
-                            showAlert(json.message, json.status)
-                        }
+                        showAlert(json.message, json.status)
                     })
             })
         </script>
@@ -362,4 +359,37 @@
         <!-- Execution results will appear here -->
     </div>
 
+    <script>
+        function showAlert(message, type = 'success', duration = 1500) {
+            // Create a new div element
+            var alertContainerDiv = document.createElement('div');
+
+            // Add the required classes to the alertContainerDiv
+            alertContainerDiv.classList.add('fixed', 'top-10', 'right-10', 'z-50');
+
+            // Append the new div to the body of the document
+            document.body.appendChild(alertContainerDiv);
+
+            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
+            alertContainerDiv.appendChild(alertDiv);
+
+            // Remove the alert after 'duration' milliseconds
+            setTimeout(() => {
+                alertDiv.style.opacity = '0';
+                setTimeout(() => alertContainerDiv.parentElement.removeChild(alertContainerDiv), 300);
+            }, duration);
+        }
+    </script>
+
 </div>
\ No newline at end of file