d7ba1195d4
Acasa = ecran de import (tab Import scos, ?tab=import->Acasa). Bara status compacta pe 2 randuri cu bife accesibile (glife + text) + data formatata. 'Coada'->'Trimiteri': coloane RO, stare umana, detaliu la click in panou dedicat. Mapari pe 3 sectiuni (de rezolvat / op salvate / formate coloane), Cont doar cheie+creds. Filtrare Trimiteri, corectie inline needs_data cu re-enqueue + detectie coliziune idempotency, badge contoare pe tab-uri. Helper pur partajat payload_view.py (web + GET /v1/prezentari). Backend trimitere (worker/idempotenta/mapping/schema) neatins. 483 teste. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<!-- Nav cont: link admin (doar pentru admini) + logout -->
|
|
<div style="display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px; flex-wrap:wrap;">
|
|
{% if is_admin %}<a class="cardlink" href="/admin">Panou admin</a>{% endif %}
|
|
<form method="post" action="/logout" style="display:inline; margin:0;">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<button type="submit" style="background:var(--card); color:var(--muted); border-color:var(--line);">Iesi din cont</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Bara de status (US-002): mereu vizibila, deasupra tab-bar-ului -->
|
|
<div id="status-bar" class="status-bar card"
|
|
hx-get="/_fragments/status"
|
|
hx-trigger="load, every 15s"
|
|
hx-swap="outerHTML">
|
|
<div class="empty muted" style="padding:8px 0;">se incarca starea…</div>
|
|
</div>
|
|
|
|
<!-- Tab-bar: navigare intre sectiuni -->
|
|
<div role="tablist" class="tab-bar" aria-label="Sectiuni dashboard">
|
|
{% set tabs = [
|
|
("acasa", "Acasa", "tab-acasa"),
|
|
("coada", "Trimiteri", "tab-coada"),
|
|
("mapari", "Mapari", "tab-mapari"),
|
|
("cont", "Cont", "tab-cont"),
|
|
("nomenclator", "Nomenclator", "tab-nomenclator")
|
|
] %}
|
|
{% for tab_id, tab_label, tab_elem_id in tabs %}
|
|
{% set badge = (badges.get(tab_id, 0) if badges else 0) %}
|
|
<a id="{{ tab_elem_id }}"
|
|
role="tab"
|
|
href="/?tab={{ tab_id }}"
|
|
aria-selected="{{ 'true' if active_tab == tab_id else 'false' }}"
|
|
aria-controls="tab-panel"
|
|
{% if badge %}aria-label="{{ tab_label }}, {{ badge }} necesita atentie"{% endif %}
|
|
class="tab-link{% if active_tab == tab_id %} tab-activ{% endif %}"
|
|
tabindex="{{ '0' if active_tab == tab_id else '-1' }}"
|
|
hx-get="/_fragments/{{ tab_id }}"
|
|
hx-target="#tab-panel"
|
|
hx-swap="innerHTML"
|
|
hx-push-url="/?tab={{ tab_id }}">{{ tab_label }}{% if badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ badge }}</span>{% endif %}</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Panou activ: randat server-side la full load; HTMX inlocuieste continutul la click pe tab -->
|
|
<div id="tab-panel" role="tabpanel" aria-labelledby="tab-{{ active_tab }}" class="tab-panel">
|
|
{{ panel_html | safe }}
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
/* Navigare cu sageti intre tab-uri (ARIA pattern) */
|
|
var tablist = document.querySelector('[role="tablist"]');
|
|
if (!tablist) return;
|
|
var tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
|
|
tablist.addEventListener('keydown', function(e) {
|
|
var idx = tabs.indexOf(document.activeElement);
|
|
if (idx === -1) return;
|
|
var next = -1;
|
|
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
next = (idx + 1) % tabs.length;
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
next = (idx - 1 + tabs.length) % tabs.length;
|
|
} else if (e.key === 'Home') {
|
|
next = 0;
|
|
} else if (e.key === 'End') {
|
|
next = tabs.length - 1;
|
|
}
|
|
if (next !== -1) {
|
|
e.preventDefault();
|
|
tabs[next].focus();
|
|
}
|
|
});
|
|
|
|
/* La click pe tab: actualizeaza aria-selected + tabindex */
|
|
tabs.forEach(function(tab) {
|
|
tab.addEventListener('click', function() {
|
|
tabs.forEach(function(t) {
|
|
t.setAttribute('aria-selected', 'false');
|
|
t.setAttribute('tabindex', '-1');
|
|
t.classList.remove('tab-activ');
|
|
});
|
|
tab.setAttribute('aria-selected', 'true');
|
|
tab.setAttribute('tabindex', '0');
|
|
tab.classList.add('tab-activ');
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
{% endblock %}
|