Flex-table-card: logic and a rest sensor

Configuration Frontend
,
1

Hi there,

I’m using the flex-table-card to display the departure times of the busses in my area.
I get the data via a rest sensor and let it fill its attributes:

sensor:
  - platform: rest
    name: "AbfahrtenBus2024"
    scan_interval: 60
    value_template: '{{ value_json.locations[0].disassembledName }}'
    json_attributes:
      - stopEvents
    resource: https://www.vrr.de/vrr-efa/XML_DM_REQUEST?calcOneDirection=0&coordOutputFormat=WGS84[dd.ddddd]&deleteAssignedStops_dm=1&depSequence=30&depType=stopEvents&doNotSearchForStops=1&genMaps=0&imparedOptionsActive=1&inclMOT_0=true&inclMOT_1=true&inclMOT_10=true&inclMOT_11=true&inclMOT_12=true&inclMOT_13=true&inclMOT_17=true&inclMOT_18=true&inclMOT_19=true&inclMOT_2=true&inclMOT_3=true&inclMOT_4=true&inclMOT_5=true&inclMOT_6=true&inclMOT_7=true&inclMOT_8=true&inclMOT_9=true&includeCompleteStopSeq=1&includedMeans=checkbox&itOptionsActive=1&itdDateDayMonthYear=23.10.2024&itdDateTimeDepArr=dep&itdTime=18:13&language=de&locationServerActive=1&maxTimeLoop=1&mode=direct&name_dm=de:05315:11201&outputFormat=rapidJSON&ptOptionsActive=1&serverInfo=1&sl3plusDMMacro=1&type_dm=any&useAllStops=1&useElevationData=1&useProxFootSearch=0&useRealtime=1&version=10.5.17.3&vrrDMMacro=1

Yesterday I was made aware, that there is now real-time data, which I want to use in my Dashboard. This is how far I’ve come:

type: custom:flex-table-card
style: |
  ha-card {
  font-size: 1em;
  line-height: 2em;
  }
  .card-header  {
  text-align: center;
  }
css:
  td.left:nth-child(1): "text-align:center;width: 40px;"
  td.left:nth-child(3): "text-align:center;width: 40px;"
  th.left:nth-child(1): "text-align:center;width: 40px;"
  th.left:nth-child(3): "text-align:center;width: 40px;"
entities:
  include:
    - sensor.abfahrtenbus2024
columns:
  - data: stopEvents
    modify: x.transportation.number
    icon: mdi:bus
    name: ""
  - data: stopEvents
    modify: x.transportation.destination.name
    name: Richtung
  - data: stopEvents
    modify: x.departureTimePlanned
    icon: mdi:clock
    name: ""
  - data: stopEvents
    modify: "{{x.departureTimeEstimated}}"
    icon: mdi:bus
    name: ""

I can’t use any logic in the 4th coloum - for example showing the time difference between now() and the estimated departure time or only showing the departure time if it exists at all. (Sometimes this element is not part of the response json from the rest inquiry).
So I need your hive mind. Anybody got a guess?

2

You mean when it shows undefinedundefined…etc. ?

3 
type: custom:flex-table-card
style: |
  ha-card {
  font-size: 1em;
  line-height: 2em;
  }
  .card-header  {
  text-align: center;
  }
css:
  td.left:nth-child(1): "text-align:center;width: 40px;"
  td.left:nth-child(3): "text-align:center;width: 40px;"
  th.left:nth-child(1): "text-align:center;width: 40px;"
  th.left:nth-child(3): "text-align:center;width: 40px;"
entities:
  include:
    - sensor.abfahrtenbus2024
columns:
  - data: stopEvents
    modify: x.transportation.number
    icon: mdi:bus
    name: ""
  - data: stopEvents
    modify: x.transportation.destination.name
    name: Richtung
  - data: stopEvents
    modify: x.departureTimePlanned
    icon: mdi:clock
    name: ""
  - data: stopEvents
    modify: |
      if (String(x.departureTimeEstimated).length < 10)
        {'-'}
        else
        {x.departureTimeEstimated}
    icon: mdi:clock
    name: ""
  - data: stopEvents
    modify: |-
      if (String(x.departureTimeEstimated).length < 10)
        {'-'}
        else {
      (Date.parse(String(x.departureTimeEstimated))-
       Date.parse(String(x.departureTimePlanned))) /60000;}
    icon: mdi:bus
    name: ""
4

Thank you!

This is the configuration I ultimately chose.

type: custom:flex-table-card
max_rows: 6
style: |
  ha-card {
  font-size: 1em;
  line-height: 2em;
  }
  .card-header  {
  text-align: center;
  }
css:
  td.left:nth-child(1): "text-align:center;width: 40px;"
  td.left:nth-child(3): "text-align:center;width: 40px;"
  th.left:nth-child(1): "text-align:center;width: 40px;"
  th.left:nth-child(3): "text-align:center;width: 40px;"
  th.left:nth-child(4): "text-align:center;width: 40px;"
  td.left:nth-child(4): "text-align:center;width: 40px;"
entities:
  include:
    - sensor.abfahrtenbus2024
columns:
  - data: stopEvents
    modify: x.transportation.number
    icon: mdi:bus
    name: <br>Linie
  - data: stopEvents
    modify: x.transportation.destination.name
    name: <br>Fahrtziel
    icon: mdi:directions
  - data: stopEvents
    modify: |
      if (String(x.departureTimeEstimated).length < 10)
        { String(x.departureTimePlanned).substr(11, 5) }
        else
        {String(x.departureTimeEstimated).substr(11, 5)}
    icon: mdi:clock
    name: Abfahrt
  - data: stopEvents
    modify: |-
      if (String(x.departureTimeEstimated).length < 10)
        {'-'}
        else {
      (Date.parse(String(x.departureTimeEstimated))-
       Date.parse(String(x.departureTimePlanned))) /60000;}
    icon: mdi:exclamation-thick
    name: Versp.
5

Hi @kirijanker

would you mind to share some more infos on how you get the data from vrr? I am looking for something similar for may area.

Thanks in advance

1 Like
6

Sorry, I didn’t receive a notification earlier.

If you still have the question, here’s my workflow:

  1. Go to the vrr.de website and open the Web Inspection Tools (or Developer Tools) using F12.
  2. In the Developer Tools, navigate to the Network tab for network analysis.
  3. On the VRR site, select Abfahrtsmonitor and type in the bus stop you want to monitor. Click on the correct suggestion and keep an eye on the network tab in Developer Tools.
  4. Look for a POST request with a response labeled something like XML_DM_REQUEST?.... Select the most recent one.
  5. Copy the details of this request into a notepad.
  6. You can use this request in your REST sensor, as described earlier.