Généralise le principe déjà en place pour l'édition d'objet (la page n'occupe jamais plus que la hauteur de la fenêtre, seules ses zones internes défilent) à toutes les pages restantes : liste des jeux, tableau de bord d'un jeu, écrans, éléments de jeu, variables, nouvel objet, formulaire de données, tableau des données d'un objet. Seuls l'éditeur d'écran/d'élément et l'aperçu jouable restent en dehors (déjà exclus par leur propre gabarit plein écran, ou pas concernés). Nouveau gabarit générique à une colonne (body.pageBody + .content-page + .scrollArea) sur le même principe que .content-objectEdit, plus une variante .formScroll pour un formulaire long à défilement interne (liste de champs d'un nouvel objet, formulaire de données) tout en gardant les boutons d'action toujours visibles. Les listes/tableaux remplacés par le format dense .fieldsTable (déjà utilisé pour le tableau de bord) pour rester cohérent et afficher plus de lignes à l'écran. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
119 lines
4.3 KiB
HTML
119 lines
4.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ definition.name }} — {{ game.name }}{% endblock %}
|
|
{% block content_class %}content-page{% endblock %}
|
|
{% block body_class %}pageBody{% endblock %}
|
|
{% block breadcrumb %}
|
|
<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
|
|
<li class="is-active"><a>{{ definition.name }}</a></li>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<h1 class="title">{{ definition.name }}
|
|
<a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=definition.id) }}" title="Modifier cet objet">✏️</a>
|
|
</h1>
|
|
<p class="hint mb-4">Table SQL : {{ definition.table_name }} — {{ definition.fields|length }} champ(s)</p>
|
|
|
|
{% if referenced_by %}
|
|
<div class="warningBanner">
|
|
⚠️ D'autres objets ont une relation vers « {{ definition.name }} » :
|
|
{{ referenced_by|map(attribute='name')|join(', ') }}.
|
|
La suppression de cet objet est bloquée tant que ces relations existent.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if blocked_row_id %}
|
|
<div class="warningBanner">
|
|
⚠️ Impossible de supprimer l'entrée #{{ blocked_row_id }} : elle est référencée par
|
|
{% for ref in blocked_row_refs %}{{ ref.count }} entrée(s) de « {{ ref.definition_name }} » (champ « {{ ref.field_name }} »){% if not loop.last %}, {% endif %}{% endfor %}.
|
|
Modifie ou supprime d'abord ces entrées.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<a class="addBtn" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
|
|
|
|
<h2>Données enregistrées</h2>
|
|
<div class="scrollArea">
|
|
{% if rows %}
|
|
{% macro row_field_display(f, r) %}
|
|
{%- if f.type == 'relation' -%}
|
|
{{ relation_labels.get(f.id, {}).get(r[(f.name|colname) ~ '_id'], '—') }}
|
|
{%- elif f.type == 'booleen' -%}
|
|
{{ 'Oui' if r[f.name|colname] else 'Non' }}
|
|
{%- else -%}
|
|
{{ r[f.name|colname] }}
|
|
{%- endif -%}
|
|
{% endmacro %}
|
|
<div class="fieldsTableWrap">
|
|
<table class="table is-fullwidth is-hoverable dataTable fieldsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
{% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for r in rows %}
|
|
<tr>
|
|
<td>{{ r.id }}</td>
|
|
{% for f in definition.fields %}
|
|
<td>{{ row_field_display(f, r) }}</td>
|
|
{% endfor %}
|
|
<td>
|
|
<div class="buttons is-inline-flex are-small">
|
|
<button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
|
|
<a class="button is-small" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
|
|
<form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
|
|
onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
|
|
<button type="submit" class="button is-small is-danger">🗑️</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% for r in rows %}
|
|
<div class="modal" id="rowDetail{{ r.id }}">
|
|
<div class="modal-background" onclick="closeRowDetail({{ r.id }})"></div>
|
|
<div class="modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Entrée #{{ r.id }}</p>
|
|
<button class="delete" aria-label="Fermer" onclick="closeRowDetail({{ r.id }})"></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
{% for f in definition.fields %}
|
|
<div class="rowDetailField">
|
|
<div class="rowDetailLabel">{{ f.name }}</div>
|
|
<div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="hint">Aucune donnée enregistrée pour l'instant.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function openRowDetail(id) {
|
|
var modal = document.getElementById('rowDetail' + id);
|
|
if (modal) modal.classList.add('is-active');
|
|
}
|
|
function closeRowDetail(id) {
|
|
var modal = document.getElementById('rowDetail' + id);
|
|
if (modal) modal.classList.remove('is-active');
|
|
}
|
|
if (!window.__forgeRowDetailEscBound) {
|
|
window.__forgeRowDetailEscBound = true;
|
|
document.addEventListener('keydown', function (e) {
|
|
if (e.key !== 'Escape') return;
|
|
document.querySelectorAll('.modal.is-active').forEach(function (m) { m.classList.remove('is-active'); });
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|