Stared work on the manager side

This commit is contained in:
2025-10-23 13:05:38 +11:00
parent 443e6177ca
commit cf5edd1329
29 changed files with 327 additions and 4 deletions

View File

@@ -0,0 +1,12 @@
<div class="rounded bg-slate-700 border p-4 text-slate-100" data-timeout="5000">
<div class="mt-2 text-sm">{{ result }}</div>
</div>
<script>
(function(){
const el = document.currentScript && document.currentScript.previousElementSibling;
if (!el) return;
const t = parseInt(el.dataset.timeout || '3000', 10);
setTimeout(()=> { el.parentElement && (el.parentElement.innerHTML = ''); }, t);
})();
</script>

View File

@@ -0,0 +1,26 @@
<div id="connect-Button">
{% if connected %}
<form
hx-post="/disconnect"
hx-target="#connect-Button"
hx-swap="outerHTML"
>
<button class="px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
Printer is connected. (Press to disconnect)
</button>
</form>
<!-- Live status panel, will load once when revealed and then the returned fragment polls itself -->
<div id="live-status" hx-post="/status" hx-trigger="revealed" 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 %}
</div>

View File

@@ -0,0 +1,37 @@
<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">
{% if status.error %}
<div class="text-red-400">Error: {{ status.error }}</div>
{% 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>
<div>
<div class="text-sm text-slate-400">Chamber Temperature</div>
<div class="font-medium">{{ status.chamber_temp }}</div>
</div>
<div>
<div class="text-sm text-slate-400">Progress</div>
<div class="font-medium">{{ status.percentage }}</div>
</div>
<div>
<div class="text-sm text-slate-400">Remaining Time</div>
<div class="font-medium">{{ status.remaining_time }}</div>
</div>
<div>
<div class="text-sm text-slate-400">Time Done</div>
<div class="font-medium">{{ status.finish_time }}</div>
</div>
</div>
{% endif %}
</div>

View File

@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ request.app.title }}{% block title %}{% endblock %}</title>
<!-- Tailwind via CDN (fine for dev/small apps; switch to compiled later if you want) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- HTMX: lets you call endpoints and swap HTML fragments, no custom JS needed -->
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
</head>
<body class="bg-slate-900 text-slate-100">
<div class="max-w-3xl mx-auto p-6 bg-slate-800 rounded-lg shadow-md">
<h1 class="text-2xl font-bold mb-4 text-white">X1 Carbon Connection</h1>
{% block connect %}{% endblock %}
<br>
{% block status %}{% endblock %}
</div>
</body>
</html>

View File

@@ -0,0 +1,52 @@
{% extends "base.html" %}
{% block connect %}
<!-- Run action button -->
<div id="connect-Button">
{% if connected %}
<form
hx-post="/disconnect"
hx-target="#connect-Button"
hx-swap="outerHTML"
>
<button class="px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
Printer is connected. (Press to disconnect)
</button>
</form>
<!-- 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 %}
</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>
-->
{% endblock %}