Erster Commit
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Drogensorten</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 { margin-top: 0; }
|
||||
a.back { color: #6fbf73; text-decoration: none; font-size: 14px; }
|
||||
a.back:hover { text-decoration: underline; }
|
||||
|
||||
.panel {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
th { color: #aaa; font-weight: normal; }
|
||||
|
||||
input {
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
color: #eee;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #2c7a3d;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
button.danger { background: #a83232; }
|
||||
button:hover { opacity: 0.85; }
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.form-grid label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.form-grid input { width: 100%; }
|
||||
|
||||
.msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
|
||||
.empty-hint { color: #666; padding: 10px 0; }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
.hint-box {
|
||||
background: #1a2a1a;
|
||||
border: 1px solid #2c4a2c;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
color: #a8d8a8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="back" href="/index.html">← zurück zur Startseite</a>
|
||||
<h1>🌿 Drogensorten</h1>
|
||||
|
||||
<div class="hint-box">
|
||||
<strong>Ablauf:</strong> 1) In <a href="/admin.html" style="color:#6fbf73;">admin.html</a> zwei Items anlegen
|
||||
(Rohware + fertiges Produkt, z.B. "cannabis_raw" und "cannabis"). 2) Hier eine Sorte anlegen, die beide
|
||||
Items miteinander verknüpft. 3) Im Map-Editor Anbaustellen, Labore und Verkaufsorte für diese Sorte platzieren.
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2 style="margin-top:0;">Vorhandene Sorten</h2>
|
||||
<table>
|
||||
<thead><tr><th>ID</th><th>Name</th><th>Rohware</th><th>Produkt</th><th>Basispreis</th><th></th></tr></thead>
|
||||
<tbody id="drugsTableBody"></tbody>
|
||||
</table>
|
||||
<div class="empty-hint hidden" id="drugsEmpty">Noch keine Drogensorten angelegt.</div>
|
||||
|
||||
<h3>Sorte anlegen</h3>
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label>ID (z.B. cannabis)</label>
|
||||
<input id="drugId" placeholder="cannabis">
|
||||
</div>
|
||||
<div>
|
||||
<label>Name</label>
|
||||
<input id="drugName" placeholder="Cannabis">
|
||||
</div>
|
||||
<div>
|
||||
<label>Rohware-Item-ID</label>
|
||||
<input id="drugRawItem" placeholder="cannabis_raw">
|
||||
</div>
|
||||
<div>
|
||||
<label>Produkt-Item-ID</label>
|
||||
<input id="drugProductItem" placeholder="cannabis">
|
||||
</div>
|
||||
<div>
|
||||
<label>Basispreis ($/Stück)</label>
|
||||
<input id="drugBasePrice" type="number" value="50">
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="saveDrugType()">Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg" id="drugMsg"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const token = localStorage.getItem("token");
|
||||
// Voll-Admin ODER passende Gruppen-Berechtigung reicht jetzt aus - der
|
||||
// Server prüft das bei jedem Aufruf ohnehin final ab (siehe requireAdmin);
|
||||
// hier reicht ein simpler Login-Check, authFetch() fängt fehlende Rechte
|
||||
// beim ersten echten API-Aufruf sauber ab (Meldung + Weiterleitung)
|
||||
let isAdmin = localStorage.getItem("isAdmin") === "true";
|
||||
|
||||
if (!token) {
|
||||
alert("Bitte zuerst einloggen.");
|
||||
location.href = "/index.html";
|
||||
}
|
||||
|
||||
async function authFetch(url, options = {}) {
|
||||
options.headers = { ...(options.headers || {}), "Authorization": "Bearer " + token };
|
||||
const res = await fetch(url, options);
|
||||
if (res.status === 401 || res.status === 403) {
|
||||
alert("Sitzung abgelaufen oder kein Admin-Zugriff. Bitte erneut einloggen.");
|
||||
location.href = "/index.html";
|
||||
throw new Error("Nicht autorisiert");
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
let allDrugTypes = [];
|
||||
|
||||
async function loadDrugTypes() {
|
||||
const res = await authFetch("/api/admin/drug_types");
|
||||
const data = await res.json();
|
||||
allDrugTypes = data.drugTypes || [];
|
||||
renderDrugTypes();
|
||||
}
|
||||
|
||||
function renderDrugTypes() {
|
||||
const body = document.getElementById("drugsTableBody");
|
||||
const empty = document.getElementById("drugsEmpty");
|
||||
body.innerHTML = "";
|
||||
|
||||
if (allDrugTypes.length === 0) {
|
||||
empty.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
empty.classList.add("hidden");
|
||||
|
||||
allDrugTypes.forEach(d => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${escapeHtml(d.id)}</td>
|
||||
<td>${escapeHtml(d.name)}</td>
|
||||
<td>${escapeHtml(d.raw_item_id)}</td>
|
||||
<td>${escapeHtml(d.product_item_id)}</td>
|
||||
<td>${d.base_price}$</td>
|
||||
<td><button class="danger" onclick="deleteDrugType('${d.id}')">Löschen</button></td>
|
||||
`;
|
||||
body.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
async function saveDrugType() {
|
||||
const id = document.getElementById("drugId").value.trim();
|
||||
const name = document.getElementById("drugName").value.trim();
|
||||
const rawItemId = document.getElementById("drugRawItem").value.trim();
|
||||
const productItemId = document.getElementById("drugProductItem").value.trim();
|
||||
const basePrice = Number(document.getElementById("drugBasePrice").value) || 50;
|
||||
|
||||
if (!id || !name || !rawItemId || !productItemId) {
|
||||
showMsg("ID, Name, Rohware- und Produkt-Item sind Pflicht.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/drug_types", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, name, rawItemId, productItemId, basePrice })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Sorte gespeichert.");
|
||||
document.getElementById("drugId").value = "";
|
||||
document.getElementById("drugName").value = "";
|
||||
document.getElementById("drugRawItem").value = "";
|
||||
document.getElementById("drugProductItem").value = "";
|
||||
document.getElementById("drugBasePrice").value = "50";
|
||||
await loadDrugTypes();
|
||||
} else {
|
||||
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteDrugType(id) {
|
||||
if (!confirm(`Sorte "${id}" wirklich löschen? Alle zugehörigen Anbau-/Labor-/Verkaufsstellen werden mitgelöscht.`)) return;
|
||||
|
||||
const res = await authFetch("/api/admin/drug_types/" + encodeURIComponent(id), { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Sorte gelöscht.");
|
||||
await loadDrugTypes();
|
||||
} else {
|
||||
showMsg("Löschen fehlgeschlagen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
function showMsg(text, isError) {
|
||||
const el = document.getElementById("drugMsg");
|
||||
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
||||
el.textContent = text;
|
||||
setTimeout(() => { el.textContent = ""; }, 4000);
|
||||
}
|
||||
|
||||
loadDrugTypes();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user