From 9d4e6e1709acb656cc17822702587d28c317e481 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sat, 16 Dec 2023 17:50:08 +1100
Subject: [PATCH] Add ability to clear script and output, and add link to
 dashboard from home page

---
 templates/home.html | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/templates/home.html b/templates/home.html
index 1120ce1..20a0efd 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -2,8 +2,27 @@
 
 {% block content %}
 
-<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>
+<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 dark:bg-gray-800/40" data-id="29"><a
+        class="lg:hidden" data-id="30" href="#"><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="h-6 w-6" data-id="31" data-darkreader-inline-stroke=""
+            style="--darkreader-inline-stroke: currentColor;">
+            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
+        </svg><span class="sr-only" data-id="32">Home</span></a>
+    <div class="w-full flex-1" data-id="33">
+        <h1 class="text-4xl font-bold text-gray-800 mb-2">Function</h1>
+    </div><a
+        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 hover:bg-accent hover:text-accent-foreground rounded-full border border-gray-200 w-8 h-8 dark:border-gray-800"
+        data-id="40" type="button" id="radix-:r1u:" aria-haspopup="menu" aria-expanded="false" data-state="closed"
+        href="{{ url_for('dashboard') }}"><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="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
+        </svg>
+        <span class="sr-only" data-id="42">Toggle user menu</span></a>
+</header>
+<h5 class="text-xl text-gray-500 mb-4">Create your own javascript HTTP & Timer handlers</h5>
 
 <div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
     <button
@@ -19,7 +38,7 @@
     </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>
+        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">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -121,6 +140,13 @@
             document.getElementById('output').innerHTML = 'Error: ' + e.message;
         }
     });
+
+    document.querySelector('#clearBtn').addEventListener('click', function () {
+        editor.setValue(`async (req) => {
+    return HtmlResponse('<h1 style="font-size: 50px;">Hello World!</h1>')
+}`);
+        document.querySelector('#output').innerHTML = '';
+    });
 </script>