pointeuse-optimisator/app/templates/aide.html

{% extends "base.html" %}
{% block content %}
<div class="stats-head">
  <div>
    <span class="stats-title">Aide</span>
    <div class="stats-meta">Configurer les notifications ntfy et la détection de présence (Automation)</div>
  </div>
</div>

<div class="settings-card">
  <span class="hist-label">Principe</span>
  <p class="settings-p">
    L'app peut te relancer automatiquement si tu es détecté présent au bureau sans avoir pointé
    le matin, ou parti sans avoir pointé la sortie. Ça repose sur deux briques :
  </p>
  <ul class="aide-list">
    <li>
      <b>Réception des notifications</b> : <a href="https://ntfy.sh" target="_blank" rel="noopener">ntfy</a>,
      un service gratuit de notifications push par topic.
    </li>
    <li>
      <b>Détection de présence</b> : ton téléphone appelle une URL de l'app quand il entre/sort
      du bureau. L'app fait le reste (vérifie toutes les 5 min, dans la plage horaire réglée
      sur <a href="/settings">/settings</a>, en semaine, si un pointage manque).
    </li>
  </ul>
  <p class="settings-p">
    Avant de commencer : va sur <a href="/settings">/settings</a>, choisis un nom de topic ntfy
    secret (ex: <code>prenom-pointeuse-a1b2</code>, pas devinable), enregistre-le. La page affiche
    ensuite tes deux URLs personnelles <b>Arrivée</b> et <b>Départ</b> — elles contiennent un token
    secret, ne les partage pas.
  </p>
</div>

<div class="settings-card">
  <span class="hist-label">1. Recevoir les notifications (ntfy)</span>
  <p class="settings-p">
    Installer l'app <b>ntfy</b> sur le téléphone, puis s'abonner au topic choisi dans /settings.
  </p>
  <ol class="aide-steps">
    <li>
      Installe l'app <b>ntfy</b> depuis le
      <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy" target="_blank" rel="noopener">Play Store</a>
      ou <a href="https://f-droid.org/en/packages/io.heckel.ntfy/" target="_blank" rel="noopener">F-Droid</a>.
    </li>
    <li>
      Ouvre l'app, bouton <b>+</b> → entre le nom de topic choisi sur
      <a href="/settings">/settings</a> → valide. Laisse le serveur par défaut (<code>ntfy.sh</code>).
    </li>
    <li>
      Teste l'envoi depuis un navigateur : ouvre
      <code>https://ntfy.sh/&lt;ton-topic&gt;</code> et publie un message. La notif doit
      arriver sur le téléphone en quelques secondes.
    </li>
    <li>
      <b>Important</b> : sur Android, désactive l'optimisation de la batterie pour ntfy
      (Réglages → Applications → ntfy → Batterie → "Aucune restriction"). Sinon Android
      peut couper les notifications en arrière-plan.
    </li>
    <li>
      <b>Serveur protégé par jeton</b> : si ton instance ntfy renvoie <code>403 Forbidden</code>,
      elle exige un jeton d'accès. Crée-le sur le serveur (panneau d'admin ntfy, onglet
      "Access tokens"), puis colle-le dans le champ <b>Jeton d'accès</b> sur
      <a href="/settings">/settings</a>. Il est envoyé comme
      <code>Authorization: Bearer ...</code> à chaque publication.
    </li>
  </ol>
  <p class="settings-hint">
    Astuce : si tu veux ton propre serveur ntfy (auto-hébergé, pour éviter le topic public),
    installe-le (<a href="https://docs.ntfy.sh/install/" target="_blank" rel="noopener">doc officielle</a>)
    et renseigne son URL dans le champ <b>Serveur ntfy</b> sur /settings.
  </p>
</div>

