Kurz zum Hintergrund. Ich bin aWattar Kunde und verwende das Modul Energierechner von @KaiS. Täglich wird automatisiert ein Eintrag in die Splitterinstanz vom Energierechner für den Verbrauch gemacht. Mit zwei Durchschnittswerten für Tag und Nacht. Daneben hab ich noch einen für „Strom Verkauf“ und Gas laufen.
Ich schau einfach hin und wieder gerne nach, was denn so in der „Verbrauch“ Instanz steht. Also musste ich immer in die Console und mich da durchklicken. Dann noch sortieren.
Das war mir zu umständlich. Also wollte ich eine Anzeige im Webfront ABER ich wollte die HTML Tabelle sortieren. Da gibt es einiges dazu, aber meist nicht so einfach zu integrieren.
Heute habe ich das gefunden TableSort
Die JS-Datei heruntergeladen und mich dran gemacht das zu basteln.
Wenn es jemand haben mag:
<?php
$html_id=26526;
$er_auswahl_id=54041;
$js_script_id=48320;
switch (getvalue($er_auswahl_id))
{
case 1:$er_id=16653;break; //Splitter Strom Verbrauch
case 2:$er_id=51556;break; //Splitter Strom Verkauf
case 3:$er_id=47712;break; //Splitter Gas
}
$eintraege=json_decode(json_decode(IPS_GetConfiguration($er_id),true)["Periods"],true);
$html=
'<html>
<head>
<style>
/* Scrollen mit festem header und footer */
.scrollbar thead { position: sticky; top: 0px; }
.scrollbar tfoot { position: sticky; bottom: 0; }
/*75vh-5em hier kann die Höhe der Tabelle verändert werden*/
.wrapper_scrollbar { position: relative; max-height: calc(75vh - 5em); overflow-y: scroll; border: 1px solid black; display: inline-block; width:100%}
</style>
<script>'.IPS_GetScriptContent($js_script_id).'</script>
</head>
<body>
<div class="wrapper_scrollbar" role="region">
<table id="T1" class="wwx scrollbar sortierbar" border="1" style="width:100%;">
<thead class="blue">
<tr>
<th class="sortiere-">Startdatum</th>
<th class="sortierbar">Tagespreis</th>
<th class="sortierbar">Nachtpreis</th>
<th class="sortierbar">Grundpreis</th>
<th class="sortierbar">Abschlagszahlung</th>
<th class="sortierbar">Abschläge<br>pro Jahr</th>
<th class="sortierbar">Nachtpreis<br>ab</th>
<th class="sortierbar">Nachrpreis<br>bis</th>
<th class="sortierbar">Anbieter</th>
<th class="sortierbar">Gaspreis<br>Berechnung</th>
<th class="sortierbar">Gas<br>Wandlerfaktor</th>
<th class="sortierbar">Gas<br>Z-Zahl</th>
<th class="sortierbar">Gas<br>Brennwert</th>
</tr>
</thead>
<tbody>';
foreach ($eintraege as $eintrag)
{
$startdatum=json_decode($eintrag["StartDate"],true);
$html=$html.'<tr>';
$html=$html.'<td>'.$startdatum["day"].'.'.$startdatum["month"].'.'.$startdatum["year"].'</td>';
$html=$html.'<td>'.$eintrag["DayPrice"].'</td>';
$html=$html.'<td>'.$eintrag["NightPrice"].'</td>';
$html=$html.'<td>'.$eintrag["BasePrice"].'</td>';
$html=$html.'<td>'.$eintrag["AdvancePayment"].'</td>';
$html=$html.'<td>'.$eintrag["DeductionsPerYear"].'</td>';
$nachtstart=json_decode($eintrag["NightTimeStart"],true);
$html=$html.'<td>'.$nachtstart["hour"].':'.$nachtstart["minute"].'0</td>';
$nachtende=json_decode($eintrag["NightTimeEnd"],true);
$html=$html.'<td>'.$nachtende["hour"].':'.$nachtende["minute"].'0</td>';
$html=$html.'<td>'.$eintrag["ElectricitySuppliers"].'</td>';
if ($eintrag["GasPriceCalculationActive"]=="1") $gaspreisberechnung="Ja"; else $gaspreisberechnung="Nein";
$html=$html.'<td>'.$gaspreisberechnung.'</td>';
$html=$html.'<td>'.$eintrag["GasConversionFactor"].'</td>';
$html=$html.'<td>'.$eintrag["GasZNumber"].'</td>';
$html=$html.'<td>'.$eintrag["GasCalorificValue"].'</td>';
$html=$html.'</tr>';
}
$html=$html.'
</tbody>
</table>
</div>
</body>
</html>';
SetValue($html_id,$html);
Ich wollte hier
<script>'.IPS_GetScriptContent(48320).'</script>
eigentlich die JS-Datei mit
<script src="DATEI">
einbinden, das hat aber aus mir unerfindlichen Gründen nicht funktioniert. Daher musste der ganze JS Code in die Stringvariable. Was auch (noch) nicht funktioniert ist, die Tabelle sollte einen eigenen Scrollbalken haben. Da muss ich noch herumspielen. Vielleicht funktioniert das mit IPS auch gar nicht. Es gibt da Beispiele auf der Seite des Entwicklers.
Im Webfront sieht das dann so aus:
Alle Spalten sind sortierbar
Das obige Skript wird bei Änderung der Auswahlvariable über einen Event aufgerufen.
Eventuell bau ich das noch in andere Tabellen ein. Mal schauen.
Ich möchte noch die Anlage eines neuen Tarifs einbauen. Dann kann ich die Gas und Strom Verkaufstarife übers Webfront eingeben. Die kommen monatlich.
