root
228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<div class="settings-container section-container">
|
|
<div class="section-header">
|
|
<h2>Parametres</h2>
|
|
</div>
|
|
|
|
<!-- General Preferences -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">General</h3>
|
|
|
|
<form id="settings-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="default_lang">Langue par defaut</label>
|
|
<select name="default_lang" id="default_lang" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;">
|
|
<option value="vostfr" {% if settings.default_lang == 'vostfr' %}selected{% endif %}>VOSTFR</option>
|
|
<option value="vf" {% if settings.default_lang == 'vf' %}selected{% endif %}>VF</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label for="theme">Theme</label>
|
|
<select name="theme" id="theme" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;">
|
|
<option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Sombre (Premium Dark)</option>
|
|
<option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Clair (Soon)</option>
|
|
<option value="oled" {% if settings.theme == 'oled' %}selected{% endif %}>OLED (Noir absolu)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label for="download_dir">Repertoire de telechargement</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<input type="text" name="download_dir" id="download_dir" value="{{ settings.download_dir }}"
|
|
class="btn btn-secondary" style="flex: 1; text-align: left; padding: 12px 15px;">
|
|
</div>
|
|
<small style="color: var(--text-dim); font-size: 12px; margin-top: 5px; display: block;">
|
|
Repertoire ou les fichiers seront telecharges (defaut: downloads/)
|
|
</small>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="margin-top: 20px; width: 100%;" onclick="event.preventDefault(); saveSettings();">
|
|
<i class="fas fa-save"></i> Enregistrer les preferences
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Content Filters -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">Filtres de contenu</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="recommendations_filter">Recommande pour vous : afficher</label>
|
|
<select name="recommendations_filter" id="recommendations_filter" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;" onchange="saveFilter('recommendations_filter', this.value)">
|
|
<option value="all" {% if settings.recommendations_filter == 'all' %}selected{% endif %}>Les deux (Animes + Series)</option>
|
|
<option value="anime" {% if settings.recommendations_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.recommendations_filter == 'series' %}selected{% endif %}>Series uniquement</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 15px;">
|
|
<label for="releases_filter">Dernieres sorties : afficher</label>
|
|
<select name="releases_filter" id="releases_filter" class="btn btn-secondary btn-block" style="text-align: left; padding: 12px 15px;" onchange="saveFilter('releases_filter', this.value)">
|
|
<option value="all" {% if settings.releases_filter == 'all' %}selected{% endif %}>Les deux (Animes + Series)</option>
|
|
<option value="anime" {% if settings.releases_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
|
|
<option value="series" {% if settings.releases_filter == 'series' %}selected{% endif %}>Series uniquement</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
<div class="settings-card card" style="margin-bottom: 30px; padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">Categories</h3>
|
|
<p style="color: var(--text-dim); font-size: 13px; margin-bottom: 15px;">Activez ou desactivez les categories. Au moins une doit rester active.</p>
|
|
|
|
<div style="display: flex; gap: 15px; flex-wrap: wrap;">
|
|
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 1.1rem;">Animes</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-dim);">Films et series anime</div>
|
|
</div>
|
|
<input type="checkbox" id="anime_enabled" {% if settings.anime_enabled %}checked{% endif %} onchange="toggleCategory('anime_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);">
|
|
</label>
|
|
|
|
<label class="toggle-card" style="flex: 1; min-width: 200px; padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 1.1rem;">Series TV</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-dim);">Series americaines et europeennes</div>
|
|
</div>
|
|
<input type="checkbox" id="series_enabled" {% if settings.series_enabled %}checked{% endif %} onchange="toggleCategory('series_enabled', this.checked)" style="width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary);">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Providers Management -->
|
|
<div class="settings-card card" style="padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid #ced0ce;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="margin: 0; color: var(--primary);">Disponibilite des Fournisseurs</h3>
|
|
<button class="btn btn-secondary btn-small" hx-post="/api/providers/health/check" hx-swap="none">
|
|
<i class="fas fa-sync-alt"></i> Forcer verification
|
|
</button>
|
|
</div>
|
|
|
|
<div class="providers-settings-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px;">
|
|
{% for provider in providers %}
|
|
<div class="provider-status-card" style="padding: 15px; background: #ffffff; border-radius: 4px; border: 1px solid #ced0ce; display: flex; align-items: center; justify-content: space-between;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<span style="font-size: 1.5rem;">{{ provider.icon }}</span>
|
|
<div>
|
|
<div style="font-weight: 600;">{{ provider.name }}</div>
|
|
<div style="font-size: 0.75rem; display: flex; align-items: center; gap: 5px;">
|
|
<span class="status-dot" style="width: 8px; height: 8px; border-radius: 50%; background: {% if provider.status == 'up' %}var(--accent){% elif provider.status == 'down' %}var(--danger){% else %}#aaa{% endif %};"></span>
|
|
<span style="color: {% if provider.status == 'up' %}var(--accent){% elif provider.status == 'down' %}var(--danger){% else %}var(--text-dim){% endif %}; text-transform: uppercase; font-weight: 800;">
|
|
{{ provider.status | upper }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn {% if provider.enabled %}btn-secondary{% else %}btn-accent{% endif %} btn-sm"
|
|
hx-post="/api/settings/providers/{{ provider.id }}/toggle"
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#tab-settings > div', 'refresh-settings')"
|
|
style="min-width: 100px;">
|
|
{% if provider.enabled %}Desactiver{% else %}Activer{% endif %}
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function getToken() {
|
|
return localStorage.getItem('auth_token') || null;
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const token = getToken();
|
|
if (!token) return;
|
|
|
|
const data = {
|
|
default_lang: document.getElementById('default_lang').value,
|
|
theme: document.getElementById('theme').value,
|
|
download_dir: document.getElementById('download_dir').value,
|
|
};
|
|
|
|
try {
|
|
const r = await fetch('/api/settings', {
|
|
method: 'PATCH',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
if (r.ok) {
|
|
showToast('Preferences enregistrees', 'success');
|
|
}
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function saveFilter(field, value) {
|
|
const token = getToken();
|
|
if (!token) return;
|
|
|
|
try {
|
|
const r = await fetch('/api/settings', {
|
|
method: 'PATCH',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ [field]: value })
|
|
});
|
|
if (r.ok) {
|
|
showToast('Filtre mis a jour', 'success');
|
|
}
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function toggleCategory(field, value) {
|
|
const token = getToken();
|
|
if (!token) return;
|
|
|
|
// Prevent disabling both
|
|
if (!value) {
|
|
const otherField = field === 'anime_enabled' ? 'series_enabled' : 'anime_enabled';
|
|
const otherCheckbox = document.getElementById(otherField);
|
|
if (otherCheckbox && !otherCheckbox.checked) {
|
|
showToast('Au moins une categorie doit rester active', 'error');
|
|
document.getElementById(field).checked = true;
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const r = await fetch('/api/settings', {
|
|
method: 'PATCH',
|
|
headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ [field]: value })
|
|
});
|
|
if (!r.ok) {
|
|
const err = await r.json().catch(() => ({}));
|
|
showToast(err.detail || 'Erreur', 'error');
|
|
document.getElementById(field).checked = !value;
|
|
} else {
|
|
showToast('Categorie ' + (value ? 'activee' : 'desactivee'), 'success');
|
|
}
|
|
} catch (e) {
|
|
showToast('Erreur: ' + e.message, 'error');
|
|
document.getElementById(field).checked = !value;
|
|
}
|
|
}
|
|
|
|
function showToast(message, type) {
|
|
const event = new CustomEvent('show-toast', { detail: { message, type } });
|
|
document.dispatchEvent(event);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.settings-form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
}
|
|
.status-dot {
|
|
display: inline-block;
|
|
}
|
|
</style>
|