[CARTE] Affichage des horaires RER Parisiens

Contexte :

Avoir une carte qui affiche les horaires du RER pour une gare.
Prérequis : rien d’autre qu’un HA :joy: et utiliser l’API de Pierre GRIMAUD.

Les grandes étapes :

  • Déclaration du sensor
  • Déclaration de la carte en markdown avec du template

Résultat attendu :

image

C’est parti :

Récupération des infos via l’API de Pierre GRIMAUD :

Il faut se rendre sur l’interface de l’API pour générer la requête qui nous intéresse.
Aller à la section Stations, et cliquer sur Try it out, cela va nous permettre d’avoir la bonne syntaxe du nom de l’arrêt/gare/station :

Remplir les champs suivants en fonction de son besoin, ici rers, la ligne A, le sens retour R (il faut tester pour trouver le bon sens) :

Cela affiche la résultat de la requête, on récupère la syntaxe slug du nom de la gare, dans l’exemple La Défense « la+defense+(grande+arche) ».

On va récupérer l’URL qui nous servira à avoir les infos d’horaires, on se rendra à la section Schedules, « Try it out » :

On récupère l’URL dans la partie ** Request URL** :

Allons maintenant sur HA :

Déclaration du sensor :

  ## API Pierre GRIMAUD
  ### Doc : https://api-ratp.pierre-grimaud.fr/v4/
  ### Dashboard : https://p.datadoghq.com/sb/b933ad64d-3d03339edc63b8ba89556675024d64fd
  ### RER A - La Defense vers l est
  - platform: rest
    name: makers_rera2est
    json_attributes:
      - result
      - _metadata
    value_template: "{{ value_json.result.schedules[0].message }}"
    resource: https://api-ratp.pierre-  grimaud.fr/v4/schedules/rers/a/la%2Bdefense%2B(grande%2Barche)/R

Note : attention à l’indentation .

Redémarrage de HA …

Code de la carte :

card: null
type: markdown
content: |
  <table>
      <thead>
          <tr>
              <th>Code mission</th>
              <th>Destination</th>
              <th>Horaire</th>
          </tr>
      </thead>
      <tbody>
          {% for infos_train in states.sensor.makers_rera2est.attributes.result.schedules -%}
            <tr>
              <td><mark>{{ infos_train.code -}} </mark></td>
              <td>{{ infos_train.destination -}} </td>
              <td>{{ infos_train.message -}} </td>
            </tr>
          {% endfor -%}
      </tbody>
  </table>
title: RER A - La Défense
card_mod:
  style:
    ha-markdown:
      $:
        ha-markdown-element: |
          table{
             border-collapse: collapse;
             margin: 25px 0;
             font-size: 0.9em;
             font-family: sans-serif;
             min-width: 100%;
             box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
             border-radius: 15px;
           }
           td {
               padding: 12px 15px;
           }
           tr {
               border-bottom: 1px solid grey;
           }


           tr:nth-of-type(even) {
               background-color: #f3f3f3;
           }

           tr:last-of-type {
               border-bottom: 2px solid red;
           }
           td:last-of-type {
               background-color: #716F6B;
               color: #F3C66C;
           }

           thead > tr > th {
             padding: 12px 15px;
             color: blue;
             font-weight: 700;
           }

           tr > td {
             text-align: center;
           }

           tr >  td > mark {
             background: #716F6B;
             color: white;
             border-radius: 5px;
             padding: 5px;
           }
           td:nth-child(2) {
             color: blue;
           }

Note :
HA est susceptible à l’indentation :grin:
On ne critique pas mon niveau de CSS :yum:

2 « J'aime »

Merci pour le partage c’est cool :slight_smile:

Hello,

Pas de soucis, le partage ça ne doit pas marcher que dans un sens :yum:
C’est super agréable de trouver une communauté Francophone sur le sujet, c’est plus pratique pour les sujet techniques.
En plus c’est réactif :ok_hand:.

1 « J'aime »

:rofl:

D’autre exemple de tableaux :

1 « J'aime »

C’est exactement suite à ce post et en voyant les exemples que je me suis dit « oui mais bien sûr » :joy:

1 « J'aime »