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