Projekt: Mars Dashboard

Finalny projekt Drukarni 3D! Zbuduj kompletny dashboard stacji NOVA LAB z wieloma komponentami, cyklami zycia i composables.

Podsumowanie modulu

W tym module poznales fundamenty budowania aplikacji Vue.js z komponentow - tak jak stacja NOVA LAB sklada sie z modulowych czesci habitatu, Twoja aplikacja sklada sie z komponentow:

Komponenty - tworzenie samodzielnych, wielokrotnego uzytku elementow UI z wlasnym szablonem (
```
<template>
```
), logika (
```
<script setup>
```
) i stylami (
```
<style>
```
). Kazdy komponent to osobny plik
```
.vue
```
z jasno okreslona odpowiedzialnoscia
Import komponentow - lokalne rejestrowanie (import w danym komponencie) oraz globalne rejestrowanie (dostepne w calej aplikacji przez
```
app.component()
```
). W Composition API z
```
<script setup>
```
zaimportowane komponenty sa automatycznie dostepne w szablonie
Kompozycja - budowanie zlozonych interfejsow z prostych, mniejszych komponentow. Wzorzec parent-child, przekazywanie danych w dol i emitowanie zdarzen w gore drzewa komponentow
Lifecycle hooks -
```
onMounted
```
(po zamontowaniu w DOM),
```
onUpdated
```
(po aktualizacji),
```
onUnmounted
```
(przed odmontowaniem),
```
onBeforeMount
```
,
```
onBeforeUpdate
```
- pozwalaja wykonywac kod w kluczowych momentach zycia komponentu
Scoped styles - izolacja stylow w komponentach dzieki atrybutowi
```
scoped
```
w tagu
```
<style>
```
. Style sa automatycznie ograniczone do danego komponentu i nie wplywaja na reszte aplikacji
Composables - funkcje wielokrotnego uzytku (np.
```
useTimer
```
,
```
useFetch
```
), ktore enkapsuluja reaktywny stan i logike. Pozwalaja wspoldzielic logike miedzy komponentami bez duplikowania kodu

Wymagania projektu

Zbuduj Mars Dashboard - centralny panel kontrolny stacji NOVA LAB, ktory sklada sie z wielu wspolpracujacych komponentow:

1. Komponent StatusBar

Wyswietla ogolny status stacji: nazwe stacji, aktualna date i godzine (aktualizowana co sekunde przez composable), poziom energii (pasek progresu), temperature zewnetrzna i cisnienie w habitacie. Uzyj

onMounted

do inicjalizacji danych i

onUnmounted

do czyszczenia timerow.

2. Komponent ModuleList

Lista modulow habitatowych (np. Oxygen Generator, Water Recycler, Solar Panels, Communication Array) z mozliwoscia przelaczania statusu kazdego modulu (ACTIVE/STANDBY/OFFLINE). Kazdy modul powinien byc renderowany jako osobny komponent ModuleCard z odpowiednimi kolorami statusu.

3. Composable useTimer

Stwórz composable

useTimer

, ktory odlicza czas od startu aplikacji (mission uptime). Uzyj

ref

dla stanu,

onMounted

do uruchomienia

setInterval

, i

onUnmounted

do wyczyszczenia interwalu (

clearInterval

). Composable powinien zwracac sformatowany czas (HH:MM:SS).

4. Scoped styles

Kazdy komponent powinien miec wlasne izolowane style z atrybutem

scoped

. Uzyj ciemnego motywu kosmicznego (ciemne tla, neonowe kolory akcentowe: zielony dla ACTIVE, zolty dla STANDBY, czerwony dla OFFLINE). Zadbaj o responsywnosc - dashboard powinien dzialac na roznych rozmiarach ekranu.

Rozbuduj starter ponizej!

Przejdź do CodeWorlds→