<div class="settings-card">
  <span class="hist-label">2. Détecter la présence (Automation)</span>
  <p class="settings-p">
    Créer une automatisation <a href="https://f-droid.org/en/packages/com.jens.automation2/" target="_blank" rel="noopener">Automation</a>
    (app FOSS, F-Droid) déclenchée par le Wi-Fi du bureau ou par une géofence :
    à l'entrée, appeler l'URL « Arrivée » ; à la sortie, l'URL « Départ ».
  </p>
  <ol class="aide-steps">
    <li>
      Installe <a href="https://f-droid.org/en/packages/com.jens.automation2/" target="_blank" rel="noopener">Automation</a>
      depuis F-Droid (évite la version Play Store, amputée de la localisation).
    </li>
    <li>
      Autorise la <b>localisation en arrière-plan</b> : Réglages → Applications →
      Automation → Autorisations → Position → <b>Toujours</b>. Sans ça, Android
      coupe la détection quand l'app n'est pas au premier plan.
    </li>
    <li>
      Désactive l'<b>optimisation batterie</b> pour Automation (même menu →
      Batterie → « Aucune restriction »).
    </li>
    <li>
      Crée la règle <b>Arrivée bureau</b> — Automation → <b>Rules</b> → <b>+</b> :
      <ul class="aide-substeps">
        <li><b>Trigger</b> : <b>Wifi connection</b> → entre le SSID du Wi-Fi du bureau (méthode recommandée),
            <i>ou</i> <b>Location</b> → adresse du bureau, rayon ~100–150 m, événement <b>Enter</b> (géofence).</li>
        <li><b>Action</b> : <b>Trigger URL</b>, method <code>POST</code>,
            URL = ton lien <b>Arrivée</b> copié depuis <a href="/settings">/settings</a>.</li>
      </ul>
    </li>
    <li>
      Crée la règle symétrique <b>Sortie bureau</b> : même SSID en sens <b>déconnexion</b>
      (ou même géofence, événement <b>Exit</b>), action <b>Trigger URL</b> <code>POST</code>
      vers ton lien <b>Départ</b>.
    </li>
  </ol>
  <p class="settings-hint">
    Au bureau, la méthode Wi-Fi est généralement plus réactive et plus économe en
    batterie que la géofence GPS.
  </p>
  <p class="settings-hint">
    Si tu changes de téléphone ou réinstalles, les tokens restent valides — il suffit de
    recréer les règles Automation et l'abonnement ntfy.
  </p>
</div>

<div class="settings-card">
  <span class="hist-label">3. Vérifier</span>
  <ol class="aide-steps">
    <li>
      Force une entrée/sortie de zone ou de Wi-Fi (ou, dans Automation, ouvre une règle
      et utilise le bouton « Test », icône lecture). La réponse doit être <code>{"ok":true}</code>.
    </li>
    <li>
      Va sur <a href="/logs">/logs</a> : tu dois voir une entrée "Présence / arrivée" ou
      "Présence / départ" correspondante.
    </li>
    <li>
      Simule une journée sans pointage matin pendant que tu es marqué "présent" : une notif
      ntfy doit arriver dans les 5 minutes. Elle apparaîtra aussi dans
      <a href="/logs">/logs</a> sous "Notification / envoyée".
    </li>
  </ol>
</div>

<div class="settings-card">
  <span class="hist-label">Dépannage</span>
  <ul class="aide-list">
    <li>
      <b>Pas de notif ntfy</b> : vérifie l'optimisation batterie sur l'app ntfy, et que le topic
      est bien le même côté serveur et côté téléphone (sensible à la casse).
    </li>
    <li>
      <b>Pas de déclenchement Automation</b> : dans Automation, vérifie que la règle est
      bien activée et utilise le bouton « Test » pour isoler le problème (réseau vs
      géoloc vs Wi-Fi). Vérifie aussi que l'optimisation batterie est bien désactivée
      pour l'app.
    </li>
    <li>
      <b>Logs vides sur /logs</b> : les entrées ne s'écrivent que quand un événement réel se
      produit (notif envoyée/échouée, arrivée/départ détecté). Force un test (étape 3).
    </li>
  </ul>
</div>

<style>
.aide-list {
  margin: .4rem 0 .4rem 1.2rem;
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  list-style: disc;
}
.aide-list li::marker { color: var(--muted); }
.aide-list a, .aide-steps a { color: var(--accent); }
.aide-list code, .aide-steps code, .aide-substeps code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--ground);
  border: 1px solid var(--rule);
  padding: .05rem .3rem;
}
.aide-steps {
  counter-reset: step;
  margin: .5rem 0 .4rem;
  padding: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  list-style: none;
}
.aide-steps > li {
  position: relative;
  padding-left: 2rem;
}
.aide-steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aide-substeps {
  margin: .35rem 0 .1rem 1.2rem;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  list-style: disc;
}
.aide-substeps li::marker { color: var(--rule); }
.settings-card .settings-p { margin: 0; }
.settings-card .settings-hint { margin-top: .5rem; }
</style>
{% endblock %}