From 21882982174a218fcf0871f1ec5f85747fc99051 Mon Sep 17 00:00:00 2001
From: root <root@audiOhm.lanro.eu>
Date: Thu, 26 Feb 2026 17:33:30 +0000
Subject: [PATCH] fix: resolve missing JS functions and CSS class names for
 watchlist tab

---
 static/js/watchlist-ui.js                   |   2 +-
 static/js/watchlist.js                      | 133 ++++++++++++++++++++
 templates/components/watchlist_section.html |   4 +-
 3 files changed, 136 insertions(+), 3 deletions(-)

diff --git a/static/js/watchlist-ui.js b/static/js/watchlist-ui.js
index d52829a..d186699 100644
--- a/static/js/watchlist-ui.js
+++ b/static/js/watchlist-ui.js
@@ -10,7 +10,7 @@ async function displayWatchlist(status = null) {
     if (!container) return;
 
     try {
-        container.innerHTML = '<div class="loading">Chargement de la watchlist...</div>';
+        container.innerHTML = '<div class="watchlist-loading">Chargement de la watchlist...</div>';
 
         const items = await getWatchlist(status);
         const stats = await getWatchlistStats();
diff --git a/static/js/watchlist.js b/static/js/watchlist.js
index 4c2bbed..0c82bdb 100644
--- a/static/js/watchlist.js
+++ b/static/js/watchlist.js
@@ -316,3 +316,136 @@ window.getWatchlistStats = getWatchlistStats;
 window.getSchedulerStatus = getSchedulerStatus;
 window.startScheduler = startScheduler;
 window.stopScheduler = stopScheduler;
+
+
+/**
+ * Current filter state
+ */
+let currentFilter = 'all';
+
+/**
+ * Filter watchlist
+ */
+async function filterWatchlist(status, tabElement) {
+    currentFilter = status;
+
+    // Update tab styles
+    document.querySelectorAll('.filter-tab').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    tabElement.classList.add('active');
+
+    // Reload with filter
+    await displayWatchlist(status === 'all' ? null : status);
+}
+
+/**
+ * Handle start scheduler
+ */
+async function handleStartScheduler() {
+    try {
+        await startScheduler();
+        await loadSchedulerStatus();
+        alert('✅ Planificateur démarré!');
+    } catch (error) {
+        console.error('Error starting scheduler:', error);
+        alert(`❌ Erreur: ${error.message}`);
+    }
+}
+
+/**
+ * Handle stop scheduler
+ */
+async function handleStopScheduler() {
+    try {
+        await stopScheduler();
+        await loadSchedulerStatus();
+        alert('✅ Planificateur arrêté!');
+    } catch (error) {
+        console.error('Error stopping scheduler:', error);
+        alert(`❌ Erreur: ${error.message}`);
+    }
+}
+
+/**
+ * Handle check all
+ */
+async function handleCheckAll() {
+    try {
+        await checkAllWatchlistItems();
+        await loadSchedulerStatus();
+    } catch (error) {
+        console.error('Error checking all:', error);
+        alert(`❌ Erreur: ${error.message}`);
+    }
+}
+
+/**
+ * Handle open settings
+ */
+async function handleOpenSettings() {
+    try {
+        const settings = await getWatchlistSettings();
+        const modalHtml = createSettingsModal(settings);
+        
+        // Add modal to body
+        const modalContainer = document.createElement('div');
+        modalContainer.innerHTML = modalHtml;
+        document.body.appendChild(modalContainer);
+    } catch (error) {
+        console.error('Error loading settings:', error);
+        alert(`❌ Erreur: ${error.message}`);
+    }
+}
+
+// Make functions available globally
+window.filterWatchlist = filterWatchlist;
+window.handleStartScheduler = handleStartScheduler;
+window.handleStopScheduler = handleStopScheduler;
+window.handleCheckAll = handleCheckAll;
+window.handleOpenSettings = handleOpenSettings;
+
+/**
+ * Load scheduler status
+ */
+async function loadSchedulerStatus() {
+    try {
+        const status = await getSchedulerStatus();
+        updateSchedulerUI(status);
+    } catch (error) {
+        console.error('Error loading scheduler status:', error);
+    }
+}
+
+/**
+ * Update scheduler UI
+ */
+function updateSchedulerUI(status) {
+    const startBtn = document.getElementById('startSchedulerBtn');
+    const stopBtn = document.getElementById('stopSchedulerBtn');
+    const nextRunInfo = document.getElementById('nextRunInfo');
+
+    if (!startBtn || !stopBtn || !nextRunInfo) return;
+
+    if (status.running) {
+        startBtn.style.display = 'none';
+        stopBtn.style.display = 'inline-block';
+
+        if (status.next_run) {
+            const nextRun = new Date(status.next_run);
+            nextRunInfo.innerHTML = `✓ En cours<br>Prochaine vérification: ${nextRun.toLocaleString('fr-FR')}`;
+        }
+    } else {
+        startBtn.style.display = 'inline-block';
+        stopBtn.style.display = 'none';
+        nextRunInfo.innerHTML = '⏸️ Arrêté';
+    }
+}
+
+window.loadSchedulerStatus = loadSchedulerStatus;
+window.updateSchedulerUI = updateSchedulerUI;
+window.filterWatchlist = filterWatchlist;
+window.handleStartScheduler = handleStartScheduler;
+window.handleStopScheduler = handleStopScheduler;
+window.handleCheckAll = handleCheckAll;
+window.handleOpenSettings = handleOpenSettings;
\ No newline at end of file
diff --git a/templates/components/watchlist_section.html b/templates/components/watchlist_section.html
index 669306d..375925c 100644
--- a/templates/components/watchlist_section.html
+++ b/templates/components/watchlist_section.html
@@ -3,7 +3,7 @@
         <div class="watchlist-header">
             <h1>📋 Ma Watchlist</h1>
             <p>Suivez vos animes préférés et téléchargez automatiquement les nouveaux épisodes</p>
-            <button type="button" class="btn-secondary header-back-btn" onclick="window.location.href = '/web'">
+            <button type="button" class="btn-secondary watchlist-header-back-btn" onclick="window.location.href = '/web'">
                 ← Retour à l'accueil
             </button>
         </div>
@@ -42,5 +42,5 @@
 
         <!-- Watchlist Items -->
         <div id="watchlistContainer">
-            <div class="loading">Chargement de la watchlist...</div>
+            <div class="watchlist-loading">Chargement de la watchlist...</div>
         </div>