From ecbe963bd2eceb297c04ad2227d7d1606f2f7976 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Sun, 16 Jun 2024 16:09:42 +0200 Subject: [PATCH] add: window status attributes more info --- src/const.ts | 11 ++++ src/vehicle-info-card.ts | 139 ++++++++++++++++++++++++++++----------- 2 files changed, 112 insertions(+), 38 deletions(-) diff --git a/src/const.ts b/src/const.ts index 002e97a..0f842e7 100644 --- a/src/const.ts +++ b/src/const.ts @@ -84,3 +84,14 @@ export const selectedProgramMapping = { '2': 'Home', '3': 'Work', }; + +export const windowsStateMapping = { + windowstatusrearleft: { name: 'Window rear left', state: { 2: 'closed', 0: 'open' } }, + windowstatusrearright: { name: 'Window rear right', state: { 2: 'closed', 0: 'open' } }, + windowstatusfrontleft: { name: 'Window front left', state: { 2: 'closed', 0: 'open' } }, + windowstatusfrontright: { name: 'Window front right', state: { 2: 'closed', 0: 'open' } }, + windowstatusrearleftblind: { name: 'Window rear left blind', state: { 2: 'closed', 0: 'open' } }, + windowstatusrearrightblind: { name: 'Window rear right blind', state: { 2: 'closed', 0: 'open' } }, + windowstatusfrontleftblind: { name: 'Window front left blind', state: { 2: 'closed', 0: 'open' } }, + windowstatusfrontrightblind: { name: 'Window front right blind', state: { 2: 'closed', 0: 'open' } }, +}; diff --git a/src/vehicle-info-card.ts b/src/vehicle-info-card.ts index 53303e1..829edbf 100644 --- a/src/vehicle-info-card.ts +++ b/src/vehicle-info-card.ts @@ -16,7 +16,7 @@ import { // Custom Types and Constants import { ExtendedThemes, VehicleCardConfig, defaultConfig, EntityConfig, VehicleEntity, EntityAttr } from './types'; -import { lockAttrMapping, lockStateMapping, cardTypes, selectedProgramMapping } from './const'; +import { lockAttrMapping, lockStateMapping, cardTypes, selectedProgramMapping, windowsStateMapping } from './const'; import { localize } from './localize/localize'; import { formatTimestamp } from './utils/helpers'; import { logCardInfo, getVehicleEntities, setupCardListeners } from './utils/utils'; @@ -59,6 +59,7 @@ export class VehicleCard extends LitElement { @state() private activeCardType: string | null = null; private lockAttributesVisible = false; + private windowAttributesVisible = false; private chargingInfoVisible = false; get isCharging() { @@ -542,8 +543,6 @@ export class VehicleCard extends LitElement { private _renderDefaultVehicleCard(): TemplateResult | void { const { vehicleEntities } = this; - const vehicleDataKeys = [{ key: 'parkBrake' }, { key: 'windowsClosed' }]; - const warningsDataKeys = [ { key: 'tirePressureWarning' }, { key: 'lowBrakeFluid' }, @@ -553,7 +552,8 @@ export class VehicleCard extends LitElement { ]; const lockInfoData = this.getLockEntityInfo(); - const vehicleData = this.createDataArray(vehicleDataKeys); + const windowData = this.createDataArray([{ key: 'windowsClosed' }]); + const parkBrakeData = this.createDataArray([{ key: 'parkBrake' }]); const warningsData = this.createDataArray(warningsDataKeys); return html`
@@ -570,26 +570,48 @@ export class VehicleCard extends LitElement {
${this._renderLockAttributes()} - ${vehicleData.map( - ({ key, icon, state, name }) => html` + ${windowData.map(({ name, icon, state }) => { + return html`
this.toggleMoreInfo(vehicleEntities[key]?.entity_id)} + @click=${() => this.toggleMoreInfo(vehicleEntities.windowsClosed?.entity_id)} > ${name}
-
this.toggleMoreInfo(vehicleEntities[key]?.entity_id)}> +
this.toggleWindowAttributes()}> ${state} - +
- `, - )} + `; + })} + ${this._renderWindowAttributes()} + ${parkBrakeData.map(({ name, icon, state }) => { + return html` +
+
+ this.toggleMoreInfo(vehicleEntities.parkBrake?.entity_id)} + > + ${name} +
+
this.toggleMoreInfo(vehicleEntities.parkBrake?.entity_id)} + > + ${state} + +
+
+ `; + })}
-
Warnings
${warningsData.map( @@ -598,7 +620,7 @@ export class VehicleCard extends LitElement {
this.toggleMoreInfo(vehicleEntities[key]?.entity_id)} > ${name} @@ -616,6 +638,34 @@ export class VehicleCard extends LitElement { `; } + private _renderDefaultEcoCard(): TemplateResult | void { + const ecoDataKeys = [ + { key: 'ecoScoreBonusRange', name: 'Bonus range' }, + { key: 'ecoScoreAcceleraion', name: 'Acceleration' }, + { key: 'ecoScoreConstant', name: 'Constant' }, + { key: 'ecoScoreFreeWheel', name: 'Free wheel' }, + ]; + + const ecoData = this.createDataArray(ecoDataKeys); + return html`
+
Eco display
+ ${this._renderEcoChart()} +
+ ${this.createItemDataRow('Scores', ecoData)}`; + } + + private _renderDefaultTyreCard(): TemplateResult | void { + const tyreDataKeys = [ + { key: 'tirePressureFrontLeft', name: 'Front left', icon: 'mdi:tire' }, + { key: 'tirePressureFrontRight', name: 'Front right', icon: 'mdi:tire' }, + { key: 'tirePressureRearLeft', name: 'Rear left', icon: 'mdi:tire' }, + { key: 'tirePressureRearRight', name: 'Rear right', icon: 'mdi:tire' }, + ]; + + const tyreData = this.createDataArray(tyreDataKeys); + return this.createItemDataRow('Tyre pressures', tyreData); + } + private _renderLockAttributes(): TemplateResult { const lockAttributeStates: Record = {}; // Iterate over the keys of the lockAttrMapping object @@ -651,32 +701,40 @@ export class VehicleCard extends LitElement { `; } - private _renderDefaultEcoCard(): TemplateResult | void { - const ecoDataKeys = [ - { key: 'ecoScoreBonusRange', name: 'Bonus range' }, - { key: 'ecoScoreAcceleraion', name: 'Acceleration' }, - { key: 'ecoScoreConstant', name: 'Constant' }, - { key: 'ecoScoreFreeWheel', name: 'Free wheel' }, - ]; - - const ecoData = this.createDataArray(ecoDataKeys); - return html`
-
Eco display
- ${this._renderEcoChart()} -
- ${this.createItemDataRow('Scores', ecoData)}`; - } + private _renderWindowAttributes(): TemplateResult { + const windowAttributeStates: Record = {}; + // Iterate over the keys of the Windows object + Object.keys(windowsStateMapping).forEach((attribute) => { + const attributeState = this.getEntityAttribute(this.vehicleEntities.windowsClosed?.entity_id, attribute); + if (attributeState !== undefined && attributeState !== null) { + windowAttributeStates[attribute] = attributeState; + } + }); - private _renderDefaultTyreCard(): TemplateResult | void { - const tyreDataKeys = [ - { key: 'tirePressureFrontLeft', name: 'Front left', icon: 'mdi:tire' }, - { key: 'tirePressureFrontRight', name: 'Front right', icon: 'mdi:tire' }, - { key: 'tirePressureRearLeft', name: 'Rear left', icon: 'mdi:tire' }, - { key: 'tirePressureRearRight', name: 'Rear right', icon: 'mdi:tire' }, - ]; + const attributesClass = this.windowAttributesVisible ? 'sub-attributes active' : 'sub-attributes'; - const tyreData = this.createDataArray(tyreDataKeys); - return this.createItemDataRow('Tyre pressures', tyreData); + // Render the window attributes + return html` +
+ ${Object.keys(windowAttributeStates).map((attribute) => { + const rawState = windowAttributeStates[attribute]; + // Check if the state is valid and the attribute mapping exists + if (rawState !== undefined && rawState !== null && windowsStateMapping[attribute]) { + const readableState = windowsStateMapping[attribute].state[rawState] || 'Unknown'; + return html` +
+ ${windowsStateMapping[attribute].name} +
+ ${readableState} +
+
+ `; + } + // Return nothing if the attribute state is not valid or attribute mapping does not exist + return ''; + })} +
+ `; } private _showWarning(warning: string): TemplateResult { @@ -731,6 +789,11 @@ export class VehicleCard extends LitElement { this.requestUpdate(); // Trigger a re-render }; + private toggleWindowAttributes = () => { + this.windowAttributesVisible = !this.windowAttributesVisible; + this.requestUpdate(); + }; + /* -------------------------------------------------------------------------- */ /* GET ENTITIES STATE AND ATTRIBUTES */ /* -------------------------------------------------------------------------- */