Projekt: Panel Kontrolny NOVA LAB

Gratulacje, kadetcie! Dotarliśmy do finalnego projektu pierwszego modułu na stacji NOVA LAB. Czas połączyć wszystkie poznane umiejętności w jeden funkcjonalny system.

Cel projektu

Zbuduj kompletny Panel Kontrolny NOVA LAB - aplikację Vue.js, która łączy wszystkie koncepty z tego modułu:

• Vue.js i Vite - nowoczesny framework reaktywny
• Single File Components - organizacja kodu w plikach .vue
• Struktura aplikacji - poprawna hierarchia komponentów
• Vue DevTools - narzędzia diagnostyczne do debugowania

Wymagania projektu

Twój Panel Kontrolny powinien zawierać:

1. Sekcja statusu stacji

Wyświetl nazwę stacji, aktualny status (ONLINE/OFFLINE) oraz datę ostatniej aktualizacji. Użyj interpolacji Vue do wyświetlania danych.

2. Lista modułów stacji

Stwórz tablicę z minimum 4 modułami stacji (np. Laboratorium, Reaktor, Komunikacja, Nawigacja). Każdy moduł powinien mieć nazwę, status i poziom energii.

3. Stylowanie komponentu

Użyj sekcji `<style scoped>` aby nadać aplikacji wygląd panelu kosmicznego - ciemne tło, neonowe kolory, futurystyczny design.

Wskazówki

• Zacznij od sekcji `<script setup>` z danymi reaktywnymi
• Użyj `ref()` dla prostych wartości i `reactive()` dla obiektów
• Pamiętaj o sekcji `<template>` z poprawną składnią Vue
• Dodaj `<style scoped>` na końcu komponentu

Eksperymentuj z kodem poniżej i rozbuduj go o własne pomysły!