[FTUI3] Apotheken-Notdienst als Popup

[caldir65]

Hallo,

ich versuche gerade, die Anzeige des Apotheken-Notdienstes aus fhem in FTUI3 in ein Popup zu bekommen. Die Öffnung des Popup funktioniert ja grundsätzlich schon, jedoch bekomme ich letztlich nmur die header-Anzeige, aber nicht den Inhalt aus dem Device:

Hier einmal das fragliche Device:

Code Auswählen Erweitern

Internals:
   API_LAST_MSG 200
   API_LAST_RES 1779001653.95092
   DEF        https://www.aponet.de/notdienstsuche?tx_aponetpharmacy_search[action]=result&tx_aponetpharmacy_search[controller]=Search&tx_aponetpharmacy_search[search][plzort]=49324&tx_aponetpharmacy_search[search][date]=&tx_aponetpharmacy_search[search][street]=&tx_aponetpharmacy_search[search][radius]=15&tx_aponetpharmacy_search[search][lat]=&tx_aponetpharmacy_search[search][lng]=&tx_aponetpharmacy_search[token]=[my_token]&type=1981
   FUUID      66c993bd-f33f-378b-34d6-3b8f7ec6be97090a
   FVERSION   98_JsonMod.pm:0.284810/2024-02-05
   NAME       NotApoJM
   NEXT       NEVER
   NR         1635
   SECRETS    my_token
   SOURCE     https://www.aponet.de/notdienstsuche?tx_aponetpharmacy_search[action]=result&tx_aponetpharmacy_search[controller]=Search&tx_aponetpharmacy_search[search][plzort]=49324&tx_aponetpharmacy_search[search][date]=&tx_aponetpharmacy_search[search][street]=&tx_aponetpharmacy_search[search][radius]=15&tx_aponetpharmacy_search[search][lat]=&tx_aponetpharmacy_search[search][lng]=&tx_aponetpharmacy_search[token]=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&type=1981 (200)
   STATE      <div style="display:table;width:100%;"><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;"><a href="https://www.openstreetmap.org/?mlat=52.30748&mlon=8.43086#map=18/52.30748/8.43086" rel="noopener noreferrer" target="_blank" style="font-weight:bold;">Apotheke Lintorf</a> (12.0km)<br /><a href="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=52.22605919999999%2C8.318712199999936%3B52.30748%2C8.43086" rel="noopener noreferrer" target="_blank">Alte Poststr. 1<br />49152&nbsp;Bad Essen</a></div><div style="display:table-cell;width:50%;text-align:left;">Tel.: <a href="tel:+494954727246">+49 5472 7246</a><br />Fax: +49 5472 7420<br />eMail: <a href="mailto:ARRAY(0x60cc16bddb20)">ARRAY(0x60cc16bddb20)</a></div></div><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;">Von 17.05.2026 09:00</div><div style="display:table-cell;width:50%;text-align:left;">Bis 18.05.2026 09:00</div></div><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;"><a href="https://www.openstreetmap.org/?mlat=52.2746891&mlon=8.075926#map=18/52.2746891/8.075926" rel="noopener noreferrer" target="_blank" style="font-weight:bold;">Linden-Apotheke</a> (19.8km)<br /><a href="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=52.22605919999999%2C8.318712199999936%3B52.2746891%2C8.075926" rel="noopener noreferrer" target="_blank">Belmer Str. 3<br />49084&nbsp;Osnabrück</a></div><div style="display:table-cell;width:50%;text-align:left;">Tel.: <a href="tel:+494954172310">+49 541 72310</a><br />Fax: +49 541 740021<br />eMail: <a href="mailto:ARRAY(0x60cc13902310)">ARRAY(0x60cc13902310)</a></div></div><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;">Von 17.05.2026 08:30</div><div style="display:table-cell;width:50%;text-align:left;">Bis 18.05.2026 08:30</div></div><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;"><a href="https://www.openstreetmap.org/?mlat=52.3046484&mlon=8.6190239#map=18/52.3046484/8.6190239" rel="noopener noreferrer" target="_blank" style="font-weight:bold;">Gänsemarkt-Apotheke</a> (21.2km)<br /><a href="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=52.22605919999999%2C8.318712199999936%3B52.3046484%2C8.6190239" rel="noopener noreferrer" target="_blank">Gänsemarkt 1<br />32312&nbsp;Lübbecke</a></div><div style="display:table-cell;width:50%;text-align:left;">Tel.: <a href="tel:+494957418595">+49 5741 8595</a><br />Fax: +49 5741 30539<br />eMail: <a href="mailto:info@gaensemarkt-apotheke.org">info@gaensemarkt-apotheke.org</a></div></div><div style="display:table-row;width:100%;"><div style="display:table-cell;padding:3pt;width:50%;text-align:left;">Von 17.05.2026 09:00</div><div style="display:table-cell;width:50%;text-align:left;">Bis 18.05.2026 09:00</div></div></div>
   SVN        28481 2024-02-05 22:14:33 UTC
   TYPE       JsonMod
   eventCount 104
   CONFIG:
     IN_REQUEST 0
     SOURCE     https://www.aponet.de/notdienstsuche?tx_aponetpharmacy_search[action]=result&tx_aponetpharmacy_search[controller]=Search&tx_aponetpharmacy_search[search][plzort]=49324&tx_aponetpharmacy_search[search][date]=&tx_aponetpharmacy_search[search][street]=&tx_aponetpharmacy_search[search][radius]=15&tx_aponetpharmacy_search[search][lat]=&tx_aponetpharmacy_search[search][lng]=&tx_aponetpharmacy_search[token]=[my_token]&type=1981
     SECRET:
   OLDREADINGS:
   READINGS:
