87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
{% 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 %} |