Videos didactiques multi-etapes : wizard operateur + admin dynamique
Backend : 8 endpoints API (upload/delete/reorder/toggle/label/stream/creer etape),
stockage data/videos/{situation}/etape_XX.mp4, config.json toggle+labels,
6 situations par defaut, migration auto anciens fichiers flat.
Admin : panneau dynamique avec toggle, etapes reordonnables, labels editables.
Wizard booth : overlay plein ecran, video loop par etape, bouton validation sequentielle.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -908,40 +908,21 @@
|
||||
Appuyer sur Tester...
|
||||
</div>
|
||||
<div class="admin-panneau" id="panneau-videos-admin">
|
||||
<h3>Videos de situation</h3>
|
||||
<p class="aide">Uploadez des videos pour chaque situation. Elles seront jouees automatiquement sur l'ecran du booth.</p>
|
||||
<div class="video-situations" id="video-situations-liste">
|
||||
<div class="video-situation-bloc" data-situation="montage">
|
||||
<h4>Montage / Installation</h4>
|
||||
<div class="video-situation-current" id="video-sit-montage">Aucune video</div>
|
||||
<input type="file" id="input-video-montage" accept=".mp4,.webm,.mov" class="input-fichier">
|
||||
<button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('montage')">Importer</button>
|
||||
<button class="btn-danger btn-petit" onclick="supprimerVideoSituation('montage')">Supprimer</button>
|
||||
</div>
|
||||
<div class="video-situation-bloc" data-situation="depannage_imprimante">
|
||||
<h4>Depannage imprimante</h4>
|
||||
<div class="video-situation-current" id="video-sit-depannage_imprimante">Aucune video</div>
|
||||
<input type="file" id="input-video-depannage_imprimante" accept=".mp4,.webm,.mov" class="input-fichier">
|
||||
<button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('depannage_imprimante')">Importer</button>
|
||||
<button class="btn-danger btn-petit" onclick="supprimerVideoSituation('depannage_imprimante')">Supprimer</button>
|
||||
</div>
|
||||
<div class="video-situation-bloc" data-situation="bourrage">
|
||||
<h4>Bourrage papier</h4>
|
||||
<div class="video-situation-current" id="video-sit-bourrage">Aucune video</div>
|
||||
<input type="file" id="input-video-bourrage" accept=".mp4,.webm,.mov" class="input-fichier">
|
||||
<button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('bourrage')">Importer</button>
|
||||
<button class="btn-danger btn-petit" onclick="supprimerVideoSituation('bourrage')">Supprimer</button>
|
||||
</div>
|
||||
<div class="video-situation-bloc" data-situation="rechargement">
|
||||
<h4>Rechargement papier/ruban</h4>
|
||||
<div class="video-situation-current" id="video-sit-rechargement">Aucune video</div>
|
||||
<input type="file" id="input-video-rechargement" accept=".mp4,.webm,.mov" class="input-fichier">
|
||||
<button class="btn-secondaire btn-petit" onclick="uploaderVideoSituation('rechargement')">Importer</button>
|
||||
<button class="btn-danger btn-petit" onclick="supprimerVideoSituation('rechargement')">Supprimer</button>
|
||||
<h3>Videos didactiques</h3>
|
||||
<p class="aide">Chaque situation peut contenir plusieurs etapes video. L'operateur verra les videos en sequence : chaque etape boucle jusqu'a validation avant de passer a la suivante.</p>
|
||||
<div id="video-situations-liste"></div>
|
||||
<div style="margin-top:1rem;padding:0.75rem;background:#1a1a2e;border-radius:8px;border:1px dashed #444">
|
||||
<h4 style="margin:0 0 0.5rem">Ajouter une situation</h4>
|
||||
<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
|
||||
<input type="text" id="nouvelle-situation-label" placeholder="Nom de la situation" style="flex:1;min-width:150px;padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #555;background:#111;color:#fff">
|
||||
<button class="btn-action btn-petit" onclick="creerSituation()">+ Ajouter</button>
|
||||
</div>
|
||||
</div>
|
||||
<h4 style="margin-top:1.5rem">Apercu</h4>
|
||||
<video id="video-situation-preview" style="width:100%;max-height:300px;border-radius:8px;background:#111" controls></video>
|
||||
<div style="margin-top:1rem">
|
||||
<button class="btn-action" onclick="lancerWizardDepuisAdmin()">▶ Tester le wizard sur le booth</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-panneau" id="panneau-surprise-admin">
|
||||
@@ -981,6 +962,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wizard video didactique plein ecran -->
|
||||
<div id="wizard-video" class="popup-overlay cache" style="z-index:9999;background:rgba(0,0,0,0.97);display:flex;flex-direction:column;align-items:center;justify-content:center">
|
||||
<div id="wizard-titre" style="color:#fff;font-size:1.8rem;font-weight:700;margin-bottom:0.3rem;text-align:center"></div>
|
||||
<div id="wizard-etape-info" style="color:#aaa;font-size:1rem;margin-bottom:1rem"></div>
|
||||
<video id="wizard-video-player" muted playsinline loop style="width:90%;max-height:65vh;border-radius:12px;background:#000"></video>
|
||||
<div id="wizard-etape-label" style="color:#ccc;font-size:1.1rem;margin-top:0.8rem;text-align:center;min-height:1.5rem"></div>
|
||||
<button id="wizard-btn-ok" onclick="wizardEtapeSuivante()" style="margin-top:1.5rem;padding:1.2rem 3rem;font-size:1.5rem;font-weight:700;border:none;border-radius:16px;background:#4caf50;color:#fff;cursor:pointer;min-width:280px">OK, c'est bon !</button>
|
||||
<button onclick="fermerWizard()" style="margin-top:0.8rem;padding:0.6rem 1.5rem;font-size:0.9rem;border:none;border-radius:8px;background:#333;color:#aaa;cursor:pointer">Quitter</button>
|
||||
</div>
|
||||
|
||||
<!-- Popup sélection cadre impression -->
|
||||
<div id="popup-cadre-impression" class="popup-overlay cache">
|
||||
<div class="popup-box popup-box-cadre">
|
||||
@@ -1066,6 +1057,6 @@
|
||||
<script src="/js/effects.js?v=4"></script>
|
||||
<script src="/js/gallery.js?v=4"></script>
|
||||
<script src="/js/share.js?v=8"></script>
|
||||
<script src="/js/admin.js?v=11"></script>
|
||||
<script src="/js/admin.js?v=12"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user