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.