handsome-shampoo-48908
05/17/2023, 9:45 AMhtml
<div class="container mx-auto mt-5">
<header class="d-flex align-items-center gap-2 mb-5">
<img src="https://cdn-icons-png.flaticon.com/128/2666/2666436.png" alt="ToDo List">
<h1 class="mb-0">To Do List</h1>
</header>
<hr>
<br>
<div class="row justify-content-around">
<div class="card col-sm-6 col-md-4 col-lg-4 mb-5">
<h5 class="card-header">Collections</h5>
<div class="card-body">
<nav id="collections" class="list-group">
{% for collection in collections %}
{% include 'tasks/collection.html' with collection=collection %}
{% endfor %}
</nav>
<form method="POST" class="d-flex gap-2 mt-2">
{% csrf_token %}
{{ form_collection.name }}
<button class="btn btn-success"
hx-post="{% url 'add-collection' %}"
hx-target="#collections"
hx-swap="beforeend"
type="submit">Add
</button>
</form>
</div>
</div>
handsome-shampoo-48908
05/17/2023, 9:45 AMhtml
<div class="card col-sm-6 col-md-6 col-lg-6 mb-5">
<h5 class="card-header">Tasks</h5>
<div class="card-body">
<form method="POST" name="task-form" class="d-flex gap-2 mt-2" id="task_form">
{% csrf_token %}
{{ form_task.description }}
<button class="btn btn-success"
hx-post="{% url 'add-task' %}"
hx-target="#tasks"
hx-vals='js:{collection: getCollectionFromURL()}'
hx-swap="beforeend"
type="submit"
>Add
</button>
</form>
<section id="tasks-container">
{% include 'tasks/tasks.html' with tasks=tasks collection=collection %}
</section>
</div>
</div>
</div>
</div>
handsome-shampoo-48908
05/17/2023, 9:45 AMhtml
<script>
document.body.addEventListener("htmx:afterRequest", (event) => {
document.querySelector(".reset-field-collection-form").value = '';
})
document.body.addEventListener("htmx:afterRequest", (event) => {
document.querySelector(".reset-field-task-form").value = '';
})
document.body.addEventListener("htmx:responseError", (event) => {
alert(evt.detail.xhr.responseText);
})
function getCollectionFromURL() {
let url = new URL(window.location.href);
let searchParams = url.searchParams;
return searchParams.get("collection");
}
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
</script>
mammoth-family-48524
05/17/2023, 10:08 AMwhite-motorcycle-95262
05/17/2023, 2:14 PMhx-
attributes that listen for a particular change
event (all coming from a single form, usually just has two fields: a select for the "region" and a toggle for the "timespan", short or long term). All widgets are tied to a class based "WidgetView" that has methods for generating the HTML associated with each type of widget.
The idea is that to create a dashboard, all I have to do is create a base template with columns/rows and put {% include 'widgets/widget_name.html' %}
where I want my widgets to go. This works, but it results in a single request for each widget, which I'm not opposed to, but in reality the widgets are quite coupled together: they always change all at the same time, and there's a small amount of "setup" code+database hits that end up being duplicated each request.
I suppose the alternate way would be to put the hx-
attributes on the form and do OOB swaps, which would result in a single request. My question is: what can I do on the form to communicate to the server which widgets are present on the dashboard? The only thing I've thought up involves hyperscript:
<form
id="control-panel
hx-get="/widgets"
_="
init
set widgets to {}
for widget in <[data-widget]/>
set widgets[widget's @id] to widget's @data-widget
end
set my @hx-vals to widgets as JSON
end
>[...]</form>
where each widget would have a data-widget
attribute that specifies the widget's "type" (e.g., map, graph, table, etc).
Any thoughts or criticisms on this approach would be appreciated πbrave-dog-98297
05/17/2023, 9:27 PMwhite-motorcycle-95262
05/17/2023, 11:30 PMbrave-dog-98297
05/17/2023, 11:38 PMwhite-motorcycle-95262
05/17/2023, 11:40 PMplain-kangaroo-26043
05/19/2023, 5:18 PMgray-rocket-3571
05/20/2023, 4:16 PMhappy-microphone-42295
05/23/2023, 6:21 PMwhite-motorcycle-95262
05/24/2023, 1:00 PMpy
<form
hx-get="/my_url/"
hx-trigger="change"
>
<select id="id_region" name="region">[...]</select>
<select id="id_timespan" name="timespan">[...]</select>
</form>
Is there a way actually fetch /my_url/[region.value]/[timespan.value]/
? Does it require hyperscript? Something like
py
<form
hx-get="/my_url"
hx-trigger="customChange"
_="
on change
set my @hx-get to `${@hx-get}/${#id_region's value}/${#id_timespan's value}`
trigger customChange on me
end
"
>[...]</form>
great-cartoon-12331
05/24/2023, 3:56 PM/my_url/?region=[region.value]Γpan=[timespan.value]
, so you could handle thatwhite-motorcycle-95262
05/24/2023, 4:05 PMlimited-teacher-83117
05/24/2023, 4:13 PMwhite-motorcycle-95262
05/24/2023, 4:16 PM/dashboard/texas/current/
as opposed to /dashboard?region=texasΓpan=current
white-motorcycle-95262
05/24/2023, 4:17 PMlimited-teacher-83117
05/24/2023, 4:24 PMlimited-teacher-83117
05/24/2023, 4:25 PMgreat-cartoon-12331
05/24/2023, 4:26 PMwhite-motorcycle-95262
05/24/2023, 4:32 PM/dashboard/texas/current
. π€·ββοΈgreat-cartoon-12331
05/24/2023, 4:34 PM/current
doesn't point to a single resource by its ID, which we can say is contra to RESTwhite-motorcycle-95262
05/24/2023, 4:36 PM/dashboard/texas/current/
doesn't point to a single resource? I'm a bit unfamiliar with the terminologygreat-cartoon-12331
05/24/2023, 4:37 PM/current
is not an ID, it's a pointerwhite-motorcycle-95262
05/24/2023, 4:39 PM/blah/#element_id
?great-cartoon-12331
05/24/2023, 4:42 PMid
attribute specifically although you can render a resource with HTML and use an id
attributelimited-teacher-83117
05/24/2023, 4:46 PMwhite-motorcycle-95262
05/24/2023, 4:46 PMlimited-teacher-83117
05/24/2023, 4:47 PM