Added:

- turbo + code adaptation
- cover & thumbnails download

assets/controllers/activity_controller.js

@@ -35,11 +35,14 @@ export default class extends Controller {
 
     eventSource.onmessage = (event) => {
       const data = JSON.parse(event.data);
+      console.log(data);
       if (data.processing !== undefined && data.pending !== undefined) {
         let totalActivities = data.processing.length + data.pending.length;
         this.activityTarget.innerHTML = totalActivities;
         if (totalActivities > 0) {
           this.activityTarget.classList.remove('hidden');
+        }else if (totalActivities === 0) {
+          this.activityTarget.classList.add('hidden');
         }
       }
     };

assets/controllers/chapter_progress_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['progressBar', 'progressText']
+  static values = {
+    chapterId: Number
+  }
+
+  connect() {
+    this.currentPage = 0;
+    this.totalPages = 0;
+    this.progressBarElement = this.progressBarTarget.querySelector('.bg-blue-600');
+
+    const mercureHubUrl = 'https://localhost/.well-known/mercure';
+    this.eventSource = new EventSource(`${mercureHubUrl}?topic=activity`);
+
+    this.eventSource.onmessage = this.handleMessage.bind(this);
+  }
+
+  disconnect() {
+    if (this.eventSource) {
+      this.eventSource.close();
+    }
+  }
+
+  handleMessage(event) {
+    const data = JSON.parse(event.data);
+    if (data.status === "Page Scrapping progress" && data.chapterId === this.chapterIdValue) {
+      this.handleProgressUpdate(data);
+    }
+  }
+
+  handleProgressUpdate(data) {
+    this.currentPage = data.pageIndex + 1;
+    this.totalPages = data.totalPages;
+
+    if (this.currentPage > 1) {
+      this.progressBarTarget.classList.remove('hidden');
+    }
+
+    this.updateProgressBar();
+  }
+
+  updateProgressBar() {
+    const progress = (this.currentPage / this.totalPages) * 100;
+    this.progressBarElement.style.width = `${progress}%`;
+    this.progressTextTarget.textContent = `${this.currentPage} / ${this.totalPages}`;
+  }
+}

assets/controllers/download_chapter_controller.js

@@ -1,56 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['icon']
-
-  connect() {
-    this.defaultIconClass = this.iconTarget.classList.value;
-  }
-
-  async handleClick(event) {
-    event.preventDefault();
-
-    const button = event.currentTarget;
-    const url = button.dataset.url;
-
-    // Change the icon to a loader
-    this.iconTarget.classList.remove("fa-search");
-    this.iconTarget.classList.add("fa-spinner");
-    this.iconTarget.classList.add("fa-spin");
-
-    try {
-      const response = await fetch(`${url}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      });
-
-      const data = await response.json();
-      // Handle the response data as needed
-      if(data.error){
-        this.dispatchAlert(data.error, 'error');
-      }else if(data.success) {
-        this.dispatchAlert(data.success, 'success');
-      }
-    } catch (error) {
-      console.error('Error:', error);
-    } finally {
-      // Revert the icon back to the original one
-      this.iconTarget.classList.value = this.defaultIconClass;
-    }
-  }
-
-  dispatchAlert(message, level) {
-    const event = new CustomEvent('alert:show', {
-      detail: { message: message, level: level }
-    });
-    window.dispatchEvent(event);
-  }
-}

assets/controllers/download_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['icon']
+  static values = {
+    url: String
+  }
+
+  connect() {
+    this.defaultIconClass = this.iconTarget.classList.value;
+  }
+
+  async download(event) {
+    event.preventDefault();
+
+    // Change the icon to a loader
+    this.iconTarget.classList.remove("fa-download", "fa-search");
+    this.iconTarget.classList.add("fa-spinner", "fa-spin");
+
+    try {
+      const response = await fetch(this.urlValue, {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      });
+
+      const contentType = response.headers.get("Content-Type");
+      if (contentType && contentType.includes("application/json")) {
+        const data = await response.json();
+        if (data.error) {
+          this.dispatchAlert(data.error, 'error');
+        } else if (data.success) {
+          this.dispatchAlert(data.success, 'success');
+        }
+      } else {
+        // C'est un fichier à télécharger
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        const contentDisposition = response.headers.get('Content-Disposition');
+        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+        const matches = filenameRegex.exec(contentDisposition);
+        let filename = 'download';
+        if (matches != null && matches[1]) {
+          filename = matches[1].replace(/['"]/g, '');
+        }
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+      }
+    } finally {
+      // Revert the icon back to the original one
+      this.iconTarget.classList.value = this.defaultIconClass;
+    }
+  }
+
+  dispatchAlert(message, level) {
+    const event = new CustomEvent('alert:show', {
+      detail: { message: message, level: level }
+    });
+    window.dispatchEvent(event);
+  }
+}