Formular und Liste responsiv gestalten
Eingabemaske als CSS-Grid statt starrer Tabelle, damit sie auf dem Smartphone vollständig sichtbar bleibt (2/4/8 Spalten je nach Breite). Einträge-Liste zeigt unterhalb von 768px eine zweizeilige Kartenansicht statt der breiten Tabelle. Anzahl geladener Einträge von 15 auf 5 reduziert. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+99
-57
@@ -18,7 +18,7 @@ function ConfirmDialog({
|
||||
}) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||||
<div className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 text-center">
|
||||
<div className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 max-w-[calc(100vw-2rem)] mx-4 text-center">
|
||||
<p className="mb-6 text-gray-800 font-medium">Eintrag wirklich löschen?</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
@@ -103,69 +103,111 @@ export default function WerteList({ entries, onDelete, onEdit }: WerteListProps)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<div>
|
||||
{confirmId !== null && (
|
||||
<ConfirmDialog
|
||||
onConfirm={() => handleDelete(confirmId)}
|
||||
onCancel={() => setConfirmId(null)}
|
||||
/>
|
||||
)}
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
|
||||
<th className="p-2 text-center">Datum</th>
|
||||
<th className="p-2 text-center">Tag</th>
|
||||
<th className="p-2 text-center">Zeit</th>
|
||||
<th className="p-2 text-center">Zucker<br/><span className="text-xs font-normal">mg/dl</span></th>
|
||||
<th className="p-2 text-center">Essen</th>
|
||||
<th className="p-2 text-center">Gewicht<br/><span className="text-xs font-normal">kg</span></th>
|
||||
<th className="p-2 text-center">Druck sys<br/><span className="text-xs font-normal">mmHg</span></th>
|
||||
<th className="p-2 text-center">Druck dia<br/><span className="text-xs font-normal">mmHg</span></th>
|
||||
<th className="p-2 text-center">Puls<br/><span className="text-xs font-normal">bpm</span></th>
|
||||
{onDelete && <th className="p-2 text-center">Aktion</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map((entry, index) => (
|
||||
<tr
|
||||
key={entry.ID}
|
||||
className={`border-b border-gray-300 hover:bg-gray-50 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}
|
||||
>
|
||||
<td className="p-2 text-center">{formatDate(entry.Datum)}</td>
|
||||
<td className="p-2 text-center">{getWeekday(entry.Datum)}</td>
|
||||
<td className="p-2 text-center">{formatTime(entry.Zeit)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Zucker)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Essen)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Gewicht)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.DruckS)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.DruckD)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Puls)}</td>
|
||||
{(onDelete || onEdit) && (
|
||||
<td className="p-2 text-center">
|
||||
<div className="flex gap-2 justify-center">
|
||||
{onEdit && (
|
||||
<button
|
||||
onClick={() => onEdit(entry)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => entry.ID && setConfirmId(entry.ID)}
|
||||
className="text-red-600 hover:text-red-800 text-sm"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
|
||||
<th className="p-2 text-center">Datum</th>
|
||||
<th className="p-2 text-center">Tag</th>
|
||||
<th className="p-2 text-center">Zeit</th>
|
||||
<th className="p-2 text-center">Zucker<br/><span className="text-xs font-normal">mg/dl</span></th>
|
||||
<th className="p-2 text-center">Essen</th>
|
||||
<th className="p-2 text-center">Gewicht<br/><span className="text-xs font-normal">kg</span></th>
|
||||
<th className="p-2 text-center">Druck sys<br/><span className="text-xs font-normal">mmHg</span></th>
|
||||
<th className="p-2 text-center">Druck dia<br/><span className="text-xs font-normal">mmHg</span></th>
|
||||
<th className="p-2 text-center">Puls<br/><span className="text-xs font-normal">bpm</span></th>
|
||||
{onDelete && <th className="p-2 text-center">Aktion</th>}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map((entry, index) => (
|
||||
<tr
|
||||
key={entry.ID}
|
||||
className={`border-b border-gray-300 hover:bg-gray-50 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}
|
||||
>
|
||||
<td className="p-2 text-center">{formatDate(entry.Datum)}</td>
|
||||
<td className="p-2 text-center">{getWeekday(entry.Datum)}</td>
|
||||
<td className="p-2 text-center">{formatTime(entry.Zeit)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Zucker)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Essen)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Gewicht)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.DruckS)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.DruckD)}</td>
|
||||
<td className="p-2 text-center">{formatValue(entry.Puls)}</td>
|
||||
{(onDelete || onEdit) && (
|
||||
<td className="p-2 text-center">
|
||||
<div className="flex gap-2 justify-center">
|
||||
{onEdit && (
|
||||
<button
|
||||
onClick={() => onEdit(entry)}
|
||||
className="text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => entry.ID && setConfirmId(entry.ID)}
|
||||
className="text-red-600 hover:text-red-800 text-sm"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="md:hidden flex flex-col gap-2">
|
||||
{entries.map((entry, index) => (
|
||||
<div
|
||||
key={entry.ID}
|
||||
className={`border border-gray-300 rounded-lg p-2 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}
|
||||
>
|
||||
<div className="flex justify-between items-center text-sm font-medium">
|
||||
<span>{formatDate(entry.Datum)} ({getWeekday(entry.Datum)}) · {formatTime(entry.Zeit)}</span>
|
||||
{(onDelete || onEdit) && (
|
||||
<div className="flex gap-2">
|
||||
{onEdit && (
|
||||
<button
|
||||
onClick={() => onEdit(entry)}
|
||||
className="text-blue-600 hover:text-blue-800 text-xs"
|
||||
>
|
||||
Editieren
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button
|
||||
onClick={() => entry.ID && setConfirmId(entry.ID)}
|
||||
className="text-red-600 hover:text-red-800 text-xs"
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-700 mt-1">
|
||||
<span>Zucker: {formatValue(entry.Zucker)}</span>
|
||||
<span>Essen: {formatValue(entry.Essen)}</span>
|
||||
<span>Gewicht: {formatValue(entry.Gewicht)}</span>
|
||||
<span>RR: {formatValue(entry.DruckS)}/{formatValue(entry.DruckD)}</span>
|
||||
<span>Puls: {formatValue(entry.Puls)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user