Minor UI change for function edit form, moved execute button to bottom
This commit is contained in:
Peter Stockings
@@ -1,114 +1,53 @@
|
||||
<div>
|
||||
<div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
|
||||
<h1 class="font-semibold text-lg text-gray-400 font-mono flex items-center" data-id="52">Code</h1>
|
||||
<div class="">
|
||||
{% if is_edit|default(false, true) %}
|
||||
<div
|
||||
class="inline-flex items-center justify-center space-x-1 h-10 py-2 text-gray-600 dark:text-gray-400 justify-between rounded-md text-md font-medium cursor-pointer">
|
||||
<span class="font-mono" id="function-name-label" onclick="toggleInput()">{{ name }}</span>
|
||||
<input type="text" id="function-name"
|
||||
class="hidden bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-fit"
|
||||
placeholder="foo" required="" value="{{ name }}">
|
||||
|
||||
<input type="text" id="function-name"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 max-w-fit"
|
||||
placeholder="foo" required="" value="{{ name }}">
|
||||
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400 justify-between"
|
||||
id="execute-code-btn">
|
||||
<span class="sr-only" data-id="4">Bold</span>
|
||||
<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" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<script>
|
||||
document.getElementById('execute-code-btn').addEventListener('click', () => {
|
||||
try {
|
||||
var code = editor.getValue();
|
||||
// Define the request object (modify as needed)
|
||||
var requestObject = {
|
||||
};
|
||||
var environment_info = editor_environment.getValue().trim();
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-5 h-5" onclick="toggleInput()">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
// Send the code and request object to the server
|
||||
fetch("{{ url_for('execute_code', playground='true') }}", {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: code, request: requestObject, environment_info }),
|
||||
})
|
||||
.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
|
||||
</div>
|
||||
<script>
|
||||
function toggleInput() {
|
||||
const textLabel = document.getElementById('function-name-label');
|
||||
const textInput = document.getElementById('function-name');
|
||||
|
||||
const output_el = document.querySelector('#output')
|
||||
let output_html = `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
|
||||
<div class="bg-black text-white p-6 rounded-lg w-full 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">Response: <span class='${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'}'>${data?.result?.status}</span></p>
|
||||
</div>
|
||||
<div class="mt-4 ${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'} break-words" data-id="8" id="response-logs">
|
||||
${data.status == 'SUCCESS' ? data.result.body : data.result}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black text-white p-6 rounded-lg w-full 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">
|
||||
${data.logs ? data.logs.map(log => `<p class="text-white break-words" data-id="11">${log}</p>`).join('\n') : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
output_el.innerHTML = output_html;
|
||||
} catch (err) {
|
||||
document.getElementById('output').innerHTML = text;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('output').textContent = 'Error: ' + error.message;
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
document.getElementById('output').innerHTML = 'Error: ' + e.message;
|
||||
if (textLabel.style.display === 'none') {
|
||||
textLabel.style.display = 'inline';
|
||||
textInput.style.display = 'none';
|
||||
textLabel.innerText = textInput.value;
|
||||
} else {
|
||||
textLabel.style.display = 'none';
|
||||
textInput.style.display = 'inline';
|
||||
textInput.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
|
||||
data-id="21" id="clear-response-btn"><span class="sr-only" data-id="22">Bulleted List</span>
|
||||
<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" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<script>
|
||||
document.querySelector('#clear-response-btn').addEventListener('click', () => { document.querySelector('#output').innerHTML = ''; });
|
||||
</script>
|
||||
|
||||
<!-- Spacer Div -->
|
||||
<div class="flex-auto"></div>
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if is_add|default(false, true) %}
|
||||
<label for="function-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Function
|
||||
name</label>
|
||||
<input type="text" id="function-name"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||
placeholder="foo" required="" value="{{ name }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}</div>
|
||||
<div id="editor" class="relative rounded-lg shadow-lg p-4">{{ script }}</div>
|
||||
<script>
|
||||
var editor = ace.edit("editor");
|
||||
editor.setOptions({
|
||||
@@ -121,8 +60,20 @@
|
||||
</script>
|
||||
|
||||
|
||||
<div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800 justify-between">
|
||||
<h1 class="font-semibold text-lg text-gray-400 font-mono flex items-center" data-id="52">Environment</h1>
|
||||
<div class="flex space-x-2 border-b border-gray-200 dark:border-gray-800 justify-between">
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400 justify-between">
|
||||
<span class="sr-only" data-id="4">Bold</span>
|
||||
<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" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125">
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<span class="ml-1">Environment</span>
|
||||
</button>
|
||||
|
||||
<!-- Spacer Div -->
|
||||
<div class="flex-auto"></div>
|
||||
@@ -206,9 +157,94 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="flex">
|
||||
<button
|
||||
class="bg-transparent hover:bg-green-500 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-500 hover:border-transparent rounded flex mr-2 items-center"
|
||||
id="execute-code-btn">
|
||||
<span class="sr-only" data-id="4">Bold</span>
|
||||
<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" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="ml-1">Execute</span>
|
||||
</button>
|
||||
<script>
|
||||
document.getElementById('execute-code-btn').addEventListener('click', () => {
|
||||
try {
|
||||
var code = editor.getValue();
|
||||
// Define the request object (modify as needed)
|
||||
var requestObject = {
|
||||
};
|
||||
var environment_info = editor_environment.getValue().trim();
|
||||
|
||||
// Send the code and request object to the server
|
||||
fetch("{{ url_for('execute_code', playground='true') }}", {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: code, request: requestObject, environment_info }),
|
||||
})
|
||||
.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 output_el = document.querySelector('#output')
|
||||
let output_html = `
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
|
||||
<div class="bg-black text-white p-6 rounded-lg w-full 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">Response: <span class='${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'}'>${data?.result?.status}</span></p>
|
||||
</div>
|
||||
<div class="mt-4 ${data.status == 'SUCCESS' ? 'text-white' : 'text-red-700'} break-words" data-id="8" id="response-logs">
|
||||
${data.status == 'SUCCESS' ? data.result.body : data.result}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black text-white p-6 rounded-lg w-full 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">
|
||||
${data.logs ? data.logs.map(log => `<p class="text-white break-words" data-id="11">${log}</p>`).join('\n') : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
output_el.innerHTML = output_html;
|
||||
} catch (err) {
|
||||
document.getElementById('output').innerHTML = text;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('output').textContent = 'Error: ' + error.message;
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
document.getElementById('output').innerHTML = 'Error: ' + e.message;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
{% if is_edit|default(false, true) %}
|
||||
<button
|
||||
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2"
|
||||
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded flex mr-2 items-center"
|
||||
id="edit-http-function">
|
||||
<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 mr-2">
|
||||
|
||||
Reference in New Issue
Block a user