Formatierung einer Tabelle im FTUI [gelöst]

[Mundus]

Hi,

durch ständiges probieren (manchmal auch lesen ) habe ich schon etliche Probleme selbst gelöst. Leider habe ich jetzt ein Formatierungsproblem, bei dem ich eure Hilfe benötige.

Im FHEM habe ich ein DBPlan-Device angelegt, dass ich mir in einer Tabelle im FTUI anzeigen lassen möchte. Leider scheitere ich derzeit an der Formatierung der Tabelle... Die Überschrift der Tabelle wird m.E. falsch dargestellt, die Einträge selbst, die ich als Template einbinde, sind korrekt dargestellt. Als erstes folgt hier der Codeblock mit der Formatierung der Überschrift und dem Aufruf des Templates. Anschließend der Code des Templates und zum Schluss ein Bild, wie es bei mir dargestellt wird. Es wäre super, wenn ihr mir sagt, was ich falsch mache...

Code Auswählen Erweitern

<!--############################# Abfahrt Deutsche Bahn Hannover ##############################-->
<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
        <header class="big bg-gray">DB</header>
                        <div class="row bg-red">
                                <div class="cell-30 inline left-align">Zug</div>
                                <div class="cell-30 bg-white black inline left-align">Ab</div>
                                <div class="cell-20 inline">Gleis</div>
                                <div class="cell-20 inline right-align">del</div>
                        </div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_2","par03":"plan_departure_2","par04":"travel_departure_2","par05":"plan_departure_delay_2"}'></div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_3","par03":"plan_departure_3","par04":"travel_departure_3","par05":"plan_departure_delay_3"}'></div>

</li>
<!--############################# Ende Abfahrt Deutsche Bahn ##############################-->
Template

Code Auswählen Erweitern

<!--TEMPLATE für Abfahrten der DB-->
<!--Übergabe Parameter-->
<!--    par01 => device-->
<!--    par02 => Zugart-->
<!--    par03 => Abfahrtzeit-->
<!--    par04 => Abfahrtsgleis-->
<!--    par05 => Verspaetung-->
<!--###################### TEMPLATE ###########################################-->
<div class="sheet">
<div class="row">
        <!-- Zugart -->
                <div class="cell-30 inline left-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par02">
                </div>
                <!-- Abfahrtzeit -->
                <div class="cell-30 inline left-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par03">
                </div>
                <!-- Abfahrtgleis -->
                <div class="inline cell-20"
                        data-type="label"
                        data-device="par01"
                        data-get="par04"
                        data-part=".*\s(\w+)$">
                </div>
                <!-- Verspaetung -->
                <div class="inline cell-20 right-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par05">
                </div>
</div>
</div>
<!--###################### Ende TEMPLATE #######################################-->



Gruß und Danke

Mundus

P.S.: Eine Zusatzfrage, die nichts mit dem Thema zu tun hat: Welcher Aufruf von Seiten Link oder PageButton ist schneller? Wenn ich es richtig verstanden habe, dann ist PageButton schneller als PageTab.

[setstate]

Folgendes ist mir aufgefallen
- bei Nutzung von cell-xx ist kein inline mehr notwendig
- bei Nutzung von row > cell muss es sheet > row > cell heißen
- ich würde die row nur 10% hoch machen -> row-10
- ich würde etwas left-space und right-space spendieren

Code Auswählen Erweitern


            <li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
                <header class="big bg-gray">DB</header>
                <div class="sheet">
                    <div class="row-10 bg-red">
                        <div class="cell-30 left-align left-space">Zug</div>
                        <div class="cell-30 bg-white black left-align left-space">Ab</div>
                        <div class="cell-20 ">Gleis</div>
                        <div class="cell-20  right-align right-space">del</div>
                    </div>

                    <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>

                    <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_2","par03":"plan_departure_2","par04":"travel_departure_2","par05":"plan_departure_delay_2"}'></div>

                    <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_3","par03":"plan_departure_3","par04":"travel_departure_3","par05":"plan_departure_delay_3"}'></div>
                </div>
            </li>


