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;
|
setIsSettingsModalOpen: (open: boolean) => void;
|
||||||
}) {
|
}) {
|
||||||
const dispatch = useDispatch<AppDispatch>();
|
const dispatch = useDispatch<AppDispatch>();
|
||||||
|
const [activeId, setActiveId] = React.useState<number | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(fetchAnalogeEingaengeThunk());
|
dispatch(fetchAnalogeEingaengeThunk());
|
||||||
@@ -25,6 +26,11 @@ export default function AnalogeEingaengeTable({
|
|||||||
(state: RootState) => state.analogeEingaengeSlice
|
(state: RootState) => state.analogeEingaengeSlice
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleSelect = (id: number) => {
|
||||||
|
setSelectedId(id);
|
||||||
|
setActiveId(id);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<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">
|
||||||
@@ -43,22 +49,27 @@ export default function AnalogeEingaengeTable({
|
|||||||
{Object.values(analogeEingaenge)
|
{Object.values(analogeEingaenge)
|
||||||
.filter((e) => e?.id !== null && e?.id !== undefined)
|
.filter((e) => e?.id !== null && e?.id !== undefined)
|
||||||
.map((e, index) => (
|
.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
|
<td
|
||||||
className="border p-3 cursor-pointer"
|
className="border p-3"
|
||||||
onClick={() => setSelectedId(e.id!)}
|
onClick={() => handleSelect(e.id!)}
|
||||||
>
|
>
|
||||||
{e.id ?? "-"}
|
{e.id ?? "-"}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
className="border p-3 cursor-pointer"
|
className="border p-3"
|
||||||
onClick={() => setSelectedId(e.id!)}
|
onClick={() => handleSelect(e.id!)}
|
||||||
>
|
>
|
||||||
{e.value ?? "-"}
|
{e.value ?? "-"}
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
className="border p-3 cursor-pointer"
|
className="border p-3"
|
||||||
onClick={() => setSelectedId(e.id!)}
|
onClick={() => handleSelect(e.id!)}
|
||||||
>
|
>
|
||||||
{e.name || "----"}
|
{e.name || "----"}
|
||||||
</td>
|
</td>
|
||||||
@@ -66,7 +77,7 @@ export default function AnalogeEingaengeTable({
|
|||||||
<td className="border p-3 text-center">
|
<td className="border p-3 text-center">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedId(e.id!);
|
handleSelect(e.id!);
|
||||||
setSelectedInput(e);
|
setSelectedInput(e);
|
||||||
setIsSettingsModalOpen(true);
|
setIsSettingsModalOpen(true);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.363";
|
const webVersion = "1.6.364";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ function AnalogeEingaenge() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
||||||
Messkurve Eingang {selectedId ?? "–"}
|
Messkurve Eingang {selectedId ?? "–"}
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
Reference in New Issue
Block a user