shelfy/templates/godownloader_download.pages.tmpl

<h1>Download</h1>
<div class="box">
    <form
      hx-post="/api/download/add"
      hx-trigger="submit"
      hx-swap="none"
      hx-on="htmx:afterRequest: this.reset()"
      class="mb-4"
    >
    <div class="field">
      <label class="label">Lien à débrider</label>
      <div class="control">
        <input class="input" type="text" name="link" placeholder="https://..." required>
      </div>
    </div>

    <div class="field">
      <label class="label">Chemin d'enregistrement</label>
      <div class="control">
        <div class="select">
          <select name="path_id">
            {{range .paths}}<option value="{{.ID}}">{{.PathName}}</option>{{end}}
          </select>
        </div>
      </div>
    </div>

    <div class="field is-grouped">
      <div class="control">
        <button class="button is-primary" type="submit">Ajouter</button>
      </div>
    </div>
  </form>
  <div
    hx-ext="sse"
    sse-connect="/api/download/stream"
    hx-on="
      htmx:sseOpen:   console.log('✅ SSE ouvert');
      htmx:sseError:  console.error('❌ SSE erreur', event.detail.error);
      htmx:sseMessage:console.log('📨 SSE reçu', event.detail);
    "
  >
    <table
      id="downloads-table"
      class="table is-fullwidth is-striped"
      hx-trigger="load,sse:jobs"
    >    <thead>
      <tr>
        <th>Fichier</th>
        <th>Statut</th>
        <th>Vitesse</th>
        <th>Progress</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="test"></tbody>
  </table>

  </div>



</div>
<script>



// Fonction d'initialisation de l'EventSource
function startEventSource() {
  if (es !== null) {
    es.close();  // ferme l'ancien si déjà existant
  }

  es = new EventSource("/api/download/stream");

  es.addEventListener("jobs", async (e) => {
    console.log("🧪 Event brut reçu :", e.data);

    const tbody = document.getElementById("test");
    if (!tbody) {
      console.warn("❌ <tbody id='test'> non trouvé !");
      return;
    }

    const url = `/api/download/all?t=${Date.now()}`;
    console.log("🔁 Fetch direct :", url);

    try {
      const response = await fetch(url, {
        headers: { 'HX-Request': 'true' }
      });

      if (!response.ok) {
        console.error("❌ Erreur serveur :", response.status);
        return;
      }

      const html = await response.text();
      tbody.innerHTML = html;
      console.log("✅ Contenu injecté dans <tbody id='test'>");
    } catch (err) {
      console.error("❌ Erreur fetch :", err);
    }
  });

  es.onerror = e => {
    console.error("❌ Erreur EventSource", e);
    // (optionnel) tu peux tenter de relancer le EventSource ici si besoin
  };
}

// Lancer dès le chargement initial :
startEventSource();

// Fonction POST générique
async function postJobAction(url) {
  try {
    const res = await fetch(url, {
      method: "POST",
      headers: { "HX-Request": "true" }
    });
    if (!res.ok) throw new Error("Échec POST : " + res.status);
    console.log("✅ Action POST réussie :", url);
  } catch (err) {
    console.error("❌ Erreur action POST :", err);
  }
}

// Fonction DELETE avec effet visuel
async function deleteJobAnimated(jobId) {
  const row = document.getElementById(`job-${jobId}`);
  if (!row) return;

  try {
    const res = await fetch(`/api/download/delete/${jobId}`, {
      method: "DELETE",
      headers: { "HX-Request": "true" }
    });

    if (!res.ok) throw new Error("Échec DELETE");

    row.style.transition = "opacity 0.4s ease, height 0.4s ease";
    row.style.opacity = "0";
    row.style.height = "0px";
    setTimeout(() => row.remove(), 400);
  } catch (err) {
    console.error("❌ Erreur suppression :", err);
  }
}

// Dispatcher global des boutons
document.addEventListener("click", function (e) {
  const btn = e.target.closest("button[data-action]");
  if (!btn) return;

  const action = btn.dataset.action;
  const jobId = btn.dataset.id;

  switch (action) {
    case "start-job":
      postJobAction(`/api/download/start/${jobId}`);
      break;
    case "pause-job":
      postJobAction(`/api/download/pause/${jobId}`);
      break;
    case "resume-job":
      postJobAction(`/api/download/resume/${jobId}`);
      break;
    case "delete-job":
      deleteJobAnimated(jobId);
      break;
  }
});

</script>