Erster Commit
This commit is contained in:
+474
@@ -0,0 +1,474 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Job-Verwaltung</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;
|
||||
}
|
||||
|
||||
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; }
|
||||
|
||||
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 { width: 100%; }
|
||||
|
||||
.job-card {
|
||||
background: #202020;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.job-card h3 { margin: 0 0 8px 0; display:flex; justify-content:space-between; align-items:center; }
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="back" href="/index.html">← zurück zur Startseite</a>
|
||||
<h1>💼 Job-Verwaltung</h1>
|
||||
|
||||
<div class="panel">
|
||||
<h3 style="margin-top:0;">Neuen Job anlegen</h3>
|
||||
<div class="form-row">
|
||||
<input id="newJobName" placeholder="Job-Name (z.B. Trucker)">
|
||||
<select id="newJobType">
|
||||
<option value="generic">Normal (Job-Punkte: Abholen/Abliefern)</option>
|
||||
<option value="taxi">Taxi (Spieler fahren)</option>
|
||||
<option value="police">Polizei (Verhaften, Alarm-Empfang)</option>
|
||||
<option value="medic">Sanitäter (Notruf-Empfang)</option>
|
||||
<option value="tow">Abschlepper (Fahrzeuge abschleppen)</option>
|
||||
<option value="fire">Feuerwehr (Brände löschen)</option>
|
||||
<option value="mechanic">Handwerker (Fahrzeuge vor Ort reparieren)</option>
|
||||
</select>
|
||||
<label style="display:flex; align-items:center; gap:4px; font-size:13px; color:#ccc;">
|
||||
<input type="checkbox" id="newJobProtected"> Geschützt (nur per Einladung)
|
||||
</label>
|
||||
<button onclick="createJob()">Job anlegen</button>
|
||||
</div>
|
||||
<div class="msg" id="jobMsg"></div>
|
||||
</div>
|
||||
|
||||
<div id="jobsContainer"></div>
|
||||
|
||||
<div class="panel">
|
||||
<h3 style="margin-top:0;">🚓 Fuhrpark (Job-Fahrzeuge)</h3>
|
||||
<p style="color:#888; font-size:13px; margin-top:0;">
|
||||
Fahrzeuge, die keinem Spieler gehören, sondern einem Job zugeordnet sind.
|
||||
Spieler mit passendem Job können sie an der zugehörigen Job-Garage auschecken.
|
||||
</p>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>ID</th><th>Job</th><th>Modell</th><th>Status</th><th></th></tr></thead>
|
||||
<tbody id="fleetTableBody"></tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-row">
|
||||
<select id="fleetJobSelect"></select>
|
||||
<select id="fleetModelSelect"></select>
|
||||
<button onclick="addFleetVehicle()">Fahrzeug hinzufügen</button>
|
||||
</div>
|
||||
<div class="msg" id="fleetMsg"></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;
|
||||
}
|
||||
|
||||
let allJobs = [];
|
||||
let clothingCatalog = { shirt: [], pants: [], shoes: [], helmet: [] };
|
||||
|
||||
async function loadClothingCatalogForUniforms() {
|
||||
const res = await authFetch("/api/admin/clothing_items");
|
||||
const data = await res.json();
|
||||
clothingCatalog = { shirt: [], pants: [], shoes: [], helmet: [] };
|
||||
(data.items || []).forEach(item => {
|
||||
if (clothingCatalog[item.slot]) clothingCatalog[item.slot].push(item);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadJobs() {
|
||||
const res = await authFetch("/api/admin/jobs");
|
||||
const data = await res.json();
|
||||
allJobs = data.jobs || [];
|
||||
await loadClothingCatalogForUniforms();
|
||||
renderJobs();
|
||||
fillFleetJobSelect();
|
||||
}
|
||||
|
||||
async function saveUniform(jobId) {
|
||||
const shirtId = document.getElementById(`uniformShirt_${jobId}`).value || null;
|
||||
const pantsId = document.getElementById(`uniformPants_${jobId}`).value || null;
|
||||
const shoesId = document.getElementById(`uniformShoes_${jobId}`).value || null;
|
||||
const helmetId = document.getElementById(`uniformHelmet_${jobId}`).value || null;
|
||||
|
||||
const res = await authFetch(`/api/admin/jobs/${jobId}/uniform`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ shirtId, pantsId, shoesId, helmetId })
|
||||
});
|
||||
const result = await res.json();
|
||||
|
||||
if (result.ok) {
|
||||
await loadJobs();
|
||||
} else {
|
||||
alert("Fehler: " + (result.error || "unbekannt"));
|
||||
}
|
||||
}
|
||||
|
||||
function renderJobs() {
|
||||
const container = document.getElementById("jobsContainer");
|
||||
container.innerHTML = "";
|
||||
|
||||
allJobs.forEach(job => {
|
||||
const card = document.createElement("div");
|
||||
card.className = "job-card";
|
||||
|
||||
const ranksSorted = [...job.ranks].sort((a, b) => a.level - b.level);
|
||||
|
||||
const rows = ranksSorted.map(r => `
|
||||
<tr>
|
||||
<td>${r.level}</td>
|
||||
<td>${r.title}</td>
|
||||
<td>${r.salary}$ / Min</td>
|
||||
<td>
|
||||
<button class="secondary" onclick="editRank(${job.id}, ${r.id}, ${r.level}, '${escapeAttr(r.title)}', ${r.salary})">Bearbeiten</button>
|
||||
<button class="danger" onclick="deleteRank(${r.id})">Löschen</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join("");
|
||||
|
||||
card.innerHTML = `
|
||||
<h3>
|
||||
${job.name} <span style="font-size:12px; color:#888;">#${job.id}</span>${job.type === "taxi" ? ' <span style="font-size:11px; background:#f5d90a; color:#111; border-radius:4px; padding:2px 6px;">🚕 Taxi</span>' : ''}${job.type === "police" ? ' <span style="font-size:11px; background:#3498db; color:#111; border-radius:4px; padding:2px 6px;">🚓 Polizei</span>' : ''}${job.type === "medic" ? ' <span style="font-size:11px; background:#2ecc71; color:#111; border-radius:4px; padding:2px 6px;">⛑️ Sanitäter</span>' : ''}${job.type === "tow" ? ' <span style="font-size:11px; background:#b8860b; color:#111; border-radius:4px; padding:2px 6px;">🚛 Abschlepper</span>' : ''}${job.type === "fire" ? ' <span style="font-size:11px; background:#c0392b; color:white; border-radius:4px; padding:2px 6px;">🚒 Feuerwehr</span>' : ''}${job.protected ? ' <span style="font-size:11px; background:#a83232; color:white; border-radius:4px; padding:2px 6px;">🔒 Geschützt</span>' : ''}
|
||||
<button class="danger" onclick="deleteJob(${job.id})">Job löschen</button>
|
||||
</h3>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Level</th><th>Titel</th><th>Gehalt</th><th></th></tr></thead>
|
||||
<tbody>${rows || "<tr><td colspan=4 style='color:#666;'>Noch keine Ränge</td></tr>"}</tbody>
|
||||
</table>
|
||||
|
||||
<div class="form-row">
|
||||
<input id="rankLevel_${job.id}" type="number" placeholder="Level" style="width:80px;" value="${ranksSorted.length + 1}">
|
||||
<input id="rankTitle_${job.id}" placeholder="Rang-Titel (z.B. Fahranfänger)">
|
||||
<input id="rankSalary_${job.id}" type="number" placeholder="Gehalt/Min" style="width:120px;">
|
||||
<input id="rankId_${job.id}" type="hidden" value="">
|
||||
<button onclick="saveRank(${job.id})">Rang speichern</button>
|
||||
<button class="secondary" onclick="resetRankForm(${job.id})">Neu</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:14px; padding-top:12px; border-top:1px solid #333;">
|
||||
<h4 style="margin:0 0 8px 0; color:#f5d90a; font-size:13px;">👕 Uniform (am Dienst-Punkt angezogen)</h4>
|
||||
<div class="form-row">
|
||||
<select id="uniformShirt_${job.id}">
|
||||
<option value="">Kein Oberteil</option>
|
||||
${clothingCatalog.shirt.map(i => `<option value="${i.id}" ${job.uniformShirtId === i.id ? "selected" : ""}>${i.name}</option>`).join("")}
|
||||
</select>
|
||||
<select id="uniformPants_${job.id}">
|
||||
<option value="">Keine Hose</option>
|
||||
${clothingCatalog.pants.map(i => `<option value="${i.id}" ${job.uniformPantsId === i.id ? "selected" : ""}>${i.name}</option>`).join("")}
|
||||
</select>
|
||||
<select id="uniformShoes_${job.id}">
|
||||
<option value="">Keine Schuhe</option>
|
||||
${clothingCatalog.shoes.map(i => `<option value="${i.id}" ${job.uniformShoesId === i.id ? "selected" : ""}>${i.name}</option>`).join("")}
|
||||
</select>
|
||||
<select id="uniformHelmet_${job.id}">
|
||||
<option value="">Kein Helm</option>
|
||||
${clothingCatalog.helmet.map(i => `<option value="${i.id}" ${job.uniformHelmetId === i.id ? "selected" : ""}>${i.name}</option>`).join("")}
|
||||
</select>
|
||||
<button onclick="saveUniform(${job.id})">Uniform speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function escapeAttr(str) {
|
||||
return String(str).replace(/'/g, "\\'");
|
||||
}
|
||||
|
||||
async function createJob() {
|
||||
const name = document.getElementById("newJobName").value.trim();
|
||||
const type = document.getElementById("newJobType").value;
|
||||
const isProtected = document.getElementById("newJobProtected").checked;
|
||||
if (!name) {
|
||||
showMsg("Job-Name ist Pflicht.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/jobs", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name, type, protected: isProtected })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Job angelegt.");
|
||||
document.getElementById("newJobName").value = "";
|
||||
await loadJobs();
|
||||
} else {
|
||||
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteJob(id) {
|
||||
if (!confirm("Diesen Job (inkl. aller Ränge) wirklich löschen?")) return;
|
||||
|
||||
const res = await authFetch("/api/admin/jobs/" + id, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Job gelöscht.");
|
||||
await loadJobs();
|
||||
} else {
|
||||
showMsg("Fehler beim Löschen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
function editRank(jobId, rankId, level, title, salary) {
|
||||
document.getElementById(`rankId_${jobId}`).value = rankId;
|
||||
document.getElementById(`rankLevel_${jobId}`).value = level;
|
||||
document.getElementById(`rankTitle_${jobId}`).value = title;
|
||||
document.getElementById(`rankSalary_${jobId}`).value = salary;
|
||||
}
|
||||
|
||||
function resetRankForm(jobId) {
|
||||
document.getElementById(`rankId_${jobId}`).value = "";
|
||||
document.getElementById(`rankTitle_${jobId}`).value = "";
|
||||
document.getElementById(`rankSalary_${jobId}`).value = "";
|
||||
}
|
||||
|
||||
async function saveRank(jobId) {
|
||||
const id = document.getElementById(`rankId_${jobId}`).value || null;
|
||||
const level = Number(document.getElementById(`rankLevel_${jobId}`).value) || 1;
|
||||
const title = document.getElementById(`rankTitle_${jobId}`).value.trim();
|
||||
const salary = Number(document.getElementById(`rankSalary_${jobId}`).value) || 0;
|
||||
|
||||
if (!title) {
|
||||
showMsg("Rang-Titel ist Pflicht.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/job_ranks", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, jobId, level, title, salary })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Rang gespeichert.");
|
||||
await loadJobs();
|
||||
} else {
|
||||
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRank(id) {
|
||||
if (!confirm("Diesen Rang wirklich löschen?")) return;
|
||||
|
||||
const res = await authFetch("/api/admin/job_ranks/" + id, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showMsg("Rang gelöscht.");
|
||||
await loadJobs();
|
||||
} else {
|
||||
showMsg("Fehler beim Löschen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
function showMsg(text, isError) {
|
||||
const el = document.getElementById("jobMsg");
|
||||
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
||||
el.textContent = text;
|
||||
setTimeout(() => { el.textContent = ""; }, 4000);
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// FUHRPARK (Job-Fahrzeuge)
|
||||
// -------------------------------------------------------------
|
||||
let allFleetVehicles = [];
|
||||
let allCarModels = [];
|
||||
|
||||
async function loadFleet() {
|
||||
const res = await authFetch("/api/admin/job_vehicles");
|
||||
const data = await res.json();
|
||||
allFleetVehicles = data.vehicles || [];
|
||||
renderFleetTable();
|
||||
}
|
||||
|
||||
async function loadCarModelsForFleet() {
|
||||
const res = await authFetch("/api/admin/car_configs");
|
||||
const data = await res.json();
|
||||
allCarModels = data.configs || [];
|
||||
|
||||
const select = document.getElementById("fleetModelSelect");
|
||||
select.innerHTML = allCarModels.map(c => `<option value="${c.model}">${c.model}</option>`).join("");
|
||||
}
|
||||
|
||||
function fillFleetJobSelect() {
|
||||
const select = document.getElementById("fleetJobSelect");
|
||||
select.innerHTML = allJobs.map(j => `<option value="${j.id}">${j.name}</option>`).join("");
|
||||
}
|
||||
|
||||
function jobNameById(id) {
|
||||
const job = allJobs.find(j => j.id === id);
|
||||
return job ? job.name : "Job #" + id;
|
||||
}
|
||||
|
||||
function renderFleetTable() {
|
||||
const body = document.getElementById("fleetTableBody");
|
||||
body.innerHTML = "";
|
||||
|
||||
if (allFleetVehicles.length === 0) {
|
||||
body.innerHTML = `<tr><td colspan="5" style="color:#666;">Noch keine Job-Fahrzeuge</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
allFleetVehicles.forEach(v => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.innerHTML = `
|
||||
<td>#${v.id}</td>
|
||||
<td>${jobNameById(v.job_id)}</td>
|
||||
<td>${v.model}</td>
|
||||
<td>${v.is_stored ? "in Garage" : "unterwegs"}</td>
|
||||
<td><button class="danger" onclick="deleteFleetVehicle(${v.id})">Löschen</button></td>
|
||||
`;
|
||||
body.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
async function addFleetVehicle() {
|
||||
const jobId = Number(document.getElementById("fleetJobSelect").value);
|
||||
const model = document.getElementById("fleetModelSelect").value;
|
||||
|
||||
if (!jobId || !model) {
|
||||
showFleetMsg("Job und Modell auswählen.", true);
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await authFetch("/api/admin/job_vehicles", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ jobId, model })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showFleetMsg("Fahrzeug hinzugefügt.");
|
||||
await loadFleet();
|
||||
} else {
|
||||
showFleetMsg("Fehler: " + (data.error || "unbekannt"), true);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFleetVehicle(id) {
|
||||
if (!confirm("Dieses Job-Fahrzeug wirklich löschen?")) return;
|
||||
|
||||
const res = await authFetch("/api/admin/job_vehicles/" + id, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.ok) {
|
||||
showFleetMsg("Fahrzeug gelöscht.");
|
||||
await loadFleet();
|
||||
} else {
|
||||
showFleetMsg("Löschen fehlgeschlagen.", true);
|
||||
}
|
||||
}
|
||||
|
||||
function showFleetMsg(text, isError) {
|
||||
const el = document.getElementById("fleetMsg");
|
||||
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
||||
el.textContent = text;
|
||||
setTimeout(() => { el.textContent = ""; }, 4000);
|
||||
}
|
||||
|
||||
loadJobs();
|
||||
loadCarModelsForFleet();
|
||||
loadFleet();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user