[Task] | Komponenty Wykonawcze Elementów (Logic Components)

[PEXEL2002]

Opis zadania i szczegółowe wymagania

Należy oprogramować funkcjonalne komponenty React dla elementów drabinki zdefiniowanych w Iteracji 1 (styk NO, styk NC, cewki: Standard, Set, Reset). W tym zadaniu musi zawierać się:

• Oparcie struktury wizualnej komponentów na przygotowanych wcześniej plikach i ikonach SVG.
• Implementacja mechanizmu "wyboru" (zaznaczenia) elementu przez użytkownika, na przykład poprzez zmianę obramowania lub koloru tła po kliknięciu.
• Dodanie pól edycyjnych (inline inputs) wbudowanych w komponent, które umożliwią łatwe przypisywanie adresów zmiennych bezpośrednio na obszarze roboczym.

Dodatkowy kontekst i źrodła pomocnicze

Komponenty te stanowią interfejs wizualny dla danych przechowywanych w globalnym stanie aplikacji (np. Zustand/Context). Każdy komponent powinien przyjmować poprzez parametry (props) unikalne ID elementu, jego typ oraz przypisany adres. Wbudowane pole edycyjne adresu (inline input) powinno obsługiwać zdarzenia (np. onBlur lub naciśnięcie klawisza Enter) i wywoływać odpowiednią akcję aktualizującą dane w store. Należy upewnić się, że komponenty są gotowe na przyjęcie w przyszłości propa określającego, czy przez dany element aktualnie "płynie prąd" (do celów monitoringu).

Definicja wykonania zadania

• Zbudowano komponenty React dla wszystkich wymaganych elementów (NO, NC, Coil, Set, Reset).
• Komponenty poprawnie renderują się na obszarze roboczym na podstawie globalnego stanu aplikacji.
• Zaimplementowano wizualny stan zaznaczenia klikniętego elementu.
• Zmiana adresu w polu edycyjnym komponentu poprawnie aktualizuje globalny stan drabinki dla konkretnego ID.