Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: integrate watchlist as tab on /web page

Browse Source
This commit is contained in:
root
2026-02-26 16:06:21 +00:00
parent 36ec4a0eee
commit e22bc4191c
8 changed files with 494 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/watchlist-ui.js
+166
View File
@@ -321,6 +321,169 @@ async function handleCheckAll() {
}
}
/**
* Create settings modal HTML
*/
function createSettingsModal(settings) {
const modalHtml = `
<div id="settingsModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000;">
<div style="background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 100%); border-radius: 16px; padding: 30px; max-width: 500px; width: 90%; border: 1px solid rgba(0, 217, 255, 0.3);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
<h2 style="margin: 0; color: #00d9ff;">⚙️ Paramètres Watchlist</h2>
<button onclick="closeSettingsModal()" style="background: none; border: none; color: #999; font-size: 24px; cursor: pointer;">×</button>
</div>
<div style="display: flex; flex-direction: column; gap: 20px;">
<!-- Check Interval -->
<div>
<label style="display: block; color: #fff; margin-bottom: 8px; font-weight: 500;">
🔄 Fréquence de vérification (heures)
</label>
<input type="number" id="checkInterval" value="${settings.check_interval_hours}" min="1" max="168"
style="width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; font-size: 14px;">
<p style="font-size: 12px; color: #999; margin-top: 5px;">Entre 1 et 168 heures (1 semaine)</p>
</div>
<!-- Auto-download enabled -->
<div style="display: flex; align-items: center; justify-content: space-between;">
<div>
<div style="color: #fff; font-weight: 500;">📥 Téléchargement automatique</div>
<p style="font-size: 12px; color: #999; margin: 0;">Télécharger automatiquement les nouveaux épisodes</p>
</div>
<label class="switch">
<input type="checkbox" id="autoDownloadEnabled" ${settings.auto_download_enabled ? 'checked' : ''}>
<span class="slider"></span>
</label>
</div>
<!-- Max concurrent downloads -->
<div>
<label style="display: block; color: #fff; margin-bottom: 8px; font-weight: 500;">
⚡ Téléchargements simultanés max
</label>
<input type="number" id="maxConcurrent" value="${settings.max_concurrent_auto_downloads}" min="1" max="5"
style="width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; font-size: 14px;">
<p style="font-size: 12px; color: #999; margin-top: 5px;">Maximum 5 téléchargements en parallèle</p>
</div>
<!-- Notifications -->
<div style="display: flex; align-items: center; justify-content: space-between;">
<div>
<div style="color: #fff; font-weight: 500;">🔔 Notifications</div>
<p style="font-size: 12px; color: #999; margin: 0;">Être notifié des nouveaux épisodes</p>
</div>
<label class="switch">
<input type="checkbox" id="notifyEnabled" ${settings.notify_on_new_episodes ? 'checked' : ''}>
<span class="slider"></span>
</label>
</div>
</div>
<div style="display: flex; gap: 10px; margin-top: 30px;">
<button class="btn-primary modal-action-btn" onclick="saveSettings()">
💾 Enregistrer
</button>
<button class="btn-secondary modal-action-btn" onclick="closeSettingsModal()">
Annuler
</button>
</div>
</div>
</div>
<style>
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.2);
transition: .4s;
border-radius: 26px;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #00d9ff;
}
input:checked + .slider:before {
transform: translateX(24px);
}
</style>
`;
return modalHtml;
}
/**
* Close settings modal
*/
function closeSettingsModal() {
const modal = document.getElementById('settingsModal');
if (modal) {
modal.remove();
}
}
/**
* Save settings
*/
async function saveSettings() {
try {
const checkInterval = parseInt(document.getElementById('checkInterval').value);
const autoDownloadEnabled = document.getElementById('autoDownloadEnabled').checked;
const maxConcurrent = parseInt(document.getElementById('maxConcurrent').value);
const notifyEnabled = document.getElementById('notifyEnabled').checked;
const settings = {
check_interval_hours: checkInterval,
auto_download_enabled: autoDownloadEnabled,
max_concurrent_auto_downloads: maxConcurrent,
notify_on_new_episodes: notifyEnabled
};
await updateWatchlistSettings(settings);
// Restart scheduler if it's running to apply new interval
const status = await getSchedulerStatus();
if (status.running) {
await stopScheduler();
await startScheduler();
}
closeSettingsModal();
alert('✅ Paramètres enregistrés avec succès!');
await loadSchedulerStatus();
} catch (error) {
console.error('Error saving settings:', error);
alert(`❌ Erreur: ${error.message}`);
}
}
// Make functions available globally
window.displayWatchlist = displayWatchlist;
window.handleAddToWatchlist = handleAddToWatchlist;
@@ -329,3 +492,6 @@ window.handleResumeWatchlist = handleResumeWatchlist;
window.handleCheckItem = handleCheckItem;
window.handleDeleteWatchlist = handleDeleteWatchlist;
window.handleCheckAll = handleCheckAll;
window.createSettingsModal = createSettingsModal;
window.closeSettingsModal = closeSettingsModal;
window.saveSettings = saveSettings;