Home view: person-billeder med syg-toggle (gråtoner + rød kant ved tryk)

dashboards/views/01_home.yaml

@@ -33,19 +33,211 @@ cards:
             name: I morgen
             icon: mdi:briefcase-outline
 
-  # 👨‍👩‍👧‍👦 Familien
+  # 👨‍👩‍👧‍👦 Familien – tryk for at toggle syg/rask
-  - type: glance
+  - type: grid
-    entities:
+    columns: 4
-      - entity: person.daniel_schusler_dethlefsen
+    square: true
+    cards:
+
+      - type: custom:button-card
+        entity: person.daniel_schusler_dethlefsen
         name: Daniel
-      - entity: person.claus_dethlefsen
+        show_name: true
+        show_state: false
+        show_icon: false
+        show_entity_picture: true
+        entity_picture_style:
+          - border-radius: 50%
+          - width: 100%
+          - filter: >
+              [[[
+                return states['input_select.daniel_status'] &&
+                       states['input_select.daniel_status'].state === 'syg'
+                  ? 'grayscale(100%)' : 'none';
+              ]]]
+        styles:
+          card:
+            - padding: 6px
+            - border: >
+                [[[
+                  return states['input_select.daniel_status'] &&
+                         states['input_select.daniel_status'].state === 'syg'
+                    ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
+                ]]]
+            - border-radius: 12px
+          name:
+            - font-size: 11px
+            - padding-top: 4px
+            - color: >
+                [[[
+                  return states['input_select.daniel_status'] &&
+                         states['input_select.daniel_status'].state === 'syg'
+                    ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
+                ]]]
+        tap_action:
+          action: call-service
+          service: input_select.select_option
+          service_data:
+            entity_id: input_select.daniel_status
+            option: >
+              [[[
+                return states['input_select.daniel_status'] &&
+                       states['input_select.daniel_status'].state === 'syg'
+                  ? 'hjemme' : 'syg';
+              ]]]
+        hold_action:
+          action: more-info
+          entity: person.daniel_schusler_dethlefsen
+
+      - type: custom:button-card
+        entity: person.claus_dethlefsen
         name: Claus
-      - entity: person.anne_schusler_dethlefsen
+        show_name: true
+        show_state: false
+        show_icon: false
+        show_entity_picture: true
+        entity_picture_style:
+          - border-radius: 50%
+          - width: 100%
+          - filter: >
+              [[[
+                return states['input_select.claus_status'] &&
+                       states['input_select.claus_status'].state === 'syg'
+                  ? 'grayscale(100%)' : 'none';
+              ]]]
+        styles:
+          card:
+            - padding: 6px
+            - border: >
+                [[[
+                  return states['input_select.claus_status'] &&
+                         states['input_select.claus_status'].state === 'syg'
+                    ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
+                ]]]
+            - border-radius: 12px
+          name:
+            - font-size: 11px
+            - padding-top: 4px
+            - color: >
+                [[[
+                  return states['input_select.claus_status'] &&
+                         states['input_select.claus_status'].state === 'syg'
+                    ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
+                ]]]
+        tap_action:
+          action: call-service
+          service: input_select.select_option
+          service_data:
+            entity_id: input_select.claus_status
+            option: >
+              [[[
+                return states['input_select.claus_status'] &&
+                       states['input_select.claus_status'].state === 'syg'
+                  ? 'hjemme' : 'syg';
+              ]]]
+        hold_action:
+          action: more-info
+          entity: person.claus_dethlefsen
+
+      - type: custom:button-card
+        entity: person.anne_schusler_dethlefsen
         name: Anne
-      - entity: person.andreas_schusler_dethlefsen
+        show_name: true
+        show_state: false
+        show_icon: false
+        show_entity_picture: true
+        entity_picture_style:
+          - border-radius: 50%
+          - width: 100%
+          - filter: >
+              [[[
+                return states['input_select.anne_status'] &&
+                       states['input_select.anne_status'].state === 'syg'
+                  ? 'grayscale(100%)' : 'none';
+              ]]]
+        styles:
+          card:
+            - padding: 6px
+            - border: >
+                [[[
+                  return states['input_select.anne_status'] &&
+                         states['input_select.anne_status'].state === 'syg'
+                    ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
+                ]]]
+            - border-radius: 12px
+          name:
+            - font-size: 11px
+            - padding-top: 4px
+            - color: >
+                [[[
+                  return states['input_select.anne_status'] &&
+                         states['input_select.anne_status'].state === 'syg'
+                    ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
+                ]]]
+        tap_action:
+          action: call-service
+          service: input_select.select_option
+          service_data:
+            entity_id: input_select.anne_status
+            option: >
+              [[[
+                return states['input_select.anne_status'] &&
+                       states['input_select.anne_status'].state === 'syg'
+                  ? 'hjemme' : 'syg';
+              ]]]
+        hold_action:
+          action: more-info
+          entity: person.anne_schusler_dethlefsen
+
+      - type: custom:button-card
+        entity: person.andreas_schusler_dethlefsen
         name: Andreas
-      - entity: binary_sensor.family_presence
+        show_name: true
-        name: Familie
+        show_state: false
+        show_icon: false
+        show_entity_picture: true
+        entity_picture_style:
+          - border-radius: 50%
+          - width: 100%
+          - filter: >
+              [[[
+                return states['input_select.andreas_status'] &&
+                       states['input_select.andreas_status'].state === 'syg'
+                  ? 'grayscale(100%)' : 'none';
+              ]]]
+        styles:
+          card:
+            - padding: 6px
+            - border: >
+                [[[
+                  return states['input_select.andreas_status'] &&
+                         states['input_select.andreas_status'].state === 'syg'
+                    ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
+                ]]]
+            - border-radius: 12px
+          name:
+            - font-size: 11px
+            - padding-top: 4px
+            - color: >
+                [[[
+                  return states['input_select.andreas_status'] &&
+                         states['input_select.andreas_status'].state === 'syg'
+                    ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
+                ]]]
+        tap_action:
+          action: call-service
+          service: input_select.select_option
+          service_data:
+            entity_id: input_select.andreas_status
+            option: >
+              [[[
+                return states['input_select.andreas_status'] &&
+                       states['input_select.andreas_status'].state === 'syg'
+                  ? 'hjemme' : 'syg';
+              ]]]
+        hold_action:
+          action: more-info
+          entity: person.andreas_schusler_dethlefsen
 
   # 🪟 Gardiner
   - type: grid