95 lines
4.4 KiB
HTML
95 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Function</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
|
|
<script src="/static/js/tailwindcss@3.2.4.js"></script>
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
<script src="/static/js/hyperscript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/ace.min.js"
|
|
integrity="sha512-7QPOFYWq4euLbAVbG/o5YVgkotUdMiwFuFrVQc6lbqZuAcWnLp0sQ6JX2AIWqbm3wWrPuEfu9FqckItCgQzBWw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/mode-javascript.min.js"
|
|
integrity="sha512-1OTGICMOnGWxRYfDZRUdv7qut0O8+9s7JPi6JNxlz1pdpHgDwPo1L0dzYKwftuIb0ossdBzWtkAlnyyYpIEp2A=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.1/theme-monokai.min.js"
|
|
integrity="sha512-g9yptARGYXbHR9r3kTKIAzF+vvmgEieTxuuUUcHC5tKYFpLR3DR+lsisH2KZJG2Nwaou8jjYVRdbbbBQI3Bo5w=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bg-gray-100 font-roboto">
|
|
<div class="container mx-auto p-4">
|
|
<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;">async (req) => {
|
|
console.log('hello world...')
|
|
return HtmlResponse(`<h1>${req.method}</h1>`)
|
|
}</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"
|
|
style="height: 200px; overflow-y: scroll;">
|
|
<!-- Execution results will appear here -->
|
|
</div>
|
|
|
|
<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(data => {
|
|
try {
|
|
const data = JSON.parse(data); // Try to parse the response as JSON
|
|
// The response was a JSON object
|
|
document.getElementById('output').textContent = JSON.stringify(data, null, 2);
|
|
} 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>
|
|
|
|
</body> |