ui-lovelace.yaml

button_card_templates:
  !include_dir_merge_named button_card_templates

views:
  - type: custom:grid-layout
    title: Home
    layout:
      #default
      margin: 0
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: repeat(4, 1fr) 0
      grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
      grid-template-areas: |
        "sidebar  .           .         .               ."
        "sidebar  salon       william   temperature     ."
        "sidebar  media       autres    maison          ."
        "sidebar  footer      footer    footer          ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
          grid-template-columns: 0 repeat(2, 1fr) 0
          grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
          grid-template-areas: |
            ".  .           .             ."
            ".  sidebar     sidebar       ."
            ".  salon       temperature   ."
            ".  william     autres        ."
            ".  media       maison        ."
            ".  footer      footer        ."
            ".  .           .             ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: var(--custom-layout-card-padding)
          grid-template-columns: repeat(3, 1fr) 0
          grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
          grid-template-areas: |
            "sidebar  .             .             ."
            "sidebar  salon         temperature   ."
            "sidebar  william       autres        ."
            "sidebar  media         maison        ."
            "sidebar  footer        footer        ."
            "sidebar  .             .             ."
    cards:

      #extra_styles fix, do not remove
      #also warn if theme is not set

      - type: custom:button-card
        view_layout:
          grid-area: 1 / 2 / 2 / 5
        name: SET THEME TO "tablet" IN PROFILE
        tap_action:
          action: navigate
          navigation_path: /profile
        styles:
          card:
            - display: >
                [[[
                  return hass.themes.theme === 'tablet'
                      ? 'none'
                      : 'initial';
                ]]]
          name:
            - z-index: 1
            - overflow: visible
            - color: red
            - font-weight: bolder
            - font-size: xxx-large
            - background: yellow

      #################################################
      #                                               #
      #                    SIDEBAR                    #
      #                                               #
      #################################################

      - type: vertical-stack
        view_layout:
          grid-area: sidebar
        cards:

          - type: custom:button-card
            entity: sensor.template_sidebar
            template: sidebar

      #################################################
      #                                               #
      #                   SALON                       #
      #                                               #
      #################################################

      - type: grid
        title: Salon
        view_layout:
          grid-area: salon
        columns: 2
        cards:

          - type: custom:button-card
            entity: switch.samsung_tv_salon
            name: Tv
            double_tap_action:
              !include popup/salon_tv.yaml
            template:
              - base
              - icon_tv
              - loader

          - type: custom:button-card
            entity: switch.computer_papa
            name: Papa
            double_tap_action:
              !include popup/computer_papa.yaml
            template:
              - base
              - icon_imac
              - loader
              - lock
            variables:
              lock: >
                [[[
                  let lock = states['input_boolean.computer_papa_lock'];
                  return !lock || lock.state;
                ]]]
              trigger: >
                [[[
                  let trigger = states['script.home_leave'];
                  return !trigger || trigger;
                ]]]


      #################################################
      #                                               #
      #                    WILLIAM                    #
      #                                               #
      #################################################

      - type: grid
        title: William
        view_layout:
          grid-area: william
        columns: 1
        cards:

          - type: custom:swipe-card
            parameters:
              speed: 550
              spaceBetween: 40
              threshold: 5
            cards:

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: light.bureau
                    name: BUREAU
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: light.plafond
                    name: PLAFOND
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: light.chambre
                    name: CHAMBRE
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: switch.computer_rig_kaoru
                    name: Kaoru
                    double_tap_action:
                      !include popup/computer_rig_kaoru.yaml
                    hold_action:
                      !include popup/computer_rig_kaoru.yaml
                    template:
                      - base
                      - icon_imac
                      - loader
                      - lock
                    variables:
                      lock: >
                        [[[
                          let lock = states['input_boolean.computer_rig_kaoru_lock'];
                          return !lock || lock.state;
                        ]]]
                      trigger: >
                        [[[
                          let trigger = states['script.home_leave'];
                          return !trigger || trigger;
                        ]]]


              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: light.plafond_1
                    name: Plafond 1
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: light.plafond_2
                    name: Plafond 2
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: light.lampe_japonaise
                    name: Lampe
                    template:
                      - light
                      - icon_hue

                  - type: custom:button-card
                    entity: light.yeelight_stripe
                    name: LED
                    template:
                      - light
                      - icon_hue

      #################################################
      #                                               #
      #                 TEMPERATURE                   #
      #                                               #
      #################################################

      - type: grid
        title: Temperature
        view_layout:
          grid-area: temperature
        columns: 1
        cards:

          - type: custom:swipe-card
            parameters:
              speed: 550
              spaceBetween: 40
              threshold: 5
            cards:

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: sensor.temperature_chambre_william
                    name: William
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.temperature_chambre_william 
                          hold_action: !include popup/temperature_chambre_william.yaml
                          tap_action: !include popup/temperature_chambre_william.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.temperature_chambre_william
                              color: '#0066ff' 
                    template:
                      - thermometre
                      - icon_thermometre

                  - type: custom:button-card
                    entity: sensor.temperature_chambre_papa
                    name: Papa
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.temperature_chambre_papa 
                          hold_action: !include popup/temperature_chambre_papa.yaml
                          tap_action: !include popup/temperature_chambre_papa.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.temperature_chambre_papa
                              color: '#2bc416' 
                    template:
                      - thermometre
                      - icon_thermometre

                  - type: custom:button-card
                    entity: sensor.temperature_salon
                    name: Salon
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.temperature_salon
                          hold_action: !include popup/temperature_salon.yaml
                          tap_action: !include popup/temperature_salon.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.temperature_salon
                              color: '#ff3300' 
                    template:
                      - thermometre
                      - icon_thermometre


                  - type: custom:button-card
                    entity: sensor.temperature_cuisine
                    name: Cuisine
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.temperature_salon
                          hold_action: !include popup/temperature_cuisine.yaml
                          tap_action: !include popup/temperature_cuisine.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.temperature_cuisine
                              color: '#b43db4' 
                    template:
                      - thermometre
                      - icon_thermometre

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: sensor.temperature_salle_de_bain
                    name: Bain
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.temperature_salon
                          hold_action: !include popup/temperature_salle_de_bain.yaml
                          tap_action: !include popup/temperature_salle_de_bain.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.temperature_salle_de_bain
                              color: '#d4e60c' 
                    template:
                      - thermometre
                      - icon_thermometre

                  - type: custom:button-card
                    entity: sensor.average_temperature
                    name: Maison
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.average_temperature
                          hold_action: !include popup/temperature_maison.yaml
                          tap_action: !include popup/temperature_maison.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.average_temperature
                              color: '#e60c63' 
                    template:
                      - thermometre
                      - icon_thermometre

                  - type: custom:button-card
                    entity: sensor.template_weather_temperature
                    name: Météo
                    custom_fields:
                      button:
                        card: 
                          type: custom:button-card
                          entity: sensor.template_weather_temperature
                          hold_action: !include popup/temperature_weather.yaml
                          tap_action: !include popup/temperature_weather.yaml
                      graph:
                        card:
                          type: custom:mini-graph-card
                          entities:
                            - entity: sensor.template_weather_temperature
                              color: '#08fad3' 
                    template:
                      - thermometre_weather
                      - icon_thermometre


      #################################################
      #                                               #
      #                     MEDIA                     #
      #                                               #
      #################################################

      - type: grid
        title: Media
        view_layout:
          grid-area: media
        columns: 1
        cards:

          - type: custom:swipe-card
            parameters:
              speed: 550
              spaceBetween: 40
              threshold: 5
            cards:

              - type: horizontal-stack
                cards:

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state_not: Spotify

                      - entity: select.conditional_media
                        state_not: Cuisine

                      - entity: select.conditional_media
                        state_not: Chambre                        

                    card:
                      type: custom:button-card
                      entity: sensor.plex_recently_added
                      name: Récemment ajouté 
                      tap_action:
                        action: none
                      template:
                        - conditional_media
                        - icon_plex

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state: Chambre

                    card:
                      type: custom:button-card
                      entity: media_player.google_home_chambre
                      tap_action:
                        action: none
                      template:
                        - conditional_media
                        - icon_nest_mini

                  - type: conditional
                    conditions:
                      - entity: select.conditional_media
                        state: Spotify

                    card:
                      type: custom:button-card
                      entity: media_player.spotify
                      tap_action:
                        action: none
                      template:
                        - conditional_media
                        - icon_spotify_green

              - type: grid
                columns: 2
                cards:

                  - type: custom:button-card
                    entity: media_player.google_home_chambre
                    name: Chambre
                    #hold_action: !include popup/media_player.yaml
                    #double_tap_action: !include popup/media_player.yaml
                    template:
                      - media
                      - icon_nest_mini

                  - type: custom:button-card
                    name: Cuisine
                    entity: media_player.google_home_cuisine
                    #hold_action: !include popup/media_player.yaml
                    #double_tap_action: !include popup/media_player.yaml
                    template:
                      - media
                      - icon_nest_mini

                  - type: custom:button-card
                    entity: media_player.spotify
                    name: Spotify
                    #hold_action: !include popup/spotify.yaml
                    #double_tap_action: !include popup/spotify.yaml
                    template:
                      - media
                      - icon_spotify

                  - type: custom:button-card
                    entity: media_player.bouygtel4k
                    name: Bbox
                    #hold_action: !include popup/media_player.yaml
                    #double_tap_action: !include popup/media_player.yaml
                    template:
                      - media
                      - icon_bouygues_white


      #################################################
      #                                               #
      #                    AUTRES                     #
      #                                               #
      #################################################

      - type: grid
        title: Autres
        view_layout:
          grid-area: autres
        columns: 2
        cards:

          - type: custom:button-card
            entity: fan.xiaomi_smart_fan_2
            name: "Smart fan"
            double_tap_action: !include popup/fan.yaml
            template:
              - base
              - icon_fan2
              - loader


      #################################################
      #                                               #
      #                     MAISON                    #
      #                                               #
      #################################################

      - type: grid
        title: Maison
        view_layout:
          grid-area: maison
        columns: 2
        cards:

          - type: custom:button-card
            entity: person.kaoru
            name: William
            triggers_update:
              - sensor.kaoru_last_changed
            double_tap_action:
              !include popup/maison_william.yaml
            variables:
              retain: sensor.kaoru_last_changed
            template:
              - person
              - circle

          - type: custom:button-card
            entity: person.papa
            name: Papa
            triggers_update:
              - sensor.papa_last_changed
            double_tap_action:
              !include popup/maison_papa.yaml
            variables:
              retain: sensor.papa_last_changed
            template:
              - person
              - circle

          - type: custom:button-card
            entity: script.home_leave
            name: Partir
            tap_action: !include popup/home_leave.yaml
            hold_action: !include popup/home_leave.yaml
            template:
              - base
              - icon_away

          - type: custom:button-card
            entity: script.home_arrive
            name: Maison
            template:
              - base
              - icon_home

      #################################################
      #                                               #
      #                    FOOTER                     #
      #                                               #
      #################################################

      - type: horizontal-stack
        view_layout:
          grid-area: footer
        cards:

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:information-outline"></ha-icon> Système
            tap_action:
              !include popup/footer_host_hass.yaml
            triggers_update:
              - update.nas_dsm_update
              - sensor.nas_volume_1_status
              - binary_sensor.nas_security_status
              - sensor.disk_use_percent
            variables:
              notify: >
                [[[
                  let id = this._config.triggers_update;
                  if (id.every(e => states[e]))
                      return states[id[0]].state === 'on'
                          ? 1
                          : states[id[1]].state === 'background_scrubbing' ||
                            states[id[2]].state === 'on' ||
                            parseFloat(states[id[3]].state) >= 85;
                ]]]
            template: footer

          - type: custom:button-card
            entity: sensor.template_updates
            name: >
              <ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> MAJ
            tap_action:
              !include popup/footer_updates.yaml
            variables:
              notify: >
                [[[
                  return parseInt(entity?.state);
                ]]]
            template: footer

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:chart-line-variant"></ha-icon> Historique
            tap_action:
              !include popup/footer_history.yaml
            template: footer

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:tablet"></ha-icon> Tablette
            tap_action:
              !include popup/footer_tablet.yaml
            variables:
              notify: >
                [[[
                  let id = states['binary_sensor.lenovotab_plugged_in'];
                  if (id) return id.state === 'off';
                ]]]
            template: footer

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:check-network"></ha-icon> Appareil
            tap_action:
              !include popup/footer_device.yaml
            triggers_update:
              - update.unifi_dream_machine
              - binary_sensor.template_udm_internet
            variables:
              notify: >
                [[[
                  let id = this._config.triggers_update;
                  if (id.every(e => states[e]))
                      return states[id[0]].state === 'on'
                          ? 1
                          : states[id[1]].state === 'off';
                ]]]
            template: footer

          - type: custom:button-card
            name: >
              <ha-icon icon="mdi:qrcode"></ha-icon> QR
            tap_action:
              !include popup/footer_qr_wifi.yaml
            template: footer