Stared work on the manager side
This commit is contained in:
12
Web UI Project/app/templates/_action_results.html
Normal file
12
Web UI Project/app/templates/_action_results.html
Normal 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>
|
||||
26
Web UI Project/app/templates/_connect_area.html
Normal file
26
Web UI Project/app/templates/_connect_area.html
Normal 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>
|
||||
37
Web UI Project/app/templates/_status.html
Normal file
37
Web UI Project/app/templates/_status.html
Normal 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>
|
||||
22
Web UI Project/app/templates/base.html
Normal file
22
Web UI Project/app/templates/base.html
Normal 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>
|
||||
52
Web UI Project/app/templates/index.html
Normal file
52
Web UI Project/app/templates/index.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user