From 761165cb23488d6ad01207be787b6d081f76e750 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sun, 24 Mar 2024 19:48:43 +1100
Subject: [PATCH] Minor UI change for function edit form, moved execute button
 to bottom

---
 templates/dashboard.html       |   2 +-
 templates/function_editor.html | 242 +++++++++++++++++++--------------
 2 files changed, 140 insertions(+), 104 deletions(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index 86afcc4..738e42e 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -87,7 +87,7 @@
                 <span class="sr-only" data-id="42">Toggle user menu</span>
             </a>
         </header>
-        <main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6" data-id="50" id="container">
+        <main class="flex flex-1 flex-col gap-4 p-4  md:p-6" data-id="50" id="container">
             {{ render_partial('dashboard/http_functions/overview.html', http_functions=http_functions) }}
         </main>
     </div>
diff --git a/templates/function_editor.html b/templates/function_editor.html
index 9a6ab85..d5ae749 100644
--- a/templates/function_editor.html
+++ b/templates/function_editor.html
@@ -1,114 +1,53 @@
 <div>
     <div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
-        <h1 class="font-semibold text-lg text-gray-400 font-mono flex items-center" data-id="52">Code</h1>
+        <div class="">
+            {% if is_edit|default(false, true) %}
+            <div
+                class="inline-flex items-center justify-center space-x-1 h-10 py-2 text-gray-600 dark:text-gray-400 justify-between rounded-md text-md font-medium cursor-pointer">
+                <span class="font-mono" id="function-name-label" onclick="toggleInput()">{{ name }}</span>
+                <input type="text" id="function-name"
+                    class="hidden 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-1.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 }}">
 
-        <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 justify-between"
-            id="execute-code-btn">
-            <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>
-        <script>
-            document.getElementById('execute-code-btn').addEventListener('click', () => {
-                try {
-                    var code = editor.getValue();
-                    // Define the request object (modify as needed)
-                    var requestObject = {
-                    };
-                    var environment_info = editor_environment.getValue().trim();
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5 h-5" onclick="toggleInput()">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10">
+                    </path>
+                </svg>
 
-                    // Send the code and request object to the server
-                    fetch("{{ url_for('execute_code', playground='true') }}", {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ code: code, request: requestObject, environment_info }),
-                    })
-                        .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
+            </div>
+            <script>
+                function toggleInput() {
+                    const textLabel = document.getElementById('function-name-label');
+                    const textInput = document.getElementById('function-name');
 
-                                const output_el = document.querySelector('#output')
-                                let output_html = `
-                                <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
-                                <div class="bg-black text-white p-6 rounded-lg w-full 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">Response: <span class='${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'}'>${data?.result?.status}</span></p>
-                                    </div>
-                                    <div class="mt-4 ${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'} break-words" data-id="8" id="response-logs">
-                                        ${data.status == 'SUCCESS' ? data.result.body : data.result}
-                                    </div>
-                                </div>
-                                <div class="bg-black text-white p-6 rounded-lg w-full 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 ? data.logs.map(log => `<p class="text-white break-words" data-id="11">${log}</p>`).join('\n') : ''}
-                                    </div>
-                                </div>
-                            </div>`
-
-                                output_el.innerHTML = output_html;
-                            } catch (err) {
-                                document.getElementById('output').innerHTML = text;
-                            }
-                        })
-                        .catch(error => {
-                            document.getElementById('output').textContent = 'Error: ' + error.message;
-                        });
-
-                } catch (e) {
-                    document.getElementById('output').innerHTML = 'Error: ' + e.message;
+                    if (textLabel.style.display === 'none') {
+                        textLabel.style.display = 'inline';
+                        textInput.style.display = 'none';
+                        textLabel.innerText = textInput.value;
+                    } else {
+                        textLabel.style.display = 'none';
+                        textInput.style.display = 'inline';
+                        textInput.focus();
+                    }
                 }
-            });
-        </script>
-
-        <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="clear-response-btn"><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>
-        <script>
-            document.querySelector('#clear-response-btn').addEventListener('click', () => { document.querySelector('#output').innerHTML = ''; });
-        </script>
-
-        <!-- Spacer Div -->
-        <div class="flex-auto"></div>
+            </script>
+            {% endif %}
 
+            {% if is_add|default(false, true) %}
+            <label for="function-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Function
+                name</label>
+            <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"
+                placeholder="foo" required="" value="{{ name }}" />
+            {% endif %}
+        </div>
 
     </div>
 
-    <div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}</div>
+    <div id="editor" class="relative rounded-lg shadow-lg p-4">{{ script }}</div>
     <script>
         var editor = ace.edit("editor");
         editor.setOptions({
@@ -121,8 +60,20 @@
     </script>
 
 
-    <div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800 justify-between">
-        <h1 class="font-semibold text-lg text-gray-400 font-mono flex items-center" data-id="52">Environment</h1>
+    <div class="flex space-x-2 border-b border-gray-200 dark:border-gray-800 justify-between">
+        <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 justify-between">
+            <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="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125">
+                </path>
+            </svg>
+
+            <span class="ml-1">Environment</span>
+        </button>
 
         <!-- Spacer Div -->
         <div class="flex-auto"></div>
@@ -206,9 +157,94 @@
     {% endif %}
 
     <div class="flex">
+        <button
+            class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center"
+            id="execute-code-btn">
+            <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>
+            <span class="ml-1">Execute</span>
+        </button>
+        <script>
+            document.getElementById('execute-code-btn').addEventListener('click', () => {
+                try {
+                    var code = editor.getValue();
+                    // Define the request object (modify as needed)
+                    var requestObject = {
+                    };
+                    var environment_info = editor_environment.getValue().trim();
+
+                    // Send the code and request object to the server
+                    fetch("{{ url_for('execute_code', playground='true') }}", {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ code: code, request: requestObject, environment_info }),
+                    })
+                        .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="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+                            <div class="bg-black text-white p-6 rounded-lg w-full 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">Response: <span class='${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'}'>${data?.result?.status}</span></p>
+                                </div>
+                                <div class="mt-4 ${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'} break-words" data-id="8" id="response-logs">
+                                    ${data.status == 'SUCCESS' ? data.result.body : data.result}
+                                </div>
+                            </div>
+                            <div class="bg-black text-white p-6 rounded-lg w-full 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 ? data.logs.map(log => `<p class="text-white break-words" data-id="11">${log}</p>`).join('\n') : ''}
+                                </div>
+                            </div>
+                        </div>`
+
+                                output_el.innerHTML = output_html;
+                            } catch (err) {
+                                document.getElementById('output').innerHTML = text;
+                            }
+                        })
+                        .catch(error => {
+                            document.getElementById('output').textContent = 'Error: ' + error.message;
+                        });
+
+                } catch (e) {
+                    document.getElementById('output').innerHTML = 'Error: ' + e.message;
+                }
+            });
+        </script>
+
+
         {% if is_edit|default(false, true) %}
         <button
-            class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2"
+            class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2 items-center"
             id="edit-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-4 h-4 mr-2">