{% extends "base.html" %} {% block title %}{{ name }}{% endblock %} {% block
toolbar %}
<button data-dialog="query_builder_dialog" class="round">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-database-zap"
aria-label="Database zap symbol"
>
<ellipse cx="12" cy="5" rx="9" ry="3" />
<path d="M3 5V19A9 3 0 0 0 15 21.84" />
<path d="M21 5V8" />
<path d="M21 12L18 17H22L19 22" />
<path d="M3 12A9 3 0 0 0 14.59 14.87" />
</svg>
Edit Query
</button>
{% endblock %} {% block toolbar_right %}
<b>{{ me.username }}</b>
{% endblock %} {% block content %}
<style>
body {
overflow: hidden;
height: 100dvh;
}
</style>
<main></main>
<div class="w-full h-screen block overflow-auto">
<table id="table"></table>
</div>
<dialog id="query_builder_dialog" class="animate-fade-in">
<div style="width: 80ch; max-width: 100%" class="p-4">
<div class="flex flex-col gap-2">
<div class="card w-full flex flex-col gap-2 round">
<b>Query</b>
<form
class="flex gap-2 card secondary round flex-col md:flex-row"
id="fetch_form"
>
<input name="query" id="query" type="text" required />
<div class="flex gap-2">
<select name="mode" id="mode" required class="w-max">
<option value="fetch">Fetch All</option>
<option value="execute">Execute</option>
</select>
<button class="round green">Submit</button>
</div>
</form>
</div>
<div class="card w-full flex flex-col gap-2 round">
<b>Extra Actions</b>
<div
class="flex gap-2 items-center card secondary round flex-wrap"
>
<button
data-dialog="update_builder_dialog"
class="round blue w-full md:w-max"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-wrench"
aria-label="Wrench symbol"
>
<path
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
/>
</svg>
Update Builder
</button>
<button
onclick="document.getElementById('add_to_query_dialog').showModal();"
class="round blue w-full md:w-max"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-plus"
aria-label="Plus symbol"
>
<path d="M5 12h14" />
<path d="M12 5v14" />
</svg>
Add Specifier
</button>
</div>
</div>
</div>
<hr class="my-4" />
<div class="w-full flex justify-end gap-2">
<a
class="button round red"
href="javascript:document.getElementById('query_builder_dialog').close();"
>
Close
</a>
</div>
</div>
</dialog>
<dialog id="add_to_query_dialog" class="animate-fade-in">
<div style="width: 25rem; max-width: 100%" class="p-4">
<div class="flex gap-2 flex-col">
<details>
<summary>Where</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
onsubmit="add_to_query_eq('WHERE', event)"
>
<input
type="text"
name="selector"
placeholder="selector"
required
/>
<i>equals</i>
<input
type="text"
name="match"
placeholder="value"
required
/>
<hr class="my-2" />
<button class="green w-full">Add</button>
</form>
</details>
<details>
<summary>!Where</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
onsubmit="add_to_query_neq('WHERE', event)"
>
<input
type="text"
name="selector"
placeholder="selector"
required
/>
<i>DOES NOT equal</i>
<input
type="text"
name="match"
placeholder="value"
required
/>
<hr class="my-2" />
<button class="green w-full">Add</button>
</form>
</details>
<details>
<summary>Limit</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
onsubmit="add_to_query('LIMIT', event)"
>
<input
type="text"
name="value"
placeholder="value"
required
/>
<hr class="my-2" />
<button class="green w-full">Add</button>
</form>
</details>
<details>
<summary>Offset</summary>
<form
class="card secondary more_padding w-full round flex flex-col gap-2"
onsubmit="add_to_query('OFFSET', event)"
>
<input
type="text"
name="value"
placeholder="value"
required
/>
<hr class="my-2" />
<button class="green w-full">Add</button>
</form>
</details>
</div>
<hr class="my-4" />
<div class="w-full flex justify-end gap-2">
<a
class="button round red"
href="javascript:document.getElementById('add_to_query_dialog').close();"
>
Close
</a>
</div>
</div>
</dialog>
<dialog id="update_builder_dialog" class="animate-fade-in">
<div style="width: 25rem; max-width: 100%" class="p-4">
<div class="flex gap-2 flex-col">
<form onsubmit="update_query(event)">
<div class="flex gap-2 flex-col" id="cols"></div>
<hr class="my-2" />
<div class="flex gap-2 flex-col" id="col_vals"></div>
<hr class="my-2" />
<button class="green w-full">Save Query</button>
</form>
</div>
<hr class="my-4" />
<div class="w-full flex justify-end gap-2">
<a
class="button round red"
href="javascript:document.getElementById('update_builder_dialog').close();"
>
Close
</a>
</div>
</div>
</dialog>
<script>
use("table_view", (table_view) => {
table_view.render(document.getElementById("table"), "{{ name }}");
});
</script>
{% call super() %} {% endblock %}