diff --git a/dashboards/views/01_home.yaml b/dashboards/views/01_home.yaml index a1bfb23..62b1403 100644 --- a/dashboards/views/01_home.yaml +++ b/dashboards/views/01_home.yaml @@ -543,24 +543,25 @@ cards: show_state: true - type: custom:button-card - entity: cover.anne + entity: binary_sensor.garageport name: Garage show_name: true show_state: false show_label: true label: > [[[ - const s = entity.state; - if (s === 'opening') return 'Åbner...'; - if (s === 'closing') return 'Lukker...'; - if (s === 'open') return 'Åben'; - return 'Lukket'; + const isOpen = entity.state === 'on'; + const lastChanged = new Date(entity.last_changed); + const secsAgo = (Date.now() - lastChanged) / 1000; + const inMotion = secsAgo < 30; + if (inMotion) return isOpen ? 'Åbner...' : 'Lukker...'; + return isOpen ? 'Åben' : 'Lukket'; ]]] icon: > [[[ - const s = entity.state; - if (s === 'open' || s === 'opening') return 'mdi:garage-open-variant'; - return 'mdi:garage-variant'; + return entity.state === 'on' + ? 'mdi:garage-open-variant' + : 'mdi:garage-variant'; ]]] extra_styles: | @keyframes garage-pulse { @@ -572,26 +573,23 @@ cards: card: - animation: > [[[ - const s = entity.state; - return (s === 'opening' || s === 'closing') - ? 'garage-pulse 0.8s ease-in-out infinite' - : 'none'; + const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000; + return secsAgo < 30 ? 'garage-pulse 0.8s ease-in-out infinite' : 'none'; ]]] icon: - color: > [[[ - const s = entity.state; - if (s === 'open') return 'orange'; - if (s === 'opening' || s === 'closing') return 'dodgerblue'; - return 'var(--primary-text-color)'; + const isOpen = entity.state === 'on'; + const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000; + if (secsAgo < 30) return 'dodgerblue'; + return isOpen ? 'orange' : 'var(--primary-text-color)'; ]]] label: - font-size: 11px - color: > [[[ - const s = entity.state; - if (s === 'opening' || s === 'closing') return 'dodgerblue'; - return 'var(--secondary-text-color)'; + const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000; + return secsAgo < 30 ? 'dodgerblue' : 'var(--secondary-text-color)'; ]]] tap_action: action: call-service