[TUTO] Programmer une période date/heure vers le KNX

[XeNo]

Petite info pour corriger le bug.

Alors en fait, l'add-on browser_mod n'est plus maintenu, le développeur a laissé tombé le dev.
Une autre personne a fait un fork de l'add-on qui corrige plusieurs choses, dont l'affichage du datepicker !
Voici le lien du brower_mod a installer : https://github.com/dcapslock/hass-browser_mod

Suivez bien les indications pour supprimer l'ancien browser_mod sinon ça ne fonctionnera pas.


Ensuite, petite particularité, browser_mod n'utilisant pas toutes les adhérences de design de HA, il sera nécessaire de coder une profondeur du popup (z-index).

Voici donc le code qui fonctionne parfaitement pour tout afficher :

Code :

type: vertical-stack
title: Programmation Absence
cards:
 - type: horizontal-stack
   cards:
     - type: custom:mushroom-template-card
       icon: mdi:airplane-clock
       name: Programmation
       layout: vertical
       multiline_secondary: true
       primary: Programmer une période d'absence
       secondary: |
         Programmer une période avec un clic
         Active/désactive la programmation par un double clic
       badge_icon: |
         {% if (states("binary_sensor.mode_vacances_status") == "on" )  %}
           mdi:calendar-check-outline            
         {% endif %}
       badge_color: |
         {% if (states("binary_sensor.mode_vacances_status") == "on" )  %}
           green
         {% endif %}
       icon_color: |
         {% if (states("switch.mode_vacances") == "off" )  %}
           grey
         {% elif (states("switch.mode_vacances") == "on") %}
           green
         {% endif %}        
       hold_action:
         action: call-service
         service: switch.toggle
         data:
           entity_id: switch.mode_vacances
       double_tap_action:
         action: call-service
         service: switch.toggle
         data:
           entity_id: switch.mode_vacances
       card_mod:
         style:
           .: |
             ha-card {
               padding-bottom: 5px !important;
             }              
           mushroom-badge-icon$: |
             .badge {
               --badge-icon-size: 18px;
               --badge-size: 22px;
             }
           mushroom-shape-icon$: |
             .shape {
               --icon-symbol-size: 40px;
               --icon-size: 60px;
             }
       tap_action:
         action: fire-dom-event
         browser_mod:
           service: browser_mod.popup
           data:
             style: |
                z-index: 5;
                position: absolute;
             title: Programmer la période d'absence
             content:
               type: custom:vertical-stack-in-card
               cards:
                 - type: vertical-stack
                   cards:
                     - type: custom:mushroom-title-card
                       title: null
                       subtitle: Choisir la date et l'heure du départ
                       card_mod:
                         style: |
                           ha-card {
                             margin-left: 30px;
                             margin-right: 30px;
                           }
                     - type: entities
                       entities:
                         - entity: input_datetime.prog_vacances_date_depart
                           name: Date départ
                         - type: custom:time-picker-card
                           entity: input_datetime.prog_vacances_heure_depart
                           name: Heure départ
                           layout:
                             name: inside
                             align_controls: right
                             embedded: true
                             thin: true
                     - type: custom:mushroom-title-card
                       title: null
                       subtitle: Choisir la date et l'heure du retour
                       card_mod:
                         style: |
                           ha-card {
                             margin-left: 30px;
                             margin-right: 30px;
                           }
                     - type: entities
                       entities:
                         - entity: input_datetime.prog_vacances_date_retour
                           name: Date retour
                         - type: custom:time-picker-card
                           entity: input_datetime.prog_vacances_heure_retour
                           name: Heure retour
                           layout:
                             name: inside
                             align_controls: right
                             embedded: true
                             thin: true
                     - type: horizontal-stack
                       cards:
                         - type: custom:gap-card
                         - type: custom:mushroom-template-card
                           icon: mdi:tooltip-check-outline
                           primary: Valider
                           fill_container: false
                           icon_color: green
                           tap_action:
                             action: call-service
                             confirmation:
                               text: >-
                                 Valider et activer la programmation de la
                                 période d'absence indiquée ?
                             service: script.validation_programmation_vacances
                           card_mod:
                             style:
                               .: |
                                 ha-card {
                                   margin-top: 30px;
                                   margin-bottom: 30px;
                                 }
                         - type: custom:gap-card

On voit l'ajout particulier pour le z-index ici :

Code :

             style: |
               z-index: 5;
               position: absolute;

Et on se retrouve donc avec un fonctionnement parfait :

   


Voilà, à vos cartes !