[hier folgen die Daten von 14 Apotheken]
Attributes:
   DbLogExclude .*
   disable    1
   event-on-change-reading .*
   group      NotApo
   icon       apotheke
   interval   3 9 * * *
   osm_engine fossgis_osrm_car
   readingList multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_name"), property('.name'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_street"), property('.strasse'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_zip"), property('.plz'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_city"), property('.ort'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_tel"), property('.telefon'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_fax"), property('.fax'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_email"), property('.email'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_distance"), property('.distanz'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_longitude"), property('.longitude'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_latitude"), property('.latitude'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_start_date"), property('.startdatum'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_start_time"), property('.startzeit'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_end_date"), property('.enddatum'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_end_time"), property('.endzeit'));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_map_position"), concat("https:\/\/www.openstreetmap.org\/?mlat=", property('.latitude'), "&mlon=", property('.longitude'), "#map=18\/", property('.latitude'), "\/", property('.longitude')));
multi(jsonPath("\$.results.apotheken.apotheke.[*]"), concat(sprintf('%02d', count()),"_map_route"), concat("https:\/\/www.openstreetmap.org\/directions?engine=", AttrVal($name,"osm_engine","fossgis_osrm_car"), "&route=", AttrVal("global","latitude","0"), "%2C", AttrVal("global","longitude","0"), "%3B" , property('.latitude'), "%2C", property('.longitude')));
   room       NotDienst
   stateFormat {    my $ret .= "<div style=\"display:table;width:100%;\">"; #table
    for(my $i = 0;$i <= 2;$i++) {
        my $id = sprintf('%02d', $i);
        $ret .= "<div style=\"display:table-row;width:100%;\">"; #row
            $ret .= "<div style=\"display:table-cell;padding:3pt;width:50%;text-align:left;\">"; #cell
                $ret .= "<a href=\"".ReadingsVal($name,$id."_map_position","https:\/\/www.osm.org");
                $ret .= "\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"font-weight:bold;\">".ReadingsVal($name,$id."_name","?")."</a>";
                $ret .= " (".sprintf("%.1f", ReadingsNum($name,$id."_distance",0))."km)<br \/>";
                $ret .= "<a href=\"".ReadingsVal($name,$id."_map_route","https:\/\/www.osm.org")."\" rel=\"noopener noreferrer\" target=\"_blank\">";
                $ret .= ReadingsVal($name,$id."_street","")."<br /\>";
                $ret .= ReadingsVal($name,$id."_zip","")."&nbsp;".ReadingsVal($name,$id."_city","");
                $ret .= "</a>";
            $ret .= "</div>"; #/cell
            $ret .= "<div style=\"display:table-cell;width:50%;text-align:left;\">"; #cell
                my $numberlink = ReadingsVal($name,$id."_tel","");
                $numberlink =~ s/\s+//g;
                $numberlink =~ s/\///g;
                $ret .= "Tel.: <a href=\"tel:+49".substr($numberlink, 1)."\">".ReadingsVal($name,$id."_tel","")."</a><br />";
                if(ref(ReadingsVal($name,$id."_fax","")) ne 'ARRAY') {
                    $ret .= "Fax: ".ReadingsVal($name,$id."_fax","");
                }
                $ret .= "<br />";
                $ret .= "eMail: <a href=\"mailto:".ReadingsVal($name,$id."_email","")."\">".ReadingsVal($name,$id."_email","")."</a>";
            $ret .= "</div>"; #/cell
        $ret .= "</div>"; #/row
        $ret .= "<div style=\"display:table-row;width:100%;\">"; #row
            $ret .= "<div style=\"display:table-cell;padding:3pt;width:50%;text-align:left;\">"; #cell
                $ret .= "Von ".ReadingsVal($name,$id."_start_date","")." ".ReadingsVal($name,$id."_start_time","");
            $ret .= "</div>"; #/cell
            $ret .= "<div style=\"display:table-cell;width:50%;text-align:left;\">"; #cell
                $ret .= "Bis ".ReadingsVal($name,$id."_end_date","")." ".ReadingsVal($name,$id."_end_time","");
            $ret .= "</div>"; #/cell
        $ret .= "</div>"; #/row
    }
    $ret .= "</div>"; #/table
    return $ret;
}
   update-on-start 0
   userattr   osm_engine:graphhopper_car,fossgis_osrm_car,fossgis_valhalla_car,graphhopper_bicycle,fossgis_osrm_bike,fossgis_valhalla_bicycle,graphhopper_foot,fossgis_osrm_foot,fossgis_valhalla_foot
   webCmd     reread