[setstate]

oder gleich "center-align"

Code Auswählen Erweitern


<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
    <header class="big bg-gray">DB</header>
    <div class="sheet">
        <div class="row-10 bg-red">
            <div class="cell-30 center-align">Zug</div>
            <div class="cell-30 bg-white black center-align">Ab</div>
            <div class="cell-20 ">Gleis</div>
            <div class="cell-20  center-align">del</div>
        </div>

        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>

        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_2","par03":"plan_departure_2","par04":"travel_departure_2","par05":"plan_departure_delay_2"}'></div>

        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_3","par03":"plan_departure_3","par04":"travel_departure_3","par05":"plan_departure_delay_3"}'></div>
    </div>
</li>


[Mundus]

Hallo setstate,

erst mal vielen Dank für deine Hilfe. Die Überschrift sieht auch bereits richtig aus, leider wird jetzt das Template verzehrt dargestellt.  Siehe Bild.

Ich habe bereits mehrere Ideen der Formatierung probiert, dabei hat aber keine den erwünschten Erfolg gebracht.

Code Auswählen Erweitern

<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
    <header class="big bg-gray">DB</header>
    <div class="sheet">
...
<div class="row-10 bg-red">
        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>
</div>
...
</div>
</li>
Dementsprechend dann im Template Sheet>Row gelöscht (aber auch wenn ich es bestehen lasse, funktioniert es nicht). Ebenso

Code Auswählen Erweitern

<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
    <header class="big bg-gray">DB</header>
    <div class="sheet">
            <div class="row-10 bg-red">
                  <div class="cell-30 center-align">Zug</div>
                  <div class="cell-30 bg-white black center-align">Ab</div>
                  <div class="cell-20 ">Gleis</div>
                  <div class="cell-20  center-align">del</div>
            </div>
     </div>
     
     <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>
...

</li> waren nicht erfolgreich.

[setstate]

in den Templates aber keine neuen "sheet".

Ein Template ist ja dann nur eine neue Reihe im Haupt-Sheet

Code Auswählen Erweitern

       
        <div class="row">
            <div class="cell-30 center-align"></div>
            <div class="cell-30 center-align"></div>
            <div class="cell-20 center-align"></div>
            <div class="cell-20 center-align"></div>
        </div>


Nur die "inline" wieder weglassen.

[Mundus]

in den Templates aber keine neuen "sheet".

Das hatte ich bereits probiert, war aber auch nicht erfolgreich.

Nur die "inline" wieder weglassen.

Das habe ich natürlich vergessen .

Leider bringt auch dein neuer Hinweis nicht den gewünschten Effekt. Ich habe den Eindruck, dass das Template nicht die gesamte Zeile (Row) nutzt. Hier mal die aktuellen Codezeilen

Code Auswählen Erweitern

<!--############################# Abfahrt Deutsche Bahn Hannover ##############################-->
<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
        <header class="big bg-gray">DB</header>
                <div class="sheet">
                        <div class="row-10 bg-red">
                                <div class="cell-30 center-align">Zug</div>
                                <div class="cell-30 center-align">Ab</div>
                                <div class="cell-20 center-align">Gleis</div>
                                <div class="cell-20 center-align">del</div>
                        </div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_1","par03":"plan_departure_1","par04":"travel_departure_1","par05":"plan_departure_delay_1"}'></div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_2","par03":"plan_departure_2","par04":"travel_departure_2","par05":"plan_departure_delay_2"}'></div>

                        <div data-template="templates/Abfahrt_DB_template.html" data-parameter='{"par01":"OL_H","par02":"plan_connection_3","par03":"plan_departure_3","par04":"travel_departure_3","par05":"plan_departure_delay_3"}'></div>
                </div>

</li>
<!--############################# Ende Abfahrt Deutsche Bahn Hannover ##############################-->

Template

Code Auswählen Erweitern

