Feat: Add the option to change the tire background.

ngocjohn · Sep 20, 2024 · a2e1ef6 · a2e1ef6
1 parent 69211a9
commit a2e1ef6
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/src/editor.ts b/src/editor.ts
@@ -23,6 +23,8 @@ import { languageOptions, localize } from './localize/localize';
 import { handleFirstUpdated, defaultConfig, deepMerge } from './utils/ha-helpers';
 import { loadHaComponents, stickyPreview } from './utils/loader';
 import { compareVersions } from './utils/helpers';
+import { uploadImage } from './utils/editor-image-handler';
+
 import editorcss from './css/editor.css';
 
 import './components/editor/custom-card-editor';
@@ -447,7 +449,11 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
       cardCodeEditorWrapper
     );
 
-    const content = html` <div class="sub-card-config">${subCardHeader} ${buttonTemplate} ${editorWrapper}</div> `;
+    const tireType = card.type === 'tyreCards' ? this._renderCustomTireBackground() : nothing;
+
+    const content = html`
+      <div class="sub-card-config">${subCardHeader} ${buttonTemplate} ${editorWrapper} ${tireType}</div>
+    `;
 
     return content;
   }
@@ -700,6 +706,37 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
     `;
   }
 
+  private _renderCustomTireBackground(): TemplateResult {
+    const info = this.localize('editor.customTireBackground.info');
+    const urlInput = html`
+      <ha-alert alert-type="info">${info}</ha-alert>
+      <div class="custom-background-wrapper">
+        <ha-textfield
+          .label=${'Tire background url'}
+          .disabled=${true}
+          .value=${this._config.extra_configs?.tire_background || ''}
+        ></ha-textfield>
+      </div>
+
+      <div class="custom-background-wrapper">
+        ${this._config.extra_configs?.tire_background
+          ? html` <ha-button @click=${() => this._removeTireBackground()}> Remove image </ha-button> `
+          : html` <ha-button @click=${() => this.shadowRoot?.getElementById('file-upload-new')?.click()}>
+                Upload image
+              </ha-button>
+              <input
+                type="file"
+                id="file-upload-new"
+                class="file-input"
+                @change=${(ev: any) => this._handleTireBackgroundUpload(ev)}
+                accept="image/*"
+              />`}
+      </div>
+    `;
+
+    return this.panelTemplate('customTireBackground', 'customTireBackground', 'mdi:car-tire-alert', urlInput);
+  }
+
   /* ---------------------------- TEMPLATE HELPERS ---------------------------- */
 
   private _renderSection({
@@ -768,6 +805,27 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
   }
 
   /* ----------------------------- EVENT HANDLERS ----------------------------- */
+
+  private async _handleTireBackgroundUpload(ev: any): Promise<void> {
+    if (!ev.target.files || ev.target.files.length === 0) {
+      return;
+    }
+
+    const file = ev.target.files[0];
+    const url = await uploadImage(this.hass, file);
+    if (url) {
+      this._config = { ...this._config, extra_configs: { ...this._config.extra_configs, tire_background: url } };
+      this.configChanged();
+    } else {
+      return;
+    }
+  }
+
+  private _removeTireBackground(): void {
+    this._config = { ...this._config, extra_configs: { ...this._config.extra_configs, tire_background: '' } };
+    this.configChanged();
+  }
+
   private _handleCustomCardEditorChange(ev: any): void {
     const { type, config } = ev.detail;
 

diff --git a/src/types.ts b/src/types.ts
@@ -128,6 +128,10 @@ export interface CustomButtonsConfig extends VehicleCardConfig {
   tyre_button?: ButtonConfigItem;
 }
 
+export interface ExtraConfigs {
+  tire_background: string;
+}
+
 export interface VehicleCardConfig extends LovelaceCardConfig {
   type: string;
   entity: string;
@@ -140,6 +144,7 @@ export interface VehicleCardConfig extends LovelaceCardConfig {
   selected_theme: ThemesConfig;
   use_custom_cards?: UseCustomCards;
   services: Services;
+  extra_configs: ExtraConfigs;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
   double_tap_action?: ActionConfig;

diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts
@@ -949,6 +949,9 @@ export class VehicleCard extends LitElement implements LovelaceCard {
   }
 
   private _renderDefaultTyreCard(): TemplateResult {
+    const customTyreBg = this.config.extra_configs?.tire_background
+      ? this.config.extra_configs.tire_background
+      : tyreBg;
     const lang = this.selectedLanguage;
     const isPressureWarning = this.getBooleanState(this.vehicleEntities.tirePressureWarning?.entity_id);
 
@@ -971,7 +974,7 @@ export class VehicleCard extends LitElement implements LovelaceCard {
           <ha-icon icon="mdi:rotate-right-variant"></ha-icon>
         </div>
         <div class="data-box tyre-wrapper ${isHorizontal}">
-          <div class="background" style="background-image: url(${tyreBg})"></div>
+          <div class="background" style="background-image: url(${customTyreBg})"></div>
           ${DataKeys.tyrePressures(lang).map(
             (tyre) =>
               html` <div class="tyre-box ${isHorizontal} ${tyre.key.replace('tirePressure', '').toLowerCase()}">