Refonte de l'interface : sauvegarde automatique, menu d'état unique et panneau aujourd'hui

- Chaque heure validée enregistre le jour (plus de bouton ✓), avec un témoin
  « enregistré » et conservation du focus entre les champs
- Les boutons MA/AM/J/F/AS deviennent un bouton d'état unique à pastilles
  ouvrant un menu déroulant (congés, férié, astreinte)
- Panneau Aujourd'hui : sortie cible en grand et progression travaillé/dû
  de la semaine, rafraîchis à chaque saisie
- Polish général : coins arrondis, ombres douces, hiérarchie des soldes,
  états de focus visibles

💘 Generated with Crush

Assisted-by: Crush:glm-5.2
This commit is contained in:
Jacquin Antoine
2026-09-09 20:34:27 +02:00
parent 791b48b320
commit e9983a28c7
8 changed files with 565 additions and 98 deletions

View File

@ -18,6 +18,11 @@
<span class="jour-nom">{{ nom }}</span>
<span class="jour-date">{{ j.date[8:] }}/{{ j.date[5:7] }}</span>
{% if j.ferie %}<span class="ferie-badge" title="Jour férié : dû 0, astreinte comptée 0h00 → 0h00">férié</span>{% endif %}
<!-- Auto-enregistrement : la sauvegarde se déclenche à la validation d'un
champ du jour (voir script de semaine.html), ce témoin en suit l'état. -->
<span class="autosave" id="save-{{ j.date }}" data-date="{{ j.date }}"
hx-post="/pointage/{{ j.date }}" hx-swap="none"
hx-include="[data-date='{{ j.date }}']" hx-trigger="save-day"></span>
</td>
<td class="c-matin">
@ -84,38 +89,46 @@
</span>
</td>
<td class="col-save">
<button class="btn-valider"
hx-post="/pointage/{{ j.date }}"
hx-swap="none"
hx-include="[data-date='{{ j.date }}']"
title="Enregistrer">✓</button>
</td>
<td class="col-conge" data-label="Congé">
<div id="cg-btn-{{ j.date }}">
<div class="conge-btns">
<button hx-post="/conge/{{ j.date }}/matin"
hx-swap="none"
class="btn-cg {% if 'matin' in j.conge %}on{% endif %}"
title="Congé matin">MA</button>
<button hx-post="/conge/{{ j.date }}/aprem"
hx-swap="none"
class="btn-cg {% if 'aprem' in j.conge %}on{% endif %}"
title="Congé après-midi">AM</button>
<button hx-post="/conge/{{ j.date }}/jour"
hx-swap="none"
class="btn-cg btn-jour {% if 'jour' in j.conge %}jour-on{% endif %}"
title="Journée entière">J</button>
<button hx-post="/ferie/{{ j.date }}/toggle"
hx-swap="none"
class="btn-cg btn-ferie {% if j.ferie %}ferie-on{% endif %}"
title="Jour férié : dû 0, astreinte comptée 0h00 → 0h00">F</button>
<button hx-post="/astreinte/{{ j.date }}/toggle"
hx-swap="none"
class="btn-cg btn-as {% if j.astreinte %}as-on{% endif %}"
title="Jour d'astreinte">AS</button>
</div>
<div id="cg-btn-{{ j.date }}" class="cg-cell">
<details class="cg-menu">
<summary class="cg-trigger" title="Congés, jour férié, astreinte">
<span class="cg-state">
{%- if 'jour' in j.conge %}<span class="cg-chip st-jour">J</span>{% endif -%}
{%- if 'matin' in j.conge %}<span class="cg-chip st-ma">MA</span>{% endif -%}
{%- if 'aprem' in j.conge %}<span class="cg-chip st-am">AM</span>{% endif -%}
{%- if j.ferie %}<span class="cg-chip st-ferie">F</span>{% endif -%}
{%- if j.astreinte %}<span class="cg-chip st-as">AS</span>{% endif -%}
{%- if not (j.conge or j.ferie or j.astreinte) %}<span class="cg-none">—</span>{% endif -%}
</span>
<span class="cg-caret">▾</span>
</summary>
<div class="cg-pop">
<button hx-post="/conge/{{ j.date }}/matin" hx-swap="none"
class="cg-opt{% if 'matin' in j.conge %} on{% endif %}">
<span class="cg-opt-chip ma">MA</span> Congé matin
</button>
<button hx-post="/conge/{{ j.date }}/aprem" hx-swap="none"
class="cg-opt{% if 'aprem' in j.conge %} on{% endif %}">
<span class="cg-opt-chip am">AM</span> Congé après-midi
</button>
<button hx-post="/conge/{{ j.date }}/jour" hx-swap="none"
class="cg-opt{% if 'jour' in j.conge %} on{% endif %}">
<span class="cg-opt-chip jour">J</span> Journée entière
</button>
<div class="cg-opt-sep"></div>
<button hx-post="/ferie/{{ j.date }}/toggle" hx-swap="none"
class="cg-opt{% if j.ferie %} on{% endif %}"
title="Jour férié : dû 0, astreinte comptée 0h00 → 0h00">
<span class="cg-opt-chip ferie">F</span> Jour férié
</button>
<button hx-post="/astreinte/{{ j.date }}/toggle" hx-swap="none"
class="cg-opt{% if j.astreinte %} on{% endif %}"
title="Jour d'astreinte (18h → 18h, ou 0h → 0h sam/dim/férié)">
<span class="cg-opt-chip as">AS</span> Jour d'astreinte
</button>
</div>
</details>
</div>
</td>
</tr>
@ -123,7 +136,7 @@
{% if j.astreinte_qualifiee %}
{% set nb_as = (j.astreinte_events or []) | length %}
<tr class="as-row{% if nom in ['Samedi', 'Dimanche'] %} we{% endif %}">
<td colspan="9">
<td colspan="8">
<div id="as-block-{{ j.date }}" class="as-block" data-date="{{ j.date }}" data-label="Astreinte">
<div class="as-head">
<button type="button" class="as-toggle" data-date="{{ j.date }}" aria-expanded="false"
@ -172,5 +185,5 @@
</td>
</tr>
{% else %}
<tr class="as-row{% if nom in ['Samedi', 'Dimanche'] %} we{% endif %}"><td colspan="9"><div id="as-block-{{ j.date }}" class="as-block"></div></td></tr>
<tr class="as-row{% if nom in ['Samedi', 'Dimanche'] %} we{% endif %}"><td colspan="8"><div id="as-block-{{ j.date }}" class="as-block"></div></td></tr>
{% endif %}