Die flexible Programmierung der Tabellen erfolgt unter Verwendung der Direktive ng-repeat.
ng-repeat ist eine Direktive in AngularJS. So ziemlich jede Anwendung, die mit Collections operiert, benötigt den Einsatz dieser Direktive, um die Sammlungen von Daten in einer View bequem ausgeben zu können. Hier werden sie benutzt, um Tabellen in HABPanel dynamisch gestalten zu können, das heißt, eine Zeile der Tabelle wird als Schablone programmiert, dann eine Liste der darzustellenden Elemente (z.B. ZigBee-Geräte) erstellt und mit Hilfe von ng-repeat diese Liste abgearbeitet und die Tabelle mit allen Zeilen (ZigBee-Geräten) erzeugt. Neben der einfacheren Programmierung der Tabelle (es muss nur eine Zeile programmiert werden) hat das auch deutliche Vorteile, wenn Elemente (Zeilen - ZigBee-Geräten) zur Tabelle hinzukommen oder entfallen. im Code muss dann nur die Liste der Geräte geändert werden,
Hier die kleine Tabelle:
Hier der Code der kleine Tabelle:
Code: Alles auswählen
<!--
20. Februar 2024
D:\develop\Visuali - sierung\HABpanel\Zigbee\zigbee_batteriezustand_3.html
-->
<style>
caption {
color: white;
font-size: x-large;
}
th {
text-align: center;
color: black;
background-color: #67eea8b7;
font-size: large;
font-weight: normal;
}
.alarm {
color: black;
background-color: rgb(253, 116, 116);
}
.attention {
color: black;
background-color: rgb(252, 234, 115);
}
td {
text-align: center;
color: white;
font-size: large;
}
</style>
<table class="table table-bordered" columns="2">
<caption> Zigbee-Schalter Batteriezustand</caption>
<div ng-app="" ng-init="geraete=[
{raum:'Heizung-Eco (Flur)',adresse:'zigbee.0.0c4314fffe1e2d25.'},
{raum:'Multi-Licht (Flur)',adresse:'zigbee.0.b4e3f9fffed1bd72.'},
{raum:'Klingelkontakt (Flur)',adresse:'alias.0.Flur.Tuerklingel.'}
]">
<tr>
<th>Raum</th>
<th>Prozent</th>
</tr>
<tr ng-repeat="x in geraete">
<td>{{x.raum}}</td>
<td ng-init="percentV=itemValue(x.adresse+'battery')" ng-class="{'alarm': percentV <= 45, 'attention': percentV > 45 && percentV <= 70}">
{{'%.0f' | sprintf:percentV}} %</td>
</tr>
</div>
</table>
Hier der Code der großen Tabelle:
Code: Alles auswählen
<!--
22. Februar 2024
D:\Projekte\Visualisierung\HABpanel\Zigbee\zigbee_geraete_tabelle.html
-->
<style>
th {
text-align: center;
color: black;
background-color: #67eea8b7;
font-size: large;
font-weight: normal;
}
td {
text-align: center;
color: white;
font-size: large;
}
caption {
color: white;
font-size: x-large;
}
.alarm {
color: black;
background-color: rgb(253, 116, 116);
}
.attention {
color: black;
background-color: rgb(252, 234, 115);
}
</style>
<table class="table table-bordered" columns="9">
<caption> Zigbee - Geräte</caption>
<div ng-app="" ng-init="geraete=[
{art:'Thermometer',raum:'Arbeitszimmer',adresse:'zigbee.0.00158d0008ce4367.'},
{art:'Thermometer',raum:'Schlafzimmer',adresse:'zigbee.0.00158d0008c11f15.'},
{art:'Thermometer',raum:'Wohnzimmer',adresse:'zigbee.0.00158d0008385f00.'},
{art:'Thermometer',raum:'Flur',adresse:'zigbee.0.00158d0008c12e72.'},
{art:'Thermometer',raum:'Küche',adresse:'zigbee.0.00158d0007f7a4b5.'},
{art:'Thermometer',raum:'Bad',adresse:'zigbee.0.a4c138a06538b164.'},
{art:'Thermometer',raum:'Keller',adresse:'zigbee.0.a4c13863047b5222.'},
{art:'Thermometer',raum:'Waschküche',adresse:'zigbee.0.a4c138374fc3121f.'},
{art:'Schalter Heizung-Eco',raum:'Flur',adresse:'zigbee.0.0c4314fffe1e2d25.'},
{art:'Schalter Multi-Licht',raum:'Flur',adresse:'zigbee.0.b4e3f9fffed1bd72.'},
{art:'Klingelkontakt',raum:'Flur',adresse:'alias.0.Flur.Tuerklingel.'},
{art:'Repeater',raum:'Küche',adresse:'zigbee.0.e0798dfffee7ddd4.'},
{art:'Repeater',raum:'Keller',adresse:'zigbee.0.70ac08fffe68a9b2.'}
]">
<tr>
<th>Art</th>
<th>Raum</th>
<th>Verfügbarkeit</th>
<th>Verbindung</th>
<th>Temperatur</th>
<th>Luftfeuchtigkeit</th>
<th>Luftdruck</th>
<th>Batterie</th>
<th>Spannung</th>
</tr>
<tr ng-repeat="x in geraete">
<td>{{x.art}}</td>
<td>{{x.raum}}</td>
<td ng-init="availableV=itemValue(x.adresse+'available')" ng-class="{'alarm': availableV == 'false'}">
{{availableV}}</td>
<td ng-init="qualityV=itemValue(x.adresse+'link_quality')" ng-class="{'alarm': qualityV <= 20, 'attention': qualityV > 20 && qualityV < 100}">
{{'%.0f' | sprintf:qualityV}} %</td>
<td ng-if="itemValue(x.adresse+'temperature')">{{'%.2f' | sprintf:itemValue(x.adresse+'temperature')}} °C</td>
<td ng-if="!itemValue(x.adresse+'temperature')"> </td>
<td ng-if="itemValue(x.adresse+'humidity')">{{'%.2f' | sprintf:itemValue(x.adresse+'humidity')}} %</td>
<td ng-if="!itemValue(x.adresse+'humidity')"> </td>
<td ng-if="itemValue(x.adresse+'pressure')">{{'%.2f' | sprintf:itemValue(x.adresse+'pressure')}} mb</td>
<td ng-if="!itemValue(x.adresse+'pressure')"> </td>
<td ng-if="itemValue(x.adresse+'battery') && x.raum != 'Keller' && x.raum != 'Waschküche'" ng-init="percentV=itemValue(x.adresse+'battery')" ng-class="{'alarm': percentV <= 45, 'attention': percentV > 45 && percentV <= 70}">
{{'%.0f' | sprintf:percentV}} %</td>
<td ng-if="!itemValue(x.adresse+'battery') || x.raum == 'Keller' || x.raum == 'Waschküche'"> </td>
<td ng-if="itemValue(x.adresse+'voltage') && x.raum != 'Keller' && x.raum != 'Waschküche'">{{'%.2f' | sprintf:itemValue(x.adresse+'voltage')}} V</td>
<td ng-if="!itemValue(x.adresse+'voltage') || x.raum == 'Keller' || x.raum == 'Waschküche'"> </td>
</tr>
</div>
</table>
https://forum.iobroker.net/topic/74161/ ... -ng-repeat