Kufrik/app/UI/@layout.latte

248 lines
9.6 KiB
Plaintext

<!DOCTYPE html>
<html lang="cs" xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kufřík</title>
<!-- Bootstrap 5 CSS & Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
{* jquery *}
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
{* naše vlastní styly *}
<link href="{$basePath}/css/layout.css?v={$appVersion ?? '1.0'}" rel="stylesheet">
</head>
<body>
<!-- 1. HORNÍ LIŠTA -->
<nav class="navbar navbar-expand-lg navbar-dark app-header">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="bi bi-briefcase-fill me-2"></i>Kufřík</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<!-- Hlavní kategorie - viditelné pouze pro přihlášené -->
{if $user->isLoggedIn()}
<ul class="navbar-nav me-auto nav nav-tabs" id="mainCategoryTabs" role="tablist">
<!-- FAKTURY -->
<li class="nav-item" role="presentation">
<button n:class="nav-link, $presenter->isLinkCurrent('Faktura:*') ? active"
id="cat-invoices-tab" data-bs-toggle="tab" data-bs-target="#toolbar-invoices" type="button" role="tab">
<i class="bi bi-file-earmark-text me-1"></i> Faktury
</button>
</li>
<!-- ZÁKAZNÍCI -->
<li class="nav-item" role="presentation">
<button n:class="nav-link, $presenter->isLinkCurrent('Zakaznik:*') ? active"
id="cat-customers-tab" data-bs-toggle="tab" data-bs-target="#toolbar-customers" type="button" role="tab">
<i class="bi bi-people me-1"></i> Zákazníci
</button>
</li>
<!-- MOJE OSVČ -->
<li class="nav-item" role="presentation">
<button n:class="nav-link, $presenter->isLinkCurrent('Firma:*') ? active"
id="cat-profile-tab" data-bs-toggle="tab" data-bs-target="#toolbar-profile" type="button" role="tab">
<i class="bi bi-building me-1"></i> Moje OSVČ
</button>
</li>
<!-- KUFŘÍK -->
<li class="nav-item" role="presentation">
<button n:class="nav-link, $presenter->isLinkCurrent('Uzivatel:*') ? active"
id="cat-briefcase-tab" data-bs-toggle="tab" data-bs-target="#toolbar-briefcase" type="button" role="tab">
<i class="bi bi-box me-1"></i> Kufřík
</button>
</li>
</ul>
{/if}
<!-- Uživatel a Odhlášení / Přihlášení -->
<div class="user-panel ms-auto">
{if $user->isLoggedIn()}
{* Přihlášený uživatel *}
<span class="text-white d-none d-sm-inline me-2">
<i class="bi bi-person-circle me-1"></i> {$user->identity->jmeno ?: $user->identity->email}
</span>
<a n:href="Sign:out" class="btn btn-sm btn-outline-light" title="Odhlásit se">
<i class="bi bi-box-arrow-right me-1"></i> Odhlásit
</a>
{else}
{* Odhlášený / Nepřihlášený uživatel *}
<a n:href="Sign:in" class="btn btn-sm btn-outline-light" title="Přihlásit se">
<i class="bi bi-box-arrow-in-right me-1"></i> Přihlásit se
</a>
{/if}
</div>
</div>
</div>
</nav>
<!-- 2. AKČNÍ LIŠTA (PODKATEGORIE - zobrazeno jen přihlášeným) -->
{if $user->isLoggedIn()}
<div class="action-toolbar">
<div class="container-fluid">
<!-- Tlačítko pro mobilní rozbalení -->
<div class="d-lg-none d-flex justify-content-between align-items-center">
<span class="fw-bold text-muted small">Nástroje</span>
<button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#actionToolbarCollapse">
<i class="bi bi-three-dots-vertical"></i> Podkategorie
</button>
</div>
<div class="collapse d-lg-block mt-2 mt-lg-0" id="actionToolbarCollapse">
<div class="tab-content" id="actionToolbarContent">
<!-- FAKTURY -->
<div n:class="tab-pane, fade, $presenter->isLinkCurrent('Faktura:*') ? 'show active'" id="toolbar-invoices" role="tabpanel">
<div class="toolbar-group">
<div class="action-buttons">
<button type="button" class="btn btn-outline-primary btn-action">
<i class="bi bi-folder-fill"></i>
<span>Seznam faktur</span>
</button>
<button type="button" class="btn btn-success btn-action">
<i class="bi bi-plus-square-fill"></i>
<span>Přidat fakturu</span>
</button>
<button type="button" class="btn btn-outline-secondary btn-action" onclick="window.print()">
<i class="bi bi-printer-fill"></i>
<span>Tisk</span>
</button>
<div class="v-divider d-none d-sm-block"></div>
<button type="button" class="btn btn-outline-secondary btn-action">
<i class="bi bi-bar-chart-line-fill text-warning"></i>
<span>Grafy</span>
</button>
<button type="button" class="btn btn-outline-secondary btn-action">
<i class="bi bi-file-earmark-pdf-fill text-danger"></i>
<span>Tiskové sestavy</span>
</button>
</div>
<!-- Filtr pro Faktury -->
<form class="filter-panel ms-auto ms-lg-0">
<i class="bi bi-funnel-fill text-muted fs-5 ms-1"></i>
<select class="form-select form-select-sm" style="width: 85px;">
<option selected>2026</option>
<option>2025</option>
</select>
<select class="form-select form-select-sm" style="width: 140px;">
<option selected>(všechny měsíce)</option>
<option>Leden</option>
<option>Únor</option>
</select>
</form>
</div>
</div>
<!-- ZÁKAZNÍCI -->
<div n:class="tab-pane, fade, $presenter->isLinkCurrent('Zakaznik:*') ? 'show active'" id="toolbar-customers" role="tabpanel">
<div class="action-buttons">
<button type="button" class="btn btn-outline-primary btn-action">
<i class="bi bi-people-fill"></i>
<span>Seznam</span>
</button>
<button type="button" class="btn btn-success btn-action">
<i class="bi bi-person-plus-fill"></i>
<span>Přidat zákazníka</span>
</button>
</div>
</div>
<!-- MOJE OSVČ -->
<div n:class="tab-pane, fade, $presenter->isLinkCurrent('Firma:*') ? 'show active'" id="toolbar-profile" role="tabpanel">
<div class="action-buttons">
<a n:href="Firma:edit" n:class="btn, btn-action, $presenter->isLinkCurrent('Firma:edit') ? 'btn-primary active' : 'btn-outline-primary'">
<i class="bi bi-pencil-square"></i>
<span>Upravit moje OSVČ</span>
</a>
<button type="button" class="btn btn-outline-secondary btn-action">
<i class="bi bi-gear-fill"></i>
<span>Nastavení</span>
</button>
</div>
</div>
<!-- KUFŘÍK -->
<div n:class="tab-pane, fade, $presenter->isLinkCurrent('Uzivatel:*') ? 'show active'" id="toolbar-briefcase" role="tabpanel">
<div class="action-buttons">
<a n:href="Uzivatel:edit" n:class="btn, btn-action, $presenter->isLinkCurrent('Uzivatel:edit') ? 'btn-primary active' : 'btn-outline-primary'">
<i class="bi bi-person-gear"></i>
<span>Profil a připojení</span>
</a>
<button type="button" class="btn btn-outline-info btn-action">
<i class="bi bi-question-circle-fill"></i>
<span>Nápověda</span>
</button>
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary btn-action">
<i class="bi bi-facebook"></i>
<span>Stránky - FB</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/if}
<!-- Toasty -->
<div n:foreach="$flashes as $flash" class="alert alert-{$flash->type} alert-dismissible fade show auto-dismiss mb-1 shadow-sm" role="alert">
<i class="bi bi-check-circle-fill me-2"></i>
<strong>{$flash->message}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Najde všechny alerty s třídou auto-dismiss
const alerts = document.querySelectorAll('.alert.auto-dismiss');
alerts.forEach(alert => {
setTimeout(() => {
// Přidá plynulé vytracení přes Bootstrap třídu nebo JS transition
alert.classList.remove('show');
alert.classList.add('fade');
// Po dokončení animace prvek úplně odstraní z DOMu
setTimeout(() => alert.remove(), 500);
}, 3000); // 3000 ms = 3 vteřiny
});
});
</script>
<!-- 3. HLAVNÍ OBSAH -->
<main class="main-content">
<div class="content-card">
{include content}
</div>
</main>
<!-- 4. PATKA -->
<footer class="app-footer">
<div class="d-flex align-items-center gap-2">
<span class="spinner-grow spinner-grow-sm text-success" style="width: 8px; height: 8px;" role="status"></span>
<span>Kufřík v{$appVersion ?? '1.0'}</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>