Einstellungsseite: Reiter, Kachelwerte und Geraeteliste

Die Einstellungen bestanden aus einer einzigen langen Spalte mit den
Preistabellen. Sie bekommt Reiter, und darin zwei neue Flaechen: was die
Kacheln der Startseite anzeigen, und welche Geraete es ueberhaupt gibt.

Reiter gab es vorher dreimal in drei Ausfuehrungen - die Etagen ueber den
Automatismen mit eigenem switchTab(), die Geraetegruppen im Raum-Modal mit
eigener CSS-Klasse, und die Einstellungsseite noch einmal anders. Jetzt baut
restricted/reiter.php alle drei; umgeschaltet wird von Bootstrap, den offenen
Reiter merkt reiterMerken() in der Adresse.

Kachelwerte: was auf einer Kachel steht, stand fest in rooms.php. Die neue
Tabelle kachelWerte (solarLog_kacheln.sql) ueberschreibt das je Raum, die
Maske waehlt die Messwerte aus demselben Katalog wie der Automatik-Editor -
nach Etage sortiert, die Geraete des eigenen Raums oben. Fehlt die Tabelle,
zeigt jede Kachel weiter ihre Vorgabe.

Geraete: die Zuordnung Geraet -> Raum war ein Modal, erreichbar ueber ein
Zahnrad neben den Automatismen. Sie ist eine Einstellung und steht jetzt dort,
zusammen mit dem, was fehlte: seit wann ein Geraet nichts mehr meldet, in
welchen Automatiken es steckt, und ein Loeschknopf. Letzterer ist noetig, weil
der Suchlauf nichts loescht - er legt an und frischt auf, damit die Automatiken
ihre Zustands-Ids behalten; ein abgebautes Geraet bliebe sonst fuer immer
stehen. Geloescht wird nur, was in keiner Automatik vorkommt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

restricted/roomControls.php

@@ -19,6 +19,10 @@
  * die hier gesetzt werden.
  */
 
+// Die Geraetegruppen werden als Reiter gezeichnet - eine Bauart fuer die
+// ganze Seite, siehe restricted/reiter.php.
+require_once(__DIR__ . "/reiter.php");
+
 /**
  * Was das Kommando schaltet: "ein", "aus", "um" - oder null, wenn es kein
  * Schaltkommando ist.
@@ -209,38 +213,29 @@ function zeichneGruppen($gruppen, $fertig = [])
         return "";
     }
 
-    $html = "";
-    if (count($vorhanden) > 1) {
-        $html .= "<ul class='nav nav-tabs flex-nowrap mb-2 raum-tabs' role='tablist'>";
-        $erster = true;
-        foreach ($vorhanden as $form => $titel) {
-            $html .= "<li class='nav-item' role='presentation'>"
-                   . "<button class='nav-link" . ($erster ? " active" : "") . "' type='button'"
-                   . " data-bs-toggle='tab' data-bs-target='#raumtab-" . $form . "' role='tab'>"
-                   . "<i class='bi " . $titel[1] . "'></i>"
-                   . "<span class='ms-1'>" . htmlspecialchars($titel[0]) . "</span>"
-                   . "</button></li>";
-            $erster = false;
-        }
-        $html .= "</ul>";
-    }
-
-    $html .= "<div class='tab-content'>";
-    $erster = true;
+    // Aus den Gruppen werden Reiter. Wie sie aussehen und wie umgeschaltet
+    // wird, steht in restricted/reiter.php - hier nur, was drinsteht.
+    $reiter = [];
     foreach ($vorhanden as $form => $titel) {
-        $html .= "<div class='tab-pane fade" . ($erster ? " show active" : "") . "'"
-               . " id='raumtab-" . $form . "' role='tabpanel'>";
+        $inhalt = "";
         if (isset($fertig[$form])) {
-            $html .= $fertig[$form];
+            $inhalt = $fertig[$form];
         } else {
             foreach ($gruppen[$form] as $d) {
-                $html .= zeichneGeraet($d, $form);
+                $inhalt .= zeichneGeraet($d, $form);
             }
         }
-        $html .= "</div>";
-        $erster = false;
+        $reiter[] = [
+            "id"     => $form,
+            "titel"  => $titel[0],
+            "symbol" => $titel[1],
+            "inhalt" => $inhalt,
+        ];
     }
-    return $html . "</div>";
+    // "schmal", weil das Modal eng ist: kleinere Reiter, die waagerecht
+    // scrollen statt umzubrechen.
+    return reiterBlock($reiter, ["name" => "raumtab", "schmal" => true,
+                                 "klasse" => "mb-2"]);
 }
 
 // ===========================================================================