root
5d23a3d663
- Manually triggered database table creation for AppSettingsTable. - Refactored HTMX triggers in index.html to prevent redundant loading. - Improved provider toggle mechanism with explicit refresh-settings event. - Simplified router responses for better HTMX integration.
84 lines
4.8 KiB
HTML
84 lines
4.8 KiB
HTML
<div class="settings-container section-container">
|
|
<div class="section-header">
|
|
<h2>⚙️ Paramètres</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 rgba(255,255,255,0.05);">
|
|
<h3 style="margin-bottom: 20px; color: var(--primary);">Général</h3>
|
|
|
|
<form hx-patch="/api/settings" hx-swap="none" hx-ext="json-enc" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="default_lang">Langue par défaut</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 (Version Originale Sous-Titrée Français)</option>
|
|
<option value="vf" {% if settings.default_lang == 'vf' %}selected{% endif %}>VF (Version Française)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 20px;">
|
|
<label for="theme">Thème</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>
|
|
|
|
<button type="submit" class="btn btn-primary" style="margin-top: 20px; width: 100%;">
|
|
<i class="fas fa-save"></i> Enregistrer les préférences
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Providers Management -->
|
|
<div class="settings-card card" style="padding: 25px; background: var(--bg-card); border-radius: var(--card-radius); border: 1px solid rgba(255,255,255,0.05);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h3 style="margin: 0; color: var(--primary);">Disponibilité 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 vérification
|
|
</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: rgba(255,255,255,0.02); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); 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 %}Désactiver{% else %}Activer{% endif %}
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.settings-form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
}
|
|
.status-dot {
|
|
display: inline-block;
|
|
box-shadow: 0 0 5px currentColor;
|
|
}
|
|
</style>
|