für Docker angepasst

2026-02-22 22:11:52 +01:00
parent e14af11e5c
commit e28cca1c46
21 changed files with 1494 additions and 94 deletions
--- a/components/WerteList.tsx
+++ b/components/WerteList.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { WerteEntry } from '@/types/werte';
+
+interface WerteListProps {
+  entries: WerteEntry[];
+  onDelete?: (id: number) => void;
+  onEdit?: (entry: WerteEntry) => void;
+}
+
+export default function WerteList({ entries, onDelete, onEdit }: WerteListProps) {
+  const formatValue = (value: number | string | null | undefined) => {
+    if (value === null || value === undefined || value === '' || value === '0' || value === '0.0') {
+      return '-';
+    }
+    return value;
+  };
+
+  const formatDate = (dateStr: string) => {
+    // Convert YYYY-MM-DD to DD.MM.YYYY
+    if (!dateStr) return '-';
+    // Parse the date string directly (MySQL returns YYYY-MM-DD)
+    const parts = dateStr.toString().split('T')[0].split('-');
+    if (parts.length === 3) {
+      return `${parts[2]}.${parts[1]}.${parts[0]}`;
+    }
+    return dateStr;
+  };
+
+  const formatTime = (timeStr: string) => {
+    // Convert HH:MM:SS to HH:MM
+    if (!timeStr) return '-';
+    const timeString = timeStr.toString();
+    return timeString.substring(0, 5);
+  };
+
+  const getWeekday = (dateStr: string) => {
+    if (!dateStr) return '-';
+    const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+    // Parse date parts to avoid timezone issues
+    const [year, month, day] = dateStr.toString().split('T')[0].split('-');
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return weekdays[date.getDay()];
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Eintrag wirklich löschen?')) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/werte/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (response.ok && onDelete) {
+        onDelete(id);
+      } else {
+        alert('Fehler beim Löschen!');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      alert('Fehler beim Löschen!');
+    }
+  };
+
+  if (entries.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        Keine Einträge vorhanden
+      </div>
+    );
+  }
+
+  return (
+    <div className="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>
+        </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 && handleDelete(entry.ID)}
+                        className="text-red-600 hover:text-red-800 text-sm"
+                      >
+                        Löschen
+                      </button>
+                    )}
+                  </div>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}