claus/N22
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home view: person-kort med fast billedstørrelse + lokation (Hjemme/Ude/zone)

Browse Source
This commit is contained in:
Claus Dethlefsen
2026-04-24 19:14:10 +02:00
parent 158beed9c5
commit 94f0cd4d8a
1 changed files with 113 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboards/views/01_home.yaml
+113 -49
View File
@@ -36,7 +36,7 @@ cards:
# 👨‍👩‍👧‍👦 Familien – tryk for at toggle syg/rask # 👨‍👩‍👧‍👦 Familien – tryk for at toggle syg/rask
- type: grid - type: grid
columns: 4 columns: 4
square: true square: false
cards: cards:
- type: custom:button-card - type: custom:button-card
@@ -44,20 +44,20 @@ cards:
name: Daniel name: Daniel
show_name: true show_name: true
show_state: false show_state: false
show_label: true
show_icon: false show_icon: false
show_entity_picture: true show_entity_picture: true
entity_picture_style: label: >
- border-radius: 50% [[[
- width: 100% const s = entity.state;
- filter: > const sick = states['input_select.daniel_status'] &&
[[[ states['input_select.daniel_status'].state === 'syg';
return states['input_select.daniel_status'] && const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s;
states['input_select.daniel_status'].state === 'syg' return sick ? loc + ' · Syg' : loc;
? 'grayscale(100%)' : 'none'; ]]]
]]]
styles: styles:
card: card:
- padding: 6px - padding: 8px 4px
- border: > - border: >
[[[ [[[
return states['input_select.daniel_status'] && return states['input_select.daniel_status'] &&
@@ -65,15 +65,31 @@ cards:
? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
]]] ]]]
- border-radius: 12px - border-radius: 12px
entity_picture:
- width: 60px
- height: 60px
- border-radius: 50%
- object-fit: cover
- filter: >
[[[
return states['input_select.daniel_status'] &&
states['input_select.daniel_status'].state === 'syg'
? 'grayscale(100%)' : 'none';
]]]
name: name:
- font-size: 11px - font-size: 12px
- padding-top: 4px - font-weight: 600
- padding-top: 6px
- color: > - color: >
[[[ [[[
return states['input_select.daniel_status'] && return states['input_select.daniel_status'] &&
states['input_select.daniel_status'].state === 'syg' states['input_select.daniel_status'].state === 'syg'
? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
]]] ]]]
label:
- font-size: 10px
- color: var(--secondary-text-color)
- padding-bottom: 2px
tap_action: tap_action:
action: call-service action: call-service
service: input_select.select_option service: input_select.select_option
@@ -94,20 +110,20 @@ cards:
name: Claus name: Claus
show_name: true show_name: true
show_state: false show_state: false
show_label: true
show_icon: false show_icon: false
show_entity_picture: true show_entity_picture: true
entity_picture_style: label: >
- border-radius: 50% [[[
- width: 100% const s = entity.state;
- filter: > const sick = states['input_select.claus_status'] &&
[[[ states['input_select.claus_status'].state === 'syg';
return states['input_select.claus_status'] && const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s;
states['input_select.claus_status'].state === 'syg' return sick ? loc + ' · Syg' : loc;
? 'grayscale(100%)' : 'none'; ]]]
]]]
styles: styles:
card: card:
- padding: 6px - padding: 8px 4px
- border: > - border: >
[[[ [[[
return states['input_select.claus_status'] && return states['input_select.claus_status'] &&
@@ -115,15 +131,31 @@ cards:
? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
]]] ]]]
- border-radius: 12px - border-radius: 12px
entity_picture:
- width: 60px
- height: 60px
- border-radius: 50%
- object-fit: cover
- filter: >
[[[
return states['input_select.claus_status'] &&
states['input_select.claus_status'].state === 'syg'
? 'grayscale(100%)' : 'none';
]]]
name: name:
- font-size: 11px - font-size: 12px
- padding-top: 4px - font-weight: 600
- padding-top: 6px
- color: > - color: >
[[[ [[[
return states['input_select.claus_status'] && return states['input_select.claus_status'] &&
states['input_select.claus_status'].state === 'syg' states['input_select.claus_status'].state === 'syg'
? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
]]] ]]]
label:
- font-size: 10px
- color: var(--secondary-text-color)
- padding-bottom: 2px
tap_action: tap_action:
action: call-service action: call-service
service: input_select.select_option service: input_select.select_option
@@ -144,20 +176,20 @@ cards:
name: Anne name: Anne
show_name: true show_name: true
show_state: false show_state: false
show_label: true
show_icon: false show_icon: false
show_entity_picture: true show_entity_picture: true
entity_picture_style: label: >
- border-radius: 50% [[[
- width: 100% const s = entity.state;
- filter: > const sick = states['input_select.anne_status'] &&
[[[ states['input_select.anne_status'].state === 'syg';
return states['input_select.anne_status'] && const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s;
states['input_select.anne_status'].state === 'syg' return sick ? loc + ' · Syg' : loc;
? 'grayscale(100%)' : 'none'; ]]]
]]]
styles: styles:
card: card:
- padding: 6px - padding: 8px 4px
- border: > - border: >
[[[ [[[
return states['input_select.anne_status'] && return states['input_select.anne_status'] &&
@@ -165,15 +197,31 @@ cards:
? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
]]] ]]]
- border-radius: 12px - border-radius: 12px
entity_picture:
- width: 60px
- height: 60px
- border-radius: 50%
- object-fit: cover
- filter: >
[[[
return states['input_select.anne_status'] &&
states['input_select.anne_status'].state === 'syg'
? 'grayscale(100%)' : 'none';
]]]
name: name:
- font-size: 11px - font-size: 12px
- padding-top: 4px - font-weight: 600
- padding-top: 6px
- color: > - color: >
[[[ [[[
return states['input_select.anne_status'] && return states['input_select.anne_status'] &&
states['input_select.anne_status'].state === 'syg' states['input_select.anne_status'].state === 'syg'
? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
]]] ]]]
label:
- font-size: 10px
- color: var(--secondary-text-color)
- padding-bottom: 2px
tap_action: tap_action:
action: call-service action: call-service
service: input_select.select_option service: input_select.select_option
@@ -194,20 +242,20 @@ cards:
name: Andreas name: Andreas
show_name: true show_name: true
show_state: false show_state: false
show_label: true
show_icon: false show_icon: false
show_entity_picture: true show_entity_picture: true
entity_picture_style: label: >
- border-radius: 50% [[[
- width: 100% const s = entity.state;
- filter: > const sick = states['input_select.andreas_status'] &&
[[[ states['input_select.andreas_status'].state === 'syg';
return states['input_select.andreas_status'] && const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s;
states['input_select.andreas_status'].state === 'syg' return sick ? loc + ' · Syg' : loc;
? 'grayscale(100%)' : 'none'; ]]]
]]]
styles: styles:
card: card:
- padding: 6px - padding: 8px 4px
- border: > - border: >
[[[ [[[
return states['input_select.andreas_status'] && return states['input_select.andreas_status'] &&
@@ -215,15 +263,31 @@ cards:
? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent';
]]] ]]]
- border-radius: 12px - border-radius: 12px
entity_picture:
- width: 60px
- height: 60px
- border-radius: 50%
- object-fit: cover
- filter: >
[[[
return states['input_select.andreas_status'] &&
states['input_select.andreas_status'].state === 'syg'
? 'grayscale(100%)' : 'none';
]]]
name: name:
- font-size: 11px - font-size: 12px
- padding-top: 4px - font-weight: 600
- padding-top: 6px
- color: > - color: >
[[[ [[[
return states['input_select.andreas_status'] && return states['input_select.andreas_status'] &&
states['input_select.andreas_status'].state === 'syg' states['input_select.andreas_status'].state === 'syg'
? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ? 'rgb(220,50,50)' : 'var(--primary-text-color)';
]]] ]]]
label:
- font-size: 10px
- color: var(--secondary-text-color)
- padding-bottom: 2px
tap_action: tap_action:
action: call-service action: call-service
service: input_select.select_option service: input_select.select_option