[FTUI 3]Probleme mit <ftui-content>

[grossmaggul]

Ich lagere das mal aus, im Hauptthread wird das sonst zu unübersichtlich.

Ich möchte eine Anrufliste im Popup anzeigen lassen.

Das hatte ich erst so gemacht, ich habe unten eine Statuszeile, die wird bereits per content eingebunden

Code Auswählen Erweitern

<!-- Statuszeile unten -->
    <ftui-grid-tile row="9" col="1" height="1" width="10" shape="round" class="semitransparent">
       
        <ftui-content file="content/statuszeile.html"></ftui-content>
       
    </ftui-grid-tile>

Und aus der statuszeile.html wird das Popup aufgerufen über einen Button:

Code Auswählen Erweitern

<ftui-popup shape="round" id="calllist" width="750px" height="480px">
                        <ftui-content file="./content/calllist1.html"></ftui-content>           
           </ftui-popup>

Und das Popup (calllist1.html):

Code Auswählen Erweitern


    <ftui-row>
                    <!-- Icon -->
                    <ftui-column align-items="left" margin="1" width="10%">
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:1-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out,  `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')" [color]="fritzlist:1-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
               
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:2-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')" [color]="fritzlist:2-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>

                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:3-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                            [color]="fritzlist:3-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
                       
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:4-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                            [color]="fritzlist:4-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
                       
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:5-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                            [color]="fritzlist:5-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
                       
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:6-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                            [color]="fritzlist:6-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
                       
                        <ftui-icon class="align-left" path="../images/openautomation/"
                            [name]="fritzlist:7-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                            [color]="fritzlist:7-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
                       
                    </ftui-column>

                    <!-- Name -->
                    <ftui-column align-items="left" width="30%">
                        <ftui-label class="size-2 align-left" [text]="fritzlist:1-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:2-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:3-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:4-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:5-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:6-name"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:7-name"></ftui-label>
                    </ftui-column>
                   
                    <!-- Nummer -->
                    <ftui-column align-items="left" width="20%">
                        <ftui-label class="size-2 align-left" [text]="fritzlist:1-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:2-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:3-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:4-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:5-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:6-number"></ftui-label>
                        <ftui-label class="size-2 align-left" [text]="fritzlist:7-number"></ftui-label>
                    </ftui-column>

                    <!-- Zeit -->
                    <ftui-column align-items="left" width="25%">
                        <ftui-label class="size-1 align-left" [text]="fritzlist:1-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:2-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:3-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:4-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:5-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:6-timestamp"></ftui-label>
                        <ftui-label class="size-1 align-left" [text]="fritzlist:7-timestamp"></ftui-label>
                    </ftui-column>
                   
                    <!-- Anruferbild -->
                    <ftui-column align-items="left" width="10%">
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:1-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:2-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:3-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:4-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:5-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:6-image" width="40px" shape="circle"></ftui-image>
                        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:7-image" width="40px" shape="circle"></ftui-image>
                    </ftui-column>
</ftui-row>
   

Das funktioniert und ergibt das erste Bild.


Da ich die calllist1.html gerne etwas verschlanken wollte habe ich das dann so gemacht, auch wieder wie oben aus der statuszeile.html aufgerufen:

Code Auswählen Erweitern

<ftui-popup shape="round" id="calllist" width="750px" height="480px">
                        <ftui-content file="./content/calllist_popup.html"></ftui-content>           
                    </ftui-popup>

Die calllist_popup.html

Code Auswählen Erweitern

<ftui-column>
    <ftui-content file="./content/calllist.html" nummer="1"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="2"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="3"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="4"></ftui-content>

    <ftui-content file="./content/calllist.html" nummer="5"></ftui-content>
   
    <ftui-content file="./content/calllist.html" nummer="6"></ftui-content>
   
    <ftui-content file="./content/calllist.html" nummer="7"></ftui-content>
</ftui-column>

Und die calllist.html

Code Auswählen Erweitern

<ftui-row>
    <!-- Icon -->
    <ftui-column align-items="left" width="5%" color="yellow">
        <ftui-icon path="../images/openautomation/"
                   [name]="fritzlist:{{nummer}}-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out,  `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                [color]="fritzlist:{{nummer}}-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')">
        </ftui-icon>
    </ftui-column>

    <!-- Name -->
    <ftui-column align-items="left" width="20%" color="blue">
        <ftui-label [text]="fritzlist:{{nummer}}-timestamp"></ftui-label>
    </ftui-column>

    <!-- Nummer -->
    <ftui-column align-items="left" width="10%" color="red">
        <ftui-label [text]="fritzlist:{{nummer}}-number"></ftui-label>
    </ftui-column>

    <!-- Timestamp -->
    <ftui-column align-items="left" width="25%" color="green">
        <ftui-label [text]="fritzlist:{{nummer}}-name"></ftui-label>
    </ftui-column>

   
    <!-- Anruferbild -->
    <ftui-column align-items="left" width="10%" color="gray">
        <ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/"
                    [src]="fritzlist:{{nummer}}-image" width="40px" shape="circle"></ftui-image>
    </ftui-column>
