Projekt: System Kontroli Misji

Finalny projekt Symulatora Sterowania! Zbuduj kompletny system formularzy i zdarzen do kontroli misji kosmicznej na stacji NOVA LAB.

Podsumowanie modulu

W tym module poznales kluczowe mechanizmy interakcji w Vue.js, ktore sa fundamentem kazdej aplikacji webowej:

• Obsluga zdarzen - dyrektywy

  @click

  ,

  @input

  ,

  @submit

  ,

  @keydown

  i inne zdarzenia DOM, ktore pozwalaja reagowac na akcje uzytkownika w czasie rzeczywistym
• Modyfikatory zdarzen -

  .prevent

  (blokowanie domyslnej akcji),

  .stop

  (zatrzymanie propagacji),

  .once

  (jednorazowe wywolanie),

  .self

  (tylko na docelowym elemencie) - precyzyjne kontrolowanie zachowania zdarzen
• v-model - dwukierunkowe wiazanie danych w formularzach, ktore automatycznie synchronizuje dane miedzy szablonem a stanem komponentu
• Modyfikatory v-model -

  .lazy

  (aktualizacja po utracie focusu),

  .number

  (automatyczna konwersja na liczbe),

  .trim

  (usuwanie bialych znakow) - dostosowywanie zachowania wiazania
• Zaawansowane formularze - checkboxy, radio buttony, selecty, textarea i inne kontrolki, ktore lacza sie z reaktywnymi danymi Vue

Kazdy z tych mechanizmow odpowiada systemowi sterowania na stacji NOVA LAB - zdarzenia to przyciski na panelu kontrolnym, v-model to dwukierunkowa komunikacja z czujnikami, a modyfikatory to filtry sygnalow zapewniajace precyzje.

Wymagania projektu

Zbuduj Panel Rejestracji Misji - kompletny interfejs do planowania ekspedycji marsjańskich, ktory zawiera:

1. Formularz danych misji

Stwórz rozbudowany formularz z polami: nazwa misji (input text), cel podrózy (select z opcjami: Olympus Mons, Valles Marineris, Polar Cap, Jezero Crater), priorytet (radio: niski/sredni/wysoki/krytyczny), szacowany czas trwania (input number w dniach), opis misji (textarea), oraz zgoda na regulamin bezpieczenstwa (checkbox). Kazde pole powinno byc powiazane z reaktywnym stanem przez v-model.

2. Modyfikatory v-model

Uzyj

.trim

na polach tekstowych (nazwa misji, opis), aby automatycznie usuwac zbedne spacje. Zastosuj

.number

na polu czasu trwania, aby wartosc byla zawsze liczba. Uzyj

.lazy

na polu opisu misji, aby aktualizacja nastepowala dopiero po opuszczeniu pola - to zmniejsza liczbe przerenderowań.

3. Walidacja formularza

Zaimplementuj walidacje w czasie rzeczywistym: nazwa misji minimum 3 znaki, opis minimum 20 znakow, czas trwania miedzy 1 a 365 dni, wymagana zgoda na regulamin. Wyswietlaj komunikaty bledow pod kazdym polem. Przycisk wysylania powinien byc zablokowany (disabled) gdy formularz jest niepoprawny.

4. Obsluga zdarzen i podsumowanie

Dodaj

@submit.prevent

na formularzu, obsluge klawisza Escape (

@keydown.escape

) do czyszczenia formularza z potwierdzeniem (

confirm()

), oraz wyswietlanie podsumowania zarejestrowanej misji po wyslaniu formularza. Dodaj takze historie zarejestrowanych misji wyswietlana pod formularzem.

Rozbuduj starter ponizej!