Refactor solution

2023-12-16 15:35:48 +11:00
parent 3545491b88
commit 6dda461404
5 changed files with 306 additions and 97 deletions
--- a/templates/home.html
+++ b/templates/home.html
@@ -0,0 +1,87 @@
+{% extends 'base.html' %}
+
+{% 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>
+
+<div id="editor" class="relative rounded-lg shadow-lg bg-white p-4 mb-4" style="height: 300px;">{{ script }}
+</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="output" class="relative rounded-lg shadow-lg bg-black text-white p-4">
+    <!-- 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.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 logs_el = document.querySelector('#response-logs');
+                        logs_el.innerHTML = data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n');
+
+                        document.getElementById('output').innerHTML = data.result.body;
+                    } 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;
+        }
+    });
+</script>
+
+
+{% endblock %}