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

Refactor all function editor front end html + js into a single jinja template (also slight improvement to look of response/logs)

Browse Source
This commit is contained in:
Peter Stockings
2023-12-19 21:20:11 +11:00
parent 4b64430022
commit 223afec05d
5 changed files with 244 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
templates/dashboard/http_functions/edit.html
View File

@@ -42,190 +42,4 @@
</div>
</div>
<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>
<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="executeBtn">
<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>
<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="clearBtn"><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>
<!-- Spacer Div -->
<div class="flex-auto"></div>
</div>
<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}</div>
<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>
<!-- Spacer Div -->
<div class="flex-auto"></div>
</div>
<div id="editor-environment" class="relative rounded-lg shadow-lg p-4 mb-2">{{ environment_info }}</div>
<script>
var editor_environment = ace.edit("editor-environment");
editor_environment.setOptions({
maxLines: 100
});
editor_environment.setTheme("ace/theme/github_dark");
editor_environment.session.setMode("ace/mode/json");
//editor_environment.session.$worker.send("changeOptions", [{ asi: true }]);
</script>
<div class="flex">
<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"
id="add-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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
<p> Update</p>
</button>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
hx-delete="{{ url_for('delete_http_function', name=name) }}" hx-target="#container" hx-swap="innerHTML"
hx-confirm="Are you sure you want to delete {{ name }}?">
<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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
<span>Delete</span>
</button>
</div>
</div>
<div id="output">
<!-- Execution results will appear here -->
</div>
<script>
var editor = ace.edit("editor");
editor.setOptions({
maxLines: 100
});
editor.setTheme("ace/theme/github_dark");
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 output_el = document.querySelector('#output')
let output_html = `
<div class="relative rounded-lg shadow-lg p-4">
${data.result.body}
</div>
`;
if (data?.logs?.length > 0) {
output_html += `
<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">
${data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n')}
</div>
</aside>
`
}
output_el.innerHTML = output_html;
} 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;
}
});
document.querySelector('#clearBtn').addEventListener('click', function () {
//editor.setValue();
document.querySelector('#output').innerHTML = '';
});
document.querySelector('#add-http-function').addEventListener('click', () => {
let name = '{{ name }}';
let script_content = editor.getValue().trim();
let environment_info = editor_environment.getValue().trim();
fetch("{{ url_for('edit_http_function') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, script_content, environment_info }),
})
.then(response => response.json())
.then(json => {
showAlert(json.message, json.status)
})
})
</script>
{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info, is_edit=True) }}

173
templates/dashboard/http_functions/new.html
View File

@@ -8,175 +8,4 @@
</div>
<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>
<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"
id="executeBtn">
<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>
<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="clearBtn"><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>
</div>
<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}</div>
<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>
<!-- Spacer Div -->
<div class="flex-auto"></div>
</div>
<div id="editor-environment" class="relative rounded-lg shadow-lg p-4 mb-2">{}</div>
<script>
var editor_environment = ace.edit("editor-environment");
editor_environment.setOptions({
maxLines: 100
});
editor_environment.setTheme("ace/theme/github_dark");
editor_environment.session.setMode("ace/mode/json");
//editor_environment.session.$worker.send("changeOptions", [{ asi: true }]);
</script>
<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"
id="add-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-6 h-6 mr-2" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
<p> Add</p>
</button>
</div>
<div id="output">
<!-- Execution results will appear here -->
</div>
<script>
var editor = ace.edit("editor");
editor.setOptions({
maxLines: 100
});
editor.setTheme("ace/theme/github_dark");
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 output_el = document.querySelector('#output')
let output_html = `
<div class="relative rounded-lg shadow-lg p-4">
${data.result.body}
</div>
`;
if (data?.logs?.length > 0) {
output_html += `
<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">
${data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n')}
</div>
</aside>
`
}
output_el.innerHTML = output_html;
} 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;
}
});
document.querySelector('#clearBtn').addEventListener('click', function () {
//editor.setValue();
document.querySelector('#output').innerHTML = '';
});
document.querySelector('#add-http-function').addEventListener('click', () => {
let name = document.querySelector('#function-name').value;
let script_content = editor.getValue().trim();
let environment_info = editor_environment.getValue().trim();
fetch("{{ url_for('create_http_function') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, script_content, environment_info }),
})
.then(response => response.text())
.then(text => {
document.querySelector('#container').innerHTML = text
htmx.process(htmx.find('#container'))
})
})
</script>
{{ render_partial('function_editor.html', name=name, script=script, environment_info=environment_info, is_add=True) }}