4a1d28749a
Reorganizeaza interfata web pe trei principii, fara a atinge backend-ul de trimitere (worker, mapping, idempotency, masina de stari neatinse): - US-001 app/web/labels.py: modul pur stari tehnice -> text uman + clasa CSS - US-002 bara status /_fragments/status: microcopy uman, defalcare blocate, scoped cont - US-003 shell 6 tab-uri (Acasa/Import/Coada/Mapari/Cont/Nomenclator): deep-link ?tab=, panou activ randat server-side, fragmente inactive lazy, ARIA real - US-004 stepper import 4 pasi (pur vizual; hx-target + csrf pastrate) - US-005 Acasa onboarding checklist auto-bifat + colaps + empty states prietenoase Reparat in cursul VERIFY/CLOSE: izolare teste (reset ratelimit._hits in fixturi), regresie avertisment "cont in asteptare de activare" (re-introdus in bara status), culori hardcodate -> variabile paleta. 434 teste pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
93 lines
3.3 KiB
HTML
93 lines
3.3 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"),
|
|
("import", "Import", "tab-import"),
|
|
("coada", "Coada", "tab-coada"),
|
|
("mapari", "Mapari", "tab-mapari"),
|
|
("cont", "Cont", "tab-cont"),
|
|
("nomenclator", "Nomenclator", "tab-nomenclator")
|
|
] %}
|
|
{% for tab_id, tab_label, tab_elem_id in tabs %}
|
|
<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"
|
|
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 }}</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 %}
|