<!--TEMPLATE für Abfahrten der DB-->
<!--Übergabe Parameter-->
<!--    par01 => device-->
<!--    par02 => Zugart-->
<!--    par03 => Abfahrtzeit-->
<!--    par04 => Abfahrtsgleis-->
<!--    par05 => Verspaetung-->
<!--###################### TEMPLATE ###########################################-->
<!--div class="sheet"-->
<div class="row">
                <!-- Zugart -->
                <div class="cell-30 center-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par02">
                </div>
                <!-- Abfahrtzeit -->
                <div class="cell-30 center-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par03">
                </div>
                <!-- Abfahrtgleis -->
                <div class="cell-20 center-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par04"
                        data-part=".*\s(\w+)$">
                </div>
                <!-- Verspaetung -->
                <div class="cell-20 center-align"
                        data-type="label"
                        data-device="par01"
                        data-get="par05">
                </div>
</div>
<!--/div-->
<!--###################### Ende TEMPLATE #######################################-->

Die Darstellung ist dann wie in dem Bild.

[setstate]

Ich lag doch falsch. "row" auch noch aus dem Template raus

Code Auswählen Erweitern


<li data-row="4" data-col="5" data-sizex="4" data-sizey="3">
    <header class="big bg-gray">DB</header>
    <div class="sheet" style="height: calc(100% - 2.2em);">
        <div class="row-10 bg-red">
            <div class="cell-30 center-align">Zug</div>
            <div class="cell-30 center-align">Ab</div>
            <div class="cell-20 ">Gleis</div>
            <div class="cell-20 center-align">del</div>
        </div>
       
        <div class="row" data-template="templates/Abfahrt_DB_template.html" ...></div>
        <div class="row" data-template="templates/Abfahrt_DB_template.html" ...></div>
        <div class="row" data-template="templates/Abfahrt_DB_template.html" ...></div>

    </div>
</li>


Code Auswählen Erweitern


<!-- Zugart -->
<div class="cell-30 center-align" data-type="label" data-device="par01" data-get="par02">
</div>
<!-- Abfahrtzeit -->
<div class="cell-30 center-align" data-type="label" data-device="par01" data-get="par03">
</div>
<!-- Abfahrtgleis -->
<div class="cell-20 center-align" data-type="label" data-device="par01" data-get="par04">
</div>
<!-- Verspaetung -->
<div class="cell-20 center-align" data-type="label" data-device="par01" data-get="par05">
</div>


Die Höhe des "sheet" musst du individuell berechnen, da du den Header größer gemacht hast.

[Mundus]

Hi, jetzt funktioniert es. Vielen Dank. An dieser Stelle habe ich, sofern du mir noch weiterhelfen magst, noch zwei Fragen.

1. Wieso funktioniert der Code

Code Auswählen Erweitern

<div class="row" data-template="templates/Abfahrt_DB_template.html" ...></div> und der Code

Code Auswählen Erweitern

<div class="row"
    <div data-template=....></div>
</div> nicht. Den zweiten Codeabschnitt hatte ich bereits probiert, gibt aber verstörende Ergebnisse  .

2. Die zweite Frage konnte ich zum Teil (google sei dank) schon selbst lösen. Es geht um die Funktion calc(100% - 2.2em). Wenn ich es richtig verstanden habe, entspricht 2.2em der class "big". Es bleibt jetzt in meinem Fall nur die Frage, ob

Code Auswählen Erweitern

style="height: calc(4em);" genauso funktioniert oder ob ungewollte Seiteneffekte auftreten können. Ich habe dies ausprobiert und es sah bei mir wie gewünscht aus, wobei ich den Punkt der Seiteneffekte natürlich nicht prüfen kann.

[setstate]

1. weil die CSS Selektoren dies nicht so erwarten und dadurch nicht wirken
erwartet wird: .row > .col (direkt nachfolgend)
du hast aber .row > div > .col

2. wenn nicht gerechnet wird, kann man "calc" auch weglassen. Die Berechnung war für 100% (Beweglicher Teil) - 2em (feste Teil) gedacht
Ohne calc reagiert es nicht auf Browser Resize. Wenn das nicht benötigt wird, dann passt das.

[Mundus]

Danke. Thema ist gelöst.