Garageport: brug zigbee binary_sensor, animation baseret på last_changed

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