113 lines
3.8 KiB
HTML
113 lines
3.8 KiB
HTML
{% extends "layout.html" %}
|
|
{% block body %}
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>Ideen</h1>
|
|
<p class="tiny">Backlog und Notizen für später.</p>
|
|
</div>
|
|
</div>
|
|
<div class="split">
|
|
<section class="card table-wrap">
|
|
<table>
|
|
<thead><tr><th>Titel</th><th>Stand</th></tr></thead>
|
|
<tbody id="idea-rows"></tbody>
|
|
</table>
|
|
</section>
|
|
<section class="card">
|
|
<h2 id="idea-title">Neue Idee</h2>
|
|
<form id="idea-form">
|
|
<input id="idea-id" type="hidden">
|
|
<div class="field"><label for="idea-name">Titel</label><input id="idea-name" required></div>
|
|
<div class="field"><label for="idea-body">Notiz</label><textarea id="idea-body"></textarea></div>
|
|
<div class="field"><label for="idea-status">Stand</label>
|
|
<select id="idea-status">
|
|
<option value="offen">offen</option>
|
|
<option value="spaeter">später</option>
|
|
<option value="erledigt">erledigt</option>
|
|
</select></div>
|
|
<div class="actions">
|
|
<button type="submit">Merken</button>
|
|
<button type="button" class="ghost" id="idea-new">Neu</button>
|
|
<button type="button" class="warn" id="idea-delete"><svg class="ico"><use href="#i-trash"/></svg>Löschen</button>
|
|
</div>
|
|
</form>
|
|
<p id="idea-note"></p>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
let ideas = [];
|
|
const STATUS = { offen: "offen", spaeter: "später", erledigt: "erledigt" };
|
|
|
|
function fill(idea) {
|
|
document.getElementById("idea-id").value = idea ? idea.id : "";
|
|
document.getElementById("idea-name").value = idea ? idea.title : "";
|
|
document.getElementById("idea-body").value = idea ? idea.body : "";
|
|
document.getElementById("idea-status").value = idea ? idea.status : "offen";
|
|
document.getElementById("idea-title").textContent = idea ? idea.title : "Neue Idee";
|
|
document.getElementById("idea-delete").hidden = !idea;
|
|
}
|
|
|
|
function render() {
|
|
const body = document.getElementById("idea-rows");
|
|
body.innerHTML = "";
|
|
if (!ideas.length) {
|
|
body.innerHTML = '<tr><td class="empty" colspan="2">Noch nichts notiert.</td></tr>';
|
|
return;
|
|
}
|
|
ideas.forEach((idea) => {
|
|
const tr = document.createElement("tr");
|
|
tr.className = "pick";
|
|
tr.innerHTML = "<td></td><td></td>";
|
|
tr.children[0].textContent = idea.title;
|
|
tr.children[1].textContent = STATUS[idea.status] || idea.status;
|
|
tr.addEventListener("click", () => fill(idea));
|
|
body.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
async function load() {
|
|
ideas = await api("/ideen");
|
|
render();
|
|
}
|
|
|
|
document.getElementById("idea-form").addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const id = document.getElementById("idea-id").value;
|
|
const payload = {
|
|
title: document.getElementById("idea-name").value,
|
|
body: document.getElementById("idea-body").value,
|
|
status: document.getElementById("idea-status").value,
|
|
};
|
|
try {
|
|
const saved = id
|
|
? await api("/ideen/" + id, { method: "PATCH", json: payload })
|
|
: await api("/ideen", { method: "POST", json: payload });
|
|
document.getElementById("idea-note").textContent = "Gemerkt.";
|
|
document.getElementById("idea-note").className = "ok";
|
|
await load();
|
|
fill(saved);
|
|
} catch (error) {
|
|
showNote("idea-note", error);
|
|
}
|
|
});
|
|
document.getElementById("idea-new").addEventListener("click", () => fill(null));
|
|
document.getElementById("idea-delete").addEventListener("click", (event) => {
|
|
const id = document.getElementById("idea-id").value;
|
|
if (!id) return;
|
|
armButton(event.currentTarget, "Idee löschen?", async () => {
|
|
try {
|
|
await api("/ideen/" + id, { method: "DELETE" });
|
|
toast("Idee gelöscht.");
|
|
await load();
|
|
fill(null);
|
|
} catch (error) {
|
|
showNote("idea-note", error);
|
|
}
|
|
});
|
|
});
|
|
load().then(() => fill(null)).catch((error) => showNote("idea-note", error));
|
|
</script>
|
|
{% endblock %}
|