shelfy/templates/godownloader_download.pages.tmpl

<h1>Download</h1>
<div class="box">
<form hx-post="/api/download/add-multiple" hx-target="#downloads-table" class="box">

  <!-- Zone des liens -->
  <div class="field">
    <label class="label">Liens à débrider</label>
    <div class="control">
      <textarea name="links" class="textarea" rows="5" placeholder="http://...\nhttp://..."></textarea>
    </div>
    <p class="help">Un lien par ligne</p>
  </div>

  <!-- Zone de destination -->
  <div class="field">
    <label class="label">Dossier de destination</label>
    <div class="field has-addons">
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select name="path_id">
            {{ range .paths }}
            <option value="{{ .ID }}">{{ .PathName }} ({{ .Path }})</option>
            {{ end }}
          </select>
        </div>
      </div>
      <div class="control is-expanded">
        <input type="text" name="new_subfolder" class="input" placeholder="Créer un sous-dossier (optionnel)" />
      </div>
    </div>
  </div>

  <!-- Bouton de soumission -->
  <div class="field is-grouped is-justify-content-center">
    <div class="control">
      <button type="submit" class="button is-primary">
        <span class="icon"><i class="fas fa-download"></i></span>
        <span>Télécharger</span>
      </button>
    </div>
  </div>

</form>


<!-- Tableau des jobs -->
<div id="downloads-table">
</div>
  <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>