photobooth/frontend/js/app.js

/* Application principale - Routeur SPA et logique globale */

let config = {};
let modeActuel = 'simple';
let photosSession = [];  // Photos de la session en cours
let photoFinale = null;   // Photo finale (avec effets)
let ecranActuel = 'accueil';

// --- Initialisation ---

async function init() {
  config = await apiGet('/api/config');
  appliquerConfig();
  setupEcranAccueil();
  setupModes();
  setupOnglets();
}

function appliquerConfig() {
  const event = config.evenement || {};
  const fonc = config.fonctionnalites || {};

  // Couleurs
  document.documentElement.style.setProperty('--primaire', event.couleur_primaire || '#e91e63');
  document.documentElement.style.setProperty('--secondaire', event.couleur_secondaire || '#ffffff');

  // Nom evenement
  const h1 = document.getElementById('nom-evenement');
  if (h1) h1.textContent = event.nom || 'Photobooth';

  // Visibilite des modes
  toggleVisible('btn-multi', fonc.multi_shot);
  toggleVisible('btn-imprimer', fonc.impression);
  toggleVisible('btn-email', fonc.email);
  toggleVisible('btn-qr', fonc.qr_code);

  // Media d'accueil (video/gif en boucle)
  appliquerMediaAccueil(event.media_accueil);
}

function appliquerMediaAccueil(media) {
  const video = document.getElementById('accueil-video');
  const gif = document.getElementById('accueil-gif');
  const animDefaut = document.getElementById('accueil-animation-defaut');

  // Reset
  video.classList.add('cache');
  gif.classList.add('cache');
  video.pause();
  video.src = '';
  gif.src = '';

  if (!media) {
    // Pas de media, afficher l'animation par defaut
    animDefaut.classList.remove('cache');
    return;
  }

  animDefaut.classList.add('cache');
  const ext = media.split('.').pop().toLowerCase();

  if (ext === 'gif') {
    gif.src = `/assets/animations/${media}`;
    gif.classList.remove('cache');
  } else {
    video.src = `/assets/animations/${media}`;
    video.classList.remove('cache');
    video.play().catch(() => {});
  }
}

// --- Navigation ---

function allerA(ecran) {
  const tous = document.querySelectorAll('.ecran');
  tous.forEach(e => e.classList.remove('actif'));

  const cible = document.getElementById('ecran-' + ecran);
  if (cible) {
    cible.classList.add('actif');
    ecranActuel = ecran;
  }

  // Actions au changement d'ecran
  if (ecran === 'accueil') {
    photosSession = [];
    photoFinale = null;
    arreterPreview();
    majCompteurAccueil();
  } else if (ecran === 'capture') {
    lancerCapture();
  } else if (ecran === 'galerie') {
    chargerGalerie();
  } else if (ecran === 'admin') {
    chargerAdmin();
  }
}

function recommencer() {
  photosSession = [];
  photoFinale = null;
  allerA('mode');
}

// --- Ecran accueil ---

function setupEcranAccueil() {
  const accueil = document.getElementById('ecran-accueil');

  // Toucher pour commencer (ignorer le bouton admin et le popup)
  accueil.addEventListener('click', (e) => {
    if (e.target.closest('.btn-admin')) return;
    allerA('mode');
  });
}

// --- Admin : icone + mot de passe ---

const MDP_ADMIN = '1234';

function ouvrirAdmin() {
  const popup = document.getElementById('popup-mdp');
  const input = document.getElementById('input-mdp-admin');
  popup.classList.remove('cache');
  input.value = '';
  document.getElementById('mdp-erreur').classList.add('cache');
}

function fermerPopupMdp() {
  document.getElementById('popup-mdp').classList.add('cache');
  document.getElementById('input-mdp-admin').value = '';
}

function paveTouche(chiffre) {
  const input = document.getElementById('input-mdp-admin');
  input.value += chiffre;
}

function paveEffacer() {
  const input = document.getElementById('input-mdp-admin');
  input.value = input.value.slice(0, -1);
}

function validerMdpAdmin() {
  const input = document.getElementById('input-mdp-admin');
  if (input.value === MDP_ADMIN) {
    fermerPopupMdp();
    allerA('admin');
  } else {
    document.getElementById('mdp-erreur').classList.remove('cache');
    input.value = '';
    input.focus();
  }
}

// Valider avec Entree
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !document.getElementById('popup-mdp').classList.contains('cache')) {
    validerMdpAdmin();
  }
});

// --- Modes ---

function setupModes() {
  document.querySelectorAll('.btn-mode').forEach(btn => {
    btn.addEventListener('click', () => {
      modeActuel = btn.dataset.mode;
      allerA('capture');
    });
  });
}

// --- Onglets admin ---

function setupOnglets() {
  document.querySelectorAll('.onglet').forEach(onglet => {
    onglet.addEventListener('click', () => {
      document.querySelectorAll('.onglet').forEach(o => o.classList.remove('actif'));
      document.querySelectorAll('.admin-panneau').forEach(p => p.classList.remove('actif'));
      onglet.classList.add('actif');
      const panneau = document.getElementById('panneau-' + onglet.dataset.onglet);
      if (panneau) panneau.classList.add('actif');
    });
  });
}

// --- Utilitaires ---

async function apiGet(url) {
  const resp = await fetch(url);
  return resp.json();
}

async function apiPost(url, data = {}) {
  const resp = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return resp.json();
}

function toggleVisible(id, visible) {
  const el = document.getElementById(id);
  if (el) {
    if (visible === false) el.classList.add('cache');
    else el.classList.remove('cache');
  }
}

function afficherStatut(message, type = 'succes') {
  const el = document.getElementById('statut-partage');
  el.textContent = message;
  el.className = 'statut-partage ' + type;
  el.classList.remove('cache');
  setTimeout(() => el.classList.add('cache'), 4000);
}

// WebSocket : mise a jour config en temps reel
wsOnMessage('config_maj', (msg) => {
  config = msg.config;
  appliquerConfig();
});

// Demarrage
document.addEventListener('DOMContentLoaded', init);