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 Tasker</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>
  </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 (Tasker)</span>
  <p class="settings-p">
    Créer une automatisation Tasker déclenchée par une géofence autour du bureau : à l'entrée
    de la zone, appeler l'URL "Arrivée" ; à la sortie, l'URL "Départ".
  </p>
  <ol class="aide-steps">
    <li>
      Installe <a href="https://tasker.joaoapps.com/" target="_blank" rel="noopener">Tasker</a>
      (payant, Play Store).
    </li>
    <li>
      Autorise Tasker à utiliser la localisation en arrière-plan
      (Réglages → Applications → Tasker → Autorisations → Localisation → "Toujours").
      Sans ça, Android coupe la géolocalisation quand l'app n'est pas au premier plan.
    </li>
    <li>
      Crée un profil <b>Entrée bureau</b> :
      <ul class="aide-substeps">
        <li>Onglet <b>Profiles</b> → bouton <b>+</b> → <b>Location</b>.</li>
        <li>Renseigne l'adresse ou les coordonnées du bureau, rayon ~100–150 m.</li>
        <li>Tâche associée (nouvelle tâche, ex: <code>PointeuseArrivee</code>) :</li>
        <li>Action <b>Net → HTTP Request</b>, méthode <code>GET</code>,
            URL = ton lien <b>Arrivée</b> copié depuis <a href="/settings">/settings</a>.</li>
      </ul>
    </li>
    <li>
      Crée un profil symétrique <b>Sortie bureau</b> : même géofence, événement <b>Exit</b>,
      tâche <code>PointeuseDepart</code> qui appelle ton lien <b>Départ</b>.
    </li>
  </ol>
  <p class="settings-hint">
    Si tu changes de téléphone ou réinstalles, les tokens restent valides — il suffit de
    recharger les profils Tasker 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 lance la tâche HTTP manuellement dans Tasker via
      le bouton "play"). 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 Tasker</b> : dans Tasker, vérifie que la géofence est bien activée
      (icône rouge) et lance la tâche à la main pour isoler le problème (réseau vs géoloc).
    </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 %}