Add ability to delete http functions

This commit is contained in:
Peter Stockings
2023-12-16 22:35:28 +11:00
parent 2365fa3987
commit 204000a668
5 changed files with 97 additions and 34 deletions

View File

@@ -1,13 +1,15 @@
<div class="flex items-center" data-id="51">
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">Update HTTP function</h1>
<h1 class="font-semibold text-lg md:text-2xl" data-id="52">Update: <span class="font-mono">{{ name }}</span></h1>
<button
class="inline-flex items-center justify-center 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 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3 ml-auto"
hx-get="{{ url_for('dashboard_http_functions') }}" hx-target="#container" hx-swap="innerHTML">
Cancel
</button>
</div>
<div>
<div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
<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">
@@ -29,23 +31,39 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<button
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-2 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">
<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>
</div>
<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}
</div>
<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">
@@ -135,7 +153,7 @@
});
document.querySelector('#add-http-function').addEventListener('click', () => {
let name = document.querySelector('#function-name').value;
let name = '{{ name }}';
let script_content = editor.getValue();
fetch("{{ url_for('edit_http_function') }}", {