Added:

- Messenger, Mercure
- chapter download flow (lelscan only)

assets/controllers/alert_controller.js

@@ -0,0 +1,60 @@
+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 = ['alert', 'icon', 'message']
+
+  connect() {
+    window.addEventListener('alert:show', this.showAlert.bind(this));
+  }
+
+  // ...
+  showAlert(event) {
+    const detail = event.detail;
+    const message = detail.message;
+    const level = detail.level;
+
+    let alertClass = "";
+    let iconClass = "";
+    switch (level) {
+      case 'success':
+        alertClass = "bg-green-500";
+        iconClass = "fa-circle-check";
+        break;
+      case 'warning':
+        alertClass = "bg-yellow-500";
+        iconClass = "fa-circle-exclamation";
+        break;
+      case 'error':
+        alertClass = "bg-red-500";
+        iconClass = "fa-circle-xmark";
+        break;
+      case 'info':
+      default:
+        alertClass = "bg-blue-500";
+        iconClass = "fa-circle-info";
+        break;
+    }
+
+    this.messageTarget.innerHTML = message;
+    this.alertTarget.classList.add(alertClass);
+    this.iconTarget.classList.add(iconClass);
+    this.alertTarget.style.display = "block";
+
+    setTimeout(() => {
+      this.alertTarget.style.opacity = 0;
+
+      setTimeout(() => {
+        this.alertTarget.style.display = 'none';
+        this.alertTarget.classList.remove(alertClass);
+        this.alertTarget.style.opacity = 1;
+        this.iconTarget.classList.remove(iconClass);
+        this.messageTarget.innerHTML = message;
+      }, 1000);
+    }, 3000);
+  }
+}

assets/controllers/download_chapter_controller.js

@@ -0,0 +1,56 @@
+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/mercure_controller.js

@@ -0,0 +1,33 @@
+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 {
+  // ...
+  connect() {
+    const topic = this.data.get('topic');
+    const mercureHubUrl = 'https://localhost/.well-known/mercure';
+    const eventSource = new EventSource(`${mercureHubUrl}?topic=${topic}`);
+
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      console.log('Received Mercure update:', data);
+
+      this.dispatchAlert(data.message, data.status);
+    };
+
+    eventSource.onerror = (event) => {
+      console.error('EventSource failed:', event);
+    };
+  }
+
+  dispatchAlert(message, level) {
+    const event = new CustomEvent('alert:show', {
+      detail: { message: message, level: level }
+    });
+    window.dispatchEvent(event);
+  }
+}