Refactor Controller Card

The card is renamed to Header Card because it's clearer regarding its
purpose.
This commit is contained in:
DigiLive
2025-04-23 07:25:45 +02:00
parent 2cbe48e5bd
commit da6dee75ed
2 changed files with 101 additions and 102 deletions

View File

@@ -1,102 +0,0 @@
import {HassServiceTarget} from "home-assistant-js-websocket";
import {LovelaceCardConfig} from "../types/homeassistant/data/lovelace";
import {StackCardConfig} from "../types/homeassistant/panels/lovelace/cards/types";
import {cards} from "../types/strategy/cards";
/**
* Controller Card class.
*
* Used for creating a Title Card with controls.
*
* @class
*/
class ControllerCard {
/**
* @type {HassServiceTarget} The target to control the entities of.
* @private
*/
readonly #target: HassServiceTarget;
/**
* Default configuration of the card.
*
* @type {cards.ControllerCardConfig}
* @private
*/
readonly #defaultConfig: cards.ControllerCardConfig = {
type: "mushroom-title-card",
showControls: true,
iconOn: "mdi:power-on",
iconOff: "mdi:power-off",
onService: "none",
offService: "none",
};
/**
* Class constructor.
*
* @param {HassServiceTarget} target The target to control the entities of.
* @param {cards.ControllerCardOptions} options Controller Card options.
*/
constructor(target: HassServiceTarget, options: cards.ControllerCardOptions = {}) {
this.#target = target;
this.#defaultConfig = {
...this.#defaultConfig,
...options,
};
}
/**
* Create a Controller card.
*
* @returns {StackCardConfig} A Controller card.
*/
createCard(): StackCardConfig {
const cards: LovelaceCardConfig[] = [
{
type: "custom:mushroom-title-card",
title: this.#defaultConfig.title,
subtitle: this.#defaultConfig.subtitle,
},
];
if (this.#defaultConfig.showControls) {
cards.push({
type: "horizontal-stack",
cards: [
{
type: "custom:mushroom-template-card",
icon: this.#defaultConfig.iconOff,
layout: "vertical",
icon_color: "red",
tap_action: {
action: "call-service",
service: this.#defaultConfig.offService,
target: this.#target,
data: {},
},
},
{
type: "custom:mushroom-template-card",
icon: this.#defaultConfig.iconOn,
layout: "vertical",
icon_color: "amber",
tap_action: {
action: "call-service",
service: this.#defaultConfig.onService,
target: this.#target,
data: {},
},
},
],
});
}
return {
type: "horizontal-stack",
cards: cards,
};
}
}
export {ControllerCard};

101
src/cards/HeaderCard.ts Normal file
View File

@@ -0,0 +1,101 @@
import { HassServiceTarget } from 'home-assistant-js-websocket';
import { LovelaceCardConfig } from '../types/homeassistant/data/lovelace/config/card';
import { StackCardConfig } from '../types/homeassistant/panels/lovelace/cards/types';
import { CustomHeaderCardConfig, StrategyHeaderCardConfig } from '../types/strategy/strategy-cards';
/**
* Header Card class.
*
* Used to create a card configuration for a Header Card.
* The card can be used to describe a group of cards and optionally to control multiple entities.
*/
class HeaderCard {
/** The target to control the entities of. */
private readonly target: HassServiceTarget;
/** The current configuration of the card after instantiating this class. */
private readonly configuration: StrategyHeaderCardConfig;
/** Returns the default configuration object for the card. */
static getDefaultConfig(): StrategyHeaderCardConfig {
return {
type: 'mushroom-title-card',
showControls: true,
iconOn: 'mdi:power-on',
iconOff: 'mdi:power-off',
onService: 'none',
offService: 'none',
};
}
/**
* Class constructor.
*
* @param {HassServiceTarget} target The target which is optionally controlled by the card.
* @param {CustomHeaderCardConfig} [customConfiguration] Custom card configuration.
*
* @remarks
* The target object can contain one or multiple ids of different entry types.
*/
constructor(target: HassServiceTarget, customConfiguration?: CustomHeaderCardConfig) {
this.target = target;
this.configuration = { ...HeaderCard.getDefaultConfig(), ...customConfiguration };
}
/**
* Create a Header card configuration.
*
* @remarks
* The card is represented by a horizontal stack of cards.
* One title card and optionally two template cards to control entities.
*/
createCard(): StackCardConfig {
// Create a title card.
const cards: LovelaceCardConfig[] = [
{
type: 'custom:mushroom-title-card',
title: this.configuration.title,
subtitle: this.configuration.subtitle,
},
];
// Add controls to the card.
if (this.configuration.showControls) {
cards.push({
type: 'horizontal-stack',
cards: [
{
type: 'custom:mushroom-template-card',
icon: this.configuration.iconOff,
layout: 'vertical',
icon_color: 'red',
tap_action: {
action: 'call-service',
service: this.configuration.offService,
target: this.target,
data: {},
},
},
{
type: 'custom:mushroom-template-card',
icon: this.configuration.iconOn,
layout: 'vertical',
icon_color: 'amber',
tap_action: {
action: 'call-service',
service: this.configuration.onService,
target: this.target,
data: {},
},
},
],
});
}
return {
type: 'horizontal-stack',
cards: cards,
};
}
}
export default HeaderCard;