RoadTripsGenerator/rtg/interface/modeles/voyage.html

{% extends "base.html" %}
{% block titre %}{{ v.titre }}{% endblock %}
{% block tete %}<link rel="stylesheet" href="/static/leaflet.css"><script src="/static/leaflet.js"></script>{% endblock %}
{% block fin %}<script src="/static/editeur.js"></script>{% endblock %}
{% block contenu %}
<div class="entete-page">
  <div>
    <p class="fil"><a href="/">Mes voyages</a> › {{ v.rubrique }}</p>
    <h1>{{ v.titre }}</h1>
    <p class="discret">{{ [periode(v.debut, v.fin), v.moto]|select|join(" · ") }} <code>{{ v.chemin }}</code></p>
  </div>
  <div class="actions">
    {% if v.genere %}<a class="bouton" href="/site/{{ v.chemin }}/index.html" target="_blank">Voir la page ↗</a>{% endif %}
  </div>
</div>

<nav class="onglets">
  <a href="#journees">Journées</a>
  <a href="#carte">Carte et corrections</a>
  <a href="#sources">Sources</a>
  <a href="#infos">Infos et récit</a>
  <a href="#generer">Générer</a>
</nav>

<section class="onglet" id="onglet-journees">
  <div id="analyse" hx-get="/voyage/analyse?v={{ v.chemin|url }}" hx-trigger="load, sources-modifiees from:body, tache-finie from:body">
    <p class="chargement">Lecture des traces…</p>
  </div>
</section>

<section class="onglet" id="onglet-carte">
  <div id="editeur" class="editeur" data-voyage="{{ v.chemin }}">
    <aside class="editeur-panneau">
      <label>Jour
        <select id="ed-jour"><option value="">Tous les jours</option></select>
      </label>
      <div class="ed-cases">
        <label class="choix"><input type="checkbox" id="ed-photos" checked> <span class="mk photo"></span> Photos</label>
        <label class="choix"><input type="checkbox" id="ed-videos" checked> <span class="mk video"></span> Vidéos</label>
      </div>
      <p class="aide">Glissez un marqueur pour corriger sa position ; un clic l'affiche.
        <span class="mk photo deplace"></span> = position corrigée à la main.</p>
      <div id="ed-mode" class="ed-mode" hidden></div>

      <h4>Zones masquées</h4>
      <p class="aide">Les points de trace situés dans ces zones sont retirés des pages : autour de chez soi, ou sur une erreur du GPS.</p>
      <button id="ed-nouvelle-zone">+ Masquer une zone</button>
      <div id="ed-brouillon" class="ed-brouillon" hidden>
        <label>Rayon : <strong id="ed-rayon-texte">200 m</strong>
          <input type="range" id="ed-rayon" min="20" max="3000" step="10" value="200">
        </label>
        <label class="choix"><input type="checkbox" id="ed-portee-site"> Zone privée : la retirer de tous les voyages</label>
        <p><button class="principal" id="ed-zone-ok">Enregistrer la zone</button> <button id="ed-zone-annuler">Annuler</button></p>
      </div>
      <ul id="ed-zones" class="ed-liste"></ul>

      <h4>Médias sans position <span id="ed-nb-sans" class="compte"></span></h4>
      <p class="aide">Cliquez sur un nom puis sur la carte pour le placer.</p>
      <ul id="ed-sans" class="ed-liste"></ul>
      <p id="ed-etat" class="aide"></p>
    </aside>
    <div id="ed-carte" class="editeur-carte"><p class="chargement">Chargement de la carte…</p></div>
  </div>
</section>

<section class="onglet" id="onglet-sources">
  <p class="aide">Indiquez où se trouvent les fichiers d'origine : un ou plusieurs dossiers (ou fichiers) par type, sur n'importe quel disque.
  RTG ne les modifie jamais : les traces sont recopiées par journée dans <code>routes/</code>, les photos dans <code>photos/</code> (HEIC converties en JPEG),
  et les vidéos sont lues directement pour l'encodage.</p>
  {% include "_sources.html" %}
</section>

<section class="onglet" id="onglet-infos">
  <form class="formulaire" hx-post="/voyage/infos" hx-target="find .retour">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <label>Titre <input name="titre" value="{{ cfg.titre }}"></label>
    <label>Moto <input name="moto" value="{{ cfg.moto }}" placeholder="facultatif : affichée dans la légende de la carte globale"></label>
    <p class="aide">Rubrique : <strong>{{ v.rubrique }}</strong> (elle vient du dossier où est rangé le voyage).</p>
    <p><button class="principal">Enregistrer</button> <span class="retour"></span></p>
  </form>
  <form class="formulaire large" hx-post="/voyage/recit" hx-target="find .retour">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <label>Récit (<code>voyage.md</code>, en Markdown)
      <textarea name="recit" rows="18" spellcheck="true">{{ recit }}</textarea>
    </label>
    <p class="aide">Liens spéciaux : <code>[Carte du jour](jour:2026-08-01)</code> ouvre la carte d'un jour,
    <code>[Le col](media:photos/IMG_4831.jpeg)</code> un média du voyage.</p>
    <p><button class="principal">Enregistrer le récit</button> <span class="retour"></span></p>
  </form>
</section>

<section class="onglet" id="onglet-generer">
  <div hx-get="/voyage/infos-utiles?v={{ v.chemin|url }}" hx-trigger="load, sources-modifiees from:body, tache-finie from:body"><p class="chargement">Calcul des tailles…</p></div>
  <form class="formulaire" hx-post="/tache/lancer" hx-target="#tache-zone">
    <input type="hidden" name="v" value="{{ v.chemin }}">
    <label class="choix"><input type="checkbox" name="sans_compression"> Sans encoder les vidéos <span class="aide">(photos, positions et pages seulement)</span></label>
    <label class="choix"><input type="checkbox" name="force"> Tout refaire, même ce qui est déjà à jour</label>
    <p>
      <button class="principal" name="quoi" value="generer">Générer le voyage</button>
      <button name="quoi" value="compresser">Encoder les vidéos seulement</button>
    </p>
  </form>
  <div id="tache-zone">{% if tache and tache.voyage == v.chemin %}{% include "_tache.html" %}{% endif %}</div>
</section>
{% endblock %}