VORSICHT beim Update von FTUI3

[MDietrich]

Moin,
habe gerade ein Update durchlaufen lassen. Für FTUI3 gab es eine Menge Änderungen.
Mein Layout ist total daneben, Icons werden nicht gefunden, jede Menge Fehlermeldungen bei Labelzuweisungen

Gruß,
Matthias

[marvin78]

Du meinst das FTUI3, bei dem ganz deutlich darauf hingewiesen wird, dass es nicht kompatibel zu älteren Versionen ist?

https://github.com/knowthelist/ftui

[MDietrich]

Ja, daß meine ich, Hatte vor 2 Wochen ein Update gemacht und mein Layout angepasst.
Es ist also ein Zustand, lange nach der Warnung!

[setstate]

Das Update von gestern bringt ein neues Beispiel für ein nettes Mobil-Dashboard

[MDietrich]

Hallo setstate,
bei dem Udpdate hat sich einiges bei mir verändert. Ich hatte bereits die neue Version, mein letztes Update war vom 22. Januar.
- das Layout des Grids hat sich verändert, im wesentlichen betroffn ist die Grit-Tile Höhe. Die unteren Tiels im Tabview waren vorher ganz unten (Bild1 und Bild2)
- Icons aus dem 'Thermostat' von Mr.Petz werden nicht gefunden ( das ist ein '//' im Namen) (Bild3)
- Beim Refresh der Webseite kommen eine ganze Reihe der Meldung aus der labelcomponent:86 TypeError: Cannot set properties of null (setting "textcontent") (Bild4)

Gruß,
Matthias

[meier81]

Hallo,

das kann ich leider auch bestätigen. War gerade fast fertig mit der großen Änderung vom letzten Jahr und dann gestern Abend leider wieder nach dem Update einiges im Argen.

Ich habe mal geschaut, die Datei die die Fehler und die Anzeigeprobleme verursacht ist die

Code Auswählen Erweitern

/components/element.component.js
Wenn dieser Stand der Datei jetzt so bleiben soll wüsste ich gerne was jetzt zu ändern ist damit die ganzen Fehler (Iconfehler, Fehlermeldungen beim laden/refresh der Seite, etc.) zu beheben sind.

Gruß Markus

[Jojo11]

Moin zusammen,

ich versuche jetzt auch mal, meine Code anzupassen, damit das Ganze nach dem letzten major Update wieder so ausschaut wie vorher. Dabei ist mir aufgefallen, dass style-Angaben teilweise nicht mehr funktionieren, z.B.:

Code Auswählen Erweitern

<ftui-column align-items="left" style="margin-left:10px;>Ist das gewollt bzw. gibt es dafür Abhilfe? Zur Feinjustierung habe ich das doch hier und da mal verwendet. Im icon-tag scheint das auch nicht mehr zu funktionieren. Selbst ein "!important" wird ignoriert  Angaben wie "background-color:red" funktionieren hingegen noch.

Weiter ist mir aufgefallen, dass labels jetzt ohne weitere Angabe sehr klein sind. Kann ich irgendwo zentral angeben, dass die Standardgröße z.B. "1em" sein soll?

schöne Grüße
Jojo

[setstate]

margin und padding ist sind Standard-Attribute mit Defaultwert='' bei allen FTUI-Elementen. Beim Initialisieren werden dadurch alle style oder css Vorgaben für dieses Element mit '' überschrieben.
style="margin-left:10px;" hat also keine Wirkung. Also bitte keine margin und padding im Style-Attribute angeben. In meinen Beispielen benutze ich kein style-Attribute. Sollte alles ohne gehen.

So wäre es richtig

Code Auswählen Erweitern

<ftui-column align-items="left" margin="0 0 0 10px">

[Jojo11]

Ja, das hatte ich gesucht. Jetzt passt es, danke!

[Jojo11]

Kann es sein, dass sich bei diesem Update am dropdown-Element etwas geändert hat?
Folgendes hat bisher immer funktioniert:

Code Auswählen Erweitern

<ftui-dropdown [list]="lowerbattlimit:setList" [(value)]="lowerbattlimit"></ftui-dropdown>Der Dummy lowerbattlimit hat dabei ein setList

Code Auswählen Erweitern

state:0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90Bei Klick auf das Dropdown kommen jetzt zwei Zeilen:
state
0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90
Gebe ich dagegen die Liste vor, funktioniert es:

Code Auswählen Erweitern

<ftui-dropdown list="0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90" [(value)]="lowerbattlimit"></ftui-dropdown>
Woran kann das liegen?

schöne Grüße
Jojo

[setstate]

ohne Angabe von delimiter wird einer gesucht. Hier wird ":" zuerst gefunden und benutzt.
Du müsstest den gewünschten Trenner angeben

Code Auswählen Erweitern

delimiter=","

[Jojo11]

Top, das war's!
Herzlichen Dank! Da hätte ich wahrscheinlich alleine noch ne ganze Weile suchen müssen um drauf zu kommen. Dabei war ich schon im Quellcode der Beispielseite unterwegs 

[meier81]

Hallo,

so hab mal ein bisschen geforscht und rausgefunden das meine Fehlermeldung (siehe Anhang) vom badge kommt. Diese funktionieren aber einwandfrei. Nehme ich die badge-Definitionen raus, sind die Fehler weg. Hier mal ein Auszug einer Definition:

Code Auswählen Erweitern

      <ftui-column width="3%">
        <ftui-icon size="1" name="phone"
                   [hidden]="EG_wz_HW_FritzBox:tam1_newMsg | step('0:true, 1:false')"></ftui-icon>
        <ftui-badge [text]="EG_wz_HW_FritzBox:tam1_newMsg"
                    [hidden]="EG_wz_HW_FritzBox:tam1_newMsg | step('0:true, 1:false')">
        </ftui-badge>
      </ftui-column>
Gibt es hier einen Parameter den ich nicht gesetzt habe oder den er nun haben will?

[Jojo11]

Was mir bei Deinem Code auffällt, ist, dass Dein </ftui-icon> vor dem batch ist. Ich habe das immer so gemacht (batch innerhalb des icons)

Code Auswählen Erweitern

<ftui-icon ...><ftui-badge size="-3" color="danger" ...></ftui-badge></ftui-icon>
Und so funktioniert es bei mir auch zuverlässig. Hat aber evtl. damit nichts zu tun...

schöne Grüße
Jojo

[meier81]

Hallo Jojo,

danke für deinen Tipp, hab es eben ausprobiert aber es ändert sich leider nichts an den vielen Fehlern die ich anstehen habe.

Hast du bei dir ftui auf dem aktuellsten Stand?

Ich habe auch Probleme seit dem letzten Update was die Anzeige betrifft, ich habe einige Stellen wo ich mit "width" angegeben habe, das Attribut scheint so jetzt auch nicht mehr zu funktionieren. Hier mal ein Beispiel:

Code Auswählen Erweitern

  <ftui-grid-tile row="1" col="9" height="2" width="5">
    <ftui-grid-header>Debian & FHEM Monitor</ftui-grid-header>
    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Uptime"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:uptime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Letzer Neustart"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:starttime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="FHEM Uptime"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:fhemuptime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Letzer Neustart"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:fhemstarttime_text"></ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>
War vorher schön aufgeteilt in zwei Spalten a 50%, jetzt ist das total verschoben.