Blake Rain
176cdf493c
Some checks failed
Check / check (push) Failing after 3m17s
Really this has become necessary to combat things like `colspan` not respecting hidden columns and other problems with table layout. To get the sizes to work we were using `fixed` layout, and in the end it is easier to use grid.
102 lines
3.8 KiB
HTML
102 lines
3.8 KiB
HTML
<form id="upload-list-container" method="POST">
|
|
<div class="flex flex-col border border-slate-400 dark:border-gray-700 dark:bg-gray-800 rounded-md shadow-md">
|
|
<div class="flex flex-row justify-between p-4">
|
|
<h1 class="text-4xl font-bold">
|
|
Your uploads{% if total > 0 %}<span class="hidden md:inline"> ({{ total }})</span>{% endif %}
|
|
</h1>
|
|
<div class="buttons">
|
|
<button
|
|
id="delete_selected"
|
|
type="button"
|
|
class="button order-2 sm:order-1"
|
|
hx-trigger="click"
|
|
hx-post="/uploads/delete"
|
|
hx-target="#upload-list-container"
|
|
hx-select="#upload-list-container"
|
|
hx-confirm="Are you sure you want to delete the selected files?"
|
|
hx-swap="outerHTML"
|
|
disabled>
|
|
<span class="icon-trash-2"></span>
|
|
Delete
|
|
</button>
|
|
<button
|
|
id="upload-list-refresh"
|
|
type="button"
|
|
class="button order-1 sm:order-2"
|
|
hx-trigger="click,refresh"
|
|
hx-get="/uploads/list?order={{ query.order }}&asc={{ query.asc }}"
|
|
hx-target="#upload-list-container"
|
|
hx-select="#upload-list-container"
|
|
hx-swap="outerHTML"
|
|
hx-on::before-request="htmx.trigger('#upload-stats-container', 'refresh')">
|
|
<span class="icon-refresh-cw"></span>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% if total == 0 %}
|
|
<div class="text italic text-center p-8">
|
|
You have not uploaded any files yet.
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="uploads-table"
|
|
hx-get="/uploads/list/0?order={{ query.order }}&asc={{ query.asc }}"
|
|
hx-trigger="load"
|
|
hx-target="this"
|
|
hx-swap="beforeend">
|
|
<div class="uploads-table-header">
|
|
<div class="text-center">
|
|
<parcel-checkbox-group id="uploads_group" name="uploads">
|
|
</parcel-checkbox-group>
|
|
</div>
|
|
{% macro sort_heading(query, name, align, title) %}
|
|
{% set qs = "order=" + name %}
|
|
{% if query.order == name %}
|
|
{% set qs = qs + "&asc=" + ("false" if query.asc else "true") %}
|
|
{% else %}
|
|
{% set qs = qs + "&asc=true" %}
|
|
{% endif %}
|
|
<div
|
|
class="text-nowrap text-{{ align }} cursor-pointer hover:bg-neutral-200/50 dark:hover:bg-slate-700/25"
|
|
hx-get="/uploads/list?{{ qs }}"
|
|
hx-trigger="click"
|
|
hx-target="#upload-list-container"
|
|
hx-select="#upload-list-container"
|
|
hx-swap="outerHTML">
|
|
{{ title }}
|
|
{% if query.order == name %}
|
|
{% if query.asc %}
|
|
<span class="icon-chevron-up"></span>
|
|
{% else %}
|
|
<span class="icon-chevron-down"></span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="icon-chevrons-up-down"></span>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
{{ sort_heading(query, "filename", "left", "File") }}
|
|
{{ sort_heading(query, "size", "right", "Size") }}
|
|
{{ sort_heading(query, "downloads", "right", "Downloads") }}
|
|
<div class="text-nowrap text-right">Remaining</div>
|
|
{{ sort_heading(query, "expiry_date", "left", "Expires") }}
|
|
<div class="text-nowrap">Public</div>
|
|
{{ sort_heading(query, "uploaded_at", "left", "Uploaded") }}
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
|
|
{% if total > 0 %}
|
|
<script>
|
|
(function() {
|
|
document.getElementById("uploads_group").addEventListener("changed", (event) => {
|
|
document.getElementById("delete_selected").disabled = !event.detail.any;
|
|
});
|
|
})();
|
|
</script>
|
|
{% endif %}
|