Obvody šipky

app/Model/ObvodFacade.php

@@ -67,6 +67,28 @@ final class ObvodFacade
         return array_map(static fn(Row $radek): string => (string) $radek->SKUPINA, $radky);
     }
 
+    /**
+     * Předchozí a další existující obvod podle čísla.
+     * Čísla nemusí jít po sobě.
+     *
+     * @return array{predchozi: int|null, dalsi: int|null}
+     */
+    public function getSousede(int $id): array
+    {
+        $prazdne = ['predchozi' => null, 'dalsi' => null];
+        $radky = $this->database->fetchAll('SELECT ID FROM OBVOD ORDER BY CISLO, ID');
+        $ids = array_map(static fn(Row $radek): int => (int) $radek->ID, $radky);
+        $index = array_search($id, $ids, true);
+        if ($index === false) {
+            return $prazdne;
+        }
+
+        return [
+            'predchozi' => $index > 0 ? $ids[$index - 1] : null,
+            'dalsi' => $index < count($ids) - 1 ? $ids[$index + 1] : null,
+        ];
+    }
+
     public function vyberSkupinu(?string $pozadovana, ?string $ulozena): string
     {
         $skupiny = $this->getSkupiny();

app/Presentation/Obvod/ObvodPresenter.php

@@ -91,7 +91,12 @@ final class ObvodPresenter extends BasePresenter
 
     public function renderView(int $id = null): void
     {
+        $sousede = $id === null
+            ? ['predchozi' => null, 'dalsi' => null]
+            : $this->obvod->getSousede($id);
         $this->template->obvod = $this->obvod->getObvod($id);
+        $this->template->predchozi = $sousede['predchozi'];
+        $this->template->dalsi = $sousede['dalsi'];
         $this->template->zaznamy = $this->zaznam->getZaznamyObvodu($id);
         $this->template->zvestovateleJson = json_encode(
             array_values($this->zaznam->getZvestovatele()),

app/Presentation/Obvod/view.latte

@@ -3,7 +3,21 @@
 <div class="platno detail">
     <header class="lista">
         <div class="detail-identita">
+            <div class="detail-prechod">
+                <a n:if="$predchozi" n:href="view id: $predchozi" class="detail-sipka" aria-label="Předchozí obvod">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </a>
+                <span n:if="!$predchozi" class="detail-sipka is-disabled" aria-disabled="true" aria-label="Předchozí obvod není">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 5.5 8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </span>
                 <span class="detail-cislo">{$obvod->CISLO}</span>
+                <a n:if="$dalsi" n:href="view id: $dalsi" class="detail-sipka" aria-label="Další obvod">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.5 16 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </a>
+                <span n:if="!$dalsi" class="detail-sipka is-disabled" aria-disabled="true" aria-label="Další obvod není">
+                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 5.5 16 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </span>
+            </div>
             <div>
                 <h1 class="lista-nadpis">{$obvod->NAZEV}</h1>
                 <p class="lista-popis">Skupina {$obvod->SKUPINA}</p>

www/css/base.css

@@ -878,6 +878,48 @@ body:has(#map[data-max]) {
     min-width: 0;
 }
 
+.detail-prechod {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.7rem;
+    flex: 0 0 auto;
+}
+
+.detail-sipka {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    border: 2px solid #1d4f91;
+    background: #fff;
+    color: #1d4f91;
+    text-decoration: none;
+    box-shadow: 0 4px 10px rgba(29, 79, 145, 0.16);
+}
+
+.detail-sipka svg {
+    width: 1.35rem;
+    height: 1.35rem;
+}
+
+.detail-sipka:hover,
+.detail-sipka:focus-visible {
+    background: #2652a8;
+    color: #fff;
+}
+
+.detail-sipka.is-disabled {
+    border-color: #c5d0dc;
+    background: #f4f7fb;
+    color: #b0bec5;
+    box-shadow: none;
+    pointer-events: none;
+}
+
 .detail-cislo {
     display: flex;
     align-items: center;