Update function editor response view, and add execution timer
This commit is contained in:
Peter Stockings
@@ -179,6 +179,8 @@
|
|||||||
};
|
};
|
||||||
var environment_info = editor_environment.getValue().trim();
|
var environment_info = editor_environment.getValue().trim();
|
||||||
|
|
||||||
|
var startTime = Date.now(); // Start timing
|
||||||
|
|
||||||
// Send the code and request object to the server
|
// Send the code and request object to the server
|
||||||
fetch("{{ url_for('execute_code', playground='true') }}", {
|
fetch("{{ url_for('execute_code', playground='true') }}", {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -193,38 +195,56 @@
|
|||||||
})
|
})
|
||||||
.then(text => {
|
.then(text => {
|
||||||
try {
|
try {
|
||||||
|
var endTime = Date.now(); // End timing
|
||||||
|
|
||||||
const data = JSON.parse(text); // Try to parse the response as JSON
|
const data = JSON.parse(text); // Try to parse the response as JSON
|
||||||
|
|
||||||
const output_el = document.querySelector('#output')
|
const output_el = document.querySelector('#output')
|
||||||
let output_html = `
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
|
let output_html =
|
||||||
<div class="bg-black text-white p-6 rounded-lg w-full font-mono mt-4" data-id="1">
|
`<div class="mt-2 p-1 rounded-md bg-gray-200">
|
||||||
<div class="flex justify-between items-center" data-id="2">
|
<div class="flex justify-between items-center">
|
||||||
<div class="flex space-x-2 text-red-500" data-id="3">
|
<div class="flex space-x-2 text-sm font-medium text-gray-600 ml-2 py-1">
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500" data-id="4"></div>
|
<div class="flex items-center space-x-1 cursor-pointer border-blue-400" id="response-logs-button" onclick="document.querySelector('#response-logs-button').classList.add('border-b-2','text-blue-400');document.querySelector('#browser-preview-button').classList.remove('border-b-2','text-blue-400');document.querySelector('#browser-preview').classList.add('hidden');document.querySelector('#response-logs').classList.remove('hidden');">
|
||||||
<div class="w-3 h-3 rounded-full bg-yellow-500" data-id="5"></div>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||||
<div class="w-3 h-3 rounded-full bg-green-500" data-id="6"></div>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5"></path>
|
||||||
</div>
|
</svg>
|
||||||
<p class="text-sm" data-id="7">Response: <span class='${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'}'>${data?.result?.status}</span></p>
|
<span class="">Logs ${data.logs ? `<span class="text-sm text-gray-400">(${data.logs.length})</span>` : ''}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 ${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'} break-words" data-id="8" id="response-logs">
|
<div class="flex items-center space-x-1 cursor-pointer border-b-2 text-blue-400 border-blue-400" id="browser-preview-button" onclick="this.classList.add('border-b-2','text-blue-400');document.querySelector('#response-logs-button').classList.remove('border-b-2','text-blue-400');document.querySelector('#browser-preview').classList.remove('hidden');document.querySelector('#response-logs').classList.add('hidden');">
|
||||||
${data.status == 'SUCCESS' ? data.result.body : data.result}
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||||
</div>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"></path>
|
||||||
</div>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
|
||||||
<div class="bg-black text-white p-6 rounded-lg w-full font-mono mt-4" data-id="1">
|
</svg>
|
||||||
<div class="flex justify-between items-center" data-id="2">
|
<span class="">Browser Preview</span>
|
||||||
<div class="flex space-x-2 text-red-500" data-id="3">
|
</div>
|
||||||
<div class="w-3 h-3 rounded-full bg-red-500" data-id="4"></div>
|
</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 class="cursor-pointer text-gray-600 rounded-md hover:bg-gray-300" onclick="document.querySelector('#output').innerHTML = '' ">
|
||||||
</div>
|
<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">
|
||||||
<p class="text-sm" data-id="7">logs</p>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
|
||||||
</div>
|
</svg>
|
||||||
<div class="mt-4" data-id="8" id="response-logs">
|
</div>
|
||||||
${data.logs ? data.logs.map(log => `<p class="text-white break-words" data-id="11">${log}</p>`).join('\n') : ''}
|
</div>
|
||||||
</div>
|
<div class="p-1">
|
||||||
</div>
|
<div id="browser-preview" class="min-h-10 h-full rounded-md bg-white p-2 ${data.status != 'SUCCESS' ? 'border-red-700 border-2' : ''}">${data.status == 'SUCCESS' ? data.result.body : data.result}</div>
|
||||||
</div>`
|
<div id="response-logs" class="hidden text-sm font-mono">
|
||||||
|
${data.logs ? data.logs.map(log =>
|
||||||
|
`<div class="flex items-center break-words">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||||
|
</svg>
|
||||||
|
<span>${log}</span>
|
||||||
|
</div>`).join('\n') : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<div class="text-sm font-medium text-gray-600">
|
||||||
|
Status: <span class='${data.status == 'SUCCESS' ? 'text-green-600' : 'text-red-700'}'>${data?.result?.status || "Error"}</span>
|
||||||
|
<span>Time: </span><span class="text-green-600">${endTime - startTime}ms</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
|
||||||
output_el.innerHTML = output_html;
|
output_el.innerHTML = output_html;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -338,7 +358,7 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="output">
|
<div id="output" class="">
|
||||||
<!-- Execution results will appear here -->
|
<!-- Execution results will appear here -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user