I am working on the HA cards from Pronote

This block is the follow-up of my work on the maps proposed by @vingerha and those of @dathosim.

My goal is to replace the script python by integration.

[Update of this page]

Following the correction of V0.6.0, homeworks replaced by homework
Added Canteen Menu card (>V6.0.6)

Prerequisite

I am thinking of installing the interface card-mod in HACS

Attention, I think about installing the type card self-entities

The Time Use Map

Both are super clean, for the cancelled course I hesitate between the red button or the crossed-out time, both are relevant.

I made a mix of the two and added a space before ‘class council’, I also reworked the date in the title because it had to be found.

The code is:

- type: markdown content: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable _next_day','lessons') %} <div>Time use of: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', true)}} </div>

    <table>   {% for i in range(0, items | count, 1) %}  <tr> 
      {%- if items[i].canceled!= True -%} 
      <td><mark>{{ items[i].start_time}}</td> 
      <td><mark>{{ items[i].end _time }}</td></mark>
      <td>{{ items[i].lesson }} {% else %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endive -%} {% if items[i].status!= None %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
  card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:0px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-size: 0.9em; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }type: ''

The homework map

I have changed entities and the result is:

Its code:

- type: markdown content: | -
    <div>Duties</div>
    <table>
        <tbody>
            {% set items = state_attr('sensor.pronote_xx _coralie _homework','homework') %} {%-for i in range(0, items | count, 1) -%}
            <tr>
                <td>
                {%- if items[i].done == true -%}
                    <mark>
                    {{items[i].date.strftime("%d/%m")}}
                    </mark>
                {%- else -%}
                    <span>
                    {{items[i].date.strftime("%d/%m")}}
                    </span>
                {% endif %}</td>              
                <td>{{items[i].subject}}</td>
                <td>{{items[i].description}}</td>
            </tr>
            {% endfor %}
      </tbody>
    </table>
  card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:0px } ha-markdown$: | h1 { font-weight: normal; font-size: 24px; } div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-size: 0.9em; font-family: Roboto; width: auto; outline: 0px solid #393c3d; margin-top: 10px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 5px 5px 5px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; } mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }

note: It will be necessary to check whether to use sensor.pronote _xx _coralie _homework _period or sensor.pronote _xx _coralie _homework when there are several days.

Map of evaluations

I had already turned green more into green heart, I think it is nicer. Here is the map with the integration:

- type: markdown content: &gt;-
    <div>Evaluations</div> {% set items = state_attr('sensor.pronote_xx_coralie_evaluations','evaluations')%}
    <table width='100%'>
      <tbody>
      {% for i in range(0, items | count, 1) %}
      <tr><td width='10%'>{{ items[i].date.strftime("%d-%m") }}</td><td width='60%'>{{ items[i].subject }}</td><td width='30%'>
      {% set acquisitions = items[i]. acquisitions %} {% for j in range(0, acquisitions|count,1) %}{% if acquisitions[j].level == 'Very good mastery' %💚{% elif acquisitions[j].level == 'Satisfactory control' %🟢{% elif acquisitions[j].level == "Beginning of mastery" %🟡{% elif acquisitions[j].level == 'Fragile mastery' %🟡{% elif acquisitions[j].level == 'Insufficient control' %🟠{% else %}?{% endif %}{% endfor %}</td></tr>
      {% endfor %}
    </tbody> </table>
  card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:0px } ha-markdown$: | h1 { font-weight: normal; font-size: 24px; } div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-weight:normal; font-size:1.2em; font-family: Roboto; width: auto; outline: 0px solid #393c3d; margin-top: 10px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 0px 5px 0px 5px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; line-height: 4px; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; } mark { background: #009767; color: #222627; border-radius: 10px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 10px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }

The map of absences

It is perfect, to fit the design of the other cards, the result is:

- type: markdown content: &gt;-
    <div>Absences</div><table> 

    {% set items = state_attr('sensor.pronote_xxxx _coralie _absences','absences') %} {% for i in range(0, items | count, 1) %}

    <tr>

    {%- if items[i].justified == True -%}

    <td> <mark> {{ items[i].from.strftime("%d-%m") }}</mark></td>

    {% else %}

    <td> <span>{{ items[i].from.strftime("%d-%m") }}</span></td> 

    {%- endive -%} 

    <td>{{ items[i].hours }}</td>

    <td>{{ items[i].reason }}</td>

    {% endfor %} card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:0px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }

Menu map of the canteen

V6.0.6 minimum required

Type: markdown content: | -
  <div>Menus Canteen</div>
  <table>
      <tbody>
  {% set items = state_attr('sensor.pronote_xxx_menus','menus') %}
    <tr>
    <td><h4>Date</td>
    <td><h4>Entrance</td>
    <td><h4>Main course</td>
    <td><h4>Accompaniment</td>
    <td><h4>Cheese</td>
    <td><h4>Dessert</td>
    </tr>
  {% for i in range(0, items | count, 1) %} {% if items[i].is_lunch == True %}
    <tr>
    <td>      
    <mark>  
    {{ items[i].date | as_datetime | as_timestamp | timestamp _custom('%d/%me') }}
    </mark>
    </td>
    <td> 
      {% for entry in items[i].first_meal %} {{ entry.name }} {% endfor %}
    </td>
    <td> 
      {% for main in items[i].main_meal %} {{ main.name }} {% endfor %}
    </td>
    <td>
      {% if items[i].side_meal %} {% for side in items[i].side_meal %} {{ side.name }} {% endfor %} {% else %} PAS _DISPO {% endif %}
    </td>
    <td>
      {% for cheese in items[i].cheese %} {{ cheese.name }} {% endfor %}
    </td>
    <td>
      {% for dessert in items[i].dessert %} {{ dessert.name }} {% endfor %}
    </td>
      {% endif %} {% endfor %}
    </tbody>
  </table>
card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }

Addition of additional information

Thanks to the excellent idea of @dathosim script, I will add templates that give me this information, code to place in template

- sensor: - name: Last update of Pronote Unique _id: sensor.latest _mise _a _jour _de _pronote icon: "mdi:update" state: "{{state_attr('sensor.pronote_xx_coralie','updated_at').strftime('%d-%m-%Y to %H:%M') }}" - sensor: - name: Beginning of Coralie's classes - Demain unique _id: sensor.debut_des_courses_de_coralie_demain icon: "mdi:clock-time-five-outline" state: >- {% if state_attr('sensor.pronote_xx _coralie _timetable _tomorrow', 'lessons')[0] is defined %} {{state _attr('sensor.pronote _xx _coralie _timetable _tomorrow', 'lessons')[0]['start _at'].strftime('%H:%M')}} {% else %} No class {% endif %} - sensor: - name: Beginning of Coralie's classes - Today unique _id: sensor.debut_des_courses_de_coralie_today _hui icon: "mdi:clock-time-five-outline" state: >- {% if state_attr('sensor.pronote_xx _coralie _timetable _today', 'lessons')[0] is defined %} {{state _attr('sensor.pronote _xx _coralie _timetable _today', 'lessons')[0]['start _at'].strftime('%H:%M')}} {% else %} No class {% endif %}

Final result

Final code of the complete tile:

Type: horizontal-stack columns: 1 square: false cards: - type: vertical-stack cards: - type: markdown content: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable_today','lessons') %} <div>Time use of: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', true)}} </div>

          <table>   {% for i in range(0, items | count, 1) %}  <tr> 
            {%- if items[i].canceled!= True -%} 
            <td><mark>{{ items[i].start_time}}</td> 
            <td><mark>{{ items[i].end _time }}</td></mark>
            <td>{{ items[i].lesson }} {% else %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endive -%} {% if items[i].status!= None %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
        card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; } - type: markdown content: &gt;- {% set items = state_attr('sensor.pronote_xx _coralie _timetable _next_day','lessons') %} <div>Time use of: {{as _timestamp(items[0].start _at) | int | timestamp _custom('%d/%m/%Y', true)}} </div>

          <table>   {% for i in range(0, items | count, 1) %}  <tr> 
            {%- if items[i].canceled!= True -%} 
            <td><mark>{{ items[i].start_time}}</td> 
            <td><mark>{{ items[i].end _time }}</td></mark>
            <td>{{ items[i].lesson }} {% else %} <td><del>{{ items[i].start _time }}</td> <td><del>{{ items[i].end _time}}</td> <td><del>{{ items[i].lesson }}</del> {%- endive -%} {% if items[i].status!= None %} <span> {{ items[i].status }}</td> {% endif %} <td> {{items[i].classroom }}</td> </tr> {% endfor %} </table> 
        card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; } - type: markdown content: | -
          <div>Duties</div>
          <table>
              <tbody>
                  {% set items = state_attr('sensor.pronote_xx _coralie _homework','homework') %} {%-for i in range(0, items | count, 1) -%}
                  <tr>
                      <td>
                      {%- if items[i].done == true -%}
                          <mark>
                          {{items[i].date.strftime("%d/%m")}}
                          </mark>
                      {%- else -%}
                          <span>
                          {{items[i].date.strftime("%d/%m")}}
                          </span>
                      {% endif %}</td>              
                      <td>{{items[i].subject}}</td>
                      <td>{{items[i].description}}</td>
                  </tr>
                  {% endfor %}
            </tbody>
          </table>
        card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | h1 { font-weight: normal; font-size: 24px; } div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-weight:normal; font-size:1.2em; font-family: Roboto; width: auto; outline: 0px solid #393c3d; margin-top: 10px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 5px 5px 5px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; } mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; } - type: markdown content: &gt;-
          <div>Absences</div><table> 

          {% set items = state_attr('sensor.pronote_xx_coralie_absences','absences') %} {% for i in range(0, items | count, 1) %}

          <tr>

          {%- if items[i].justified == True -%}

          <td> <mark> {{ items[i].from.strftime("%d-%m") }}</mark></td>

          {% else %}

          <td> <span>{{ items[i].from.strftime("%d-%m") }}</span></td> 

          {%- endive -%} 

          <td>{{ items[i].hours }}</td>

          <td>{{ items[i].reason }}</td>

          {% endfor %} card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-family: Roboto; width: 100%; outline: 0px solid #393c3d; margin-top:5px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 5px 10px 5px 10px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; }* mark { background: #009767; color: #222627; border-radius: 5px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 5px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; } - type: custom:auto-entities card: Type: entities filter: include: - entity_id: binary_sensor.open_today_ - entity_id: binary_sensor.open_demain - entity_id: binary_sensor.vacances_schools_today - entity_id: binary_sensor.vacances_scolaires_demain - entity_id: sensor.debut_des_courses_coralie_today_ - entity_id: sensor.debut_des_courses_de_coralie_demain - entity_id: sensor.coralie_next_alarm - type: custom:auto-entities card: Type: entities filter: include: - entity_id: sensor.latest _mise_a_jour_de_pronote - type: vertical-stack cards: - type: markdown content: &gt;-
          <div>Evaluations</div> {% set items = state_attr('sensor.pronote_xx_coralie_evaluations','evaluations')%}
          <table width='100%'>
            <tbody>
            {% for i in range(0, items | count, 1) %}
            <tr><td width='10%'>{{ items[i].date.strftime("%d-%m") }}</td><td width='60%'>{{ items[i].subject }}</td><td width='30%'>
            {% set acquisitions = items[i]. acquisitions %} {% for j in range(0, acquisitions|count,1) %}{% if acquisitions[j].level == 'Very good mastery' %💚{% elif acquisitions[j].level == 'Satisfactory control' %🟢{% elif acquisitions[j].level == "Beginning of mastery" %🟡{% elif acquisitions[j].level == 'Fragile mastery' %🟡{% elif acquisitions[j].level == 'Insufficient control' %🟠{% else %}?{% endif %}{% endfor %}</td></tr>
            {% endfor %}
          </tbody> </table>
        card_mod: style: .: | ha-card ha-markdown { padding:0px } ha-card ha-markdown.no-header { padding:10px } ha-markdown$: | h1 { font-weight: normal; font-size: 24px; } div { background-color:rgb(100, 100, 100); padding: 12px 12px; color:white; font-weight:normal; font-size:1.2em; border-top-left-radius: 5px; border-top-right-radius: 5px; } table{ border-collapse: collapse; font-weight:normal; font-size:1.2em; font-family: Roboto; width: auto; outline: 0px solid #393c3d; margin-top: 10px; } caption { text-align: center; font-weight: bold; font-size: 1.2em; } td { padding: 0px 5px 0px 5px; text-align: left; border-bottom: 0px solid #1c2020; } tr { border-bottom: 0px solid #1c2020; line-height: 4px; } tr:nth-of-type(even) { background-color: rgb(54, 54, 54, 0.3); } tr:last-of-type { border-bottom: transparent; } mark { background: #009767; color: #222627; border-radius: 10px; padding: 5px; } span { background: #EC4B34; color: #222627; border-radius: 10px; padding: 5px; } span { padding: 5px; } tr:nth-child(n+2) &gt; td:nth-child(2) { text-align: left; }

Jun, 2023

I'm working on Pronote's HA cards.