Smart-Dashboard/restricted/reiter.php

<?php
/**
 * Reiter - eine Bauart für die ganze Seite.
 *
 * Vorher gab es drei: die Etagenreiter über den Automatiken (Home) mit einem
 * eigenen switchTab() in JavaScript, die Gerätegruppen im Raum-Modal als
 * Bootstrap-Reiter mit eigener CSS-Klasse, und die Einstellungsseite noch
 * einmal anders. Drei Markups, zwei Verhaltensweisen, ein Sonderaussehen -
 * und jede Änderung am Erscheinungsbild wäre dreimal zu machen gewesen.
 *
 * Hier steht nur noch, wie ein Reiter aussieht und heißt. Umgeschaltet wird
 * von Bootstrap (data-bs-toggle="tab"); eigenes JavaScript dafür gibt es
 * nicht mehr. Wer sich den offenen Reiter merken will, setzt "merken" - das
 * übernimmt reiterMerken() in js/solar/common.js für alle Leisten der Seite.
 *
 * Ein Reiter ist:
 *
 *   id      Kürzel, taucht in den Element-Ids und in der Adresse auf
 *   titel   Beschriftung
 *   symbol  optional ein Bootstrap-Icon ("bi-currency-euro")
 *   titel2  optional der lange Name als Sprechblase (Etagenkürzel!)
 *   inhalt  nur für reiterBlock(): der fertige Inhalt der Fläche
 *
 * Aufrufarten - je nachdem, ob der Inhalt schon als Text vorliegt:
 *
 *   reiterBlock($reiter, $opt)        Leiste und Flächen am Stück
 *   reiterLeiste($reiter, $opt)       nur die Leiste ...
 *   reiterFlaecheAuf($id, $opt)       ... und die Flächen einzeln, wenn der
 *   reiterFlaecheZu()                 Inhalt im Template steht
 */

/**
 * Die Kennung eines Reiters. Der Name der Leiste steht davor, damit zwei
 * Leisten auf derselben Seite sich nicht dieselben Ids teilen.
 */
function reiterId($opt, $id, $anhang = "")
{
    return ($opt["name"] ?? "reiter") . "-" . $id . $anhang;
}

/**
 * Welcher Reiter offen ist: der ausdrücklich genannte, sonst der erste.
 *
 * Als eigene Funktion, weil Leiste und Flächen dieselbe Antwort brauchen -
 * und weil "der erste" bei den Flächen sonst noch einmal ausgerechnet würde.
 */
function reiterAktiv($reiter, $opt)
{
    $ids = array_column($reiter, "id");
    $aktiv = $opt["aktiv"] ?? null;
    return ($aktiv !== null && in_array($aktiv, $ids, true)) ? $aktiv : ($ids[0] ?? null);
}

/**
 * Die Leiste.
 *
 * $opt:
 *   name     Namensraum der Ids; sollte gesetzt sein, sonst "reiter"
 *   aktiv    id des offenen Reiters (Vorgabe: der erste)
 *   merken   true: der offene Reiter steht in der Adresse und übersteht ein
 *            Neuladen. Nur eine Leiste je Seite sollte das tun.
 *   schmal   true: kleinere Reiter, die waagerecht scrollen statt umzubrechen
 *            - für enge Stellen wie das Raum-Modal
 *   klasse   zusätzliche Klassen für die Leiste
 */
function reiterLeiste($reiter, $opt = [])
{
    if (count($reiter) < 2 && empty($opt["immer"])) {
        // Ein einzelner Reiter beschriftet nur sich selbst. Das Raum-Modal
        // hat oft nur eine Gerätegruppe - dort ist die Leiste dann weg.
        return "";
    }
    $aktiv = reiterAktiv($reiter, $opt);
    $klassen = "nav nav-tabs reiter"
             . (!empty($opt["schmal"]) ? " reiter-schmal" : "")
             . (isset($opt["klasse"]) ? " " . $opt["klasse"] : "");

    $html = "<ul class='" . $klassen . "' role='tablist'"
          . (!empty($opt["merken"]) ? " data-reiter-merken='" . htmlspecialchars($opt["name"] ?? "reiter") . "'" : "")
          . ">";
    foreach ($reiter as $r) {
        $offen = $r["id"] === $aktiv;
        $html .= "<li class='nav-item' role='presentation'>"
               . "<button class='nav-link" . ($offen ? " active" : "") . "' type='button' role='tab'"
               . " id='" . reiterId($opt, $r["id"], "-tab") . "'"
               . " data-bs-toggle='tab' data-bs-target='#" . reiterId($opt, $r["id"]) . "'"
               . " data-reiter='" . htmlspecialchars($r["id"]) . "'"
               . " aria-controls='" . reiterId($opt, $r["id"]) . "'"
               . " aria-selected='" . ($offen ? "true" : "false") . "'"
               . (isset($r["titel2"]) ? " title='" . htmlspecialchars($r["titel2"]) . "'" : "")
               . ">"
               // Der Abstand zum Text kommt aus dem Stylesheet, nicht aus
               // einer Hilfsklasse: in der schmalen Fassung ist er kleiner.
               . (isset($r["symbol"]) ? "<i class='bi " . htmlspecialchars($r["symbol"]) . "'></i>" : "")
               . htmlspecialchars($r["titel"])
               . "</button></li>";
    }
    return $html . "</ul>";
}

/** Anfang einer Fläche - der Inhalt steht danach im Template. */
function reiterFlaecheAuf($id, $opt = [])
{
    $offen = ($opt["aktiv"] ?? null) === $id;
    return "<div class='tab-pane fade" . ($offen ? " show active" : "") . "'"
         . " id='" . reiterId($opt, $id) . "' role='tabpanel'"
         . " aria-labelledby='" . reiterId($opt, $id, "-tab") . "'>";
}

/** Ende einer Fläche. Eigene Funktion, damit im Template kein nacktes </div> steht. */
function reiterFlaecheZu()
{
    return "</div>";
}

/**
 * Leiste und Flächen am Stück - für Aufrufer, die den Inhalt schon als Text
 * haben (siehe zeichneGruppen() im Raum-Modal).
 */
function reiterBlock($reiter, $opt = [])
{
    $opt["aktiv"] = reiterAktiv($reiter, $opt);
    $html = reiterLeiste($reiter, $opt) . "<div class='tab-content'>";
    foreach ($reiter as $r) {
        $html .= reiterFlaecheAuf($r["id"], $opt) . ($r["inhalt"] ?? "") . reiterFlaecheZu();
    }
    return $html . "</div>";
}