Sprint 8: modernes Design-System für die React-PWA
Gemeinsames Stylesheet (Tokens, Karten, Buttons, Badges, Formulare) plus AppShell (Kopfzeile mit Navigation/Logout) statt Inline-Styles je Screen. Kein UI-Framework als neue Abhängigkeit - schlankes eigenes CSS, damit Build/Deploy-Weg unverändert bleibt. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt
This commit is contained in:
Claude Sonnet 5
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router-dom";
|
||||
|
||||
import { AuthProvider, useAuth } from "./auth/AuthContext";
|
||||
import { AppShell } from "./components/AppShell";
|
||||
import { AdminPage } from "./pages/AdminPage";
|
||||
import { KontrollPage } from "./pages/KontrollPage";
|
||||
import { LoginPage } from "./pages/LoginPage";
|
||||
@@ -12,7 +13,7 @@ function GeschuetzteRoute({ children }: { children: ReactNode }) {
|
||||
if (!eingeloggt) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
return <>{children}</>;
|
||||
return <AppShell>{children}</AppShell>;
|
||||
}
|
||||
|
||||
function AdminRoute({ children }: { children: ReactNode }) {
|
||||
@@ -23,7 +24,7 @@ function AdminRoute({ children }: { children: ReactNode }) {
|
||||
if (!istAdmin) {
|
||||
return <Navigate to="/objekte" replace />;
|
||||
}
|
||||
return <>{children}</>;
|
||||
return <AppShell>{children}</AppShell>;
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
|
||||
/** Gemeinsamer Rahmen (Kopfzeile + Navigation) für alle eingeloggten Screens. */
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
const { istAdmin, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
function handleLogout() {
|
||||
logout();
|
||||
navigate("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="topbar">
|
||||
<NavLink to="/objekte" className="topbar-brand">
|
||||
MABEA
|
||||
</NavLink>
|
||||
<nav className="topbar-nav">
|
||||
<NavLink to="/objekte" className={({ isActive }) => (isActive ? "active" : "")}>
|
||||
Objekte
|
||||
</NavLink>
|
||||
{istAdmin && (
|
||||
<NavLink to="/admin" className={({ isActive }) => (isActive ? "active" : "")}>
|
||||
Administration
|
||||
</NavLink>
|
||||
)}
|
||||
<button className="btn btn-secondary" onClick={handleLogout}>
|
||||
Abmelden
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import App from "./App";
|
||||
import "./styles/global.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -15,12 +15,16 @@ export function AdminPage() {
|
||||
const [vorlagen, setVorlagen] = useState<Beladungsvorlage[]>([]);
|
||||
const [objekte, setObjekte] = useState<Objekt[]>([]);
|
||||
const [fehler, setFehler] = useState<string | null>(null);
|
||||
const [laedt, setLaedt] = useState(true);
|
||||
|
||||
const [standortName, setStandortName] = useState("");
|
||||
const [standortWirdAngelegt, setStandortWirdAngelegt] = useState(false);
|
||||
|
||||
const [objektCode, setObjektCode] = useState("");
|
||||
const [objektName, setObjektName] = useState("");
|
||||
const [vorlageId, setVorlageId] = useState<number | "">("");
|
||||
const [standortId, setStandortId] = useState<number | "">("");
|
||||
const [objektWirdAngelegt, setObjektWirdAngelegt] = useState(false);
|
||||
|
||||
async function ladeAlles() {
|
||||
const [s, v, o] = await Promise.all([
|
||||
@@ -34,17 +38,22 @@ export function AdminPage() {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
ladeAlles().catch(() => setFehler("Stammdaten konnten nicht geladen werden."));
|
||||
ladeAlles()
|
||||
.catch(() => setFehler("Stammdaten konnten nicht geladen werden."))
|
||||
.finally(() => setLaedt(false));
|
||||
}, []);
|
||||
|
||||
async function standortAnlegen() {
|
||||
setFehler(null);
|
||||
setStandortWirdAngelegt(true);
|
||||
try {
|
||||
await apiRequest("/standorte", { method: "POST", body: { name: standortName } });
|
||||
setStandortName("");
|
||||
await ladeAlles();
|
||||
} catch {
|
||||
setFehler("Standort konnte nicht angelegt werden.");
|
||||
} finally {
|
||||
setStandortWirdAngelegt(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,6 +63,7 @@ export function AdminPage() {
|
||||
return;
|
||||
}
|
||||
setFehler(null);
|
||||
setObjektWirdAngelegt(true);
|
||||
const vorlage = vorlagen.find((v) => v.id === vorlageId);
|
||||
try {
|
||||
await apiRequest("/objekte", {
|
||||
@@ -71,65 +81,123 @@ export function AdminPage() {
|
||||
await ladeAlles();
|
||||
} catch {
|
||||
setFehler("Objekt konnte nicht angelegt werden (Code evtl. schon vergeben).");
|
||||
} finally {
|
||||
setObjektWirdAngelegt(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (laedt) {
|
||||
return (
|
||||
<main className="page">
|
||||
<p className="text-muted">Lade…</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: 16, maxWidth: 640, margin: "0 auto" }}>
|
||||
<main className="page">
|
||||
<h1>Administration</h1>
|
||||
{fehler && <p style={{ color: "red" }}>{fehler}</p>}
|
||||
{fehler && <div className="alert alert-danger">{fehler}</div>}
|
||||
|
||||
<section style={{ marginBottom: 32 }}>
|
||||
<section className="section">
|
||||
<h2>Standort anlegen</h2>
|
||||
<input
|
||||
value={standortName}
|
||||
onChange={(e) => setStandortName(e.target.value)}
|
||||
placeholder="Name"
|
||||
/>
|
||||
<button onClick={standortAnlegen} disabled={!standortName}>
|
||||
Anlegen
|
||||
</button>
|
||||
<ul>
|
||||
{standorte.map((s) => (
|
||||
<li key={s.id}>{s.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Objekt aus Vorlage anlegen</h2>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 320 }}>
|
||||
<select value={vorlageId} onChange={(e) => setVorlageId(Number(e.target.value) || "")}>
|
||||
<option value="">Vorlage wählen…</option>
|
||||
{vorlagen.map((v) => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.name} (v{v.version})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select value={standortId} onChange={(e) => setStandortId(Number(e.target.value) || "")}>
|
||||
<option value="">Standort wählen…</option>
|
||||
{standorte.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input value={objektCode} onChange={(e) => setObjektCode(e.target.value)} placeholder="Code (eindeutig)" />
|
||||
<input value={objektName} onChange={(e) => setObjektName(e.target.value)} placeholder="Name" />
|
||||
<button onClick={objektAnlegen} disabled={!objektCode || !objektName}>
|
||||
Anlegen
|
||||
</button>
|
||||
<div className="card">
|
||||
<div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
|
||||
<input
|
||||
className="input"
|
||||
value={standortName}
|
||||
onChange={(e) => setStandortName(e.target.value)}
|
||||
placeholder="Name des Standorts"
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={standortAnlegen}
|
||||
disabled={!standortName || standortWirdAngelegt}
|
||||
>
|
||||
Anlegen
|
||||
</button>
|
||||
</div>
|
||||
{standorte.length > 0 && (
|
||||
<ul className="card-list">
|
||||
{standorte.map((s) => (
|
||||
<li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
|
||||
<span>{s.name}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{objekte.map((o) => (
|
||||
<li key={o.id}>
|
||||
{o.name} ({o.code})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="section">
|
||||
<h2>Objekt aus Vorlage anlegen</h2>
|
||||
<div className="card">
|
||||
{vorlagen.length === 0 ? (
|
||||
<p className="text-muted">
|
||||
Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
|
||||
</p>
|
||||
) : (
|
||||
<div className="stack">
|
||||
<div className="field">
|
||||
<label>Vorlage</label>
|
||||
<select
|
||||
className="input"
|
||||
value={vorlageId}
|
||||
onChange={(e) => setVorlageId(Number(e.target.value) || "")}
|
||||
>
|
||||
<option value="">Vorlage wählen…</option>
|
||||
{vorlagen.map((v) => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.name} (v{v.version})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Standort</label>
|
||||
<select
|
||||
className="input"
|
||||
value={standortId}
|
||||
onChange={(e) => setStandortId(Number(e.target.value) || "")}
|
||||
>
|
||||
<option value="">Standort wählen…</option>
|
||||
{standorte.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Code (eindeutig)</label>
|
||||
<input className="input" value={objektCode} onChange={(e) => setObjektCode(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Name</label>
|
||||
<input className="input" value={objektName} onChange={(e) => setObjektName(e.target.value)} />
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={objektAnlegen}
|
||||
disabled={!objektCode || !objektName || objektWirdAngelegt}
|
||||
>
|
||||
Anlegen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{objekte.length > 0 && (
|
||||
<ul className="card-list" style={{ marginTop: "1.25rem" }}>
|
||||
{objekte.map((o) => (
|
||||
<li key={o.id} className="row-between" style={{ padding: "0.4rem 0" }}>
|
||||
<span>{o.name}</span>
|
||||
<span className="text-muted">{o.code}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -170,71 +170,74 @@ export function KontrollPage() {
|
||||
|
||||
if (sperre) {
|
||||
return (
|
||||
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||
<main className="page">
|
||||
<h1>Objekt gesperrt</h1>
|
||||
<p>
|
||||
Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
|
||||
</p>
|
||||
<button onClick={() => starteKontrolle(true)} style={{ padding: "0.75rem 1.5rem" }}>
|
||||
Trotzdem übernehmen
|
||||
</button>
|
||||
<div className="card">
|
||||
<p>
|
||||
Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
|
||||
</p>
|
||||
<button className="btn btn-primary" onClick={() => starteKontrolle(true)}>
|
||||
Trotzdem übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (startFehler) {
|
||||
return (
|
||||
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||
<p style={{ color: "crimson" }}>{startFehler}</p>
|
||||
<button onClick={() => starteKontrolle(false)}>Erneut versuchen</button>
|
||||
<main className="page">
|
||||
<div className="alert alert-danger">{startFehler}</div>
|
||||
<button className="btn btn-secondary" onClick={() => starteKontrolle(false)}>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||
<main className="page">
|
||||
<h1>{objekt?.name ?? "Kontrolle"}</h1>
|
||||
{!online && (
|
||||
<p style={{ background: "#fff3cd", padding: "0.5rem", borderRadius: 4 }}>
|
||||
Kein Netz - Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
|
||||
</p>
|
||||
<div className="alert alert-warning">
|
||||
Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
|
||||
</div>
|
||||
)}
|
||||
<ul style={{ listStyle: "none", padding: 0 }}>
|
||||
<ul className="card-list" style={{ marginBottom: "1.25rem" }}>
|
||||
{positionen.map((zustand) => (
|
||||
<li
|
||||
key={zustand.position.id}
|
||||
style={{
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: 8,
|
||||
padding: "0.75rem",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<li key={zustand.position.id} className="card">
|
||||
<div className="card-title-row">
|
||||
<strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
|
||||
<StatusBadge status={zustand.status} />
|
||||
</div>
|
||||
<div style={{ fontSize: "0.85rem", color: "#666" }}>
|
||||
<div className="card-subtitle">
|
||||
Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
|
||||
<div className="row" style={{ marginTop: "0.6rem" }}>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={zustand.eingabe}
|
||||
onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
|
||||
style={{ width: "5rem", fontSize: "1.1rem", padding: "0.5rem" }}
|
||||
style={{ width: "6rem" }}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
|
||||
style={{ flex: 1, fontSize: "1.1rem" }}
|
||||
>
|
||||
Bestätigen
|
||||
</button>
|
||||
</div>
|
||||
{zustand.status === "fehler" && (
|
||||
<div style={{ marginTop: "0.5rem" }}>
|
||||
<p style={{ color: "crimson", margin: 0 }}>{zustand.fehlerText}</p>
|
||||
<button onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}>
|
||||
<div style={{ marginTop: "0.6rem" }}>
|
||||
<p className="text-muted" style={{ color: "var(--color-danger)" }}>
|
||||
{zustand.fehlerText}
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
@@ -243,29 +246,31 @@ export function KontrollPage() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{abschlussFehler && <p style={{ color: "crimson" }}>{abschlussFehler}</p>}
|
||||
<button
|
||||
onClick={abschliessen}
|
||||
disabled={!alleUebertragen || wirdAbgeschlossen}
|
||||
style={{ width: "100%", padding: "1rem", fontSize: "1.2rem" }}
|
||||
>
|
||||
{alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
|
||||
</button>
|
||||
<button onClick={abbrechen} style={{ width: "100%", padding: "0.75rem", marginTop: "0.5rem" }}>
|
||||
Kontrolle abbrechen
|
||||
</button>
|
||||
{abschlussFehler && <div className="alert alert-danger">{abschlussFehler}</div>}
|
||||
<div className="stack">
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={abschliessen}
|
||||
disabled={!alleUebertragen || wirdAbgeschlossen}
|
||||
>
|
||||
{alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
|
||||
</button>
|
||||
<button className="btn btn-danger btn-block" onClick={abbrechen}>
|
||||
Kontrolle abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: PositionStatus }) {
|
||||
const konfiguration: Record<PositionStatus, { text: string; farbe: string }> = {
|
||||
unbestaetigt: { text: "offen", farbe: "#999" },
|
||||
wartet: { text: "nicht gespeichert", farbe: "#e0a800" },
|
||||
wird_uebertragen: { text: "wird übertragen…", farbe: "#e0a800" },
|
||||
gespeichert: { text: "gespeichert", farbe: "#2e7d32" },
|
||||
fehler: { text: "Fehler", farbe: "#c62828" },
|
||||
const konfiguration: Record<PositionStatus, { text: string; klasse: string }> = {
|
||||
unbestaetigt: { text: "offen", klasse: "badge-neutral" },
|
||||
wartet: { text: "nicht gespeichert", klasse: "badge-warning" },
|
||||
wird_uebertragen: { text: "wird übertragen…", klasse: "badge-warning" },
|
||||
gespeichert: { text: "gespeichert", klasse: "badge-success" },
|
||||
fehler: { text: "Fehler", klasse: "badge-danger" },
|
||||
};
|
||||
const { text, farbe } = konfiguration[status];
|
||||
return <span style={{ color: farbe, fontWeight: "bold" }}>{text}</span>;
|
||||
const { text, klasse } = konfiguration[status];
|
||||
return <span className={`badge ${klasse}`}>{text}</span>;
|
||||
}
|
||||
|
||||
@@ -26,37 +26,41 @@ export function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={{ maxWidth: 320, margin: "4rem auto", padding: "0 1rem" }}>
|
||||
<h1>MABEA</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Login
|
||||
<input
|
||||
style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</label>
|
||||
<label style={{ display: "block", marginTop: "1rem" }}>
|
||||
Passwort
|
||||
<input
|
||||
style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</label>
|
||||
{fehler && <p style={{ color: "crimson" }}>{fehler}</p>}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={wirdGeladen}
|
||||
style={{ marginTop: "1rem", width: "100%", fontSize: "1.2rem", padding: "0.75rem" }}
|
||||
>
|
||||
{wirdGeladen ? "Wird geprüft…" : "Anmelden"}
|
||||
</button>
|
||||
</form>
|
||||
<main className="page page-narrow" style={{ marginTop: "4rem" }}>
|
||||
<div className="card">
|
||||
<h1 style={{ color: "var(--color-primary)" }}>MABEA</h1>
|
||||
<p className="text-muted" style={{ marginBottom: "1.5rem" }}>
|
||||
Digitales Materialmanagement
|
||||
</p>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="field">
|
||||
<label htmlFor="login">Login</label>
|
||||
<input
|
||||
id="login"
|
||||
className="input"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="password">Passwort</label>
|
||||
<input
|
||||
id="password"
|
||||
className="input"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
{fehler && <div className="alert alert-danger">{fehler}</div>}
|
||||
<button type="submit" className="btn btn-primary btn-block" disabled={wirdGeladen}>
|
||||
{wirdGeladen ? "Wird geprüft…" : "Anmelden"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
|
||||
|
||||
import { apiRequest } from "../api/client";
|
||||
import type { Objekt } from "../api/types";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
|
||||
// Prompt 11 Screen 1: Standort/Objekt wählen. QR-/Barcode-Scan (Karte 10) ist
|
||||
// Roadmap - dieser Screen bietet bewusst schon die Code-Suche als Textfeld an,
|
||||
@@ -12,12 +11,13 @@ export function ObjektListPage() {
|
||||
const [objekte, setObjekte] = useState<Objekt[]>([]);
|
||||
const [suche, setSuche] = useState("");
|
||||
const [ladefehler, setLadefehler] = useState<string | null>(null);
|
||||
const { istAdmin } = useAuth();
|
||||
const [laedt, setLaedt] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
apiRequest<Objekt[]>("/objekte")
|
||||
.then(setObjekte)
|
||||
.catch(() => setLadefehler("Objektliste konnte nicht geladen werden."));
|
||||
.catch(() => setLadefehler("Objektliste konnte nicht geladen werden."))
|
||||
.finally(() => setLaedt(false));
|
||||
}, []);
|
||||
|
||||
const gefiltert = objekte.filter(
|
||||
@@ -27,36 +27,31 @@ export function ObjektListPage() {
|
||||
);
|
||||
|
||||
return (
|
||||
<main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
|
||||
<main className="page">
|
||||
<h1>Objekte</h1>
|
||||
{istAdmin && (
|
||||
<Link to="/admin" style={{ display: "inline-block", marginBottom: "1rem" }}>
|
||||
Administration →
|
||||
</Link>
|
||||
)}
|
||||
<input
|
||||
className="input input-search"
|
||||
placeholder="Suche oder Code scannen…"
|
||||
value={suche}
|
||||
onChange={(e) => setSuche(e.target.value)}
|
||||
style={{ width: "100%", fontSize: "1.2rem", padding: "0.75rem", marginBottom: "1rem" }}
|
||||
style={{ marginBottom: "1.25rem" }}
|
||||
/>
|
||||
{ladefehler && <p style={{ color: "crimson" }}>{ladefehler}</p>}
|
||||
<ul style={{ listStyle: "none", padding: 0 }}>
|
||||
{ladefehler && <div className="alert alert-danger">{ladefehler}</div>}
|
||||
{laedt && <p className="text-muted">Lade…</p>}
|
||||
{!laedt && !ladefehler && gefiltert.length === 0 && (
|
||||
<p className="text-muted">
|
||||
{objekte.length === 0 ? "Noch keine Objekte angelegt." : "Keine Treffer."}
|
||||
</p>
|
||||
)}
|
||||
<ul className="card-list">
|
||||
{gefiltert.map((objekt) => (
|
||||
<li key={objekt.id} style={{ marginBottom: "0.5rem" }}>
|
||||
<Link
|
||||
to={`/objekte/${objekt.id}/kontrolle`}
|
||||
style={{
|
||||
display: "block",
|
||||
padding: "1rem",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: 8,
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
}}
|
||||
>
|
||||
<strong>{objekt.name}</strong>
|
||||
<div style={{ fontSize: "0.9rem", color: "#666" }}>{objekt.code}</div>
|
||||
<li key={objekt.id}>
|
||||
<Link to={`/objekte/${objekt.id}/kontrolle`} className="card card-link">
|
||||
<div className="card-title-row">
|
||||
<strong>{objekt.name}</strong>
|
||||
<span className="badge badge-neutral">{objekt.status}</span>
|
||||
</div>
|
||||
<div className="card-subtitle">{objekt.code}</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -0,0 +1,323 @@
|
||||
:root {
|
||||
--color-bg: #f4f6f8;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #e2e5e9;
|
||||
--color-text: #1a1f24;
|
||||
--color-text-muted: #66707a;
|
||||
--color-primary: #0b5394;
|
||||
--color-primary-hover: #084174;
|
||||
--color-danger: #c62828;
|
||||
--color-danger-bg: #fdecea;
|
||||
--color-warning: #b8860b;
|
||||
--color-warning-bg: #fff8e1;
|
||||
--color-success: #2e7d32;
|
||||
--color-success-bg: #e8f5e9;
|
||||
--color-muted-bg: #eef0f2;
|
||||
--radius: 10px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
/* -- Layout ------------------------------------------------------------- */
|
||||
|
||||
.app-shell {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 0.75rem 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.topbar-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topbar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.topbar-nav a {
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.topbar-nav a:hover,
|
||||
.topbar-nav a.active {
|
||||
background: var(--color-muted-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.page-narrow {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
/* -- Cards ---------------------------------------------------------------- */
|
||||
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* -- Forms ------------------------------------------------------------ */
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input,
|
||||
select.input,
|
||||
textarea.input {
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
select.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(11, 83, 148, 0.15);
|
||||
}
|
||||
|
||||
.input-search {
|
||||
font-size: 1.05rem;
|
||||
padding: 0.85rem 1rem;
|
||||
}
|
||||
|
||||
/* -- Buttons ------------------------------------------------------------ */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 0.65rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, opacity 0.15s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--color-muted-bg);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: var(--color-danger-bg);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* -- Badges / Alerts ------------------------------------------------------ */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
background: var(--color-muted-bg);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: var(--color-warning-bg);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: var(--color-success-bg);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: var(--radius);
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: var(--color-warning-bg);
|
||||
color: #6b5200;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: var(--color-danger-bg);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
Reference in New Issue
Block a user