const { useState: useState2, useRef: useRef2, useEffect: useEffect2 } = React;
const {
Flame, Radio, ShieldAlert, MapPin, Clock, Plus, X, Check,
LogIn, LogOut, Info, ChevronRight, Crosshair,
MousePointerClick, ArrowLeft, ArrowDown, ArrowUp, Users, Search, Flag,
Menu, LayoutDashboard, SunMoon, Settings, Download,
} = Icons;
// Palette pour distinguer les groupes de l'effectif d'un coup d'œil. Volontairement sans le
// vert (#34d399, "Présent") ni l'orange (#fb923c, "Sorti"/"Hors du camp") : un groupe ne doit
// jamais pouvoir se confondre avec la couleur de statut d'une personne inscrite seule, sans
// groupe. L'attribution (voir buildGroupColorMap) est par ordre alphabétique plutôt que par
// hachage, pour garantir qu'aucun groupe ne partage sa couleur avec un autre.
const GROUP_COLOR_PALETTE = ["#4d9fef", "#c084fc", "#f87171", "#22d3ee", "#ec4899", "#818cf8", "#facc15", "#fb7185", "#38bdf8", "#a78bfa", "#2dd4bf", "#f472b6"];
// `extraNames` : autres étiquettes de regroupement à colorer de façon unique en plus des
// groupes d'inscription — sert aux noms de mission utilisés pour regrouper "Hors du camp"
// (cf. EffectifTab), pour qu'une mission n'hérite jamais de la couleur d'un groupe existant.
function buildGroupColorMap(roster, extraNames) {
const regNames = Array.from(new Set(roster.map((p) => p.group).filter(Boolean)));
const extra = (extraNames || []).filter((n) => !regNames.includes(n));
const names = [...regNames, ...extra].sort((a, b) => a.localeCompare(b));
return new Map(names.map((name, i) => [name, GROUP_COLOR_PALETTE[i % GROUP_COLOR_PALETTE.length]]));
}
// Motifs de sortie proposés en boutons dans le formulaire entrée/sortie — "Autre" ouvre un
// champ texte libre juste en dessous.
const MOTIF_PRESETS = ["Mission", "Courses", "Médical", "Logistique", "Dépose Gare", "Sortie définitive", "Autre"];
// Groupe par défaut toujours proposé à l'inscription, pour les personnes qui ne font partie
// d'aucun groupe constitué (ex. staff isolé, visiteur) — couleur dédiée, cf. groupButtons.
const INVITES_GROUP = "Invités";
const inputStyle = {
width: "100%", padding: "8px 10px", borderRadius: 7, border: "1px solid var(--border)",
background: "var(--bg3)", color: "var(--text)", fontSize: 12.5, marginTop: 4, marginBottom: 10, boxSizing: "border-box",
};
const selectStyle = {
padding: "7px 8px", borderRadius: 7, border: "1px solid var(--border)", background: "var(--bg3)",
color: "var(--text)", fontSize: 12,
};
// Écran de connexion (Firebase Auth, email/mot de passe) — affiché tant qu'aucun utilisateur
// n'est authentifié. Les comptes du staff sont créés à la main par le coordinateur dans la
// console Firebase (Authentication > Users), pas d'auto-inscription depuis cet écran.
function LoginScreen({ onLogin }) {
const [email, setEmail] = useState2("");
const [password, setPassword] = useState2("");
const [error, setError] = useState2("");
const [loading, setLoading] = useState2(false);
function submit(e) {
e.preventDefault();
if (!email.trim() || !password || loading) return;
setLoading(true);
setError("");
onLogin(email.trim(), password).catch((err) => {
const badCreds = ["auth/invalid-credential", "auth/wrong-password", "auth/user-not-found", "auth/invalid-email"];
setError(badCreds.includes(err.code) ? "Email ou mot de passe incorrect." : "Connexion impossible : " + err.message);
setLoading(false);
});
}
return (
Nom de la {mt.label.toLowerCase()} à créer — elle apparaîtra au camp, en mouvement
{presets.length > 0 && (
{presets.map((p) => {
// Le type est déjà annoncé juste au-dessus ("Nom de la vigie à créer…") et par le
// bouton actif dans la barre d'outils — on n'affiche que le nom propre du preset
// (ex. "Luminy" plutôt que "Vigie Luminy"), la valeur réellement créée/transmise
// (onPick) garde elle le libellé complet pour rester cohérente avec le reste de
// l'app (journal, liste des missions en cours, étiquette sur la carte…).
const shortLabel = p.startsWith(mt.label + " ") ? p.slice(mt.label.length + 1) : p;
return (
);
})}
)}
{presets.length === 0 &&
Aucun nom disponible pour ce type de mission pour l'instant.
}
0 ? "#34d39955" : "#f8717155"}` }}>
Personnes qui partent avec cette mission (obligatoire)
Dernier contact : {fmtTime(mission.lastContact)} ({fmtElapsed(mission.lastContact, now)})
Glisse le marqueur sur la carte pour ajuster sa position
{Object.entries(STATUS).map(([k, s]) => (
))}
{mission.crew && mission.crew.length > 0 && (
Équipe sur place ({mission.crew.length})
{mission.crew.map((c) => (
{c.name}
))}
)}
Historique
{mission.log.map((l, i) => (
{fmtTime(l.time)}{l.note}
))}
);
}
// Champs de la fiche de reconnaissance affichée dans FirePanel — mêmes items qu'un message de
// reconnaissance feu classique, hors localisation (déjà donnée par la position du point sur la
// carte). Stockés comme de simples libellés (voir MOTIF_PRESETS pour la même convention).
const FIRE_ENV_OPTIONS = ["Urbain", "Périurbain", "Forestier"];
const FIRE_MENACE_OPTIONS = ["Le massif", "Des bâtiments à proximité"];
const FIRE_SMOKE_COLOR_OPTIONS = ["Blanche", "Grise", "Noire", "Brune"];
const FIRE_SMOKE_SHAPE_OPTIONS = ["En filet", "En panache"];
const FIRE_SMOKE_TILT_OPTIONS = ["Verticale", "Couchée"];
const FIRE_DIRECTION_OPTIONS = ["N", "NE", "E", "SE", "S", "SO", "O", "NO"];
const FIRE_HEIGHT_OPTIONS = ["Sous la cime des arbres", "Au niveau de la cime", "Au-dessus de la cime", "Au-dessus de la colline"];
// Groupe de boutons à choix (unique ou multiple) pour un champ de la fiche de reconnaissance —
// `value` est soit un libellé (choix unique), soit un tableau de libellés (multi).
function FireChoiceGroup({ title, options, value, onChange, multi }) {
const isSelected = (opt) => (multi ? (value || []).includes(opt) : value === opt);
function toggle(opt) {
if (multi) {
const cur = value || [];
onChange(cur.includes(opt) ? cur.filter((o) => o !== opt) : [...cur, opt]);
} else {
onChange(value === opt ? null : opt);
}
}
return (
{title}
{options.map((opt) => (
))}
);
}
// Résumé en lecture seule de la fiche de reconnaissance (réaffiché à l'étape "Confirmé", pour
// avoir sous les yeux ce qui a été relevé au moment d'appeler le 18) — mêmes champs que
// FireChoiceGroup mais juste listés, plus de boutons à cette étape.
function FireReconSummary({ recon, gridRef }) {
const r = recon || {};
const rows = [
["Localisation", gridRef],
["Environnement", r.environnement],
["Menace", r.menace && r.menace.length > 0 ? r.menace.join(", ") : null],
["Couleur de la fumée", r.couleurFumee],
["Base des flammes visible", r.baseFlammesVisible],
["Forme de la fumée", r.formeFumee],
["Inclinaison", r.inclinaison],
["Direction de la fumée", r.direction],
["Hauteur de la fumée", r.hauteur],
].filter(([, v]) => v);
if (rows.length === 0) {
return
Aucune information de reconnaissance renseignée.
;
}
return (
{rows.map(([label, value]) => (
{label} :{value}
))}
);
}
// Tunnel d'étapes : à tout instant, une seule action possible s'affiche (celle qui fait
// avancer l'étape en cours), pas une liste de statuts au choix — cf. les fonctions
// registerFireInfo / confirmFireStart / markFirefightersInformed / deleteFire dans app.jsx.
function FirePanel({ fire, onRegister, onConfirmFire, onFirefightersInformed, onFalseAlarm, onExtinguish, onUpdateRecon, onClose, dfciGrid }) {
const recon = fire.recon || {};
function set(field, value) { onUpdateRecon(fire.id, { [field]: value }); }
const gridRef = findDfciGridRef(fire.x, fire.y, dfciGrid);
const title = `Fumée / départ de feu${gridRef ? ` en ${gridRef}` : ""}`;
return (
);
}
// Fond légèrement teinté de rouge (var(--bg2-red), déclinée par thème dans app.jsx) plutôt
// que le fond neutre des autres panneaux — permet de repérer ce panneau au premier coup
// d'œil comme signalant quelque chose d'urgent. N'apparaît que s'il y a au moins un feu non
// éteint (comme ActivityFeed, plutôt qu'une case vide permanente comme RoutinePanel).
function FiresPanel({ fires, now, onSelect, dfciGrid }) {
const active = fires.filter((f) => f.status !== "eteint").sort((a, b) => a.time - b.time);
if (active.length === 0) return null;
return (
);
}
// En-tête cliquable réduisant un panneau à son seul titre — largeur inchangée, juste la hauteur
// (cf. WeatherPanel/TipsPanel/ActivityFeed) : sert à libérer de la place pour "Missions en
// cours"/"Feux en cours" et le panneau de détail ouvert, sans faire disparaître complètement
// météo/astuces/activité récente.
function CollapsibleHeader({ children, collapsed, onToggle }) {
return (
);
}
function ActivityFeed({ activity, now }) {
const [collapsed, setCollapsed] = useState2(true);
if (activity.length === 0) return null;
return (
Vent {Math.round(data.current.wind_speed_10m)} km/h ({windCompass(data.current.wind_direction_10m)}), rafales {Math.round(data.current.wind_gusts_10m)} km/h · Humidité {data.current.relative_humidity_2m}%
);
}
// Petit rappel des manipulations de la carte qui ne sont pas évidentes au premier abord
// (raccourcis clavier/souris) — affiché en bas de la colonne de gauche de l'onglet Carte &
// missions, sous "Activité récente".
const MAP_TIPS = [
"Ctrl + clic-glisser sur la carte : incliner la vue (passage en 3D)",
"Clique-glisse un point ou l'étiquette d'une mission : déplacer la mission",
];
function TipsPanel() {
const [collapsed, setCollapsed] = useState2(false);
return (
);
}
function EffectifTab({ roster, setRoster, entries, setEntries, onArrival, onSortie, onReturn, vehicles, setVehicles, missions, onCreateMission, presets }) {
const [query, setQuery] = useState2("");
const [bulkText, setBulkText] = useState2("");
const [groupText, setGroupText] = useState2("");
const [vehicleBulkText, setVehicleBulkText] = useState2("");
const [vehiclePlate, setVehiclePlate] = useState2("");
// Sortie en attente de confirmation dans le formulaire central (motif/véhicule) — une
// personne ou tout un groupe. Cliquer "Sortie" ne sort plus personne directement.
const [pendingSortie, setPendingSortie] = useState2(null); // { people: [{id,name}], label }
// Ajoute des personnes à la sortie en attente plutôt que de la remplacer — cliquer
// "Sortie" sur une personne puis sur une autre (ou sur un groupe) doit cumuler tout le
// monde dans le même panneau, pas repartir de zéro à chaque clic.
function queueSortie(people) {
setPendingSortie((cur) => {
const existing = cur ? cur.people : [];
const existingIds = new Set(existing.map((p) => p.id));
const additions = people.filter((p) => !existingIds.has(p.id));
return { people: [...existing, ...additions] };
});
}
// Une couleur unique par groupe (voir buildGroupColorMap) — recalculée à chaque rendu à
// partir de l'effectif complet, pas seulement de la liste filtrée/affichée, pour que la
// couleur d'un groupe ne change pas selon la colonne ou la recherche en cours.
const groupColorMap = buildGroupColorMap(roster, missions.map((m) => m.label));
function colorForGroup(name) { return groupColorMap.get(name) || "var(--text-faint)"; }
// Groupes déjà utilisés dans l'effectif — proposés en suggestion (datalist) pour rattacher
// facilement un nouvel arrivant à un groupe déjà sur le camp, sans retaper/mal orthographier.
const existingGroups = Array.from(new Set(roster.map((p) => p.group).filter(Boolean))).sort((a, b) => a.localeCompare(b));
// "Invités" est toujours proposé, même sans personne encore inscrite dedans — groupe
// "fourre-tout" par défaut, distingué des groupes réels par une couleur différente.
const groupButtons = [INVITES_GROUP, ...existingGroups.filter((g) => g !== INVITES_GROUP)];
const canRegister = bulkText.trim().length > 0 && groupText.trim().length > 0;
function addFromBulk() {
const names = bulkText.split("\n").map((n) => n.trim()).filter(Boolean);
if (names.length === 0) return;
const group = groupText.trim() || null;
setRoster((r) => {
const existing = new Set(r.map((p) => normalizeText(p.name)));
const additions = names.filter((n) => !existing.has(normalizeText(n))).map((n) => ({ id: uid("p"), name: n, group }));
return [...r, ...additions];
});
setBulkText("");
setGroupText("");
}
function addVehiclesFromBulk() {
const names = vehicleBulkText.split("\n").map((n) => n.trim()).filter(Boolean);
if (names.length === 0) return;
const plate = names.length === 1 ? vehiclePlate.trim() || null : null; // plaque : un seul véhicule à la fois
setVehicles((v) => {
const existing = new Set(v.map((x) => normalizeText(x.name)));
const additions = names.filter((n) => !existing.has(normalizeText(n))).map((n) => ({ id: uid("v"), name: n, plate }));
return [...v, ...additions];
});
setVehicleBulkText("");
setVehiclePlate("");
}
// Départ définitif du camp (motif "Sortie définitive" dans le formulaire central) : retire
// ces personnes de l'effectif une fois leur sortie enregistrée dans le journal — remplace
// le bouton "poubelle" retiré, pour éviter une suppression accidentelle en un clic.
function removePeople(ids) {
const idSet = new Set(ids);
setRoster((r) => r.filter((p) => !idSet.has(p.id)));
}
const withStatus = roster.map((p) => ({ ...p, ...personStatus(entries, p.id), vehicule: personVehicle(entries, p.id), motif: personMotif(entries, p.id), missionId: personMissionId(entries, p.id) }));
// Étiquette de regroupement "Hors du camp" : la RAISON de la sortie plutôt que le groupe
// d'inscription — le nom de la mission en cours s'il y en a une, sinon le motif choisi (ex.
// "Médical"), même si tout le monde dans ce lot vient du même groupe d'inscription (ex.
// Bordeaux) : ce qui compte ici, c'est pourquoi ces gens sont sortis, pas avec qui ils sont
// arrivés au camp. Le groupe d'inscription ne reste utilisé que pour "Présents sur le camp"
// et en dernier recours ici, pour une sortie sans motif renseigné (jour non rouge).
function awayGroupKey(p) {
if (p.missionId) {
const m = missions.find((mm) => mm.id === p.missionId);
if (m) return m.label;
}
if (p.motif) return p.motif;
return p.group;
}
const q = normalizeText(query.trim());
const filtered = q
? withStatus.filter((p) => normalizeText(p.name).split(" ").some((w) => w.startsWith(q)) || normalizeText(p.name).startsWith(q))
: withStatus;
const order = { present: 0, sorti: 1, non_arrive: 2 };
filtered.sort((a, b) => order[a.status] - order[b.status] || a.name.localeCompare(b.name));
// Une personne mise en attente de sortie (bouton "Sortie"/"Sortir le groupe") disparaît de
// "Présents sur le camp" — elle n'existe plus que dans le bloc Sortie tant que ce n'est pas
// confirmé, pour éviter de la sélectionner une seconde fois par erreur.
const pendingIds = new Set(pendingSortie ? pendingSortie.people.map((p) => p.id) : []);
// Deux colonnes : présents sur le camp / hors du camp (sortis + jamais arrivés), plutôt
// qu'une seule liste triée par statut — plus rapide à lire d'un coup d'œil.
const presentList = filtered.filter((p) => p.status === "present" && !pendingIds.has(p.id));
const awayList = filtered.filter((p) => p.status !== "present");
function renderPersonRow(p, groupKeyOverride) {
const meta = STATUS_META[p.status];
// Sans groupe : couleur de statut (vert/orange) comme avant. Avec groupe : couleur du
// groupe sur le point + le contour, pour repérer un groupe d'un coup d'œil — le statut
// reste lisible via le petit texte (Présent/Sorti) et surtout via la colonne. `groupKeyOverride`
// vient du regroupement affiché (mission en cours pour "Hors du camp", cf. awayGroupKey) plutôt
// que systématiquement du groupe d'inscription, pour que le point colorré corresponde à
// l'étiquette réellement affichée au-dessus.
const groupKey = groupKeyOverride !== undefined ? groupKeyOverride : p.group;
const accent = groupKey ? colorForGroup(groupKey) : meta.color;
return (
);
}
// Regroupe une liste (déjà filtrée) par groupe — sert à afficher un bouton d'action en
// masse par groupe, tout en gardant les actions individuelles ligne par ligne (ex : une
// seule personne d'un groupe qui rentre pendant que le reste est encore dehors). Pour
// "Hors du camp" (kind === "away"), le regroupement suit la mission en cours quand il y en
// a une (awayGroupKey) — le groupe d'inscription ne sert plus que de repli pour une sortie
// de groupe sans mission associée.
function groupEntries(list, kind) {
const groups = new Map();
const ungrouped = [];
for (const p of list) {
const key = kind === "away" ? awayGroupKey(p) : p.group;
if (key) {
if (!groups.has(key)) groups.set(key, []);
groups.get(key).push(p);
} else {
ungrouped.push(p);
}
}
return { groups, ungrouped };
}
function handleGroupArrival(members) {
members.forEach((p) => (p.status === "sorti" ? onReturn(p) : onArrival(p)));
}
function renderColumn(list, kind) {
const { groups, ungrouped } = groupEntries(list, kind);
const groupNames = Array.from(groups.keys()).sort((a, b) => a.localeCompare(b));
return (