remove unused mock data files and update docker-compose paths
This commit is contained in:
@@ -1,276 +0,0 @@
|
|||||||
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" })
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": 1,
|
|
||||||
"title": "Mock Book 1",
|
|
||||||
"author": "Author 1",
|
|
||||||
"description": "Description for Mock Book 1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 2,
|
|
||||||
"title": "Mock Book 2",
|
|
||||||
"author": "Author 2",
|
|
||||||
"description": "Description for Mock Book 2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 3,
|
|
||||||
"title": "Mock Book 3",
|
|
||||||
"author": "Author 3",
|
|
||||||
"description": "Description for Mock Book 3"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
services:
|
services:
|
||||||
# borrow_system-frontend:
|
# borrow_system-frontend:
|
||||||
# container_name: borrow_system-frontend
|
# container_name: borrow_system-frontend
|
||||||
# build: ./frontend
|
# build: ./FrontendV2
|
||||||
# ports:
|
# ports:
|
||||||
# - "8001:8001"
|
# - "8001:8001"
|
||||||
# environment:
|
# environment:
|
||||||
# - CHOKIDAR_USEPOLLING=true
|
# - CHOKIDAR_USEPOLLING=true
|
||||||
# volumes:
|
# volumes:
|
||||||
# - ./frontend:/app
|
# - ./FrontendV2:/app
|
||||||
# - /app/node_modules
|
# - /app/node_modules
|
||||||
# restart: unless-stopped
|
# restart: unless-stopped
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Reference in New Issue
Block a user