Merge pull request #29 from imswel/main

added air purifier card and car card

dashboard/HaCasa/templates/custom_card_air_purifier/custom_card_air_purifier.yaml

@@ -0,0 +1,90 @@
+custom_card_air_purifier:
+  triggers_update: "[[[ return entity.entity_id ]]]"
+  show_label: true
+  show_state: true
+  show_icon: false
+  state_display: "[[[ return helpers.localize(entity) ]]]"
+  label: >
+    [[[
+      if (entity.state != "unavailable") {
+        var pct = (entity.attributes.percentage != null) ? entity.attributes.percentage :
+          "0";
+        return pct + '<sup style="font-size: 40px;">%</sup>'
+      } 
+    ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          'l buttons'
+          'n buttons'
+          's buttons'
+      - grid-template-rows: "min-content min-content"
+    card:
+      - padding: "20px"
+      - min-height: "120px"
+    name:
+      - justify-self: "start"
+      - align-self: "start"
+      - 
+      - font-weight: 500
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-family: "Montserrat"
+      - font-weight: 700
+      - font-size: "5em"
+    state:
+      - justify-self: "start"
+      - color: "var(--color-dark-gray)"
+      - font-size: "12px"
+      - font-family: "Montserrat"
+  custom_fields:
+    buttons:
+      card:
+        type: "custom:button-card"
+        styles:
+          grid:
+            - grid-template-areas: "'item1' 'item2'"
+            - row-gap: "3rem"
+          card:
+            - padding: "10px"
+            - background: "var(--contrast-background)"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              icon: "mdi:chevron-up"
+              styles: &humidifier_btn
+                icon:
+                  - width: "40px"
+                card:
+                  - box-shadow: "none"
+                  - background: "none"
+              tap_action:
+                action: "call-service"
+                service: "fan.increase_speed"
+                target:
+                  entity_id: '[[[ return entity.entity_id ]]]'
+          item2:
+            card:
+              type: "custom:button-card"
+              icon: "mdi:chevron-down"
+              styles: *humidifier_btn
+              tap_action:
+                action: "call-service"
+                service: "fan.decrease_speed"
+                target:
+                  entity_id: '[[[ return entity.entity_id ]]]'
+  state:
+    - value: "on"
+      styles:
+        card:
+          - background: var(--color-green)
+        name:
+          - color: var(--color-white)
+        label:
+          - color: var(--color-white)
+        state:
+          - color: var(--color-white)
+  hold_action:
+    action: "more-info"

dashboard/HaCasa/templates/custom_card_car/custom_card_car.yaml

@@ -0,0 +1,156 @@
+custom_card_car:
+  show_label: true
+  show_entity_picture: true
+  show_state: false
+  label: "[[[ return helpers.localize(entity) ]]]"
+  name: >
+    [[[ 
+      return (variables?.name) ? variables.name : 
+        entity.attributes.friendly_name;
+    ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          'i item'
+          'n item'
+          'l .'
+      - grid-template-rows: "repeat(3, min-content)"
+      - grid-template-columns: "min-content 1fr"
+    card:
+      - padding: "15px"
+    name:
+      - justify-self: "start"
+      - align-self: "end"
+      - font-weight: 700
+      - font-family: "Montserrat"
+      - font-size: "15px"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - color: "var(--color-dark-gray)"
+      - font-size: "12px"
+      - font-family: "Montserrat"
+      - font-weight: 500
+    img_cell:
+      - justify-content: "start"
+      - height: "88px"
+      - margin-bottom: "8px"
+    entity_picture:
+      - width: "160px"
+    custom_fields:
+      item:
+        - align-self: "start"
+        - justify-self: "end"
+  custom_fields:
+    item:
+      card:
+        type: "custom:button-card"
+        show_name: false
+        show_icon: false
+        show_state: false
+        styles:
+          grid:
+            - grid-template-areas: "'lock' 'window'"
+            - grid-template-columns: "32px"
+            - grid-template-rows: "repeat(2, min-content)"
+          card:
+            - background: "none"
+            - box-shadow: "none"
+            - border-radius: 0
+            - padding: 0
+          custom_fields:
+            lock:
+              - display: "[[[ return (variables.lock) ? 'block' : 'none']]]"
+            window:
+              - display: "[[[ return (variables.window) ? 'block' : 'none']]]"
+        custom_fields:
+          lock:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables?.lock ]]]"
+              show_name: false
+              icon: "mdi:lock-open"
+              styles: &car_item
+                grid:
+                  - grid-template-areas: "'i'"
+                card:
+                  - width: "32px"
+                  - height: "32px"
+                  - border-radius: "8px"
+                  - box-shadow: "none"
+                  - background: "var(--color-light-gray-card)"
+                  - margin-bottom: "8px"
+                icon:
+                  - width: "16px"
+                  - htight: "16px"
+                  - color: "var(--color-darkest-gray)"
+              state:
+                - value: "locked"
+                  icon: "mdi:lock"
+                  styles:
+                    card:
+                      - background: "var(--color-gold)"
+                    icon:
+                      - color: "white"
+          window:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables?.window]]]"
+              show_name: false
+              icon: "mdi:car-door"
+              styles: *car_item
+              state:
+                - value: "on"
+                  styles:
+                    card:
+                      - background: "var(--color-gold)"
+                    icon:
+                      - color: "white"
+  tap_action:
+    action: fire-dom-event
+    browser_mod:
+      service: browser_mod.popup
+      data:
+        title: >
+          [[[ 
+            return (variables?.name) ? variables.name : 
+              entity.attributes.friendly_name;
+          ]]]
+        content:
+          type: "vertical-stack"
+          cards:
+            - type: "entities"
+              card_mod:
+                style: >
+                  ha-card{
+                    box-shadow: none;
+                  }
+              entities:
+                - entity: "[[[return variables.lock ]]]"
+                  # secondary_info: "last-changed"
+                  name: "Verrouillage"
+            - type: "history-graph"
+              card_mod:
+                style: >
+                  ha-card{
+                    box-shadow: none;
+                  }
+              hours_to_show: 8
+              entities:
+                - entity: "[[[return entity.entity_id ]]]"
+                  name: "‎"
+            - type: map
+              entities:
+                - entity: "[[[ return entity.entity_id ]]]"
+              card_mod:
+                style:
+                  .: >
+                    ha-card{
+                      box-shadow: none;
+                    }
+                  ha-map:
+                    $: >
+                      .leaflet-control-attribution {
+                        display: none;
+                      }
+              theme_mode: auto

