Nick/printer-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on the management UI, multi printer is working, temps is sometimes working

Browse Source
This commit is contained in:
Nick
2025-10-24 17:18:57 +11:00
parent cf5edd1329
commit 41431277cf
12 changed files with 679 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
Web UI Project/app/templates/index.html
View File

@@ -1,52 +1,47 @@
{% extends "base.html" %}
{% block connect %}
<!-- Run action button -->
<div id="connect-Button">
{% if connected %}
<div class="container mx-auto px-4 py-6">
<!-- Connect All Button -->
<div class="max-w-3xl mx-auto mb-8">
<form
hx-post="/disconnect"
hx-target="#connect-Button"
hx-swap="outerHTML"
hx-post="/connect-all"
hx-target="#printers-container"
hx-swap="innerHTML"
>
<button class="px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
Printer is connected. (Press to disconnect)
<button class="w-full px-6 py-3 rounded bg-indigo-600 text-white hover:bg-indigo-500 font-bold text-lg">
Connect All Printers
</button>
</form>
</div>
<!-- Live status panel, will load once when revealed and then the returned fragment polls itself -->
<div id="live-status" hx-post="/status" hx-trigger="load" hx-swap="outerHTML" class="mt-4"></div>
{% else %}
<form
hx-post="/connect"
hx-target="#connect-Button"
hx-swap="outerHTML"
>
<button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
Connect to Printer
</button>
</form>
{% endif %}
<!-- Printer Grid Container -->
<div id="printers-container" class="w-full">
<div class="grid gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{% for printer in printers.values() %}
<div class="h-fit">
{% include "_printer_card.html" %}
</div>
{% else %}
<div class="col-span-full text-center text-slate-400">
No printers configured. Check config.json file.
</div>
{% endfor %}
</div>
<!-- Debug info -->
<div class="mt-8 text-sm text-slate-500">
Total Printers: {{ printers|length }}
</div>
</div>
</div>
{% endblock %}
{% block status %}
<!--
<form
hx-post="/status"
hx-target="#status-result"
hx-swap="innerHTML"
>
<button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
Get Printer Status
</button>
</form>
<div id="status-result" class="mt-4"></div>
-->
<style>
/* Ensure grid items don't overlap at any screen size */
@media (min-width: 1024px) {
#printers-container .grid {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
}
</style>
{% endblock %}