</ftui-row>

Allerdings sieht das Popup dann so aus wie im zweiten Bild (ich habe die einzelnen Spalten mal mit Farben sichtbar gemacht), es fehlen Icons und Einträge.

Habe ich da was falsch gemacht oder ist die Verschachtelung zu tief?

Außerdem ist mir aufgefallen, daß man das <header>-Tag nicht in content benutzen kann, aber vielleicht soll das so.

Ich hoffe ich konnte mich verständlich machen konnte.

[OdfFhem]

@grossmaggul

Ich habe Dein Konstrukt mal aufgegriffen und beim Testen "minimal" verändert. Dann erscheint das gewünschte Ergebnis - zumindest auf den ersten Blick. Vielleicht helfen Dir die code-Blöcke ...


Anmerkungen:
-  ftui-popup steht bei mir nie innerhalb von ftui-grid-tile, sondern unmittelbar in ftui-grid (Hauptseite oder ftui-tab-view). Ansonsten scheitert vermutlich schon das header-Tag.
- Summe der (prozentualen) width-Attribute sollte 100% ergeben; am Besten mindestens eine dynamische Spalte verwenden
- Das base-Attribut vom Anruferbild habe ich relativ angegeben; bei Dir wäre das vermutlich base="images/kontakte/"


Folgendes steht irgendwo in der Test-Hauptseite.

Code Auswählen Erweitern


<ftui-content file="content_calllist1.html"></ftui-content>           
<ftui-grid-tile row="9" col="1" height="10" width="10" shape="round" class="semitransparent">
  <ftui-content file="content_statuszeile.html"></ftui-content>
</ftui-grid-tile>


Irgendwo in content_statuszeile.html:

Code Auswählen Erweitern


<ftui-column>
  <div class="size-5 bold" popup-target="calllist">Popup</div>
</ftui-column>


Inhalt von content_calllist1.html:

Code Auswählen Erweitern


<ftui-popup shape="round" id="calllist" height="400px" width="600px">
  <header class="size-5">Anrufliste</header>

  <ftui-content file="content_call.html" nummer="1"></ftui-content>
  <ftui-content file="content_call.html" nummer="2"></ftui-content>
  <ftui-content file="content_call.html" nummer="3"></ftui-content>
  <ftui-content file="content_call.html" nummer="4"></ftui-content>
  <ftui-content file="content_call.html" nummer="5"></ftui-content>
  <ftui-content file="content_call.html" nummer="6"></ftui-content>
  <ftui-content file="content_call.html" nummer="7"></ftui-content>
</ftui-popup>


Inhalt von content_call.html:

Code Auswählen Erweitern


<ftui-row>
    <ftui-column align-items="left" width="5%">
        <ftui-icon path="../images/openautomation/"
                   [name]="Anrufliste:{{nummer}}-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out,  `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
                [color]="Anrufliste:{{nummer}}-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')">
        </ftui-icon>
    </ftui-column>

    <ftui-column align-items="left" width="20%">
        <ftui-label [text]="Anrufliste:{{nummer}}-timestamp"></ftui-label>
    </ftui-column>

    <ftui-column align-items="left" width="10%">
        <ftui-label [text]="Anrufliste:{{nummer}}-number"></ftui-label>
    </ftui-column>

    <ftui-column align-items="left" wiiiiidth="25%">
        <ftui-label [text]="Anrufliste:{{nummer}}-name"></ftui-label>
    </ftui-column>

    <ftui-column align-items="left" width="10%">
        <ftui-image base="../images/own__contact/"
                    [src]="Anrufliste:{{nummer}}-image" width="40px" shape="circle"></ftui-image>
    </ftui-column>
</ftui-row>


[grossmaggul]

Danke, Oldfhem!

ftui-popup steht bei mir nie innerhalb von ftui-grid-tile, sondern unmittelbar in ftui-grid (Hauptseite oder ftui-tab-view).

Das war mir nicht bewusst und scheint auch, zumindest im Falle von content, das Problem gewesen zu sein. Ich habe diverse Popups in ftui-grid-tile stehen, schon aus dem Grund, damit ich nicht die Übersicht verliere, da ich die Popups gerne "in der Nähe" ihres Aufrufs habe und da funktioniert der Aufruf ohne Probleme.
Gerade gesehen, ich habe gar kein Popup innerhalb des grid-tile.

Summe der (prozentualen) width-Attribute sollte 100% ergeben; am Besten mindestens eine dynamische Spalte verwenden

Da hatte ich schon alles durch, auch eine Summe von 100%, relative und/oder absolute Angaben, das Problem blieb, scheint als keinen Einfluss gehabt zu haben.

Das base-Attribut vom Anruferbild habe ich relativ angegeben; bei Dir wäre das vermutlich base="images/kontakte/"

Danke, manchmal sieht man den Wald vor Bäumen nicht.

Sieht jedenfalls jetzt gut aus.