feat: update UI components and styles for improved user experience
- Removed obsolete PDF file from the mock directory. - Updated index.html to change the favicon and title for the application. - Deleted unused vite.svg file and replaced it with shapes.svg. - Enhanced App component layout and styling. - Refined Form1 component with better spacing and updated styles. - Improved Form2 component to enhance item selection UI and responsiveness. - Updated Form4 component to improve loan display and interaction. - Enhanced Header component styling for better visibility. - Refined LoginForm component for a more modern look. - Updated Object component styles for better text visibility. - Improved Sidebar component layout and item display. - Updated global CSS for better touch target improvements. - Enhanced Layout component for better responsiveness and structure. - Updated main.tsx to change toast notification theme. - Updated tailwind.config.js to include index.html for Tailwind CSS processing.
This commit is contained in:
@@ -4,10 +4,12 @@ import { getBorrowableItems } from "../utils/fetchData";
|
||||
|
||||
const Form1: React.FC = () => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-bold text-blue-700">1. Zeitraum wählen</h2>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900">
|
||||
1. Zeitraum wählen
|
||||
</h2>
|
||||
<form
|
||||
className="space-y-4"
|
||||
className="space-y-3"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const form = e.currentTarget as HTMLFormElement;
|
||||
@@ -17,40 +19,41 @@ const Form1: React.FC = () => {
|
||||
Cookies.set("startDate", start);
|
||||
Cookies.set("endDate", end);
|
||||
getBorrowableItems();
|
||||
console.log("Zeitraum erfolgreich gesetzt!");
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="startDate"
|
||||
className="block text-sm font-medium text-blue-800 mb-1"
|
||||
>
|
||||
Start
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="startDate"
|
||||
name="startDate"
|
||||
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="endDate"
|
||||
className="block text-sm font-medium text-blue-800 mb-1"
|
||||
>
|
||||
Ende
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="endDate"
|
||||
name="endDate"
|
||||
className="w-full border border-blue-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white/70"
|
||||
/>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="startDate"
|
||||
className="block text-sm font-medium text-slate-700 mb-1"
|
||||
>
|
||||
Start
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="startDate"
|
||||
name="startDate"
|
||||
className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="endDate"
|
||||
className="block text-sm font-medium text-slate-700 mb-1"
|
||||
>
|
||||
Ende
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
id="endDate"
|
||||
name="endDate"
|
||||
className="w-full border border-slate-300 rounded-lg px-3 py-2.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none bg-white"
|
||||
/>
|
||||
</div>
|
||||
</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"
|
||||
className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
|
||||
>
|
||||
Verfügbare Gegenstände anzeigen
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { createLoan } from "../utils/userHandler";
|
||||
import { addToRemove, rmFromRemove } from "../utils/userHandler";
|
||||
import { createLoan, addToRemove, rmFromRemove } from "../utils/userHandler";
|
||||
import { BORROWABLE_ITEMS_UPDATED_EVENT } from "../utils/fetchData";
|
||||
|
||||
interface BorrowItem {
|
||||
@@ -59,16 +58,13 @@ function useBorrowableItems() {
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
// Initial read
|
||||
readFromStorage();
|
||||
|
||||
// Cross-tab updates
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === LOCAL_STORAGE_KEY) readFromStorage();
|
||||
};
|
||||
window.addEventListener("storage", onStorage);
|
||||
|
||||
// Same-tab updates via Custom Event
|
||||
const onBorrowableUpdated = () => readFromStorage();
|
||||
window.addEventListener(
|
||||
BORROWABLE_ITEMS_UPDATED_EVENT,
|
||||
@@ -91,58 +87,85 @@ const Form2: React.FC = () => {
|
||||
const items = useBorrowableItems();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-xl font-bold text-blue-700">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg sm:text-xl font-bold text-slate-900">
|
||||
2. Gegenstand auswählen
|
||||
</h2>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className="text-red-600 font-medium text-center bg-red-50 border border-red-200 rounded-xl p-4">
|
||||
<div className="text-slate-700 text-center bg-slate-100 border border-slate-200 rounded-xl p-4">
|
||||
Keine Gegenstände verfügbar für diesen Zeitraum.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto rounded-xl border border-blue-100 shadow-sm bg-white/80">
|
||||
<table className="min-w-full divide-y divide-blue-100">
|
||||
<thead className="bg-blue-50/60">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
|
||||
Gegenstand
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-blue-700">
|
||||
<input type="checkbox" className="invisible" />
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-blue-50">
|
||||
{items.map((item) => (
|
||||
<tr
|
||||
key={item.id}
|
||||
className="hover:bg-blue-50/40 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-2 text-sm font-medium text-blue-900">
|
||||
<>
|
||||
{/* Mobile: card list */}
|
||||
<div className="sm:hidden space-y-2">
|
||||
{items.map((item) => (
|
||||
<label
|
||||
key={item.id}
|
||||
htmlFor={`item-${item.id}`}
|
||||
className="flex items-center justify-between gap-3 p-3 rounded-lg border border-slate-200 bg-white shadow-sm"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium text-slate-900 truncate">
|
||||
{item.item_name}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-blue-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
addToRemove(item.id);
|
||||
} else {
|
||||
rmFromRemove(item.id);
|
||||
}
|
||||
}}
|
||||
id={`item-${item.id}`}
|
||||
/>
|
||||
</td>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">
|
||||
{item.inSafe ? "Verfügbar" : "Nicht im Schließfach"}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`item-${item.id}`}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) addToRemove(item.id);
|
||||
else rmFromRemove(item.id);
|
||||
}}
|
||||
className="h-5 w-5 accent-indigo-600"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop: table */}
|
||||
<div className="hidden sm:block overflow-x-auto rounded-xl border border-slate-200 shadow-sm bg-white">
|
||||
<table className="min-w-full divide-y divide-slate-200">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
|
||||
Gegenstand
|
||||
</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-700">
|
||||
<input type="checkbox" className="invisible" />
|
||||
</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-2 text-sm font-medium text-slate-900">
|
||||
{item.item_name}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-slate-700 text-right">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) addToRemove(item.id);
|
||||
else rmFromRemove(item.id);
|
||||
}}
|
||||
id={`item-${item.id}`}
|
||||
className="h-4 w-4 accent-indigo-600"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 pt-2">
|
||||
<div className="flex flex-col sm:flex-row gap-3 pt-1">
|
||||
<button
|
||||
onClick={() => {
|
||||
createLoan(
|
||||
@@ -151,7 +174,7 @@ const Form2: React.FC = () => {
|
||||
);
|
||||
}}
|
||||
type="button"
|
||||
className="flex-1 sm:flex-none sm:w-40 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"
|
||||
className="w-full sm:w-44 bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-lg shadow hover:bg-indigo-700 transition"
|
||||
>
|
||||
Ausleihen
|
||||
</button>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Trash, ArrowLeftRight } from "lucide-react";
|
||||
import { handleDeleteLoan } from "../utils/userHandler";
|
||||
|
||||
type Loan = {
|
||||
@@ -33,12 +32,27 @@ const readUserLoansFromStorage = (): Loan[] => {
|
||||
}
|
||||
};
|
||||
|
||||
const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6 7h12M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m1 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7m3 4v6m4-6v6"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const Form4: React.FC = () => {
|
||||
const [userLoans, setUserLoans] = useState<Loan[]>(() =>
|
||||
readUserLoansFromStorage()
|
||||
);
|
||||
|
||||
// Keep in sync if localStorage changes (e.g., other tabs or parts of the app)
|
||||
useEffect(() => {
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === "userLoans") {
|
||||
@@ -60,7 +74,7 @@ const Form4: React.FC = () => {
|
||||
|
||||
if (userLoans.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-200 bg-white p-6 text-center text-gray-600 shadow-sm">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 text-center text-slate-600 shadow-sm">
|
||||
<p>Keine Ausleihen gefunden.</p>
|
||||
</div>
|
||||
);
|
||||
@@ -68,71 +82,117 @@ const Form4: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-lg font-semibold tracking-tight text-gray-900">
|
||||
<p className="text-lg font-semibold tracking-tight text-slate-900">
|
||||
Meine Ausleihen
|
||||
</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
Wenn du eine Ausleihe ändern oder löschen möchtest, klicke auf das
|
||||
Papierkorb-Symbol.
|
||||
<p className="text-sm text-slate-600">
|
||||
Tippe auf das Papierkorb-Symbol, um eine Ausleihe zu löschen.
|
||||
</p>
|
||||
|
||||
<div className="rounded-xl border border-gray-200 bg-white shadow-sm">
|
||||
{/* Mobile: cards */}
|
||||
<div className="space-y-2 sm:hidden">
|
||||
{userLoans.map((loan) => (
|
||||
<div
|
||||
key={loan.id}
|
||||
className="rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-semibold text-slate-900">
|
||||
Leihcode: <span className="font-mono">{loan.loan_code}</span>
|
||||
</div>
|
||||
<div className="mt-1 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-700">
|
||||
<div>
|
||||
<span className="text-slate-500">Start:</span>{" "}
|
||||
{formatDate(loan.start_date)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Ende:</span>{" "}
|
||||
{formatDate(loan.end_date)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Abgeholt:</span>{" "}
|
||||
{formatDate(loan.take_date)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Zurück:</span>{" "}
|
||||
{formatDate(loan.returned_date)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-slate-700">
|
||||
<span className="text-slate-500">Gegenstände:</span>{" "}
|
||||
{Array.isArray(loan.loaned_items_name)
|
||||
? loan.loaned_items_name.join(", ")
|
||||
: "-"}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onDelete(loan.id)}
|
||||
aria-label="Ausleihe löschen"
|
||||
className="flex items-center justify-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
|
||||
>
|
||||
<TrashIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Desktop: table */}
|
||||
<div className="hidden sm:block rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto min-w-full text-sm text-gray-700">
|
||||
<thead className="sticky top-0 z-10 bg-gray-50">
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<table className="table-auto min-w-full text-sm text-slate-700">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50">
|
||||
<tr className="border-b border-slate-200">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Leihcode
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Start
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Ende
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Abgeholt
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Zurückgegeben
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Erstellt
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Gegenstände
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-600">
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-600">
|
||||
Aktionen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{userLoans.map((loan) => (
|
||||
<tr
|
||||
key={loan.id}
|
||||
className="odd:bg-white even:bg-gray-50 hover:bg-gray-100/60 transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<tr key={loan.id} className="odd:bg-white even:bg-slate-50">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{loan.loan_code}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{formatDate(loan.start_date)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{formatDate(loan.end_date)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{formatDate(loan.take_date)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{formatDate(loan.returned_date)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-gray-900">
|
||||
<td className="px-4 py-3 whitespace-nowrap font-mono tabular-nums text-slate-900">
|
||||
{formatDate(loan.created_at)}
|
||||
</td>
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
<div className="text-gray-900 whitespace-nowrap max-w-none">
|
||||
<div className="text-slate-900">
|
||||
{Array.isArray(loan.loaned_items_name)
|
||||
? loan.loaned_items_name.join(", ")
|
||||
: "-"}
|
||||
@@ -142,9 +202,9 @@ const Form4: React.FC = () => {
|
||||
<button
|
||||
onClick={() => onDelete(loan.id)}
|
||||
aria-label="Ausleihe löschen"
|
||||
className="inline-flex items-center rounded-md p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
|
||||
className="inline-flex items-center rounded-md p-2 text-slate-600 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500/30"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -152,14 +212,6 @@ const Form4: React.FC = () => {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Scroll hint */}
|
||||
<div className="border-t border-gray-100 px-4 py-2">
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<ArrowLeftRight className="h-4 w-4 text-gray-400" />
|
||||
<span>Hinweis: Horizontal scrollen, um alle Spalten zu sehen.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,20 +6,24 @@ type HeaderProps = {
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ onLogout }) => {
|
||||
return (
|
||||
<header className="mb-6 md:mb-10">
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-blue-800 tracking-tight drop-shadow-sm">
|
||||
Gegenstand ausleihen
|
||||
</h1>
|
||||
<p className="text-blue-500 mt-1 md:mt-2 text-base md:text-lg font-medium">
|
||||
Schnell und unkompliziert Equipment reservieren
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLogout}
|
||||
className="text-blue-500 hover:underline"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<header className="mb-4 sm:mb-6">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
|
||||
Gegenstand ausleihen
|
||||
</h1>
|
||||
<p className="text-slate-600 mt-1 text-sm sm:text-base">
|
||||
Schnell und unkompliziert Equipment reservieren
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLogout}
|
||||
className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -22,16 +22,16 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-blue-950 min-h-screen">
|
||||
<div className="max-w-sm mx-auto mt-20 bg-white rounded-xl shadow-lg p-8 border border-blue-100">
|
||||
<h2 className="text-2xl font-bold text-blue-700 mb-6 text-center">
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-100 p-4">
|
||||
<div className="w-full max-w-sm bg-white rounded-2xl shadow-md p-6 sm:p-8 border border-slate-200">
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6 text-center">
|
||||
Login
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
className="block text-sm font-medium text-slate-700 mb-1"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
@@ -39,14 +39,14 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
|
||||
type="text"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
id="username"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 px-3 py-2"
|
||||
className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
className="block text-sm font-medium text-slate-700 mb-1"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
@@ -54,13 +54,13 @@ const LoginForm: React.FC<LoginFormProps> = ({ onLogin }) => {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
id="password"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 px-3 py-2"
|
||||
className="mt-1 block w-full border border-slate-300 rounded-md shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2.5 bg-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded-md shadow hover:bg-blue-700 transition"
|
||||
className="w-full bg-indigo-600 text-white font-bold py-2.5 px-4 rounded-md shadow hover:bg-indigo-700 transition"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
|
||||
@@ -7,9 +7,9 @@ type ObjectProps = {
|
||||
|
||||
const Object: React.FC<ObjectProps> = ({ title, description }) => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-blue-800">{title}</h3>
|
||||
<p className="text-xs text-blue-500/80 line-clamp-2">{description}</p>
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm font-semibold text-slate-900 truncate">{title}</h3>
|
||||
<p className="text-xs text-slate-600 line-clamp-2">{description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,25 +12,25 @@ const Sidebar: React.FC = () => {
|
||||
const next = JSON.parse(localStorage.getItem("allItems") || "[]");
|
||||
setItems(next);
|
||||
};
|
||||
// Update immediately in case data changed before this mounted
|
||||
handler();
|
||||
window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
|
||||
return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
|
||||
}, []);
|
||||
|
||||
const outCount = items.reduce((n, it) => n + (it.inSafe ? 0 : 1), 0);
|
||||
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); // außerhalb zuerst
|
||||
const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
|
||||
|
||||
return (
|
||||
<aside className="w-full md:w-80 md:h-screen md:sticky md:top-0 overflow-y-auto bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
|
||||
<h2 className="text-2xl font-extrabold mb-4 text-blue-700 tracking-tight flex items-center justify-between">
|
||||
<aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto bg-white rounded-2xl p-3 sm:p-4 ring-1 ring-slate-200 shadow-sm">
|
||||
<h2 className="text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<svg
|
||||
className="w-6 h-6 text-blue-500"
|
||||
className="w-5 h-5 text-slate-700"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
@@ -41,28 +41,29 @@ const Sidebar: React.FC = () => {
|
||||
Geräte Übersicht
|
||||
</span>
|
||||
{outCount > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700">
|
||||
<span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
|
||||
{outCount} außerhalb
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-4 flex-1 pr-1">
|
||||
{/* Mobile: horizontal scroll, Desktop: vertical list */}
|
||||
<div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1 -mr-1 pr-2 md:block md:space-y-3 md:pr-1">
|
||||
{sorted.map((item: any) => (
|
||||
<div
|
||||
key={item.item_name}
|
||||
className={`bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition ${
|
||||
item.inSafe ? "" : "ring-1 ring-red-200"
|
||||
}`}
|
||||
className={`bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200 hover:ring-slate-300 transition ${
|
||||
item.inSafe ? "" : "ring-red-200"
|
||||
} shrink-0 snap-start min-w-[240px] md:min-w-0`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="relative mt-1 inline-flex" aria-hidden="true">
|
||||
<span className="relative mt-0.5 inline-flex" aria-hidden="true">
|
||||
{!item.inSafe && (
|
||||
<span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
|
||||
)}
|
||||
<span
|
||||
className={`inline-block w-3 h-3 rounded-full ${
|
||||
item.inSafe ? "bg-green-400" : "bg-red-500"
|
||||
item.inSafe ? "bg-emerald-500" : "bg-red-500"
|
||||
}`}
|
||||
title={
|
||||
item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
|
||||
@@ -83,10 +84,10 @@ const Sidebar: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-xs text-gray-400 flex items-center gap-4">
|
||||
<span className="inline-block w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
<div className="mt-3 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
|
||||
<span className="inline-block w-3 h-3 bg-emerald-500 rounded-full"></span>
|
||||
Verfügbar
|
||||
<span className="inline-block w-3 h-3 bg-red-400 rounded-full"></span>
|
||||
<span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
|
||||
Außerhalb des Schließfachs
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
Reference in New Issue
Block a user