html template card : deLijn

Raw Download Revise
type: custom:html-template-card

title: Real Time — De Lijn

ignore_line_breaks: true

content: >

  {% set stop_name = "Anderlecht Coovi" %} {% set alert_entity =

  "sensor.delijn_alerts_anderlecht_coovi_300801" %} {% set alert_count =

  states(alert_entity) | int(0) %}

  <div style="display: flex; align-items: center; justify-content:

  space-between;

    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--divider-color);">

    <div style="display: flex; align-items: center;">

      <ha-icon icon="mdi:bus-stop" style="color:#2196F3; margin-right: 10px;"></ha-icon>

      <span style="font-weight: bold; font-size: 1.1em;">{{ stop_name }}</span>

    </div>

    {% if alert_count > 0 %}

    <span style="color: #FF5722; font-size: 0.85em;">

      <ha-icon icon="mdi:alert-circle" style="color:#FF5722;"></ha-icon>

      {{ alert_count }} alerte{{ 's' if alert_count > 1 }}

    </span>

    {% endif %}

  </div>

  <table width="100%" style="border-collapse: collapse;">

    <thead>

      <tr style="border-bottom: 1px solid var(--divider-color);">

        <td width="18%" align="left"   style="font-weight: bold; padding-bottom: 8px;">Ligne</td>

        <td width="42%" align="center" style="font-weight: bold; padding-bottom: 8px;">Destination</td>

        <td width="20%" align="right"  style="font-weight: bold; padding-bottom: 8px;">Prochain</td>

        <td width="20%" align="right"  style="font-weight: bold; padding-bottom: 8px;">Suivant</td>

      </tr>

    </thead>

    <tbody>

  {% macro render_row(entity_id) %}

    {% set s = states[entity_id] %}

    {% if s %}

      {% set state_val  = s.state %}

      {% set line       = s.attributes.line | default('?') %}

      {% set dest       = s.attributes.destination | default('N/A') %}

      {% set pred       = s.attributes.prediction | default('') %}

      {% set bg         = s.attributes.badge_background | default('#888888') %}

      {% set fg         = s.attributes.badge_text | default('#FFFFFF') %}

      {% set border_col = s.attributes.badge_border | default(bg) %}

      {% set next_deps  = s.attributes.next_departures | default([]) %}

      {% set next_time  = next_deps[0].realtime if next_deps and next_deps[0].realtime else

                          (next_deps[0].scheduled if next_deps else None) %}

      {% set cancelled  = pred == 'Annulé' or pred == 'Geschrapt' %}

      {% set no_service = state_val in ['unknown','unavailable'] %}

      {% set fsize      = 52 if line|length <= 2 else (40 if line|length == 3 else 28) %}

      {% set svg_bg     = bg | replace('#','%23') %}

      {% set svg_fg     = fg | replace('#','%23') %}

      {% set svg_border = border_col | replace('#','%23') %}

      <tr style="border-bottom: 1px solid var(--divider-color, #e0e0e0);">

        <td width="18%" align="left" style="padding: 10px 0;">

          <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>

            <rect x='8' y='8' width='84' height='84' fill='{{ svg_bg }}' stroke='{{ svg_border }}'

              stroke-width='6' rx='14'/>

            <text x='50' y='52' font-size='{{ fsize }}' font-family='Arial,sans-serif'

              text-anchor='middle' dominant-baseline='central'

              fill='{{ svg_fg }}' font-weight='bold'>{{ line }}</text>

            </svg>"

            style="width:48px; height:48px;" />

        </td>

        <td width="42%" align="center"

          style="padding: 6px 4px; font-size: 0.88em; text-transform: uppercase;">

          {% if cancelled %}

            <span style="color: var(--error-color, #FF5722);">

              <ha-icon icon="mdi:cancel"></ha-icon> Annulé

            </span>

          {% else %}

            {{ dest }}

          {% endif %}

        </td>

        <td width="20%" align="right" style="padding: 6px 0; font-weight: bold; white-space: nowrap;">

          {% if no_service %}

            <span style="color: var(--secondary-text-color); font-size: 0.85em;">—</span>

          {% else %}

            <span style="font-size: 1.6em;">{{ state_val if not cancelled else '--' }}</span>

            <span style="font-size: 0.8em;"> m</span>

          {% endif %}

        </td>

        <td width="20%" align="right"

          style="padding: 6px 0; color: var(--secondary-text-color); white-space: nowrap;">

          <span style="font-size: 1.1em;">{{ next_time if next_time else '—' }}</span>

        </td>

      </tr>

    {% endif %}

  {% endmacro %}

  {{ render_row('sensor.delijn_line_r42_anderlecht_coovi_to_leerbeek') }} {{

  render_row('sensor.delijn_line_r54_anderlecht_coovi_to_halle_az') }} {{

  render_row('sensor.delijn_line_r70_anderlecht_coovi_to_halle_station') }} {{

  render_row('sensor.delijn_line_r71_anderlecht_coovi_to_brukom_europalaan') }}

  {{ render_row('sensor.delijn_line_r72_anderlecht_coovi_to_sint_pieters_leeuw')

  }}

    </tbody>

  </table>