34 lines
1.2 KiB
HTML
34 lines
1.2 KiB
HTML
<div id="printer-{{ printer.id }}" class="p-6 rounded border border-slate-700 bg-slate-800 w-full h-fit">
|
|
<h2 class="text-xl font-bold mb-4 text-white" title="{{ printer.name }}">{{ printer.name }}</h2>
|
|
|
|
<!-- Connect/Disconnect button -->
|
|
{% if printer.connected %}
|
|
<form
|
|
hx-post="/disconnect/{{ printer.id }}"
|
|
hx-target="#printer-{{ printer.id }}"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<button class="w-full px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
|
|
{{ printer.name }} is connected (Press to disconnect)
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Live status panel -->
|
|
<div id="status-{{ printer.id }}"
|
|
hx-post="/status/{{ printer.id }}"
|
|
hx-trigger="every 500ms[!document.activeElement.matches('#status-{{ printer.id }} input')]"
|
|
hx-swap="outerHTML"
|
|
class="mt-4">
|
|
</div>
|
|
{% else %}
|
|
<form
|
|
hx-post="/connect/{{ printer.id }}"
|
|
hx-target="#printer-{{ printer.id }}"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<button class="w-full px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
|
|
Connect to {{ printer.name }}
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div> |