added Mockups
This commit is contained in:
276
Mock/App.tsx
Normal file
276
Mock/App.tsx
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
// Beispiel-Daten für die Übersicht in der Seitenleiste
|
||||||
|
const allItems = [
|
||||||
|
{ id: 1, name: "Kamera" },
|
||||||
|
{ id: 2, name: "Mikrofon" },
|
||||||
|
{ id: 3, name: "Licht-Set" },
|
||||||
|
{ id: 4, name: "Stativ" },
|
||||||
|
];
|
||||||
|
|
||||||
|
// Beispiel-Ausleihen, später per API dynamisch!
|
||||||
|
const loans = [
|
||||||
|
{
|
||||||
|
itemId: 1,
|
||||||
|
username: "max",
|
||||||
|
start: "2025-01-01T08:00",
|
||||||
|
end: "2025-01-01T18:00",
|
||||||
|
loanCode: "123456",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
itemId: 3,
|
||||||
|
username: "sara",
|
||||||
|
start: "2025-01-02T10:00",
|
||||||
|
end: "2025-01-02T16:00",
|
||||||
|
loanCode: "654321",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Dummy: Für das Beispiel sind einige Items "nicht verfügbar" bei bestimmten Zeiträumen
|
||||||
|
function getAvailableItems(start: string, end: string) {
|
||||||
|
if (start.startsWith("2025-01-01")) {
|
||||||
|
return allItems.filter(
|
||||||
|
(item) => item.name === "Kamera" || item.name === "Stativ"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return allItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [step, setStep] = useState<1 | 2 | 3>(1);
|
||||||
|
const [startDate, setStartDate] = useState("");
|
||||||
|
const [endDate, setEndDate] = useState("");
|
||||||
|
const [availableItems, setAvailableItems] = useState<typeof allItems>([]);
|
||||||
|
const [selectedItem, setSelectedItem] = useState<number | null>(null);
|
||||||
|
|
||||||
|
// Dummy Code für das Design
|
||||||
|
const loanCode = "123456";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
|
||||||
|
{/* Seitenleiste */}
|
||||||
|
<aside className="w-80 min-h-screen bg-white/90 backdrop-blur border-r border-blue-100 shadow-xl flex flex-col p-8">
|
||||||
|
<h2 className="text-2xl font-extrabold mb-6 text-blue-700 tracking-tight flex items-center gap-2">
|
||||||
|
<svg
|
||||||
|
className="w-7 h-7 text-blue-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M16.5 7.5V4.75A2.25 2.25 0 0 0 14.25 2.5h-4.5A2.25 2.25 0 0 0 7.5 4.75V7.5m9 0h-9m9 0v11.75A2.25 2.25 0 0 1 14.25 21.5h-4.5A2.25 2.25 0 0 1 7.5 19.25V7.5m9 0h-9"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Ausleih-Übersicht
|
||||||
|
</h2>
|
||||||
|
<ul className="space-y-5 flex-1">
|
||||||
|
{allItems.map((item) => {
|
||||||
|
const itemLoans = loans.filter((loan) => loan.itemId === item.id);
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
className="bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition"
|
||||||
|
>
|
||||||
|
<div className="font-semibold text-gray-900 flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className="inline-block w-2 h-2 rounded-full"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
itemLoans.length === 0 ? "#34d399" : "#60a5fa",
|
||||||
|
}}
|
||||||
|
></span>
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
{itemLoans.length === 0 ? (
|
||||||
|
<div className="text-green-500 text-xs mt-1 font-medium">
|
||||||
|
Verfügbar
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="mt-2 space-y-1">
|
||||||
|
{itemLoans.map((loan, idx) => (
|
||||||
|
<li
|
||||||
|
key={idx}
|
||||||
|
className="text-xs text-blue-800 bg-blue-100/60 p-1 rounded"
|
||||||
|
>
|
||||||
|
<span className="font-bold">{loan.username}</span>
|
||||||
|
<span className="ml-2">
|
||||||
|
{formatDateTime(loan.start)} –{" "}
|
||||||
|
{formatDateTime(loan.end)}
|
||||||
|
</span>
|
||||||
|
<span className="ml-2 text-gray-400">
|
||||||
|
({loan.loanCode})
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
<div className="mt-10 text-xs text-gray-400 flex items-center gap-4">
|
||||||
|
<span className="inline-block w-3 h-3 bg-green-400 rounded-full mr-1"></span>
|
||||||
|
Verfügbar
|
||||||
|
<span className="inline-block w-3 h-3 bg-blue-400 rounded-full ml-4 mr-1"></span>
|
||||||
|
Verliehen
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Hauptbereich */}
|
||||||
|
<main className="flex-1 flex flex-col items-center py-14 px-4">
|
||||||
|
<header className="mb-12">
|
||||||
|
<h1 className="text-4xl font-extrabold text-blue-800 tracking-tight drop-shadow-sm">
|
||||||
|
Gegenstand ausleihen
|
||||||
|
</h1>
|
||||||
|
<p className="text-blue-400 mt-2 text-lg font-medium">
|
||||||
|
Schnell und unkompliziert Equipment reservieren
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div className="bg-white/90 shadow-2xl rounded-3xl p-10 w-full max-w-xl ring-1 ring-blue-100">
|
||||||
|
{step === 1 && (
|
||||||
|
<form
|
||||||
|
className="space-y-6"
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setAvailableItems(getAvailableItems(startDate, endDate));
|
||||||
|
setStep(2);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold mb-2 text-blue-700">
|
||||||
|
1. Zeitraum wählen
|
||||||
|
</h2>
|
||||||
|
<div>
|
||||||
|
<label className="block font-medium mb-1 text-blue-900">
|
||||||
|
Startdatum
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"
|
||||||
|
value={startDate}
|
||||||
|
onChange={(e) => setStartDate(e.target.value)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block font-medium mb-1 text-blue-900">
|
||||||
|
Enddatum
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none"
|
||||||
|
value={endDate}
|
||||||
|
onChange={(e) => setEndDate(e.target.value)}
|
||||||
|
required
|
||||||
|
min={startDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 text-white font-bold py-2 px-4 rounded-xl shadow transition disabled:bg-gray-300"
|
||||||
|
disabled={!startDate || !endDate || endDate <= startDate}
|
||||||
|
>
|
||||||
|
Verfügbare Gegenstände anzeigen
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 2 && (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold mb-6 text-blue-700">
|
||||||
|
2. Gegenstand auswählen
|
||||||
|
</h2>
|
||||||
|
{availableItems.length === 0 ? (
|
||||||
|
<div className="text-red-600 mb-8 font-medium text-center">
|
||||||
|
Keine Gegenstände verfügbar für diesen Zeitraum.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="mb-8 space-y-3">
|
||||||
|
{availableItems.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
className={`flex justify-between items-center p-4 rounded-xl shadow-sm border ${
|
||||||
|
selectedItem === item.id
|
||||||
|
? "bg-blue-100 border-blue-400"
|
||||||
|
: "bg-green-50 border-green-100 hover:bg-blue-50"
|
||||||
|
} transition`}
|
||||||
|
>
|
||||||
|
<span className="font-medium text-lg">{item.name}</span>
|
||||||
|
<button
|
||||||
|
className={`px-4 py-1 rounded-lg bg-gradient-to-r from-blue-500 to-blue-400 text-white text-sm font-semibold shadow hover:from-blue-600 hover:to-blue-500 ${
|
||||||
|
selectedItem === item.id ? "ring-2 ring-blue-400" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => setSelectedItem(item.id)}
|
||||||
|
>
|
||||||
|
{selectedItem === item.id ? "Ausgewählt" : "Auswählen"}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<button
|
||||||
|
className="px-5 py-2 bg-gray-100 text-gray-600 rounded-xl hover:bg-gray-200 font-semibold shadow"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="px-5 py-2 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-xl hover:from-blue-700 hover:to-blue-500 font-bold shadow transition disabled:bg-gray-300"
|
||||||
|
disabled={selectedItem === null}
|
||||||
|
onClick={() => setStep(3)}
|
||||||
|
>
|
||||||
|
Ausleihen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 3 && (
|
||||||
|
<div className="mt-2 p-8 bg-blue-50/80 border border-blue-200 rounded-2xl text-center shadow-lg">
|
||||||
|
<h3 className="font-extrabold text-blue-700 mb-3 text-2xl">
|
||||||
|
Ausleihe bestätigt!
|
||||||
|
</h3>
|
||||||
|
<p className="mb-2 text-lg">
|
||||||
|
Ihr Ausleih-Code lautet:{" "}
|
||||||
|
<span className="font-mono text-2xl text-blue-900 bg-white px-2 py-1 rounded shadow">
|
||||||
|
{loanCode}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-blue-600 text-sm">
|
||||||
|
Bitte merken Sie sich diesen Code, um das Schließfach zu öffnen.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="mt-8 px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-400 text-white rounded-xl hover:from-blue-700 hover:to-blue-500 font-bold shadow"
|
||||||
|
onClick={() => {
|
||||||
|
setStep(1);
|
||||||
|
setStartDate("");
|
||||||
|
setEndDate("");
|
||||||
|
setSelectedItem(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Neue Ausleihe
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hilfsfunktion: Datumsformatierung (z.B. 01.01.2025 08:00)
|
||||||
|
function formatDateTime(dt: string) {
|
||||||
|
const d = new Date(dt);
|
||||||
|
return (
|
||||||
|
d.toLocaleDateString("de-DE", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "2-digit",
|
||||||
|
year: "numeric",
|
||||||
|
}) +
|
||||||
|
" " +
|
||||||
|
d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
Mock/Frames.pdf
Normal file
BIN
Mock/Frames.pdf
Normal file
Binary file not shown.
Reference in New Issue
Block a user