More work on the management UI, multi printer is working, temps is sometimes working
This commit is contained in:
@@ -1,37 +1,104 @@
|
||||
<div id="status-panel" hx-post="/status" hx-trigger="every 500ms" hx-swap="outerHTML" class="rounded bg-slate-800 border border-slate-700 p-4 text-slate-100">
|
||||
<div id="status-{{ printer.id }}"
|
||||
hx-post="/status/{{ printer.id }}"
|
||||
hx-trigger="every 1s"
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#status-{{ printer.id }}"
|
||||
hx-select="#status-{{ printer.id }}">
|
||||
{% if status.error %}
|
||||
<div class="text-red-400">Error: {{ status.error }}</div>
|
||||
{% if status.debug_info %}
|
||||
<div class="mt-2 text-sm text-slate-400">
|
||||
<div>Printer ID: {{ status.debug_info.id }}</div>
|
||||
<div>Name: {{ status.debug_info.name }}</div>
|
||||
<div>Connected: {{ status.debug_info.connected }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2">
|
||||
<div class="text-sm text-slate-400">Current File</div>
|
||||
<div class="font-medium">{{ status.current_file }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Nozzle Temperature</div>
|
||||
<div class="font-medium">{{ status.nozzle_temp }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Bed Temperature</div>
|
||||
<div class="font-medium">{{ status.bed_temp }}</div>
|
||||
<div class="w-full space-y-2">
|
||||
<!-- Current File -->
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Current File</span>
|
||||
<span class="font-medium">{{ status.current_file }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Chamber Temperature</div>
|
||||
<div class="font-medium">{{ status.chamber_temp }}</div>
|
||||
<!-- Status Items -->
|
||||
<style>
|
||||
/* Remove arrows/spinners from number inputs */
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Nozzle Temp</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-medium">{{ status.nozzle_temp|int }}</span>
|
||||
<span class="text-slate-400">/</span>
|
||||
<form class="flex items-center"
|
||||
hx-post="/set-temperature/{{ printer.id }}"
|
||||
hx-trigger="blur from:input, keyup[key=='Enter'] from:input"
|
||||
hx-swap="none"
|
||||
onsubmit="event.preventDefault();">
|
||||
<input type="hidden" name="type" value="nozzle">
|
||||
<input type="number"
|
||||
name="value"
|
||||
class="w-[3ch] font-medium bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 focus:rounded"
|
||||
value="{{ status.nozzle_target|default(status.nozzle_temp|int) }}"
|
||||
step="1"
|
||||
onblur="if(!this.value) { this.value = '0'; this.form.requestSubmit(); }"
|
||||
maxlength="3">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Progress</div>
|
||||
<div class="font-medium">{{ status.percentage }}</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Bed Temp</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-medium">{{ status.bed_temp|int }}</span>
|
||||
<span class="text-slate-400">/</span>
|
||||
<form class="flex items-center"
|
||||
hx-post="/set-temperature/{{ printer.id }}"
|
||||
hx-trigger="blur from:input, keyup[key=='Enter'] from:input"
|
||||
hx-swap="none"
|
||||
onsubmit="event.preventDefault();">
|
||||
<input type="hidden" name="type" value="bed">
|
||||
<input type="number"
|
||||
name="value"
|
||||
class="w-[3ch] font-medium bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 focus:rounded"
|
||||
value="{{ status.bed_target|default(status.bed_temp|int) }}"
|
||||
step="1"
|
||||
onblur="if(!this.value) { this.value = '0'; this.form.requestSubmit(); }"
|
||||
maxlength="3">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Remaining Time</div>
|
||||
<div class="font-medium">{{ status.remaining_time }}</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Chamber Temp</span>
|
||||
<span class="font-medium">{{ status.chamber_temp }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-slate-400">Time Done</div>
|
||||
<div class="font-medium">{{ status.finish_time }}</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Progress</span>
|
||||
<span class="font-medium">{{ status.percentage }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Time Left</span>
|
||||
<span class="font-medium">{{ status.remaining_time }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-slate-400">Est. Done</span>
|
||||
<span class="font-medium">{{ status.finish_time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user