Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement - clean up and categorise/section the visual editor #28

Merged
merged 1 commit into from
Jan 24, 2024
+259 −218
Merged

Improvement - clean up and categorise/section the visual editor #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "givtcp-battery-card",
"version": "0.2.1",
"version": "0.2.2",
"description": "Lovelace card to display GivTCP battery info",
"private": true,
"type": "module",
Expand Down
257 changes: 40 additions & 217 deletions src/editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,231 +2,48 @@ import {fireEvent, HomeAssistant, LovelaceCardConfig, LovelaceCardEditor, Lovela
import {customElement, property, state} from "lit/decorators.js";
import {css, CSSResultGroup, html, LitElement, TemplateResult} from "lit";
import {ConfigUtils} from "./config-utils";
import {DISPLAY_SCHEMA, DOD_SCHEMA, GENERAL_SCHEMA, SOC_SCHEMA} from "./schemas";

@customElement('givtcp-battery-card-editor')
export class GivTCPBatteryCardEditor extends LitElement implements LovelaceCardEditor {
@property() hass!: HomeAssistant;
lovelace?: LovelaceConfig | undefined;
@state() private _config!: LovelaceCardConfig;
@state() private _currentTab?: number;

public setConfig(config: LovelaceCardConfig): void {
this._config = ConfigUtils.migrateConfig(config, true);
}

get _getInvertorList(): string[] {
private get _getInvertorList(): string[] {
return this.hass ? Object.keys(this.hass.states).filter((eid) => eid.includes('invertor_serial_number')) : [];
}

get _schema(): object[] {
private get _schema(): object[] {
const defaults = ConfigUtils.getDefaultConfig();

return [
{
name: 'name',
label: 'Name',
default: defaults.name,
selector: {
text: {}
}
},
{
name: 'entity',
label: 'Invertor',
selector: {
entity: {
multiple: false,
include_entities: this._getInvertorList
}
},
},
{
name: 'soc_threshold_very_high',
label: 'SOC Threshold Very High',
default: defaults.soc_threshold_very_high,
selector: {
number: {
min: 0,
max: 100,
unit_of_measurement: "%",
}
}
},
{
name: 'soc_threshold_very_high_colour',
label: 'SOC Very High Colour',
default: defaults.soc_threshold_very_high_colour,
selector: {
color_rgb: {}
}
},
{
name: 'soc_threshold_high',
label: 'SOC Threshold High',
default: defaults.soc_threshold_high,
selector: {
number: {
min: 0,
max: 100,
unit_of_measurement: "%",
}
}
},
{
name: 'soc_threshold_high_colour',
label: 'SOC High Colour',
default: defaults.soc_threshold_high_colour,
selector: {
color_rgb: {}
}
},
{
name: 'soc_threshold_medium',
label: 'SOC Threshold Medium',
default: defaults.soc_threshold_medium,
selector: {
number: {
min: 0,
max: 100,
unit_of_measurement: "%",
}
}
},
{
name: 'soc_threshold_medium_colour',
label: 'SOC Medium Colour',
default: defaults.soc_threshold_medium_colour,
selector: {
color_rgb: {}
}
},
{
name: 'soc_threshold_low',
label: 'SOC Threshold Low',
default: defaults.soc_threshold_low,
selector: {
number: {
min: 0,
max: 100,
unit_of_measurement: "%",
}
}
},
{
name: 'soc_threshold_low_colour',
label: 'SOC Loc Colour',
default: defaults.soc_threshold_low_colour,
selector: {
color_rgb: {}
}
},
{
name: 'soc_threshold_very_low_colour',
label: 'SOC Very Low Colour',
default: defaults.soc_threshold_very_low_colour,
selector: {
color_rgb: {}
}
},
{
name: 'display_abs_power',
label: 'Display power usage as absolute value',
default: defaults.display_abs_power,
selector: {
boolean: {}
}
},
{
name: 'display_type',
label: 'Display type (0: Wh/W | 1: kWh/kW | 2: Dynamic)',
default: defaults.display_type,
selector: {
number: {
min: 0,
max: 2
}
}
},
{
name: 'display_dp',
label: 'Display number decimal places',
default: defaults.display_dp,
selector: {
number: {
min: 1,
max: 3
}
}
},
{
name: 'icon_status_charging',
label: 'Status Icon: Charging',
default: defaults.icon_status_charging,
selector: {
icon:{},
}
},
{
name: 'icon_status_discharging',
label: 'Status Icon: Discharging',
default: defaults.icon_status_discharging,
selector: {
icon:{},
}
},
{
name: 'icon_status_idle',
label: 'Status Icon: Idle',
default: defaults.icon_status_idle,
selector: {
icon:{},
}
},
{
name: 'display_battery_rates',
label: 'Display data about battery charge/discharge rates',
default: defaults.display_battery_rates,
selector: {
boolean: {}
}
},
{
name: 'use_custom_dod',
label: 'Use custom DoD to override GivTCP battery capacity value.',
default: defaults.use_custom_dod,
selector: {
boolean: {}
}
},
{
name: 'display_custom_dod_stats',
label: 'Display the custom DOD stats',
default: defaults.display_custom_dod_stats,
selector: {
boolean: {}
}
},
{
name: 'custom_dod',
label: 'Custom DoD as percentage to override GivTCP battery capacity value.',
default: defaults.custom_dod,
selector: {
number: {
min: 0,
max: 100,
step: "any",
unit_of_measurement: "%",
}
}
},
{
name: 'calculate_reserve_from_dod',
label: 'Use custom DoD to calculate the battery reserve value',
default: defaults.calculate_reserve_from_dod,
selector: {
boolean: {}
}
},
];
switch (this._currentTab) {
case 0:
default:
return GENERAL_SCHEMA(this._getInvertorList, defaults);
case 1:
return SOC_SCHEMA(defaults, this._config);
case 2:
return DISPLAY_SCHEMA(defaults);
case 3:
return DOD_SCHEMA(defaults, this._config);
}
}

private _handleTabChanged(ev: CustomEvent): void {
ev.preventDefault();
const tab = ev.detail.selected as number;
this._currentTab = tab;
}

constructor() {
super();
this._currentTab = 0;
}

protected render(): TemplateResult | void {
Expand All @@ -240,14 +57,20 @@ export class GivTCPBatteryCardEditor extends LitElement implements LovelaceCardE
}

return html`
<ha-form
.hass=${this.hass}
.data=${conf}
.schema=${this._schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
<ha-tabs scrollable .selected=${this._currentTab} @iron-activate=${this._handleTabChanged}>
<paper-tab>General</paper-tab>
<paper-tab>SOC</paper-tab>
<paper-tab>Display</paper-tab>
<paper-tab>DOD</paper-tab>
</ha-tabs>
<ha-form
.hass=${this.hass}
.data=${conf}
.schema=${this._schema}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
`;
}

private _valueChanged(ev: CustomEvent): void {
Expand Down
Loading