Cochez les cadres a proposer aux utilisateurs.
+Aucun cadre importe
+Choisissez le style d'animation pour le 3... 2... 1...
+Aucun cadre importe
'; + return; + } + + for (const nom of data.tous) { + const div = document.createElement('div'); + div.className = 'cadre-item'; + + const cb = document.createElement('input'); + cb.type = 'checkbox'; + cb.checked = data.actifs.includes(nom); + cb.onchange = () => majCadresActifs(); + + const img = document.createElement('img'); + img.src = `/assets/overlays/${nom}`; + img.alt = nom; + + const span = document.createElement('span'); + span.textContent = nom.replace('.png', ''); + + div.appendChild(cb); + div.appendChild(img); + div.appendChild(span); + liste.appendChild(div); + } +} + +async function majCadresActifs() { + const items = document.querySelectorAll('.cadre-item input[type="checkbox"]'); + const noms = document.querySelectorAll('.cadre-item span'); + const actifs = []; + items.forEach((cb, i) => { + if (cb.checked) actifs.push(noms[i].textContent + '.png'); + }); + await apiPost('/api/cadres', { actifs }); +} + +async function uploaderCadre() { + const input = document.getElementById('input-cadre'); + if (!input.files.length) return; + + const formData = new FormData(); + formData.append('fichier', input.files[0]); + + await fetch('/api/upload/overlay', { method: 'POST', body: formData }); + input.value = ''; + chargerCadres(); + afficherStatut('Cadre importe', 'succes'); +} + +// === ANIMATIONS === + +let animationChoisie = 'classique'; + +async function chargerAnimations() { + const anims = await apiGet('/api/animations'); + animationChoisie = config.camera?.animation_compte_a_rebours || 'classique'; + + const liste = document.getElementById('liste-animations'); + liste.innerHTML = ''; + + for (const [id, nom] of Object.entries(anims)) { + const div = document.createElement('div'); + div.className = 'anim-option' + (id === animationChoisie ? ' actif' : ''); + div.textContent = nom; + div.onclick = () => choisirAnimation(id, div); + liste.appendChild(div); + } +} + +async function choisirAnimation(id, el) { + animationChoisie = id; + document.querySelectorAll('.anim-option').forEach(e => e.classList.remove('actif')); + el.classList.add('actif'); + + await apiPost('/api/config', { + camera: { animation_compte_a_rebours: id }, + }); + + testerAnimation(); +} + +const EMOJI_MAP = { 3: '🤪', 2: '😱', 1: '🔥' }; + +function testerAnimation() { + const chiffre = document.getElementById('preview-anim-chiffre'); + let count = 3; + + function afficher() { + if (animationChoisie === 'emoji') { + chiffre.textContent = EMOJI_MAP[count] || count; + } else { + chiffre.textContent = count; + } + chiffre.className = 'anim-chiffre anim-' + animationChoisie; + // Force reflow pour relancer l'animation + chiffre.style.animation = 'none'; + chiffre.offsetHeight; + chiffre.className = 'anim-chiffre anim-' + animationChoisie; + + count--; + if (count > 0) setTimeout(afficher, 800); + } + + afficher(); +} + +// === FONCTIONNALITES === + +function chargerFonctionnalites() { + const fonc = config.fonctionnalites || {}; + for (const [id, cle] of Object.entries(TOGGLES_MAP)) { + const el = document.getElementById(id); + if (el) el.checked = fonc[cle] !== false; + } setupToggleListeners(); } @@ -74,7 +334,6 @@ function setupToggleListeners() { for (const [id, cle] of Object.entries(TOGGLES_MAP)) { const el = document.getElementById(id); if (!el) continue; - // Retirer les anciens listeners en clonant const nouveau = el.cloneNode(true); el.parentNode.replaceChild(nouveau, el); nouveau.addEventListener('change', () => { @@ -83,6 +342,15 @@ function setupToggleListeners() { } } +// === EVENEMENT === + +function chargerEvenementAdmin() { + const event = config.evenement || {}; + setValue('admin-nom-event', event.nom); + setValue('admin-couleur-primaire', event.couleur_primaire || '#e91e63'); + setValue('admin-couleur-secondaire', event.couleur_secondaire || '#ffffff'); +} + async function sauvegarderEvenement() { await apiPost('/api/config', { evenement: { @@ -90,13 +358,21 @@ async function sauvegarderEvenement() { couleur_primaire: getValue('admin-couleur-primaire'), couleur_secondaire: getValue('admin-couleur-secondaire'), }, - camera: { - compte_a_rebours: parseInt(getValue('admin-car')) || 3, - }, }); afficherStatut('Evenement sauvegarde', 'succes'); } +// === EMAIL === + +function chargerEmailAdmin() { + const email = config.email || {}; + setValue('admin-smtp-host', email.smtp_host); + setValue('admin-smtp-port', email.smtp_port || 587); + setValue('admin-smtp-user', email.smtp_user); + setValue('admin-smtp-pass', email.smtp_password); + setValue('admin-expediteur', email.expediteur); +} + async function sauvegarderEmail() { await apiPost('/api/config', { email: { @@ -110,45 +386,43 @@ async function sauvegarderEmail() { afficherStatut('Email sauvegarde', 'succes'); } +// === GALERIE === + +async function chargerGalerieAdmin() { + const compteur = await apiGet('/api/galerie/compteur'); + document.getElementById('admin-nb-photos').textContent = compteur.photos_prises || 0; + document.getElementById('admin-nb-exports').textContent = compteur.exports || 0; + setValue('admin-url-galerie', (config.qr_code || {}).url_galerie); +} + async function sauvegarderGalerie() { await apiPost('/api/config', { qr_code: { url_galerie: getValue('admin-url-galerie') }, - impression: { - imprimante: getValue('admin-imprimante'), - copies: parseInt(getValue('admin-copies')) || 1, - }, }); afficherStatut('Configuration sauvegardee', 'succes'); } -async function reconnecterCamera() { - const resultat = await apiPost('/api/camera/reconnecter'); - document.getElementById('admin-camera-statut').textContent = - resultat.connectee ? 'Connectee' : 'Deconnectee'; -} - function confirmerViderGalerie() { if (confirm('Supprimer TOUTES les photos ? Cette action est irreversible.')) { apiPost('/api/galerie/vider').then(() => { afficherStatut('Galerie videe', 'succes'); - chargerAdmin(); + chargerGalerieAdmin(); }); } } +// === SYSTEME === + function confirmerRedemarrage() { - if (confirm('Redemarrer le systeme ?')) { - apiPost('/api/systeme/redemarrer'); - } + if (confirm('Redemarrer le systeme ?')) apiPost('/api/systeme/redemarrer'); } function confirmerExtinction() { - if (confirm('Eteindre le systeme ?')) { - apiPost('/api/systeme/eteindre'); - } + if (confirm('Eteindre le systeme ?')) apiPost('/api/systeme/eteindre'); } -// Utilitaires +// === Utilitaires === + function setValue(id, val) { const el = document.getElementById(id); if (el) el.value = val || ''; diff --git a/frontend/js/app.js b/frontend/js/app.js index 52a94be..86f9984 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -52,6 +52,7 @@ function allerA(ecran) { photosSession = []; photoFinale = null; arreterPreview(); + majCompteurAccueil(); } else if (ecran === 'capture') { lancerCapture(); } else if (ecran === 'galerie') { diff --git a/frontend/js/camera.js b/frontend/js/camera.js index e0cda62..79f4793 100644 --- a/frontend/js/camera.js +++ b/frontend/js/camera.js @@ -3,16 +3,17 @@ let previewActif = false; let previewInterval = null; +const EMOJI_CAR = { 3: '🤪', 2: '😱', 1: '🔥' }; + // --- Preview live --- function lancerPreview() { if (previewActif) return; previewActif = true; - // Demander des previews via WebSocket previewInterval = setInterval(() => { if (previewActif) wsEnvoyer({ type: 'preview' }); - }, 100); // ~10 fps + }, 100); } function arreterPreview() { @@ -23,7 +24,6 @@ function arreterPreview() { } } -// Recevoir les previews wsOnMessage('preview', (msg) => { if (!previewActif) return; const img = document.getElementById('img-preview'); @@ -35,6 +35,7 @@ wsOnMessage('preview', (msg) => { async function lancerCapture() { photosSession = []; lancerPreview(); + majCompteurAccueil(); const nbPhotos = getNombrePhotos(); const compteurEl = document.getElementById('capture-compteur'); @@ -44,27 +45,28 @@ async function lancerCapture() { compteurEl.textContent = `Photo ${i + 1} / ${nbPhotos}`; } - // Compte a rebours await compteARebours(); - - // Flash afficherFlash(); - // Capture arreterPreview(); const resultat = await apiPost('/api/capturer'); + + if (resultat.erreur) { + // Limite atteinte ou erreur + allerA('accueil'); + return; + } + if (resultat.nom) { photosSession.push(resultat.nom); } - // Reprendre le preview si encore des photos a prendre if (i < nbPhotos - 1) { lancerPreview(); await pause(500); } } - // Traitement selon le mode await traiterCapture(); } @@ -78,15 +80,24 @@ async function compteARebours() { const conteneur = document.getElementById('compte-a-rebours'); const chiffre = document.getElementById('chiffre-car'); const duree = config.camera?.compte_a_rebours || 3; + const anim = config.camera?.animation_compte_a_rebours || 'classique'; conteneur.classList.remove('cache'); for (let i = duree; i > 0; i--) { - chiffre.textContent = i; - // Re-trigger animation + // Contenu selon le type d'animation + if (anim === 'emoji') { + chiffre.textContent = EMOJI_CAR[i] || i; + } else { + chiffre.textContent = i; + } + + // Appliquer l'animation + chiffre.className = 'anim-chiffre anim-' + anim; chiffre.style.animation = 'none'; - chiffre.offsetHeight; // force reflow - chiffre.style.animation = 'pop 0.5s ease'; + chiffre.offsetHeight; + chiffre.className = 'anim-chiffre anim-' + anim; + await pause(1000); } @@ -109,7 +120,6 @@ async function traiterCapture() { } if (modeActuel === 'multi') { - // Creer le strip/collage const mode = config.multi_shot?.mode || 'strip'; let resultat; if (mode === 'strip') { @@ -122,7 +132,6 @@ async function traiterCapture() { afficherPreviewPhoto('/data/exports/' + resultat.nom); } } else { - // Photo simple - aller au preview avec filtres photoFinale = photosSession[0]; afficherPreviewPhoto('/data/photos/' + photosSession[0]); } @@ -134,17 +143,28 @@ function afficherPreviewPhoto(chemin) { document.getElementById('photo-resultat').src = chemin; document.getElementById('photo-partage').src = chemin; - // Charger les filtres si photo simple if (modeActuel === 'simple' && config.fonctionnalites?.filtres) { chargerFiltres(); } - - // Charger les overlays if (config.fonctionnalites?.overlays) { chargerOverlays(); } } +// --- Compteur accueil --- + +async function majCompteurAccueil() { + const etat = await apiGet('/api/compteur'); + const el = document.getElementById('compteur-accueil'); + if (etat.actif) { + el.classList.remove('cache'); + document.getElementById('compteur-restant').textContent = etat.restantes; + document.getElementById('compteur-limite').textContent = etat.limite; + } else { + el.classList.add('cache'); + } +} + function pause(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }