feat(analogeEingaenge): Einzelanzeige pro Eingang + Titel & Zeitachse im deutschen Format

components/main/analogeEingaenge/AnalogeEingaengeTable.tsx

@@ -1,11 +1,14 @@
 "use client";
-// components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, AppDispatch } from "../../../redux/store";
 import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";
 
-export default function AnalogeEingaengeTable() {
+export default function AnalogeEingaengeTable({
+  setSelectedId,
+}: {
+  setSelectedId: (id: number) => void;
+}) {
   const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
@@ -16,16 +19,6 @@ export default function AnalogeEingaengeTable() {
     (state: RootState) => state.analogeEingaengeSlice
   );
 
-  const [selectedEingang, setSelectedEingang] = useState<any>(null);
-
-  const openSettingsModal = (eingang: any) => {
-    setSelectedEingang(eingang);
-  };
-
-  const closeSettingsModal = () => {
-    setSelectedEingang(null);
-  };
-
   return (
     <div className="w-full">
       <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
@@ -36,92 +29,26 @@ export default function AnalogeEingaengeTable() {
                 <th className="border p-1 text-left">Eingang</th>
                 <th className="border p-3 text-left">Messwert</th>
                 <th className="border p-3 text-left">Bezeichnung</th>
-                <th className="border p-3 text-center">Einstellung</th>
               </tr>
             </thead>
             <tbody>
               {Object.values(analogeEingaenge)
-                .filter(
-                  (eingang) => eingang?.id !== null && eingang?.id !== undefined
-                )
-                .map((eingang, index) => (
+                .filter((e) => e?.id !== null && e?.id !== undefined)
+                .map((e, index) => (
                   <tr
                     key={index}
-                    className="text-gray-700 hover:bg-gray-50 transition"
+                    className="hover:bg-gray-100 cursor-pointer transition"
+                    onClick={() => setSelectedId(e.id!)}
                   >
-                    <td className="border p-3">{eingang.id ?? "-"}</td>
-                    <td className="border p-3">{eingang.value ?? "-"}</td>
-                    <td className="border p-3">{eingang.name || "----"}</td>
-                    <td className="border p-3 text-center">
-                      <button
-                        onClick={() => openSettingsModal(eingang)}
-                        className="text-white bg-gray-100 hover:bg-gray-200 text-xs px-2 py-1 rounded transition"
-                      >
-                        <span className="text-blue-500 text-2xl laptop:text-sm md:text-lg lg:text-xl xl:text-2xl">
-                          ⚙️
-                        </span>
-                      </button>
-                    </td>
+                    <td className="border p-3">{e.id ?? "-"}</td>
+                    <td className="border p-3">{e.value ?? "-"}</td>
+                    <td className="border p-3">{e.name || "----"}</td>
                   </tr>
                 ))}
             </tbody>
           </table>
         </div>
       </div>
-
-      {/* Modal */}
-      {selectedEingang && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-          <div className="bg-white p-6 rounded-lg shadow-lg w-1/2 max-w-xl">
-            <div className="border-b pb-2 mb-4">
-              <h2 className="text-xl font-bold text-littwin-blue">
-                Analoger Eingang {selectedEingang.id}
-              </h2>
-            </div>
-
-            <div className="grid grid-cols-2 gap-x-4 gap-y-2">
-              <div>
-                <strong>Name:</strong>
-              </div>
-              <div>{selectedEingang.name}</div>
-
-              <div>
-                <strong>Einheit:</strong>
-              </div>
-              <div>{selectedEingang.unit}</div>
-
-              <div>
-                <strong>Faktor:</strong>
-              </div>
-              <div>{selectedEingang.factor}</div>
-
-              <div>
-                <strong>Offset:</strong>
-              </div>
-              <div>{selectedEingang.offset}</div>
-
-              <div>
-                <strong>Gewichtung:</strong>
-              </div>
-              <div>{selectedEingang.weighting}</div>
-
-              <div>
-                <strong>Logger-Intervall:</strong>
-              </div>
-              <div>{selectedEingang.loggerInterval} Minuten</div>
-            </div>
-
-            <div className="flex justify-end mt-6">
-              <button
-                onClick={closeSettingsModal}
-                className="px-4 py-2 bg-blue-500 hover:bg-littwin-blue text-white rounded-lg transition"
-              >
-                Schließen
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }