From 68c29b6617a14498e18a84266eff56a94bee767e Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sat, 16 Dec 2023 16:56:39 +1100
Subject: [PATCH] Only show response when available

---
 templates/home.html | 83 +++++++++++++++++++++++++++++++++------------
 1 file changed, 62 insertions(+), 21 deletions(-)

diff --git a/templates/home.html b/templates/home.html
index 42facfa..5063007 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -5,33 +5,53 @@
 <h1 class="text-4xl font-bold text-gray-800 mb-2">Function</h1>
 <h5 class="text-xl text-gray-500 mb-4">Create your own javascript HTTP handler</h5>
 
-<div id="editor" class="relative rounded-lg shadow-lg bg-white p-4 mb-4" style="height: 300px;">{{ script }}
+<div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
+    <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">
+            <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"><span class="sr-only" data-id="22">Bulleted List</span><svg xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" data-id="23" data-darkreader-inline-stroke=""
+            style="--darkreader-inline-stroke: currentColor;">
+            <line x1="8" x2="21" y1="6" y2="6"></line>
+            <line x1="8" x2="21" y1="12" y2="12"></line>
+            <line x1="8" x2="21" y1="18" y2="18"></line>
+            <line x1="3" x2="3.01" y1="6" y2="6"></line>
+            <line x1="3" x2="3.01" y1="12" y2="12"></line>
+            <line x1="3" x2="3.01" y1="18" y2="18"></line>
+        </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="24"><span class="sr-only" data-id="25">Add Link</span><svg xmlns="http://www.w3.org/2000/svg"
+            width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" data-id="26" data-darkreader-inline-stroke=""
+            style="--darkreader-inline-stroke: currentColor;">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+        </svg></button>
 </div>
 
-<button id="executeBtn" class="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-    Execute
-</button>
+<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4" style="height: 300px;">{{ script }}
+</div>
 
-<div id="output" class="relative rounded-lg shadow-lg bg-black text-white p-4">
+
+<div id="output">
     <!-- Execution results will appear here -->
 </div>
 
-<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">
-    </div>
-</aside>
 
 <script>
     var editor = ace.edit("editor");
-    editor.setTheme("ace/theme/monokai");
+    editor.setTheme("ace/theme/github_dark");
     editor.session.setMode("ace/mode/javascript");
 
     editor.session.$worker.send("changeOptions", [{ asi: true }]);
@@ -65,10 +85,31 @@
                     try {
                         const data = JSON.parse(text); // Try to parse the response as JSON
 
-                        const logs_el = document.querySelector('#response-logs');
-                        logs_el.innerHTML = data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n');
+                        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>
+                            `
+                        }
 
-                        document.getElementById('output').innerHTML = data.result.body;
+                        output_el.innerHTML = output_html;
                     } catch (err) {
                         document.getElementById('output').innerHTML = data;
                     }