feat: Auswahlzustand für analoge Eingänge hinzugefügt
- Visuelle Hervorhebung der ausgewählten Tabellenzeile per Hintergrundfarbe (bg-blue-100) - Auswahl bleibt bestehen, bis ein anderer Eintrag geklickt wird - Verbesserte Benutzerführung bei Auswahl eines Eingangs für die Detailanzeige oder Chartansicht
This commit is contained in:
@@ -16,6 +16,7 @@ export default function AnalogeEingaengeTable({
|
||||
setIsSettingsModalOpen: (open: boolean) => void;
|
||||
}) {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [activeId, setActiveId] = React.useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchAnalogeEingaengeThunk());
|
||||
@@ -25,6 +26,11 @@ export default function AnalogeEingaengeTable({
|
||||
(state: RootState) => state.analogeEingaengeSlice
|
||||
);
|
||||
|
||||
const handleSelect = (id: number) => {
|
||||
setSelectedId(id);
|
||||
setActiveId(id);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
||||
@@ -43,22 +49,27 @@ export default function AnalogeEingaengeTable({
|
||||
{Object.values(analogeEingaenge)
|
||||
.filter((e) => e?.id !== null && e?.id !== undefined)
|
||||
.map((e, index) => (
|
||||
<tr key={index} className="hover:bg-gray-100 transition">
|
||||
<tr
|
||||
key={index}
|
||||
className={`transition cursor-pointer ${
|
||||
e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
|
||||
}`}
|
||||
>
|
||||
<td
|
||||
className="border p-3 cursor-pointer"
|
||||
onClick={() => setSelectedId(e.id!)}
|
||||
className="border p-3"
|
||||
onClick={() => handleSelect(e.id!)}
|
||||
>
|
||||
{e.id ?? "-"}
|
||||
</td>
|
||||
<td
|
||||
className="border p-3 cursor-pointer"
|
||||
onClick={() => setSelectedId(e.id!)}
|
||||
className="border p-3"
|
||||
onClick={() => handleSelect(e.id!)}
|
||||
>
|
||||
{e.value ?? "-"}
|
||||
</td>
|
||||
<td
|
||||
className="border p-3 cursor-pointer"
|
||||
onClick={() => setSelectedId(e.id!)}
|
||||
className="border p-3"
|
||||
onClick={() => handleSelect(e.id!)}
|
||||
>
|
||||
{e.name || "----"}
|
||||
</td>
|
||||
@@ -66,7 +77,7 @@ export default function AnalogeEingaengeTable({
|
||||
<td className="border p-3 text-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedId(e.id!);
|
||||
handleSelect(e.id!);
|
||||
setSelectedInput(e);
|
||||
setIsSettingsModalOpen(true);
|
||||
}}
|
||||
|
||||
@@ -6,5 +6,5 @@
|
||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||
|
||||
*/
|
||||
const webVersion = "1.6.363";
|
||||
const webVersion = "1.6.364";
|
||||
export default webVersion;
|
||||
|
||||
@@ -37,7 +37,7 @@ function AnalogeEingaenge() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
||||
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200 ">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
||||
Messkurve Eingang {selectedId ?? "–"}
|
||||
</h2>
|
||||
|
||||
Reference in New Issue
Block a user