diff --git a/dashboards/views/01_home.yaml b/dashboards/views/01_home.yaml index a269d5d..a8901b3 100644 --- a/dashboards/views/01_home.yaml +++ b/dashboards/views/01_home.yaml @@ -36,7 +36,7 @@ cards: # 👨‍👩‍👧‍👦 Familien – tryk for at toggle syg/rask - type: grid columns: 4 - square: true + square: false cards: - type: custom:button-card @@ -44,20 +44,20 @@ cards: name: Daniel show_name: true show_state: false + show_label: true 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'; - ]]] + label: > + [[[ + const s = entity.state; + const sick = states['input_select.daniel_status'] && + states['input_select.daniel_status'].state === 'syg'; + const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s; + return sick ? loc + ' · Syg' : loc; + ]]] styles: card: - - padding: 6px + - padding: 8px 4px - border: > [[[ return states['input_select.daniel_status'] && @@ -65,15 +65,31 @@ cards: ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ]]] - 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: - - font-size: 11px - - padding-top: 4px + - font-size: 12px + - font-weight: 600 + - padding-top: 6px - color: > [[[ return states['input_select.daniel_status'] && states['input_select.daniel_status'].state === 'syg' ? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ]]] + label: + - font-size: 10px + - color: var(--secondary-text-color) + - padding-bottom: 2px tap_action: action: call-service service: input_select.select_option @@ -94,20 +110,20 @@ cards: name: Claus show_name: true show_state: false + show_label: true 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'; - ]]] + label: > + [[[ + const s = entity.state; + const sick = states['input_select.claus_status'] && + states['input_select.claus_status'].state === 'syg'; + const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s; + return sick ? loc + ' · Syg' : loc; + ]]] styles: card: - - padding: 6px + - padding: 8px 4px - border: > [[[ return states['input_select.claus_status'] && @@ -115,15 +131,31 @@ cards: ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ]]] - 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: - - font-size: 11px - - padding-top: 4px + - font-size: 12px + - font-weight: 600 + - padding-top: 6px - color: > [[[ return states['input_select.claus_status'] && states['input_select.claus_status'].state === 'syg' ? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ]]] + label: + - font-size: 10px + - color: var(--secondary-text-color) + - padding-bottom: 2px tap_action: action: call-service service: input_select.select_option @@ -144,20 +176,20 @@ cards: name: Anne show_name: true show_state: false + show_label: true 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'; - ]]] + label: > + [[[ + const s = entity.state; + const sick = states['input_select.anne_status'] && + states['input_select.anne_status'].state === 'syg'; + const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s; + return sick ? loc + ' · Syg' : loc; + ]]] styles: card: - - padding: 6px + - padding: 8px 4px - border: > [[[ return states['input_select.anne_status'] && @@ -165,15 +197,31 @@ cards: ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ]]] - 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: - - font-size: 11px - - padding-top: 4px + - font-size: 12px + - font-weight: 600 + - padding-top: 6px - color: > [[[ return states['input_select.anne_status'] && states['input_select.anne_status'].state === 'syg' ? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ]]] + label: + - font-size: 10px + - color: var(--secondary-text-color) + - padding-bottom: 2px tap_action: action: call-service service: input_select.select_option @@ -194,20 +242,20 @@ cards: name: Andreas show_name: true show_state: false + show_label: true 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'; - ]]] + label: > + [[[ + const s = entity.state; + const sick = states['input_select.andreas_status'] && + states['input_select.andreas_status'].state === 'syg'; + const loc = s === 'home' ? 'Hjemme' : s === 'not_home' ? 'Ude' : s; + return sick ? loc + ' · Syg' : loc; + ]]] styles: card: - - padding: 6px + - padding: 8px 4px - border: > [[[ return states['input_select.andreas_status'] && @@ -215,15 +263,31 @@ cards: ? '2px solid rgba(220,50,50,0.8)' : '2px solid transparent'; ]]] - 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: - - font-size: 11px - - padding-top: 4px + - font-size: 12px + - font-weight: 600 + - padding-top: 6px - color: > [[[ return states['input_select.andreas_status'] && states['input_select.andreas_status'].state === 'syg' ? 'rgb(220,50,50)' : 'var(--primary-text-color)'; ]]] + label: + - font-size: 10px + - color: var(--secondary-text-color) + - padding-bottom: 2px tap_action: action: call-service service: input_select.select_option