docs/cards/air-purifier-card.mdx

@@ -0,0 +1,28 @@
+---
+hide_table_of_contents: true
+title: Air Purifier Card
+---
+
+The Air Purifier Card is used for controlling your Air Purifier.
+
+![Air Purifier Light](/img/cards/airpurifier/airpurifier.png)
+![Air Purifier Dark](/img/cards/airpurifier/airpurifier-dark.png)
+
+## Usage
+
+```yaml title="📄 templates/custom_card_air_purifier/custom_card_air_purifier.yaml"
+type: "custom:button-card"
+template: custom_card_air_purifier
+entity: fan.air_purifier
+name: Air Purifier
+```
+
+## Template
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_air_purifier/custom_card_air_purifier.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_air_purifier/custom_card_air_purifier.yaml">{MyComponentSource}</CodeBlock>
+</details>

docs/cards/car-card.mdx

@@ -0,0 +1,34 @@
+---
+hide_table_of_contents: true
+title: Car Card
+---
+
+The Car Card is used to lock and locate your car. 
+You can lock/unlock your car by tapping the lock icon on the map.
+You can also see if windows are open or closed.
+When you click on the card, a popup will appear with a map centered on your car
+
+![Air Purifier Light](/img/cards/car/car.png)
+![Air Purifier Dark](/img/cards/car/car-dark.png)
+
+## Usage
+
+```yaml title="📄 templates/custom_card_car/custom_card_car.yaml"
+type: custom:button-card
+template: custom_card_car
+entity: device_tracker.peugeot_208
+variables:
+  lock: lock.peugeot_208
+  window: binary_sensor.peugeot_208_windows_closed
+  name: Peugeot 208
+```
+
+## Template
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_car/custom_card_car.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_car/custom_card_car.yaml">{MyComponentSource}</CodeBlock>
+</details>