peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add code editor with that executes script on isolator

Browse Source
This commit is contained in:
Peter Stockings
2023-12-16 00:24:36 +11:00
parent bbe3356a9c
commit 81d8d00586
2 changed files with 130 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
templates/Index.html
View File

@@ -8,13 +8,88 @@
<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" defer></script>
<script src="/static/js/hyperscript.min.js" defer></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>
<h1>Function</h1>
<h5>Hello world...</h5>
<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>