Added Charging Notifications

WJDDesigns · Aug 1, 2024 · 7ff1d36 · 7ff1d36
1 parent 11f7797
commit 7ff1d36
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 8 deletions.
diff --git a/styles.js b/styles.js
@@ -182,4 +182,26 @@ export const styles = css`
   input:checked + .slider:before {
     transform: translateX(26px);
   }
+
+  /* Charging animation */
+  .charging {
+    animation: pulse-blue 2s infinite;
+  }
+
+  @keyframes pulse-blue {
+    0% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
+    }
+    
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
+    }
+    
+    100% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
+    }
+  }
 `;
diff --git a/ultra-vehicle-card-editor.js b/ultra-vehicle-card-editor.js
@@ -7,7 +7,8 @@ export class UltraVehicleCardEditor extends LitElement {
       hass: { type: Object },
       config: { type: Object },
       _levelEntityFilter: { type: String },
-      _rangeEntityFilter: { type: String }
+      _rangeEntityFilter: { type: String },
+      _chargingStatusEntityFilter: { type: String }
     };
   }
 
@@ -19,6 +20,7 @@ export class UltraVehicleCardEditor extends LitElement {
     super();
     this._levelEntityFilter = '';
     this._rangeEntityFilter = '';
+    this._chargingStatusEntityFilter = '';
   }
 
   setConfig(config) {
@@ -28,6 +30,7 @@ export class UltraVehicleCardEditor extends LitElement {
       vehicle_type: "EV",
       level_entity: "",
       range_entity: "",
+      charging_status_entity: "",
       show_level: true,
       show_range: true,
       ...config
@@ -113,6 +116,15 @@ export class UltraVehicleCardEditor extends LitElement {
             </label>
           </div>
         </div>
+
+        ${this.config.vehicle_type === 'EV' ? html`
+          <div class="input-group">
+            <div class="entity-row">
+              <label for="charging_status_entity">Charging Status Entity</label>
+              ${this._renderEntityPicker('charging_status_entity', this._chargingStatusEntityFilter)}
+            </div>
+          </div>
+        ` : ''}
       </div>
     `;
   }
@@ -153,6 +165,8 @@ export class UltraVehicleCardEditor extends LitElement {
       this._levelEntityFilter = filter;
     } else if (configValue === 'range_entity') {
       this._rangeEntityFilter = filter;
+    } else if (configValue === 'charging_status_entity') {
+      this._chargingStatusEntityFilter = filter;
     }
     this.requestUpdate();
   }
@@ -166,6 +180,8 @@ export class UltraVehicleCardEditor extends LitElement {
       this._levelEntityFilter = '';
     } else if (configValue === 'range_entity') {
       this._rangeEntityFilter = '';
+    } else if (configValue === 'charging_status_entity') {
+      this._chargingStatusEntityFilter = '';
     }
     this.configChanged(this.config);
   }
@@ -229,4 +245,4 @@ export class UltraVehicleCardEditor extends LitElement {
   }
 }
 
-customElements.define("ultra-vehicle-card-editor", UltraVehicleCardEditor);
+customElements.define("ultra-vehicle-card-editor", UltraVehicleCardEditor);
diff --git a/ultra-vehicle-card.js b/ultra-vehicle-card.js
@@ -1,4 +1,4 @@
-import { LitElement, html } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
+import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
 import { UltraVehicleCardEditor } from "./ultra-vehicle-card-editor.js";
 import { styles } from "./styles.js";
 
@@ -11,7 +11,31 @@ class UltraVehicleCard extends LitElement {
   }
 
   static get styles() {
-    return styles;
+    return [
+      styles,
+      css`
+        @keyframes pulse-blue {
+          0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
+          }
+          
+          70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
+          }
+          
+          100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
+          }
+        }
+
+        .charging {
+          animation: pulse-blue 2s infinite;
+        }
+      `
+    ];
   }
 
   setConfig(config) {
@@ -24,6 +48,7 @@ class UltraVehicleCard extends LitElement {
       vehicle_type: "EV",
       show_level: true,
       show_range: true,
+      charging_status_entity: "",
       ...config
     };
   }
@@ -41,10 +66,13 @@ class UltraVehicleCard extends LitElement {
     const range = rangeEntity ? Math.round(parseFloat(rangeEntity.state)) : null;
     const rangeUnit = this._getRangeUnit();
 
+    const chargingStatusEntity = this.config.charging_status_entity ? this.hass.states[this.config.charging_status_entity] : null;
+    const isCharging = chargingStatusEntity && chargingStatusEntity.state.toLowerCase() === 'charging';
+
     return html`
-      <ha-card>
+      <ha-card class="${isCharging ? 'charging' : ''}">
         <div class="vehicle-card-content">
-          <h2 class="vehicle-name" style="text-align: center;">${this.config.title}</h2>
+          <h2 class="vehicle-name">${this.config.title}</h2>
           ${this.config.image_url ? html`
             <div class="vehicle-image-container">
               <img class="vehicle-image" src="${this.config.image_url}" alt="Vehicle Image">
@@ -56,7 +84,7 @@ class UltraVehicleCard extends LitElement {
                 <div class="progress" style="width: ${level}%;"></div>
               </div>
               <div class="level-text">
-                <span>${level}% ${levelUnit}</span>
+                <span>${isCharging ? 'Charging' : `${level}% ${levelUnit}`}</span>
                 ${this.config.show_range && this.config.range_entity && range !== null ? html`<span class="range">${range} ${rangeUnit}</span>` : ''}
               </div>
             </div>
@@ -88,6 +116,7 @@ class UltraVehicleCard extends LitElement {
       vehicle_type: "EV",
       level_entity: "",
       range_entity: "",
+      charging_status_entity: "",
       show_level: true,
       show_range: true
     };
@@ -102,4 +131,4 @@ window.customCards.push({
   name: "Ultra Vehicle Card",
   description: "A card that displays vehicle information with fuel/charge level and range.",
   preview: true
-});
+});