Und der dazugehörige Popup-Code:

Code Auswählen Erweitern

  <ftui-popup id="notapo_pop" timeout="0" width="500px" height="auto" position="page">
          <header>Apotheken-Notdienst</header>
          <ftui-label [name]="NotApoJM"></ftui-label>
  </ftui-popup>Hat jemand eine Idee?
Danke

LG Christoph

[McMuffin]

Hallo Christoph,

probiere mal

Code Auswählen Erweitern

<ftui-label [text]="NotApoJM"></ftui-label>
Ist es das, was du wolltest?

LG McMuffin

[caldir65]

Moin,

danke, so geht's - manchmal sieht man den Wald nicht mehr ...

Jetzt kommt aber ein neues "Problem" - in den angezeigten Apotheken sind auch Links enthalten, die in leuchtend-blau" angezeigt werden. Gebe ich z.B. ein "color="yellow" mit, so werden nur die Nicht-Link-Texte umgefärbt, die Links bleiben farblich aber so.
Hintergrund der Links ist ein (geplanter) Aufruf von OpenStreetMap mit dem Ziel ... habe ich aber auf den Tablets eh gesperrt, ist also z.Z. nur für PC von Interesse...
Kann ich diese Links entfärben oder mit einer eigenen Farbe belegen?


Gruß
Christoph

[McMuffin]

Moin,

kein Problem. Es sind die kleinen Fehler, die man so leicht übersieht.

Wegen der Farbgebung deiner links.
Dafür müsstest du meines Wissens nach die css-Dateien ändern (ftui.css, ftui-theme.css, oder eine noch später geladene css-Datei).
Das ändert aber die Farben aller links auf deiner Oberfläche.

Alternativ kannst du die links aus dem stateFormat-Attribut deines NotApoJM-Devices löschen, solltest du diese nicht benötigen.
Dann hast du reinen Text, den du mit dem color-Befehl einfärben kannst.

Eine andere Lösung fällt mir für das von dir beschriebene Vorgehen nicht ein.
Vielleicht kennt jemand anderes noch einen anderen Weg.

Ich selbst habe den Aufruf in ein <ftui-column color="light"> gepackt und damit die Hintergrundfarbe so geändert, dass ich die blauen/lila Texte lesen kann.

Code Auswählen Erweitern

<ftui-column color="light">    <ftui-label class="size-2" [text]="NotApoJM"></ftui-label>    </ftui-column>Hat für mich prima funktioniert, kann aber natürlich das Farbschema durcheinanderwerfen.

LG McMuffin