Erster Commit
This commit is contained in:
+450
@@ -0,0 +1,450 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Admin Panel</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 { margin-top: 0; }
|
||||
h2 { border-bottom: 2px solid #444; padding-bottom: 6px; margin-top: 40px; }
|
||||
|
||||
.panel {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
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, select {
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
color: #eee;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
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-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.shop-card {
|
||||
background: #202020;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.shop-card h3 { margin: 0 0 6px 0; }
|
||||
.shop-meta { color: #888; font-size: 13px; margin-bottom: 10px; }
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.msg {
|
||||
font-size: 13px;
|
||||
color: #6fbf73;
|
||||
min-height: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a href="/index.html" style="color:#6fbf73; text-decoration:none; font-size:14px;">← zurück zur Startseite</a>
|
||||
<h1>🎮 Admin Panel</h1>
|
||||
|
||||
<!-- ITEMS -->
|
||||
<div class="panel">
|
||||
<h2>Items</h2>
|
||||
<div class="msg" id="itemMsg"></div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th><th>Name</th><th>Typ</th><th>Restore</th><th>Model</th><th>Schaden</th><th>Reichweite</th><th>Gewicht</th><th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="itemsTableBody"></tbody>
|
||||
</table>
|
||||
|
||||
<h3>Item hinzufügen / bearbeiten</h3>
|
||||
<div class="form-row">
|
||||
<input id="itemId" placeholder="ID (z.B. burger)">
|
||||
<input id="itemName" placeholder="Name (z.B. Burger)">
|
||||
<select id="itemType">
|
||||
<option value="item">item</option>
|
||||
<option value="food">food</option>
|
||||
<option value="drink">drink</option>
|
||||
<option value="heal">heal</option>
|
||||
<option value="fuel">fuel (Benzinkanister - Restore = Liter)</option>
|
||||
<option value="car">car</option>
|
||||
<option value="weapon_melee">weapon_melee (Nahkampf)</option>
|
||||
<option value="weapon_ranged">weapon_ranged (Fernkampf)</option>
|
||||
</select>
|
||||
<input id="itemRestore" type="number" placeholder="Restore (optional)" style="width:150px;">
|
||||
<input id="itemModel" placeholder="Model (nur bei car, z.B. sedan)">
|
||||
<input id="itemDamage" type="number" placeholder="Schaden (nur bei Waffen)" style="width:170px;">
|
||||
<input id="itemWeaponRange" type="number" placeholder="Reichweite px (nur ranged)" style="width:190px;">
|
||||
<input id="itemWeight" type="number" step="0.1" placeholder="Gewicht (kg)" style="width:130px;">
|
||||
<button onclick="saveItem()">Speichern</button>
|
||||
</div>
|
||||
<div style="color:#888; font-size:12px; margin-top:6px;">
|
||||
Nahkampf-Reichweite ist fest ~45px, "Reichweite" gilt nur für weapon_ranged.
|
||||
Gewicht: Standard 1.0kg, max. Traglast pro Spieler ist eine Server-Einstellung.
|
||||
Tipp: gleiche ID erneut speichern = Item wird aktualisiert (Preis wird pro Shop separat gesetzt, nicht hier).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SHOPS -->
|
||||
<div class="panel">
|
||||
<h2>Shops</h2>
|
||||
<div class="msg" id="shopMsg"></div>
|
||||
|
||||
<h3>Neuen Shop anlegen</h3>
|
||||
<div class="form-row">
|
||||
<input id="newShopName" placeholder="Shop-Name">
|
||||
<input id="newShopWorld" placeholder="Welt (z.B. stadt)">
|
||||
<input id="newShopX" type="number" placeholder="X (Tile)" style="width:100px;">
|
||||
<input id="newShopY" type="number" placeholder="Y (Tile)" style="width:100px;">
|
||||
<button onclick="createShop()">Shop anlegen</button>
|
||||
</div>
|
||||
|
||||
<div id="shopsContainer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// -------------------------------------------------------------
|
||||
// ZUGRIFFSSCHUTZ: nur eingeloggte Admins dürfen diese Seite nutzen
|
||||
// -------------------------------------------------------------
|
||||
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;
|
||||
}
|
||||
|
||||
let allItems = [];
|
||||
let allShops = [];
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// ITEMS
|
||||
// -------------------------------------------------------------
|
||||
async function loadItems() {
|
||||
const res = await authFetch("/api/admin/items");
|
||||
const data = await res.json();
|
||||
allItems = data.items || [];
|
||||
renderItemsTable();
|
||||
renderShopItemDropdowns();
|
||||
}
|
||||
|
||||
function renderItemsTable() {
|
||||
const body = document.getElementById("itemsTableBody");
|
||||
body.innerHTML = "";
|
||||
|
||||
allItems.forEach(item => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>${item.id}</td>
|
||||
<td>${item.name}</td>
|
||||
<td>${item.type}</td>
|
||||
<td>${item.restore ?? 0}</td>
|
||||
<td>${item.model ?? "-"}</td>
|
||||
<td>${item.damage ? item.damage : "-"}</td>
|
||||
<td>${item.weapon_range ? item.weapon_range : "-"}</td>
|
||||
<td>${item.weight ?? 1}kg</td>
|
||||
<td>
|
||||
<button onclick="editItem('${item.id}')">Bearbeiten</button>
|
||||
<button class="danger" onclick="deleteItem('${item.id}')">Löschen</button>
|
||||
</td>
|
||||
`;
|
||||
body.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
function editItem(id) {
|
||||
const item = allItems.find(i => i.id === id);
|
||||
if (!item) return;
|
||||
|
||||
document.getElementById("itemId").value = item.id;
|
||||
document.getElementById("itemName").value = item.name;
|
||||
document.getElementById("itemType").value = item.type;
|
||||
document.getElementById("itemRestore").value = item.restore ?? "";
|
||||
document.getElementById("itemModel").value = item.model ?? "";
|
||||
document.getElementById("itemDamage").value = item.damage ?? "";
|
||||
document.getElementById("itemWeaponRange").value = item.weapon_range ?? "";
|
||||
document.getElementById("itemWeight").value = item.weight ?? "";
|
||||
}
|
||||
|
||||
async function saveItem() {
|
||||
const id = document.getElementById("itemId").value.trim();
|
||||
const name = document.getElementById("itemName").value.trim();
|
||||
const type = document.getElementById("itemType").value;
|
||||
const restore = Number(document.getElementById("itemRestore").value) || 0;
|
||||
const model = document.getElementById("itemModel").value.trim() || null;
|
||||
const damage = Number(document.getElementById("itemDamage").value) || 0;
|
||||
const weaponRange = Number(document.getElementById("itemWeaponRange").value) || 0;
|
||||
const weight = Number(document.getElementById("itemWeight").value) || 1;
|
||||
|
||||
if (!id || !name) {
|
||||
showMsg("itemMsg", "ID und Name sind Pflicht.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/items", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, name, type, restore, model, damage, weaponRange, weight })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("itemMsg", "Item gespeichert.");
|
||||
document.getElementById("itemId").value = "";
|
||||
document.getElementById("itemName").value = "";
|
||||
document.getElementById("itemRestore").value = "";
|
||||
document.getElementById("itemModel").value = "";
|
||||
document.getElementById("itemDamage").value = "";
|
||||
document.getElementById("itemWeaponRange").value = "";
|
||||
document.getElementById("itemWeight").value = "";
|
||||
await loadItems();
|
||||
} else {
|
||||
showMsg("itemMsg", "Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteItem(id) {
|
||||
if (!confirm(`Item "${id}" wirklich löschen?`)) return;
|
||||
|
||||
const res = await authFetch("/api/admin/items/" + encodeURIComponent(id), { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("itemMsg", "Item gelöscht.");
|
||||
await loadItems();
|
||||
await loadShops();
|
||||
} else {
|
||||
showMsg("itemMsg", "Fehler beim Löschen (evtl. noch in einem Shop verknüpft?).", true);
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// SHOPS
|
||||
// -------------------------------------------------------------
|
||||
async function loadShops() {
|
||||
const res = await authFetch("/api/admin/shops");
|
||||
const data = await res.json();
|
||||
allShops = data.shops || [];
|
||||
renderShops();
|
||||
}
|
||||
|
||||
function renderShops() {
|
||||
const container = document.getElementById("shopsContainer");
|
||||
container.innerHTML = "";
|
||||
|
||||
allShops.forEach(shop => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "shop-card";
|
||||
|
||||
const itemsRows = shop.items.map(si => `
|
||||
<tr>
|
||||
<td>${si.name}</td>
|
||||
<td>${si.price}$</td>
|
||||
<td><button class="danger" onclick="removeShopItem(${si.id})">Entfernen</button></td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
card.innerHTML = `
|
||||
<h3>${shop.name} <span class="badge">#${shop.id}</span></h3>
|
||||
<div class="shop-meta">Welt: ${shop.world} — Position: (${shop.x}, ${shop.y})
|
||||
<button class="danger" onclick="deleteShop(${shop.id})" style="margin-left:10px;">Shop löschen</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Item</th><th>Preis</th><th></th></tr></thead>
|
||||
<tbody>${itemsRows || "<tr><td colspan=3 style='color:#666;'>Noch keine Items</td></tr>"}</tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-row">
|
||||
<select id="itemSelect_${shop.id}"></select>
|
||||
<input id="priceInput_${shop.id}" type="number" placeholder="Preis" style="width:100px;">
|
||||
<button onclick="addShopItem(${shop.id})">Item hinzufügen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
renderShopItemDropdowns();
|
||||
}
|
||||
|
||||
function renderShopItemDropdowns() {
|
||||
allShops.forEach(shop => {
|
||||
const select = document.getElementById("itemSelect_" + shop.id);
|
||||
if (!select) return;
|
||||
|
||||
select.innerHTML = allItems.map(i =>
|
||||
`<option value="${i.id}">${i.name} (${i.type})</option>`
|
||||
).join("");
|
||||
});
|
||||
}
|
||||
|
||||
async function createShop() {
|
||||
const name = document.getElementById("newShopName").value.trim();
|
||||
const world = document.getElementById("newShopWorld").value.trim();
|
||||
const x = Number(document.getElementById("newShopX").value);
|
||||
const y = Number(document.getElementById("newShopY").value);
|
||||
|
||||
if (!name || !world || isNaN(x) || isNaN(y)) {
|
||||
showMsg("shopMsg", "Bitte alle Felder ausfüllen.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/shops", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, world, x, y })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("shopMsg", "Shop angelegt.");
|
||||
document.getElementById("newShopName").value = "";
|
||||
document.getElementById("newShopWorld").value = "";
|
||||
document.getElementById("newShopX").value = "";
|
||||
document.getElementById("newShopY").value = "";
|
||||
await loadShops();
|
||||
} else {
|
||||
showMsg("shopMsg", "Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteShop(id) {
|
||||
if (!confirm("Diesen Shop wirklich komplett löschen?")) return;
|
||||
|
||||
const res = await authFetch("/api/admin/shops/" + id, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("shopMsg", "Shop gelöscht.");
|
||||
await loadShops();
|
||||
} else {
|
||||
showMsg("shopMsg", "Fehler beim Löschen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
async function addShopItem(shopId) {
|
||||
const itemId = document.getElementById("itemSelect_" + shopId).value;
|
||||
const price = Number(document.getElementById("priceInput_" + shopId).value);
|
||||
|
||||
if (!itemId || !price || price <= 0) {
|
||||
showMsg("shopMsg", "Bitte Item und gültigen Preis wählen.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch(`/api/admin/shops/${shopId}/items`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ itemId, price })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("shopMsg", "Item zum Shop hinzugefügt.");
|
||||
await loadShops();
|
||||
} else {
|
||||
showMsg("shopMsg", "Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeShopItem(shopItemId) {
|
||||
const res = await authFetch("/api/admin/shop_items/" + shopItemId, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("shopMsg", "Item entfernt.");
|
||||
await loadShops();
|
||||
} else {
|
||||
showMsg("shopMsg", "Fehler beim Entfernen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// HELPERS
|
||||
// -------------------------------------------------------------
|
||||
function showMsg(elId, text, isError) {
|
||||
const el = document.getElementById(elId);
|
||||
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
||||
el.textContent = text;
|
||||
setTimeout(() => { el.textContent = ""; }, 4000);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// INIT
|
||||
// -------------------------------------------------------------
|
||||
(async () => {
|
||||
await loadItems();
|
||||
await loadShops();
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user