Projet : Panneau de contrôle NOVA LAB

Félicitations, cadet ! Nous voici arrivés au projet final du premier module de la station NOVA LAB. Il est temps de réunir toutes les compétences acquises dans un seul système fonctionnel.

Aujourd'hui, chaque module de la station a son propre écran, et l'ingénieur de garde court de l'un à l'autre pour vérifier que tout fonctionne. Il faut un seul panneau qui rassemble l'état de toute la station au même endroit - et c'est exactement ce panneau que tu vas construire.

Objectif du projet

Construis un Panneau de contrôle NOVA LAB complet - une application Vue.js qui réunit tous les concepts de ce module :

• Vue.js et Vite - un framework réactif moderne
• Single File Components - l'organisation du code dans des fichiers .vue
• Structure de l'application - une hiérarchie de composants correcte
• Vue DevTools - des outils de diagnostic pour le débogage

Exigences du projet

Ton panneau de contrôle doit contenir :

1. Section de statut de la station

Affiche le nom de la station, son statut actuel (ONLINE/OFFLINE) et la date de la dernière mise à jour. Utilise l'interpolation de Vue pour afficher les données.

2. Liste des modules de la station

Crée un tableau d'au moins 4 modules de station (par ex. Laboratoire, Réacteur, Communications, Navigation). Chaque module doit avoir un nom, un statut et un niveau d'énergie.

3. Style du composant

Utilise la section <style scoped> pour donner à l'application l'allure d'un panneau spatial - fond sombre, couleurs néon, design futuriste.

Ce que contient le starter

Le starter dans l'éditeur contient déjà des données et un squelette de template. Les valeurs simples, comme le nom de la station, sont gardées dans des conteneurs ref(), tandis que le tableau des modules est enveloppé dans une nouvelle fonction, reactive(). Elle fonctionne de façon semblable, mais elle prend un objet ou un tableau et rend réactifs tous ses champs, et tu accèdes aux éléments sans .value :

1import { ref, reactive } from 'vue'
2
3const stationName = ref('NOVA LAB')
4
5const modules = reactive([
6  { id: 1, name: 'Laboratoire', status: 'active', energy: 85 },
7  { id: 2, name: 'Réacteur', status: 'active', energy: 92 }
8  // ...et les autres modules du starter
9])

Quand tu modifies modules[0].energy, la barre à l'écran se déplace toute seule, et le tableau reste un tableau ordinaire avec les mêmes méthodes. Tu découvriras les détails de reactive() au Réacteur Énergétique.

Les cartes des modules sont créées par la directive v-for, qui répète un élément pour chaque élément du tableau. L'attribut :key donne à chaque copie un identifiant unique, et :style règle la largeur de la barre d'énergie, tout comme :class règle une classe :

1<div v-for="mod in modules" :key="mod.id" class="module-card">
2  <h3>{{ mod.name }}</h3>
3  <div class="energy-bar">
4    <div class="energy-fill" :style="{ width: mod.energy + '%' }"></div>
5  </div>
6</div>

Vue insère autant de cartes que le tableau a d'éléments, donc un cinquième module ajouté aux données ajoute aussitôt une cinquième carte, sans aucune modification du template. Nous verrons le rendu des listes en détail à l'Atelier des Hologrammes.

Étendre le panneau

Le starter s'arrête là. Étends-le avec les outils que tu as découverts dans la Launch Zone :

• un bouton avec @click qui bascule le statut de la station entre ONLINE et OFFLINE,
• une valeur computed avec le niveau d'énergie moyen de tous les modules,
• une classe qui dépend du statut du module, posée avec :class,
• un message v-if et v-else quand l'énergie d'un module passe sous 50 %,
• un watch qui écrit dans la console chaque changement du statut de la station.

Tu peux commencer le premier point avec une fonction comme celle-ci. Elle utilise l'opérateur conditionnel : quand la station est ONLINE, elle la passe à OFFLINE, et inversement :

