Grotti 3.0.0: Aufträge, Wartung, SSE, Ausschuss-Dialog, UI-Umbau.
Migrationen 003–009, Kundaufträge mit Lieferschein, Abräumen mit Urteil, ntfy/Backup/Zeitfenster, Live-Stream und Mobile-Mehr-Menü.
This commit is contained in:
Dominic Gundel committed
1 parent
0236278929
commit
8e88efc094
45 files changed
+3121
-122
No files matched your search
@@ -0,0 +1,320 @@
|
||||
{% 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">Merken</button>
|
||||
<button type="button" class="ghost" id="order-new">Neu</button>
|
||||
<button type="button" class="warn" 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</summary>
|
||||
<form id="customer-form">
|
||||
<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>
|
||||
<button type="submit">Kunde speichern</button>
|
||||
</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; }
|
||||
el.textContent = "Ist: " + euro(a.cost_total) + " · " + (hours(a.duration_s) || "0 min") + " · Ausschuss " + a.pieces_bad + " Stk";
|
||||
}
|
||||
|
||||
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 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));
|
||||
tr.children[3].appendChild(btn);
|
||||
body.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
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">Noch kein Auftrag.</td></tr>';
|
||||
return;
|
||||
}
|
||||
orders.forEach((order) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.className = "pick";
|
||||
tr.innerHTML = "<td></td><td></td><td></td>";
|
||||
tr.children[0].textContent = order.title;
|
||||
tr.children[1].textContent = STATUS_LABEL[order.status] || order.status;
|
||||
tr.children[2].textContent = (order.progress && order.progress.label) || "";
|
||||
tr.addEventListener("click", async () => {
|
||||
const full = await api("/auftraege/" + order.id);
|
||||
fillOrder(full);
|
||||
});
|
||||
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 = "Gemerkt.";
|
||||
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();
|
||||
try {
|
||||
const row = await api("/kunden", {
|
||||
method: "POST",
|
||||
json: {
|
||||
name: document.getElementById("cust-name").value,
|
||||
email: document.getElementById("cust-email").value,
|
||||
},
|
||||
});
|
||||
customers.push(row);
|
||||
fillCustomers();
|
||||
document.getElementById("order-customer").value = row.id;
|
||||
document.getElementById("cust-name").value = "";
|
||||
document.getElementById("cust-email").value = "";
|
||||
toast("Kunde angelegt.");
|
||||
} catch (error) {
|
||||
showNote("order-note", error);
|
||||
}
|
||||
});
|
||||
|
||||
loadBase().catch((error) => showNote("order-note", error));
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in new issue
Block a user