Erster Commit
This commit is contained in:
@@ -0,0 +1,418 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user