1function toggleStation() {
2  stationStatus.value = stationStatus.value === 'ONLINE' ? 'OFFLINE' : 'ONLINE'
3}

Accroche-la à un bouton avec @click="toggleStation", et l'inscription de l'en-tête changera à chaque clic. Je te recommande de construire le panneau pas à pas : après chaque modification, jette un œil à l'aperçu et à l'onglet Components des DevTools, au lieu de tout écrire d'un coup.

Conseils

• Commence par la section <script setup> avec les données réactives
• Utilise ref() pour les valeurs simples et reactive() pour les objets
• N'oublie pas la section <template> avec une syntaxe Vue correcte
• Ajoute <style scoped> à la fin du composant

Le starter place <script setup> tout en haut du fichier. C'est aussi un ordre correct : Vue n'en impose aucun, et le guide de style recommande seulement qu'il soit cohérent dans tout le projet, avec le style en dernier. Tu enverras le panneau terminé à ton mentor dans la tâche suivante, alors précise-y où tu as utilisé ref(), les directives, computed et watch.

Expérimente avec le code ci-dessous et enrichis-le de tes propres idées !

Retiens ceci : le panneau de contrôle, ce sont tous les outils de la Launch Zone dans un seul module - des données dans des conteneurs, un template qui les montre et des styles qui enferment le tout dans son boîtier.

1<script setup>
2import { ref, reactive } from 'vue'
3
4// NOVA LAB Control Panel - Module 1 final project
5const stationName = ref('NOVA LAB')
6const stationStatus = ref('ONLINE')
7const lastUpdate = ref(new Date().toLocaleString())
8
9const modules = reactive([
10  { id: 1, name: 'Laboratoire', status: 'active', energy: 85 },
11  { id: 2, name: 'Réacteur', status: 'active', energy: 92 },
12  { id: 3, name: 'Communications', status: 'warning', energy: 45 },
13  { id: 4, name: 'Navigation', status: 'active', energy: 78 }
14])
15
16// TODO : Ajoute d'autres modules de station
17// TODO : Ajoute des fonctions de bascule du statut
18// TODO : Ajoute le calcul de l'énergie moyenne
19</script>
20
21<template>
22  <div class="control-panel">
23    <header>
24      <h1>{{ stationName }} - Panneau de contrôle</h1>
25      <p>Statut : {{ stationStatus }} | Dernière mise à jour : {{ lastUpdate }}</p>
26    </header>
27
28    <section class="modules">
29      <h2>Modules de la station</h2>
30      <!-- TODO : Affiche la liste des modules avec v-for -->
31      <!-- TODO : Ajoute des classes dynamiques selon le statut -->
32      <div v-for="mod in modules" :key="mod.id" class="module-card">
33        <h3>{{ mod.name }}</h3>
34        <p>Statut : {{ mod.status }}</p>
35        <div class="energy-bar">
36          <div class="energy-fill" :style="{ width: mod.energy + '%' }"></div>
37        </div>
38        <span>{{ mod.energy }}%</span>
39      </div>
40    </section>
41  </div>
42</template>
43
44<style scoped>
45.control-panel {
46  background: #0a0a2e;
47  color: #e0e0ff;
48  min-height: 100vh;
49  padding: 2rem;
50  font-family: 'Courier New', monospace;
51}
52header { text-align: center; border-bottom: 1px solid #333; padding-bottom: 1rem; }
53h1 { color: #00d4ff; }
54.modules { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
55.module-card { background: #1a1a4e; padding: 1rem; border-radius: 8px; flex: 1; min-width: 200px; border: 1px solid #333; }
56.energy-bar { background: #222; border-radius: 4px; height: 8px; margin: 0.5rem 0; }
57.energy-fill { background: #00d4ff; height: 100%; border-radius: 4px; transition: width 0.3s; }
58</style>