Dominic Gundel
4ddffbbeb1
Jetzt/Topbar und Material-Routing, Pause bei Filament-Ende, Druckbericht mit Stromanteilen, Design- und Kamera-Stream-Polish; Bedarf-Alert-Spam und Platte-belegt-Bugs behoben.
415 lines
16 KiB
HTML
415 lines
16 KiB
HTML
{% extends "layout.html" %}
|
||
{% block body %}
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>Aufträge</h1>
|
||
<p class="tiny">Kunden, Angebote, Positionen und Fortschritt.</p>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="ghost" id="lieferschein-link" href="#" hidden target="_blank" rel="noopener">Lieferschein</a>
|
||
</div>
|
||
</div>
|
||
<div class="split">
|
||
<section class="card">
|
||
<div class="field inline">
|
||
<label for="filter-status">Status</label>
|
||
<select id="filter-status">
|
||
<option value="">alle</option>
|
||
<option value="idee">Idee</option>
|
||
<option value="angebot">Angebot</option>
|
||
<option value="bestaetigt">bestätigt</option>
|
||
<option value="druckt">druckt</option>
|
||
<option value="fertig">fertig</option>
|
||
<option value="geliefert">geliefert</option>
|
||
<option value="bezahlt">bezahlt</option>
|
||
</select>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>Titel</th><th>Status</th><th>Fortschritt</th></tr></thead>
|
||
<tbody id="order-rows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<section class="card">
|
||
<h2 id="order-title">Neuer Auftrag</h2>
|
||
<form id="order-form">
|
||
<input id="order-id" type="hidden">
|
||
<div class="field"><label for="order-title-in">Titel</label><input id="order-title-in" required></div>
|
||
<div class="grid-2">
|
||
<div class="field"><label for="order-status">Status</label>
|
||
<select id="order-status">
|
||
<option value="idee">Idee</option>
|
||
<option value="angebot">Angebot</option>
|
||
<option value="bestaetigt">bestätigt</option>
|
||
<option value="druckt">druckt</option>
|
||
<option value="fertig">fertig</option>
|
||
<option value="geliefert">geliefert</option>
|
||
<option value="bezahlt">bezahlt</option>
|
||
</select>
|
||
</div>
|
||
<div class="field"><label for="order-due">Fällig</label><input id="order-due" type="date"></div>
|
||
</div>
|
||
<div class="field"><label for="order-customer">Kunde</label>
|
||
<select id="order-customer"><option value="">— keiner —</option></select>
|
||
</div>
|
||
<div class="field"><label for="order-notes">Notiz</label><textarea id="order-notes"></textarea></div>
|
||
<div class="actions">
|
||
<button type="submit" class="btn-primary">Speichern</button>
|
||
<button type="button" class="ghost" id="order-new">Neu</button>
|
||
<button type="button" class="btn-danger" id="order-delete" hidden>Löschen</button>
|
||
</div>
|
||
</form>
|
||
<p id="order-note" class="tiny"></p>
|
||
<p class="tiny" id="order-progress"></p>
|
||
<p class="tiny" id="order-actuals"></p>
|
||
|
||
<h2 class="section-gap">Positionen</h2>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>Datei</th><th class="num">Stk</th><th class="num">fertig</th><th></th></tr></thead>
|
||
<tbody id="item-rows"></tbody>
|
||
</table>
|
||
</div>
|
||
<form id="item-form" class="section-gap">
|
||
<div class="grid-2">
|
||
<div class="field"><label for="item-file">Datei</label><select id="item-file"><option value="">—</option></select></div>
|
||
<div class="field"><label for="item-qty">Stück</label><input id="item-qty" type="number" min="1" step="1" value="1"></div>
|
||
<div class="field"><label for="item-price">Preis/Stk €</label><input id="item-price" type="number" min="0" step="0.01" value="0"></div>
|
||
<div class="field"><label for="item-material">Material</label><input id="item-material"></div>
|
||
</div>
|
||
<div class="actions"><button type="submit">Position hinzufügen</button></div>
|
||
</form>
|
||
<details class="section-gap">
|
||
<summary>Kunde anlegen / bearbeiten</summary>
|
||
<form id="customer-form">
|
||
<input type="hidden" id="cust-id">
|
||
<div class="field"><label for="cust-name">Name</label><input id="cust-name" required></div>
|
||
<div class="field"><label for="cust-email">E-Mail</label><input id="cust-email" type="email"></div>
|
||
<div class="actions">
|
||
<button type="submit" class="btn-primary">Kunde speichern</button>
|
||
<button type="button" class="ghost" id="cust-edit-current">Aktuellen laden</button>
|
||
<button type="button" class="btn-danger" id="cust-delete" hidden>Kunde löschen</button>
|
||
</div>
|
||
</form>
|
||
</details>
|
||
</section>
|
||
</div>
|
||
{% endblock %}
|
||
{% block script %}
|
||
<script>
|
||
const STATUS_LABEL = {
|
||
idee: "Idee", angebot: "Angebot", bestaetigt: "bestätigt", druckt: "druckt",
|
||
fertig: "fertig", geliefert: "geliefert", bezahlt: "bezahlt",
|
||
};
|
||
let orders = [];
|
||
let customers = [];
|
||
let files = [];
|
||
let current = null;
|
||
|
||
function fillCustomers() {
|
||
const sel = document.getElementById("order-customer");
|
||
const val = sel.value;
|
||
sel.innerHTML = '<option value="">— keiner —</option>';
|
||
customers.forEach((c) => {
|
||
const o = document.createElement("option");
|
||
o.value = c.id;
|
||
o.textContent = c.name;
|
||
sel.appendChild(o);
|
||
});
|
||
if (val) sel.value = val;
|
||
}
|
||
|
||
function fillFiles() {
|
||
const sel = document.getElementById("item-file");
|
||
sel.innerHTML = '<option value="">—</option>';
|
||
files.slice(0, 400).forEach((f) => {
|
||
const o = document.createElement("option");
|
||
o.value = f.id;
|
||
o.textContent = f.name;
|
||
sel.appendChild(o);
|
||
});
|
||
}
|
||
|
||
function paintActuals(order) {
|
||
const el = document.getElementById("order-actuals");
|
||
const a = order.actuals;
|
||
if (!a) { el.textContent = ""; return; }
|
||
const bits = [
|
||
"Ist: " + euro(a.cost_total),
|
||
hours(a.duration_s) || "0 min",
|
||
"Ausschuss " + a.pieces_bad + " Stk",
|
||
];
|
||
if (a.cost_per_part != null) bits.push(euro(a.cost_per_part) + "/Teil");
|
||
if (a.yield_percent != null) bits.push("Yield " + Math.round(a.yield_percent) + " %");
|
||
el.textContent = bits.join(" · ");
|
||
}
|
||
|
||
function fillOrder(order) {
|
||
current = order;
|
||
document.getElementById("order-id").value = order ? order.id : "";
|
||
document.getElementById("order-title-in").value = order ? order.title : "";
|
||
document.getElementById("order-status").value = order ? order.status : "idee";
|
||
document.getElementById("order-due").value = order && order.due_at ? order.due_at.slice(0, 10) : "";
|
||
document.getElementById("order-customer").value = order && order.customer_id ? order.customer_id : "";
|
||
document.getElementById("order-notes").value = order ? order.notes : "";
|
||
document.getElementById("order-title").textContent = order ? order.title : "Neuer Auftrag";
|
||
document.getElementById("order-delete").hidden = !order;
|
||
const link = document.getElementById("lieferschein-link");
|
||
if (order) {
|
||
link.href = "/auftraege/" + order.id + "/lieferschein";
|
||
link.hidden = false;
|
||
} else {
|
||
link.hidden = true;
|
||
}
|
||
const prog = order && order.progress;
|
||
document.getElementById("order-progress").textContent = prog ? "Fortschritt: " + prog.label : "";
|
||
paintActuals(order || {});
|
||
renderItems(order && order.items ? order.items : []);
|
||
}
|
||
|
||
function renderItems(items) {
|
||
const body = document.getElementById("item-rows");
|
||
body.innerHTML = "";
|
||
if (!items.length) {
|
||
body.innerHTML = '<tr><td colspan="4" class="empty">Keine Positionen.</td></tr>';
|
||
return;
|
||
}
|
||
items.forEach((item) => {
|
||
const tr = document.createElement("tr");
|
||
tr.innerHTML = "<td></td><td class=\"num\"></td><td class=\"num\"></td><td class=\"actions\"></td>";
|
||
tr.children[0].textContent = item.file_name || ("#" + (item.file_id || "—"));
|
||
tr.children[1].textContent = item.qty;
|
||
tr.children[2].textContent = item.done_ok + (item.done_bad ? " (−" + item.done_bad + ")" : "");
|
||
const tools = document.createElement("div");
|
||
tools.className = "queue-tools";
|
||
const btn = document.createElement("button");
|
||
btn.type = "button";
|
||
btn.className = "ghost tiny-btn";
|
||
btn.textContent = "Einreihen";
|
||
btn.disabled = !item.file_id || !current;
|
||
btn.addEventListener("click", () => einreihen(item.id));
|
||
const edit = document.createElement("button");
|
||
edit.type = "button";
|
||
edit.className = "ghost tiny-btn";
|
||
edit.textContent = "Ändern";
|
||
edit.addEventListener("click", () => editItem(item));
|
||
const del = document.createElement("button");
|
||
del.type = "button";
|
||
del.className = "btn-danger tiny-btn";
|
||
del.textContent = "Löschen";
|
||
del.addEventListener("click", (event) => {
|
||
armButton(event.currentTarget, "Position löschen?", async () => {
|
||
await api("/auftraege/positionen/" + item.id, { method: "DELETE" });
|
||
toast("Position gelöscht.");
|
||
const full = await api("/auftraege/" + current.id);
|
||
fillOrder(full);
|
||
});
|
||
});
|
||
tools.append(btn, edit, del);
|
||
tr.children[3].appendChild(tools);
|
||
body.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
async function editItem(item) {
|
||
const qty = prompt("Stückzahl", String(item.qty || 1));
|
||
if (qty == null) return;
|
||
const price = prompt("Preis/Stk €", String(item.unit_price || 0));
|
||
if (price == null) return;
|
||
try {
|
||
await api("/auftraege/positionen/" + item.id, {
|
||
method: "PATCH",
|
||
json: { qty: Number(qty) || 1, unit_price: Number(price) || 0 },
|
||
});
|
||
const full = await api("/auftraege/" + current.id);
|
||
fillOrder(full);
|
||
toast("Position gespeichert.");
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
}
|
||
|
||
async function einreihen(itemId) {
|
||
if (!current) return;
|
||
try {
|
||
await api("/auftraege/" + current.id + "/einreihen", {
|
||
method: "POST",
|
||
json: { item_id: itemId, when_free: true, confirm: true },
|
||
});
|
||
toast("In Warteschlange.");
|
||
const full = await api("/auftraege/" + current.id);
|
||
fillOrder(full);
|
||
await loadList();
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
}
|
||
|
||
function renderList() {
|
||
const body = document.getElementById("order-rows");
|
||
body.innerHTML = "";
|
||
if (!orders.length) {
|
||
body.innerHTML = '<tr><td colspan="3" class="empty"><div class="empty-state"><p>Noch kein Auftrag.</p><p><button type="button" class="ghost" id="order-empty-new">Ersten Auftrag anlegen →</button></p></div></td></tr>';
|
||
document.getElementById("order-empty-new")?.addEventListener("click", () => fillOrder(null));
|
||
return;
|
||
}
|
||
const selected = document.getElementById("order-id").value;
|
||
orders.forEach((order) => {
|
||
const tr = document.createElement("tr");
|
||
tr.className = "pick" + (selected && String(order.id) === selected ? " on" : "");
|
||
tr.innerHTML = "<td></td><td></td><td></td>";
|
||
tr.children[0].textContent = order.title;
|
||
const st = order.status || "";
|
||
const chipState = st === "druckt" ? "printing" : (st === "fertig" || st === "geliefert" || st === "bezahlt") ? "done" : st === "bestaetigt" ? "waiting" : "idle";
|
||
tr.children[1].innerHTML = chipHtml(chipState, STATUS_LABEL[st] || st);
|
||
tr.children[2].textContent = (order.progress && order.progress.label) || "";
|
||
tr.addEventListener("click", async () => {
|
||
try {
|
||
const full = await api("/auftraege/" + order.id);
|
||
fillOrder(full);
|
||
renderList();
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
});
|
||
body.appendChild(tr);
|
||
});
|
||
}
|
||
|
||
async function loadList() {
|
||
const st = document.getElementById("filter-status").value;
|
||
const q = st ? "?status=" + encodeURIComponent(st) : "";
|
||
orders = await api("/auftraege" + q);
|
||
renderList();
|
||
}
|
||
|
||
async function loadBase() {
|
||
[customers, files] = await Promise.all([
|
||
api("/kunden").catch(() => []),
|
||
api("/dateien").catch(() => []),
|
||
]);
|
||
fillCustomers();
|
||
fillFiles();
|
||
await loadList();
|
||
fillOrder(null);
|
||
}
|
||
|
||
document.getElementById("filter-status").addEventListener("change", () => loadList().catch((e) => showNote("order-note", e)));
|
||
|
||
document.getElementById("order-form").addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const id = document.getElementById("order-id").value;
|
||
const payload = {
|
||
title: document.getElementById("order-title-in").value,
|
||
status: document.getElementById("order-status").value,
|
||
notes: document.getElementById("order-notes").value,
|
||
due_at: document.getElementById("order-due").value || null,
|
||
customer_id: document.getElementById("order-customer").value || null,
|
||
};
|
||
try {
|
||
const saved = id
|
||
? await api("/auftraege/" + id, { method: "PATCH", json: payload })
|
||
: await api("/auftraege", { method: "POST", json: payload });
|
||
showNote("order-note", null);
|
||
document.getElementById("order-note").textContent = "Gespeichert.";
|
||
await loadList();
|
||
fillOrder(saved);
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
});
|
||
|
||
document.getElementById("order-new").addEventListener("click", () => fillOrder(null));
|
||
document.getElementById("order-delete").addEventListener("click", (event) => {
|
||
const id = document.getElementById("order-id").value;
|
||
if (!id) return;
|
||
armButton(event.currentTarget, "Auftrag wirklich löschen?", async () => {
|
||
await api("/auftraege/" + id, { method: "DELETE" });
|
||
toast("Gelöscht.");
|
||
fillOrder(null);
|
||
loadList();
|
||
});
|
||
});
|
||
|
||
document.getElementById("item-form").addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
if (!current) {
|
||
showNote("order-note", new Error("Zuerst Auftrag speichern."));
|
||
return;
|
||
}
|
||
const payload = {
|
||
file_id: document.getElementById("item-file").value || null,
|
||
qty: Number(document.getElementById("item-qty").value),
|
||
unit_price: Number(document.getElementById("item-price").value),
|
||
material_type: document.getElementById("item-material").value,
|
||
};
|
||
try {
|
||
await api("/auftraege/" + current.id + "/positionen", { method: "POST", json: payload });
|
||
const full = await api("/auftraege/" + current.id);
|
||
fillOrder(full);
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
});
|
||
|
||
document.getElementById("customer-form").addEventListener("submit", async (event) => {
|
||
event.preventDefault();
|
||
const id = document.getElementById("cust-id").value;
|
||
const payload = {
|
||
name: document.getElementById("cust-name").value,
|
||
email: document.getElementById("cust-email").value,
|
||
};
|
||
try {
|
||
const row = id
|
||
? await api("/kunden/" + id, { method: "PATCH", json: payload })
|
||
: await api("/kunden", { method: "POST", json: payload });
|
||
if (id) {
|
||
customers = customers.map((c) => (c.id === row.id ? row : c));
|
||
} else {
|
||
customers.push(row);
|
||
}
|
||
fillCustomers();
|
||
document.getElementById("order-customer").value = row.id;
|
||
document.getElementById("cust-id").value = "";
|
||
document.getElementById("cust-name").value = "";
|
||
document.getElementById("cust-email").value = "";
|
||
document.getElementById("cust-delete").hidden = true;
|
||
toast(id ? "Kunde gespeichert." : "Kunde angelegt.");
|
||
} catch (error) {
|
||
showNote("order-note", error);
|
||
}
|
||
});
|
||
|
||
document.getElementById("cust-edit-current").addEventListener("click", () => {
|
||
const id = document.getElementById("order-customer").value;
|
||
const row = customers.find((c) => String(c.id) === String(id));
|
||
if (!row) {
|
||
toast("Zuerst einen Kunden wählen.", "bad");
|
||
return;
|
||
}
|
||
document.getElementById("cust-id").value = row.id;
|
||
document.getElementById("cust-name").value = row.name || "";
|
||
document.getElementById("cust-email").value = row.email || "";
|
||
document.getElementById("cust-delete").hidden = false;
|
||
});
|
||
|
||
document.getElementById("cust-delete").addEventListener("click", (event) => {
|
||
const id = document.getElementById("cust-id").value;
|
||
if (!id) return;
|
||
armButton(event.currentTarget, "Kunde löschen?", async () => {
|
||
await api("/kunden/" + id, { method: "DELETE" });
|
||
customers = customers.filter((c) => String(c.id) !== String(id));
|
||
fillCustomers();
|
||
document.getElementById("cust-id").value = "";
|
||
document.getElementById("cust-name").value = "";
|
||
document.getElementById("cust-email").value = "";
|
||
document.getElementById("cust-delete").hidden = true;
|
||
toast("Kunde gelöscht.");
|
||
});
|
||
});
|
||
|
||
loadBase().catch((error) => showNote("order-note", error));
|
||
</script>
|
||
{% endblock %}
|