From d8b441374e6c983f434f819041b22ee2c9940081 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sat, 16 Dec 2023 21:27:49 +1100
Subject: [PATCH] Add ability to add new http functions (Needs refactor, bad
 stuff)

---
 app.py                                      |  13 ++
 db.py                                       |   4 +
 templates/dashboard/http_functions.html     |   3 +-
 templates/dashboard/http_functions/new.html | 148 ++++++++++++++++++++
 4 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 templates/dashboard/http_functions/new.html

diff --git a/app.py b/app.py
index 8512101..709b9ee 100644
--- a/app.py
+++ b/app.py
@@ -81,6 +81,19 @@ def dashboard_http_functions():
     http_functions = create_http_functions_view_model(http_functions)
     return render_template("dashboard/http_functions.html", http_functions=http_functions)
 
+@ app.route("/dashboard/http_functions/add_form", methods=["GET"])
+def get_http_function_add_form():
+    script=DEFAULT_SCRIPT
+    name = "foo"
+    return render_template("dashboard/http_functions/new.html", name=name, script=script)
+
+@ app.route("/dashboard/http_functions/create", methods=["POST"])
+def create_http_function():
+    name = request.json.get('name')
+    script_content = request.json.get('script_content')
+    db.create_new_http_function(name, script_content)
+    return render_template("dashboard/http_functions/new.html", name=name, script=script_content)
+
 @ app.route("/dashboard/timer_functions", methods=["GET"])
 def dashboard_timer_functions():
     return render_template("dashboard/timer_functions.html")
diff --git a/db.py b/db.py
index 843b639..897a787 100644
--- a/db.py
+++ b/db.py
@@ -55,3 +55,7 @@ class DataBase():
         http_function = self.execute(
             'SELECT id, NAME, script_content, invoked_count FROM http_functions WHERE NAME=%s', [name], one=True)
         return http_function
+    
+    def create_new_http_function(self, name, script_content):
+        self.execute(
+            'INSERT INTO http_functions (NAME, script_content) VALUES (%s, %s)', [name, script_content], commit=True)
diff --git a/templates/dashboard/http_functions.html b/templates/dashboard/http_functions.html
index d12415c..a104f90 100644
--- a/templates/dashboard/http_functions.html
+++ b/templates/dashboard/http_functions.html
@@ -1,7 +1,8 @@
 <div class="flex items-center" data-id="51">
     <h1 class="font-semibold text-lg md:text-2xl" data-id="52">HTTP functions</h1>
     <button
-        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto">
+        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
+        hx-get="{{ url_for('get_http_function_add_form') }}" hx-target="#container" hx-swap="innerHTML">
         Add Function
     </button>
 </div>
diff --git a/templates/dashboard/http_functions/new.html b/templates/dashboard/http_functions/new.html
new file mode 100644
index 0000000..c94fc36
--- /dev/null
+++ b/templates/dashboard/http_functions/new.html
@@ -0,0 +1,148 @@
+<div class="flex items-center" data-id="51">
+    <h1 class="font-semibold text-lg md:text-2xl" data-id="52">New HTTP function</h1>
+</div>
+
+
+<div>
+    <div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
+        <input type="text" id="function-name"
+            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-fit"
+            placeholder="foo" required="" value="{{ name }}">
+        <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
+            id="executeBtn">
+            <span class="sr-only" data-id="4">Bold</span>
+            <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" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
+                </path>
+            </svg>
+        </button>
+        <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
+            data-id="21" id="clearBtn"><span class="sr-only" data-id="22">Bulleted List</span>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+        <button
+            class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-2 border border-blue-500 hover:border-transparent rounded flex"
+            id="add-http-function">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6 mr-2" data-darkreader-inline-stroke=""
+                style="--darkreader-inline-stroke: currentColor;">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
+            </svg>
+
+            <p> Add</p>
+        </button>
+
+    </div>
+
+    <div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}
+    </div>
+</div>
+
+<div id="output">
+    <!-- Execution results will appear here -->
+</div>
+
+<script>
+    var editor = ace.edit("editor");
+    editor.setOptions({
+        maxLines: editor.session.getLength()
+    });
+    editor.setTheme("ace/theme/github_dark");
+    editor.session.setMode("ace/mode/javascript");
+
+    editor.session.$worker.send("changeOptions", [{ asi: true }]);
+
+
+    document.getElementById('executeBtn').addEventListener('click', function () {
+        try {
+            // Get the code from the editor
+            var code = editor.getValue();
+
+            // Define the request object (modify as needed)
+            var requestObject = {
+                // Your request object properties here
+            };
+
+            // Send the code and request object to the server
+            fetch('/execute?playground=true', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ code: code, request: requestObject }),
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.text();
+                })
+                .then(text => {
+                    try {
+                        const data = JSON.parse(text); // Try to parse the response as JSON
+
+                        const output_el = document.querySelector('#output')
+                        let output_html = `
+                        <div class="relative rounded-lg shadow-lg p-4">
+                            ${data.result.body}
+                        </div>
+                        `;
+                        if (data?.logs?.length > 0) {
+                            output_html += `
+                            <aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-4" data-id="1">
+                                <div class="flex justify-between items-center" data-id="2">
+                                <div class="flex space-x-2 text-red-500" data-id="3">
+                                <div class="w-3 h-3 rounded-full bg-red-500" data-id="4"></div>
+                                <div class="w-3 h-3 rounded-full bg-yellow-500" data-id="5"></div>
+                                <div class="w-3 h-3 rounded-full bg-green-500" data-id="6"></div>
+                            </div>
+                            <p class="text-sm" data-id="7">logs</p>
+                            </div>
+                            <div class="mt-4" data-id="8" id="response-logs">
+                                ${data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n')}
+                            </div>
+                                </aside>
+                            `
+                        }
+
+                        output_el.innerHTML = output_html;
+                    } catch (err) {
+                        document.getElementById('output').innerHTML = data;
+                    }
+                })
+                .catch(error => {
+                    document.getElementById('output').textContent = 'Error: ' + error.message;
+                });
+
+        } catch (e) {
+            document.getElementById('output').innerHTML = 'Error: ' + e.message;
+        }
+    });
+
+    document.querySelector('#clearBtn').addEventListener('click', function () {
+        //editor.setValue();
+        document.querySelector('#output').innerHTML = '';
+    });
+
+    document.querySelector('#add-http-function').addEventListener('click', () => {
+        let name = document.querySelector('#function-name').value;
+        let script_content = editor.getValue();
+
+        fetch("{{ url_for('create_http_function') }}", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ name, script_content }),
+        })
+    })
+</script>
\ No newline at end of file