227 lines
10 KiB
HTML
227 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Actions — JH Photomaton{% endblock %}
|
|
|
|
{% block nav_links %}
|
|
<a href="/admin">Dashboard</a>
|
|
<a href="/admin/gallery">Galerie</a>
|
|
<a href="/admin/actions" class="active">Actions</a>
|
|
<a href="/admin/print">Impression</a>
|
|
<a href="/admin/settings">Réglages</a>
|
|
<a href="/admin/events">Événements</a>
|
|
<a href="/admin/logout">Déconnexion</a>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<h1 class="page-title">Gestion des actions & mapping bouton</h1>
|
|
|
|
<!-- Mapping clics → actions -->
|
|
<div class="section">
|
|
<div class="card-title">Mapping bouton → actions photobooth-app</div>
|
|
<div class="card">
|
|
<p class="text-sm text-muted mb-2">Associe chaque nombre de clics à une action dans photobooth-app. L'index correspond à la position dans la liste des actions (0 = première action).</p>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Clics</th>
|
|
<th>Label affiché</th>
|
|
<th>Index action (photobooth)</th>
|
|
<th>Action correspondante</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for n in range(1, 5) %}
|
|
{% set mapping = button_mapping.get(n) or button_mapping.get(n|string) or {} %}
|
|
<tr>
|
|
<td class="font-bold">
|
|
{% if n == 1 %}1 clic{% else %}{{ n }} clics{% endif %}
|
|
</td>
|
|
<td>
|
|
<input type="text" id="label-{{ n }}" class="form-control" style="max-width:200px"
|
|
value="{{ mapping.get('label', '') }}" placeholder="Label…">
|
|
</td>
|
|
<td>
|
|
<select id="index-{{ n }}" class="form-control" style="max-width:80px">
|
|
{% for i in range(pb_actions|length) %}
|
|
<option value="{{ i }}" {% if mapping.get('photobooth_index') == i %}selected{% endif %}>{{ i }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</td>
|
|
<td class="text-sm text-muted" id="action-name-{{ n }}">
|
|
{% set idx = mapping.get('photobooth_index', 0) %}
|
|
{% if pb_actions and idx < pb_actions|length %}
|
|
{{ pb_actions[idx].name }}
|
|
{% else %}—{% endif %}
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-ghost btn-sm" onclick="testAction({{ n }})">▶ Test</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<button class="btn btn-primary mt-2" onclick="saveMapping()">💾 Sauvegarder le mapping</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions photobooth-app -->
|
|
<div class="section">
|
|
<div class="card-title">Actions image photobooth-app ({{ pb_actions|length }} au total)</div>
|
|
<div id="actions-list">
|
|
{% for action in pb_actions %}
|
|
<div class="card mb-1" id="action-{{ loop.index0 }}" style="margin-bottom:0.75rem">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<div>
|
|
<span class="badge badge-muted text-xs">Action {{ loop.index0 }}</span>
|
|
<span class="font-bold" style="margin-left:0.5rem">{{ action.name }}</span>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleEdit({{ loop.index0 }})">✏ Modifier</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="triggerAction({{ loop.index0 }})">▶ Déclencher</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Infos résumées -->
|
|
<div class="flex gap-2 text-sm text-muted" id="summary-{{ loop.index0 }}">
|
|
<span>⏱ {{ action.jobcontrol.get('countdown_capture', '?') }}s</span>
|
|
{% if action.processing.get('img_frame_file') %}
|
|
<span>🖼 {{ action.processing.img_frame_file.split('/')[-1] }}</span>
|
|
{% endif %}
|
|
{% if action.processing.get('remove_background') %}
|
|
<span class="badge badge-info">Remove BG</span>
|
|
{% endif %}
|
|
{% if action.processing.get('img_background_file') %}
|
|
<span>🌄 {{ action.processing.img_background_file.split('/')[-1] }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Formulaire d'édition (masqué par défaut) -->
|
|
<div class="edit-form mt-2" id="edit-{{ loop.index0 }}" style="display:none;border-top:1px solid var(--border);padding-top:1rem">
|
|
<div class="grid-2">
|
|
<div class="form-group">
|
|
<label class="form-label">Nom de l'action</label>
|
|
<input type="text" class="form-control" id="e-name-{{ loop.index0 }}" value="{{ action.name }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Countdown (secondes)</label>
|
|
<input type="number" class="form-control" id="e-countdown-{{ loop.index0 }}"
|
|
value="{{ action.jobcontrol.get('countdown_capture', 5) }}" min="1" max="30" step="0.5">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Cadre (img_frame_file)</label>
|
|
<input type="text" class="form-control" id="e-frame-{{ loop.index0 }}"
|
|
value="{{ action.processing.get('img_frame_file', '') or '' }}" placeholder="userdata/…/cadre.png">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Fond (img_background_file)</label>
|
|
<input type="text" class="form-control" id="e-bg-{{ loop.index0 }}"
|
|
value="{{ action.processing.get('img_background_file', '') or '' }}" placeholder="userdata/…/fond.jpg">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Filtre image</label>
|
|
<select class="form-control" id="e-filter-{{ loop.index0 }}">
|
|
<option value="original" {% if action.processing.get('image_filter','original') == 'original' %}selected{% endif %}>original</option>
|
|
<option value="FilterPilgram2.earlybird" {% if 'earlybird' in (action.processing.get('image_filter','')) %}selected{% endif %}>Earlybird</option>
|
|
<option value="FilterPilgram2.reyes" {% if 'reyes' in (action.processing.get('image_filter','')) %}selected{% endif %}>Reyes</option>
|
|
<option value="FilterPilgram2.moon" {% if 'moon' in (action.processing.get('image_filter','')) %}selected{% endif %}>Moon</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label flex items-center gap-1">
|
|
<input type="checkbox" id="e-rmbg-{{ loop.index0 }}" {% if action.processing.get('remove_background') %}checked{% endif %}>
|
|
Remove Background (MODNet — ~400Mo RAM)
|
|
</label>
|
|
<label class="form-label flex items-center gap-1 mt-1">
|
|
<input type="checkbox" id="e-bgena-{{ loop.index0 }}" {% if action.processing.get('img_background_enable') %}checked{% endif %}>
|
|
Activer le fond
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<button class="btn btn-primary btn-sm" onclick="saveAction({{ loop.index0 }})">💾 Sauvegarder</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleEdit({{ loop.index0 }})">Annuler</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state"><div class="icon">⚙️</div>Aucune action configurée dans photobooth-app</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// ── Formulaires d'édition ─────────────────────────────────────────────────────
|
|
function toggleEdit(idx) {
|
|
const el = document.getElementById('edit-' + idx);
|
|
const sum = document.getElementById('summary-' + idx);
|
|
const open = el.style.display === 'none';
|
|
el.style.display = open ? 'block' : 'none';
|
|
sum.style.display = open ? 'none' : 'flex';
|
|
}
|
|
|
|
async function saveAction(idx) {
|
|
const updates = {
|
|
name: document.getElementById('e-name-' + idx).value,
|
|
countdown_capture: parseFloat(document.getElementById('e-countdown-' + idx).value),
|
|
img_frame_file: document.getElementById('e-frame-' + idx).value || null,
|
|
img_background_file: document.getElementById('e-bg-' + idx).value || null,
|
|
image_filter: document.getElementById('e-filter-' + idx).value,
|
|
remove_background: document.getElementById('e-rmbg-' + idx).checked,
|
|
img_background_enable: document.getElementById('e-bgena-' + idx).checked,
|
|
};
|
|
try {
|
|
await api('PUT', `/api/actions/photobooth/${idx}`, updates);
|
|
showToast('✅ Action sauvegardée — redémarrage photobooth-app requis', 'success', 6000);
|
|
toggleEdit(idx);
|
|
} catch(e) {
|
|
showToast('❌ Erreur sauvegarde', 'error');
|
|
}
|
|
}
|
|
|
|
async function triggerAction(idx) {
|
|
if (!confirm(`Déclencher l'action ${idx} (prise de photo) ?`)) return;
|
|
try {
|
|
await api('POST', `/api/actions/trigger/${idx}`);
|
|
showToast(`▶ Action ${idx} déclenchée`, 'info');
|
|
} catch(e) { showToast('Erreur déclenchement', 'error'); }
|
|
}
|
|
|
|
// ── Mapping bouton ─────────────────────────────────────────────────────────────
|
|
async function saveMapping() {
|
|
const mapping = {};
|
|
for (let n = 1; n <= 4; n++) {
|
|
mapping[n] = {
|
|
label: document.getElementById('label-' + n).value,
|
|
photobooth_index: parseInt(document.getElementById('index-' + n).value),
|
|
};
|
|
}
|
|
try {
|
|
await api('PUT', '/api/actions/mapping', mapping);
|
|
showToast('✅ Mapping sauvegardé', 'success');
|
|
} catch(e) { showToast('❌ Erreur sauvegarde mapping', 'error'); }
|
|
}
|
|
|
|
async function testAction(n) {
|
|
const idx = parseInt(document.getElementById('index-' + n).value);
|
|
if (!confirm(`Déclencher l'action ${idx} pour tester le ${n} clic ?`)) return;
|
|
try {
|
|
await api('POST', `/api/actions/trigger/${idx}`);
|
|
showToast(`▶ Test ${n} clic → action ${idx}`, 'info');
|
|
} catch(e) { showToast('Erreur', 'error'); }
|
|
}
|
|
|
|
// Mise à jour du nom de l'action quand on change l'index
|
|
{% for n in range(1, 5) %}
|
|
document.getElementById('index-{{ n }}').addEventListener('change', function() {
|
|
const names = {{ pb_actions | map(attribute='name') | list | tojson }};
|
|
document.getElementById('action-name-{{ n }}').textContent = names[this.value] || '—';
|
|
});
|
|
{% endfor %}
|
|
</script>
|
|
{% endblock %}
|