418 lines
13 KiB
HTML
418 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Spieler-Inventare</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; }
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
gap: 20px;
|
|
margin-top: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.panel {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
input, select {
|
|
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.secondary { background: #333; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
#playerSearch { width: 100%; margin-bottom: 10px; }
|
|
|
|
.player-item {
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.player-item:hover { background: #242424; }
|
|
.player-item.active { background: #2c7a3d33; border: 1px solid #2c7a3d; }
|
|
.player-item .sub { color: #888; font-size: 12px; }
|
|
|
|
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; }
|
|
td input[type="number"] { width: 80px; }
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 14px;
|
|
align-items: center;
|
|
}
|
|
|
|
.msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
|
|
.hidden { display: none !important; }
|
|
.empty-hint { color: #666; padding: 20px 0; }
|
|
|
|
.player-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
.player-header .money { color: #999; font-size: 13px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="back" href="/index.html">← zurück zur Startseite</a> · <a class="back" href="/admin.html">Items/Shops</a>
|
|
<h1>🎒 Spieler-Inventare</h1>
|
|
|
|
<div class="layout">
|
|
<div class="panel">
|
|
<input id="playerSearch" placeholder="Spieler suchen...">
|
|
<div id="playerList"></div>
|
|
</div>
|
|
|
|
<div class="panel" id="inventoryPanel">
|
|
<div class="empty-hint" id="emptyHint">Wähle links einen Spieler aus.</div>
|
|
|
|
<div id="inventoryContent" class="hidden">
|
|
<div class="player-header">
|
|
<h2 id="playerName" style="margin:0;"></h2>
|
|
<span class="money" id="playerMoney"></span>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr><th>Item-ID</th><th>Name</th><th>Menge</th><th></th></tr>
|
|
</thead>
|
|
<tbody id="invTableBody"></tbody>
|
|
</table>
|
|
|
|
<h3>Item hinzufügen</h3>
|
|
<div class="form-row">
|
|
<select id="addItemSelect"></select>
|
|
<input id="addItemAmount" type="number" placeholder="Menge" value="1" style="width:100px;">
|
|
<button onclick="addInventoryItem()">Hinzufügen</button>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<button onclick="saveInventory()">💾 Speichern</button>
|
|
<button class="secondary" onclick="loadInventory(currentPlayerId)">Änderungen verwerfen</button>
|
|
</div>
|
|
|
|
<div class="msg" id="invMsg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel hidden" id="jobPanel">
|
|
<h2 style="margin-top:0;">Job & Rang</h2>
|
|
<div class="form-row">
|
|
<select id="jobRankSelect" style="min-width:280px;"></select>
|
|
<button onclick="saveJobRank()">Übernehmen</button>
|
|
<button class="danger" onclick="clearJobRank()">Job entfernen</button>
|
|
</div>
|
|
<div class="msg" id="jobMsg"></div>
|
|
</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 allPlayers = [];
|
|
let allItems = [];
|
|
let currentPlayerId = null;
|
|
let currentInventory = [];
|
|
|
|
// -------------------------------------------------------------
|
|
// SPIELERLISTE
|
|
// -------------------------------------------------------------
|
|
async function loadPlayers() {
|
|
const res = await authFetch("/api/admin/players");
|
|
const data = await res.json();
|
|
allPlayers = data.players || [];
|
|
renderPlayerList();
|
|
}
|
|
|
|
function renderPlayerList() {
|
|
const list = document.getElementById("playerList");
|
|
const filter = document.getElementById("playerSearch").value.toLowerCase();
|
|
list.innerHTML = "";
|
|
|
|
allPlayers
|
|
.filter(p => p.username.toLowerCase().includes(filter))
|
|
.forEach(p => {
|
|
const div = document.createElement("div");
|
|
div.className = "player-item" + (p.id === currentPlayerId ? " active" : "");
|
|
div.innerHTML = `
|
|
${p.username}
|
|
<div class="sub">ID ${p.id} — ${p.money}$ Bargeld</div>
|
|
`;
|
|
div.onclick = () => loadInventory(p.id);
|
|
list.appendChild(div);
|
|
});
|
|
}
|
|
|
|
document.getElementById("playerSearch").addEventListener("input", renderPlayerList);
|
|
|
|
// -------------------------------------------------------------
|
|
// ITEMS (für die Auswahl beim Hinzufügen)
|
|
// -------------------------------------------------------------
|
|
async function loadItems() {
|
|
const res = await authFetch("/api/admin/items");
|
|
const data = await res.json();
|
|
allItems = data.items || [];
|
|
|
|
const select = document.getElementById("addItemSelect");
|
|
select.innerHTML = allItems.map(i =>
|
|
`<option value="${i.id}">${i.name} (${i.id})</option>`
|
|
).join("");
|
|
}
|
|
|
|
function itemName(id) {
|
|
const item = allItems.find(i => i.id === id);
|
|
return item ? item.name : "(unbekanntes Item)";
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// INVENTAR LADEN / ANZEIGEN
|
|
// -------------------------------------------------------------
|
|
async function loadInventory(playerId) {
|
|
currentPlayerId = playerId;
|
|
renderPlayerList();
|
|
|
|
const res = await authFetch(`/api/admin/players/${playerId}/inventory`);
|
|
const data = await res.json();
|
|
|
|
if (!data.ok) {
|
|
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
return;
|
|
}
|
|
|
|
currentInventory = data.inventory || [];
|
|
|
|
document.getElementById("emptyHint").classList.add("hidden");
|
|
document.getElementById("inventoryContent").classList.remove("hidden");
|
|
document.getElementById("playerName").textContent = data.username;
|
|
|
|
const player = allPlayers.find(p => p.id === playerId);
|
|
document.getElementById("playerMoney").textContent = player
|
|
? `${player.money}$ Bargeld — ${player.bank}$ Bank`
|
|
: "";
|
|
|
|
renderInventoryTable();
|
|
|
|
document.getElementById("jobPanel").classList.remove("hidden");
|
|
await loadJobRankOptions(player ? player.job_rank_id : null);
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// JOB & RANG (Beförderung)
|
|
// -------------------------------------------------------------
|
|
let allJobsWithRanks = [];
|
|
|
|
async function loadJobRankOptions(currentRankId) {
|
|
if (allJobsWithRanks.length === 0) {
|
|
const res = await authFetch("/api/admin/jobs");
|
|
const data = await res.json();
|
|
allJobsWithRanks = data.jobs || [];
|
|
}
|
|
|
|
const select = document.getElementById("jobRankSelect");
|
|
select.innerHTML = `<option value="">Kein Job</option>`;
|
|
|
|
allJobsWithRanks.forEach(job => {
|
|
[...job.ranks].sort((a, b) => a.level - b.level).forEach(r => {
|
|
const opt = document.createElement("option");
|
|
opt.value = r.id;
|
|
opt.textContent = `${job.name} - Rang ${r.level}: ${r.title} (${r.salary}$/Min)`;
|
|
if (r.id === currentRankId) opt.selected = true;
|
|
select.appendChild(opt);
|
|
});
|
|
});
|
|
}
|
|
|
|
async function saveJobRank() {
|
|
if (currentPlayerId === null) return;
|
|
|
|
const rankId = document.getElementById("jobRankSelect").value || null;
|
|
|
|
const res = await authFetch(`/api/admin/players/${currentPlayerId}/job`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ rankId })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showJobMsg("Job/Rang übernommen.");
|
|
await loadPlayers();
|
|
} else {
|
|
showJobMsg("Fehler beim Speichern.", true);
|
|
}
|
|
}
|
|
|
|
function clearJobRank() {
|
|
document.getElementById("jobRankSelect").value = "";
|
|
saveJobRank();
|
|
}
|
|
|
|
function showJobMsg(text, isError) {
|
|
const el = document.getElementById("jobMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
function renderInventoryTable() {
|
|
const body = document.getElementById("invTableBody");
|
|
body.innerHTML = "";
|
|
|
|
if (currentInventory.length === 0) {
|
|
body.innerHTML = `<tr><td colspan="4" style="color:#666;">Inventar ist leer</td></tr>`;
|
|
return;
|
|
}
|
|
|
|
currentInventory.forEach((item, index) => {
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td>${item.id}</td>
|
|
<td>${itemName(item.id)}</td>
|
|
<td><input type="number" min="0" value="${item.amount}" data-index="${index}" class="amountInput"></td>
|
|
<td><button class="danger" data-index="${index}">Entfernen</button></td>
|
|
`;
|
|
body.appendChild(tr);
|
|
});
|
|
|
|
body.querySelectorAll(".amountInput").forEach(input => {
|
|
input.addEventListener("change", () => {
|
|
const idx = Number(input.dataset.index);
|
|
currentInventory[idx].amount = Math.max(0, Number(input.value) || 0);
|
|
});
|
|
});
|
|
|
|
body.querySelectorAll("button.danger").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const idx = Number(btn.dataset.index);
|
|
currentInventory.splice(idx, 1);
|
|
renderInventoryTable();
|
|
});
|
|
});
|
|
}
|
|
|
|
function addInventoryItem() {
|
|
const itemId = document.getElementById("addItemSelect").value;
|
|
const amount = Math.max(1, Number(document.getElementById("addItemAmount").value) || 1);
|
|
|
|
if (!itemId) return;
|
|
|
|
const existing = currentInventory.find(i => i.id === itemId);
|
|
if (existing) {
|
|
existing.amount += amount;
|
|
} else {
|
|
currentInventory.push({ id: itemId, amount });
|
|
}
|
|
|
|
renderInventoryTable();
|
|
}
|
|
|
|
async function saveInventory() {
|
|
if (currentPlayerId === null) return;
|
|
|
|
const res = await authFetch(`/api/admin/players/${currentPlayerId}/inventory`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ inventory: currentInventory })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Inventar gespeichert.");
|
|
currentInventory = data.inventory;
|
|
renderInventoryTable();
|
|
} else {
|
|
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
function showMsg(text, isError) {
|
|
const el = document.getElementById("invMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// INIT
|
|
// -------------------------------------------------------------
|
|
(async () => {
|
|
await loadItems();
|
|
await loadPlayers();
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |