diff --git a/ajax/room.php b/ajax/room.php index beb5f95..d979de1 100644 --- a/ajax/room.php +++ b/ajax/room.php @@ -108,32 +108,35 @@ foreach ($katalog as $d) { $gruppen[$form][] = $d; } -echo "
"; - +// Die Heizung ist eine Gruppe wie die anderen, nur baut sie sich nicht aus +// einer Geraeteliste: ein Regler fuer den Raum statt einer Karte je Geraet. +$fertig = []; if ($hatThermostat) { - echo "
"; - echo "
"; - echo ""; - echo ""; - echo "
"; - echo ""; - // Der Ist-Zustand kommt live ueber MQTT, nicht aus der Datenbank - der - // Browser hoert ohnehin schon auf Raumtemp/#, und ein Wert von vorhin - // waere neben dem Regler nur irrefuehrend. - echo "
"; - echo " °C"; - echo " %rF"; - echo "heizt"; - echo "
"; - echo "
"; + $karte = "
" + . "
" + . "" + . "" + . "
" + . "" + // Der Ist-Zustand kommt live ueber MQTT, nicht aus der Datenbank - + // der Browser hoert ohnehin schon auf Raumtemp/#, und ein Wert von + // vorhin waere neben dem Regler nur irrefuehrend. + . "
" + . " °C" + . " %rF" + . "heizt" + . "
"; + $fertig["heizung"] = $karte; } -if (!$gruppen && !$hatThermostat) { +echo "
"; + +if (!$gruppen && !$fertig) { echo "

Diesem Raum ist noch nichts zugeordnet. " . "Das geht über das Haus-Symbol in der Karte „Automatismen“.

"; } -echo zeichneGruppen($gruppen); +echo zeichneGruppen($gruppen, $fertig); echo "
"; echo "
"; diff --git a/css/solar.css b/css/solar.css index 557e83c..a0a0bdd 100644 --- a/css/solar.css +++ b/css/solar.css @@ -118,21 +118,24 @@ input[type='range']::-webkit-slider-runnable-track { Erzeugt von restricted/roomControls.php, verdrahtet in js/solar/homeMQTT.js. -------------------------------------------------------------------------- */ -/* Die Geraetegruppen als Tabs. Auf einem Handy passen fuenf Beschriftungen - nicht nebeneinander - dann scrollt die Leiste seitwaerts, statt die Namen - umzubrechen. */ +/* Die Geraetegruppen als Reiter. Auf einem Handy passen fuenf + Beschriftungen nicht nebeneinander - dann scrollt die Leiste seitwaerts, + statt die Namen umzubrechen. Die durchgehende Linie unter den Reitern + darf dabei nicht mitscrollen, sie gehoert an den unteren Rand. */ .raum-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; + flex-wrap: nowrap; } .raum-tabs::-webkit-scrollbar { display: none; } .raum-tabs .nav-link { - padding: 0.25rem 0.6rem; + padding: 0.3rem 0.7rem; font-size: 0.8rem; white-space: nowrap; + border-bottom-color: transparent; } /* Waehrend ein Kommando unterwegs ist. Ein "Zu" an einer Jalousie dauert @@ -225,8 +228,10 @@ input[type='range']::-webkit-slider-runnable-track { } /* Schieberegler stehen dicht untereinander (Helligkeit, Farbe). Ohne den - Abstand kleben Beschriftung und Bahn aneinander. */ -.raum-regler + .raum-regler { + Abstand kleben Beschriftung und Bahn aneinander. + Die senkrechten Spalten stehen dagegen nebeneinander - dort wuerde der + Abstand die zweite Spalte um genau diese 0,35 rem tiefer setzen. */ +.raum-regler + .raum-regler:not(.raum-spalte) { margin-top: 0.35rem; } @@ -275,12 +280,16 @@ input[type='range']::-webkit-slider-runnable-track { .raum-jalousie { display: flex; align-items: stretch; - gap: 0.6rem; + justify-content: space-between; + gap: 0.4rem; } -/* Das Fensterbild nimmt den Platz zwischen Knoepfen und Reglern. */ +/* Das Fensterbild steht zwischen Knoepfen und Reglern - schmal, mit Luft + zu beiden Seiten. Der uebrige Platz verteilt sich auf die Zwischenraeume + (space-between an .raum-jalousie), statt das Bild breitzuziehen. */ .raum-jalousie .raum-lamellen { - flex: 1 1 auto; - min-width: 2.5rem; + flex: 0 1 5rem; + min-width: 2.2rem; + margin: 0 0.4rem; } .raum-jalousie .dropdown { align-self: flex-start; diff --git a/restricted/roomControls.php b/restricted/roomControls.php index 44d26d9..b92aebd 100644 --- a/restricted/roomControls.php +++ b/restricted/roomControls.php @@ -147,6 +147,7 @@ function raumGruppenTitel() { return [ "beschattung" => ["Beschattung", "bi-blinds"], + "heizung" => ["Heizung", "bi-thermometer-half"], "licht" => ["Licht", "bi-lightbulb"], "schalter" => ["Schalten", "bi-toggle-on"], "sonstiges" => ["Geräte", "bi-sliders"], @@ -160,12 +161,16 @@ function raumGruppenTitel() * Vorher standen sie untereinander, und man scrollte an drei Rollladen * vorbei, um zum Licht zu kommen. Bei nur einer Gruppe bleibt die Leiste * weg - ein einzelner Tab beschriftet nur sich selbst. + * + * $fertig sind Gruppen, deren Inhalt der Aufrufer schon gebaut hat und die + * nicht aus einer Geraeteliste entstehen - die Heizung ist so eine: ein + * Regler fuer den Raum, nicht eine Karte je Geraet. */ -function zeichneGruppen($gruppen) +function zeichneGruppen($gruppen, $fertig = []) { $vorhanden = []; foreach (raumGruppenTitel() as $form => $titel) { - if (!empty($gruppen[$form])) { + if (!empty($gruppen[$form]) || isset($fertig[$form])) { $vorhanden[$form] = $titel; } } @@ -175,7 +180,7 @@ function zeichneGruppen($gruppen) $html = ""; if (count($vorhanden) > 1) { - $html .= "