refactor: split files

src/components/eco-chart.ts → src/components/cards/eco-chart.ts

@@ -1,8 +1,8 @@
 import { LitElement, html, TemplateResult, css, PropertyValues } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { EcoData } from '../types';
-import { localize } from '../localize/localize';
+import { EcoData } from '../../types';
+import { localize } from '../../localize/localize';
 // Third-party Libraries
 import ApexCharts from 'apexcharts';
 

src/components/header-slide.ts → src/components/cards/header-slide.ts

@@ -2,8 +2,8 @@ import { LitElement, css, html, TemplateResult, PropertyValues } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import Swiper from 'swiper';
 import { Pagination } from 'swiper/modules';
-import swipercss from '../css/swiper-bundle.css';
-import { VehicleCardConfig } from '../types';
+import swipercss from '../../css/swiper-bundle.css';
+import { VehicleCardConfig } from '../../types';
 
 @customElement('header-slide')
 export class HeaderSlide extends LitElement {

src/components/cards/index.ts

@@ -0,0 +1,11 @@
+export * from './eco-chart';
+export * from './header-slide';
+export * from './map-card';
+export * from './remote-control';
+export * from './vehicle-buttons';
+
+import './eco-chart';
+import './header-slide';
+import './map-card';
+import './remote-control';
+import './vehicle-buttons';

src/components/map-card.ts → src/components/cards/map-card.ts

@@ -3,7 +3,7 @@ import { customElement, state } from 'lit/decorators.js';
 
 import L from 'leaflet';
 import 'leaflet-providers/leaflet-providers.js';
-import mapstyle from '../css/leaflet.css';
+import mapstyle from '../../css/leaflet.css';
 
 interface Address {
   streetNumber: string;

src/components/remote-control.ts → src/components/cards/remote-control.ts

@@ -1,14 +1,14 @@
 import { LitElement, html, TemplateResult, css, CSSResultGroup, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { HomeAssistant, fireEvent, forwardHaptic } from 'custom-card-helpers';
-import { Services, ServiceItem } from '../types';
+import { Services } from '../../types';
 
-import { cloneDeep, convertToMinutes } from '../utils/helpers';
-import * as Srvc from '../const/remote-control-keys';
+import { cloneDeep, convertToMinutes } from '../../utils/helpers';
+import * as Srvc from '../../const/remote-control-keys';
 
-import styles from '../css/remote-control.css';
-import mainstyle from '../css/styles.css';
-import { localize } from '../localize/localize';
+import styles from '../../css/remote-control.css';
+import mainstyle from '../../css/styles.css';
+import { localize } from '../../localize/localize';
 
 @customElement('remote-control')
 export class RemoteControl extends LitElement {
@@ -20,7 +20,7 @@ export class RemoteControl extends LitElement {
 
   @state() private subcardType: string | null = null;
   @state() private serviceData: any = {};
-  @state() private activeServices: ServiceItem = {};
+  @state() private activeServices: { [key: string]: { name: string; icon: string } } = {};
 
   protected firstUpdated(): void {
     console.log('getiing servicesConfig');

src/components/vehicle-buttons.ts → src/components/cards/vehicle-buttons.ts

@@ -4,14 +4,14 @@ import { Pagination } from 'swiper/modules';
 
 import Swiper from 'swiper';
 
-import { ButtonCardEntity, HomeAssistantExtended as HomeAssistant, VehicleCardConfig, CustomButton } from '../types';
-import { addActions } from '../utils/tap-action';
-import { getTemplateValue, getBooleanTemplate } from '../utils/ha-helpers';
+import { ButtonCardEntity, HomeAssistantExtended as HomeAssistant, VehicleCardConfig, CustomButton } from '../../types';
+import { addActions } from '../../utils/tap-action';
+import { getTemplateValue, getBooleanTemplate } from '../../utils/ha-helpers';
 
-import swipercss from '../css/swiper-bundle.css';
-import mainstyle from '../css/styles.css';
+import swipercss from '../../css/swiper-bundle.css';
+import mainstyle from '../../css/styles.css';
 
-import { VehicleCard } from '../vehicle-info-card';
+import { VehicleCard } from '../../vehicle-info-card';
 
 @customElement('vehicle-buttons')
 export class VehicleButtons extends LitElement {

src/components/component-class.ts

@@ -0,0 +1,5 @@
+export * from './cards/eco-chart';
+export * from './cards/header-slide';
+export * from './cards/map-card';
+export * from './cards/remote-control';
+export * from './cards/vehicle-buttons';

src/components/editor/custom-button-template.ts

@@ -173,11 +173,16 @@ export class CustomButtonTemplate extends LitElement {
     const buttonTitleIconForms = this._buttonTitleIconForms();
     const secondaryUI = this._templateUI(
       localizeKey('secondaryInfo'),
-      secondary,
+      secondary || '',
       'secondary',
       localizeKey('secondaryInfoHelper')
     );
-    const notifyUI = this._templateUI(localizeKey('notifyInfo'), notify, 'notify', localizeKey('notifyInfoHelper'));
+    const notifyUI = this._templateUI(
+      localizeKey('notifyInfo'),
+      notify || '',
+      'notify',
+      localizeKey('notifyInfoHelper')
+    );
 
     return html` <div class="card-button-cfg">${editorHeader}${buttonTitleIconForms}</div>
       ${secondaryUI}${notifyUI}`;

src/components/editor/custom-card-editor.ts

@@ -96,5 +96,6 @@ export class CustomCardEditor extends LitElement {
       composed: true,
     };
     this.dispatchEvent(new CustomEvent('custom-card-editor-changed', eventDetail));
+    console.log('dispatched event', type, configValue, configBtnType, value, eventDetail);
   }
 }

src/components/editor/index.ts

@@ -0,0 +1,9 @@
+export * from './custom-button-action';
+export * from './custom-button-template';
+export * from './custom-card-editor';
+export * from './panel-images';
+
+import './custom-button-action';
+import './custom-button-template';
+import './custom-card-editor';
+import './panel-images';

src/components/editor/panel-images.ts

@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
 
 import Sortable from 'sortablejs';
 
-import { VehicleImage, VehicleCardConfig } from '../../types';
+import { ImageConfig, VehicleCardConfig } from '../../types';
 import { imageInputChange, handleFilePicked } from '../../utils/editor-image-handler';
 import { fireEvent } from 'custom-card-helpers';
 import { debounce } from 'es-toolkit';
@@ -14,7 +14,7 @@ import editorcss from '../../css/editor.css';
 export class PanelImages extends LitElement {
   @property({ type: Object }) editor!: any;
   @property({ type: Object }) config!: VehicleCardConfig;
-  @property({ type: Array }) _images!: VehicleImage[];
+  @property({ type: Array }) _images!: ImageConfig[];
   @state() _selectedItems: Set<string> = new Set();
   @state() _newImageUrl: string = '';
   @state() _sortable: Sortable | null = null;

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './cards';
+export * from './editor';

src/const/const.ts

@@ -1,4 +1,5 @@
 import { version, repository } from '../../package.json';
+import { VehicleCardConfig } from '../types';
 
 export const CARD_VERSION = `v${version}`;
 export const REPOSITORY = repository.repo;
@@ -62,3 +63,66 @@ const sensorDeviceFilters: {
 };
 
 export const combinedFilters = { ...binarySensorsFilters, ...sensorDeviceFilters };
+
+// Default configuration for the Vehicle Card.
+
+export const defaultConfig: Partial<VehicleCardConfig> = {
+  type: 'custom:vehicle-info-card',
+  name: 'Mercedes Vehicle Card',
+  entity: '',
+  model_name: '',
+  selected_language: 'system',
+  show_slides: false,
+  show_map: false,
+  show_buttons: true,
+  show_background: true,
+  enable_map_popup: false,
+  enable_services_control: false,
+  show_error_notify: false,
+  device_tracker: '',
+  map_popup_config: {
+    hours_to_show: 0,
+    default_zoom: 14,
+    theme_mode: 'auto',
+  },
+  selected_theme: {
+    theme: 'default',
+    mode: 'auto',
+  },
+  extra_configs: {
+    tire_background: '',
+  },
+  button_grid: {
+    use_swiper: false,
+    rows_size: 2,
+  },
+  services: {
+    auxheat: false,
+    charge: false,
+    doorsLock: false,
+    engine: false,
+    preheat: false,
+    sendRoute: false,
+    sigPos: false,
+    sunroof: false,
+    windows: false,
+  },
+  eco_button: {
+    enabled: false,
+  },
+  trip_button: {
+    enabled: false,
+  },
+  vehicle_button: {
+    enabled: false,
+  },
+  tyre_button: {
+    enabled: false,
+  },
+  use_custom_cards: {
+    vehicle_card: true,
+    trip_card: true,
+    eco_card: true,
+    tyre_card: true,
+  },
+};

src/const/data-keys.ts

@@ -141,5 +141,3 @@ export const SubcardVisibilityProperties = [
   'tripFromStartVisible',
   'ecoScoresVisible',
 ];
-
-export type AttributeType = 'lock' | 'window' | 'door';

src/editor.ts

@@ -8,6 +8,7 @@ import { fireEvent, LovelaceCardConfig, LovelaceCardEditor } from 'custom-card-h
 import { debounce } from 'es-toolkit';
 
 import { CARD_VERSION } from './const/const';
+import { defaultConfig } from './types/default-config';
 import { cardTypes, editorShowOpts } from './const/data-keys';
 import { servicesCtrl } from './const/remote-control-keys';
 import editorcss from './css/editor.css';
@@ -17,19 +18,17 @@ import {
   HomeAssistantExtended as HomeAssistant,
   VehicleCardConfig,
   CardTypeConfig,
-  ButtonConfigItem,
+  BaseButtonConfig,
   ExtendedButtonConfigItem,
 } from './types';
 import { uploadImage } from './utils/editor-image-handler';
-import { handleFirstUpdated, defaultConfig, deepMerge } from './utils/ha-helpers';
+import { handleFirstUpdated, deepMerge } from './utils/ha-helpers';
 import { compareVersions } from './utils/helpers';
 import { loadHaComponents, stickyPreview } from './utils/loader';
 
 // Import the custom card components
-import './components/editor/custom-card-editor';
-import './components/editor/custom-button-template';
-import './components/editor/panel-images';
-import './components/editor/custom-button-action';
+import './components/editor';
+import { PanelImages } from './components/editor';
 
 @customElement('vehicle-info-card-editor')
 export class VehicleCardEditor extends LitElement implements LovelaceCardEditor {
@@ -43,14 +42,14 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
   @state() private _activeSubcardType: string | null = null;
   @state() private _confirmDeleteType: string | null = null;
   @state() private _yamlConfig: { [key: string]: any } = {};
-  @state() private _customBtns: { [key: string]: ButtonConfigItem } = {};
+  @state() private _customBtns: { [key: string]: BaseButtonConfig } = {};
   @state() private _selectedLanguage: string = 'system';
   @state() private _latestRelease: string = '';
 
   @state() private _visiblePanel: Set<string> = new Set();
   @state() private _newCardType: Map<string, string> = new Map();
 
-  @query('panel-images') private _panelImages!: any;
+  @query('panel-images') private _panelImages!: PanelImages;
 
   public async setConfig(config: VehicleCardConfig): Promise<void> {
     this._config = deepMerge(defaultConfig, config);
@@ -950,11 +949,23 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
         [formattedCardType]: {
           cards: [],
           button: {
+            primary,
+            icon,
             enabled: true,
-            primary: primary,
-            secondary: '',
-            icon: icon,
-            notify: '',
+            hide: false,
+            button_type: 'default',
+            button_action: {
+              entity: '',
+              tap_action: {
+                action: 'more-info',
+              },
+              hold_action: {
+                action: 'none',
+              },
+              double_tap_action: {
+                action: 'none',
+              },
+            },
           },
         },
       };
@@ -1306,7 +1317,7 @@ export class VehicleCardEditor extends LitElement implements LovelaceCardEditor
     } else {
       // Set preview button config
       console.log('Setting button preview:', button);
-      let btnConfig: ButtonConfigItem;
+      let btnConfig: BaseButtonConfig;
       if (this._config.added_cards?.hasOwnProperty(button)) {
         btnConfig = this._config.added_cards[button].button;
       } else {

src/types/card-types.ts

@@ -0,0 +1,44 @@
+export type HEADER_ACTION = 'next' | 'prev' | 'close';
+
+export type CardTypeConfig = {
+  type: string;
+  name: string;
+  icon: string;
+  config: string;
+  button: string;
+};
+
+export interface VehicleEntities {
+  [key: string]: VehicleEntity;
+}
+
+export type VehicleEntity = {
+  entity_id: string;
+  original_name: string;
+  device_id?: string;
+  unique_id?: string;
+  translation_key?: string;
+  disabled_by?: string | null;
+  hidden_by?: string | null;
+};
+
+export type EntityConfig = {
+  key: string;
+  name?: string;
+  icon?: string;
+  unit?: string;
+  state?: string;
+  active?: boolean;
+};
+
+export interface EcoData {
+  bonusRange: number;
+  acceleration: number;
+  constant: number;
+  freeWheel: number;
+}
+
+export type CustomButton = {
+  notify: boolean;
+  state: string;
+};