ajout du style global et de la carte leaflet

parcoursup/app.riot

@@ -1,23 +1,29 @@
 <app>
-  <h1>Mini projet Parcoursup</h1>
-  <p>Recherche de formations Parcoursup avec Riot</p>
+  <div class="page">
+    <h1>Mini projet Parcoursup</h1>
+    <p class="subtitle">Recherche de formations Parcoursup avec Riot</p>
 
-  <div if={ !state.selected }>
-    <search-bar onsearch={ launchSearch }></search-bar>
+    <div if={ !state.selected }>
+      <search-bar onsearch={ launchSearch }></search-bar>
 
-    <result-list
-      results={ state.results }
-      hasSearched={ state.hasSearched }
-      loading={ state.loading }
-      ondetail={ showDetail }>
-    </result-list>
-  </div>
+      <div class="layout">
+        <result-list
+          results={ state.results }
+          hasSearched={ state.hasSearched }
+          loading={ state.loading }
+          ondetail={ showDetail }>
+        </result-list>
 
-  <div if={ state.selected }>
-    <detail-view
-      formation={ state.selected }
-      onback={ backToList }>
-    </detail-view>
+        <map-view results={ state.results }></map-view>
+      </div>
+    </div>
+
+    <div if={ state.selected }>
+      <detail-view
+        formation={ state.selected }
+        onback={ backToList }>
+      </detail-view>
+    </div>
   </div>
 
   <script>

parcoursup/components/detail-view.riot

@@ -1,6 +1,5 @@
 <detail-view>
-  <div if={ props.formation }
-       style="border:1px solid #ccc; padding:10px; margin:10px;">
+  <div if={ props.formation } class="detail-card">
     <h2>{ props.formation.nom }</h2>
     <p><b>Établissement :</b> { props.formation.etablissement }</p>
     <p><b>Ville :</b> { props.formation.ville }</p>
@@ -11,7 +10,6 @@
     <p><b>Candidats :</b> { props.formation.candidats }</p>
     <p><b>Admis :</b> { props.formation.admis }</p>
     <p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
-
     <button onclick={ () => props.onback() }>Retour</button>
   </div>
 </detail-view>

parcoursup/components/map-view.riot

@@ -0,0 +1,53 @@
+<map-view>
+  <div class="map-box">
+    <h3>Carte des formations</h3>
+    <div id="map"></div>
+  </div>
+
+  <script>
+    export default {
+      onMounted() {
+        this.map = L.map(this.root.querySelector('#map')).setView([46.8, 2.5], 6)
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(this.map)
+
+        this.markersLayer = L.layerGroup().addTo(this.map)
+        this.refreshMarkers()
+      },
+
+      onUpdated() {
+        this.refreshMarkers()
+      },
+
+      refreshMarkers() {
+        if (!this.map || !this.markersLayer) {
+          return
+        }
+
+        this.markersLayer.clearLayers()
+
+        const points = []
+
+        for (let i = 0; i < this.props.results.length; i++) {
+          const f = this.props.results[i]
+
+          if (f.latitude && f.longitude) {
+            const marker = L.marker([f.latitude, f.longitude])
+            marker.bindPopup(`<b>${f.nom}</b><br>${f.ville}`)
+            marker.addTo(this.markersLayer)
+
+            points.push([f.latitude, f.longitude])
+          }
+        }
+
+        if (points.length > 0) {
+          this.map.fitBounds(points, { padding: [20, 20] })
+        } else {
+          this.map.setView([46.8, 2.5], 6)
+        }
+      }
+    }
+  </script>
+</map-view>

parcoursup/components/result-list.riot

@@ -1,14 +1,14 @@
 <result-list>
-  <div>
-    <div if={ props.results.length === 0 && props.hasSearched && !props.loading }>
+  <div class="results">
+    <div class="message" if={ props.results.length === 0 && props.hasSearched && !props.loading }>
       Aucun résultat trouvé
     </div>
 
-    <div if={ props.loading }>
+    <div class="message" if={ props.loading }>
       Chargement...
     </div>
 
-    <div each={ (f, i) in props.results } key={ f.id } style="border:1px solid #ccc; padding:10px; margin:10px;">
+    <div each={ (f, i) in props.results } key={ f.id } class="card">
       <h3>{ f.nom }</h3>
       <p><b>Établissement :</b> { f.etablissement }</p>
       <p><b>Ville :</b> { f.ville } ({ f.departement })</p>

parcoursup/components/search-bar.riot

@@ -1,5 +1,5 @@
 <search-bar>
-  <div>
+  <div class="search-bar">
     <input
       type="text"
       placeholder="Ex : BUT informatique"

parcoursup/index.html

@@ -1,19 +1,27 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Parcoursup Riot</title>
-
-  <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
-</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parcoursup Riot</title>
+  
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    />
+  
+    <script src="https://cdn.jsdelivr.net/npm/riot@9/riot+compiler.min.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  </head>
 <body>
   <app></app>
 
   <script src="./components/search-bar.riot" type="riot"></script>
-  <script src="./components/result-list.riot" type="riot"></script>
-  <script src="./components/detail-view.riot" type="riot"></script>
-  <script src="./app.riot" type="riot"></script>
+<script src="./components/result-list.riot" type="riot"></script>
+<script src="./components/detail-view.riot" type="riot"></script>
+<script src="./components/map-view.riot" type="riot"></script>
+<script src="./app.riot" type="riot"></script>
 
   <script type="module">
     import { fetchFormations } from './api.js'

parcoursup/style.css

@@ -0,0 +1,97 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    background: #f5f5f5;
+    color: #222;
+  }
+  
+  .page {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  h1 {
+    margin-bottom: 8px;
+  }
+  
+  .subtitle {
+    margin-top: 0;
+    color: #555;
+  }
+  
+  .search-bar {
+    display: flex;
+    gap: 10px;
+    margin: 20px 0;
+  }
+  
+  .search-bar input {
+    flex: 1;
+    padding: 10px;
+    font-size: 16px;
+  }
+  
+  .search-bar button,
+  .card button,
+  .detail-card button {
+    padding: 10px 14px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  
+  .layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .results {
+    display: grid;
+    gap: 16px;
+  }
+  
+  .card {
+    border: 1px solid #d8d8d8;
+    background: white;
+    padding: 16px;
+    border-radius: 8px;
+  }
+  
+  .card h3 {
+    margin-top: 0;
+  }
+  
+  .detail-card {
+    border: 1px solid #d8d8d8;
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+  }
+  
+  .map-box {
+    border: 1px solid #d8d8d8;
+    background: white;
+    border-radius: 8px;
+    padding: 12px;
+  }
+  
+  #map {
+    height: 420px;
+    width: 100%;
+    border-radius: 6px;
+  }
+  
+  .message {
+    padding: 12px;
+    background: white;
+    border: 1px solid #d8d8d8;
+    border-radius: 8px;
+  }
+  
+  @media (min-width: 900px) {
+    .layout {
+      grid-template-columns: 1.2fr 1fr;
+      align-items: start;
+    }
+  }