This commit is contained in:
2026-04-02 14:15:26 +02:00
parent 0cc8ab8540
commit af75a09c18
11 changed files with 734 additions and 472 deletions
+60 -49
View File
@@ -1,59 +1,70 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parcoursup Explorer</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parcoursup Explorer</title>
<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>
<!-- Inclusion des feuilles de style pour l'application, la carte (Leaflet) et les graphiques (Charts.css) -->
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" />
<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="./components/map-view.riot" type="riot"></script>
<script src="./components/auth-panel.riot" type="riot"></script>
<script src="./components/comparateur.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<!-- Inclusion de Riot.js pour la gestion des composants et de Leaflet pour la cartographie -->
<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>
<script type="module">
import { chargerFormations, chargerHistoriqueFormation } from './api.js'
import { creerFormation } from './formation.js'
import {
auth,
db,
createAccount,
login,
logout,
onUserChanged,
saveUserData,
loadUserData
} from './firebase.js'
<body>
window.chargerFormations = chargerFormations
window.creerFormation = creerFormation
window.chargerHistoriqueFormation = chargerHistoriqueFormation
<!-- Point de montage de l'application : le composant <app> va y être instancié -->
<app></app>
window.firebaseServices = {
auth,
db,
createAccount,
login,
logout,
onUserChanged,
saveUserData,
loadUserData
}
<!--
IMPORT DES COMPOSANTS RIOT (Les "briques" de notre application)
L'application est découpée en petits morceaux réutilisables (composants).
L'attribut type="riot" indique au compilateur Riot.js de transformer
ce code spécial (.riot) en vrai JavaScript compréhensible par le navigateur.
L'ordre est ici très important : on charge d'abord les enfants,
et on termine toujours par le composant principal (app.riot).
-->
<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="./components/map-view.riot" type="riot"></script>
<script src="./components/auth-panel.riot" type="riot"></script>
<script src="./components/comparateur.riot" type="riot"></script>
<script src="./app.riot" type="riot"></script>
<!--
SCRIPT D'INITIALISATION
L'attribut type="module" est obligatoire en HTML moderne dès qu'on
découpe son code JavaScript dans plusieurs fichiers.
Cela nous permet d'utiliser "import" pour récupérer les fonctions de notre API,
du Firebase et de notre algorithme depuis les fichiers séparés.
-->
<script type="module">
import { chargerFormations, chargerHistoriqueFormation } from './api.js'
import { creerFormation } from './formation.js'
import { auth, db, createAccount, login, logout, onUserChanged, saveUserData, loadUserData } from './firebase.js'
// =========================================================================
// EXPOSITION GLOBALE
// Les composants Riot (.riot) ne peuvent pas faire de "import" par eux-mêmes.
// C'est pourquoi, une fois les fonctions importées ici, on les attache
// à l'objet global `window` pour qu'elles soient accessibles partout.
// =========================================================================
window.chargerFormations = chargerFormations
window.creerFormation = creerFormation
window.chargerHistoriqueFormation = chargerHistoriqueFormation
window.firebaseServices = { auth, db, createAccount, login, logout, onUserChanged, saveUserData, loadUserData }
// Ordre des opérations : 1. Compilation des composants 2. Montage du composant principal
await riot.compile()
riot.mount('app')
</script>
</body>
await riot.compile()
riot.mount('app')
</script>
</body>
</html>