-
- ${abbreviation}
- ${secondary
- ? html`
-
- ${secondary.state} ${secondary.attributes.unit_of_measurement}
-
- `
- : ''}
-
+
${abbreviation} ${secondary ? html` ${secondary.state} ${secondary.attributes.unit_of_measurement} ` : ''}
-
- ${this._config.compass?.show_north ? html`
` : ''}
+
+ ${this.renderNorthIndicator(direction_offset)}
`;
}
@@ -169,6 +162,13 @@ export class CompassCard extends LitElement {
return '';
}
+ private renderNorthIndicator(offset: number): TemplateResult | string {
+ if (this._config.compass?.show_north) {
+ return html`
-
-
-
- ${entities.map((entity) => {
- return html` ${entity} `;
- })}
-
-
-
-
- ${entities.map((secondary_entity) => {
- return html` ${secondary_entity} `;
- })}
-
-
-
-
- ${INDICATORS.map((indicator) => {
- return html` ${indicator}`;
- })}
-
-
-
-
- ${COMPASS_LANGUAGES.map((language) => {
- return html` ${language}`;
- })}
-
-
-
-
${localize('editor.show')} ${localize('directions.north')}
-
${localize('editor.show')} ${localize('directions.north')}
+ ${this.getEditorInput('editor.name', 'editor.optional', CONFIG_NAME, this._name)}
+ ${this.getEditorDropDown('editor.primary entity description', 'editor.required', CONFIG_ENTITY, this._entity, entities)}
+ ${this.getEditorDropDown('editor.secondary entity description', 'editor.optional', CONFIG_SECONDARY_ENTITY, this._secondary_entity, entities)}
+ ${this.getEditorDropDown('editor.indicator', 'editor.optional', CONFIG_COMPASS + '.' + CONFIG_INDICATOR, this._compass_indicator, INDICATORS)}
+ ${this.getEditorDropDown('editor.language description', 'editor.optional', CONFIG_COMPASS + '.' + CONFIG_LANGUAGE, this._compass_language, COMPASS_LANGUAGES)}
+ ${this.getEditorInput('editor.offset description', 'editor.optional', CONFIG_DIRECTION_OFFSET, this._direction_offset)}
+ ${this.getEditorSwitch('editor.show north description', CONFIG_COMPASS + '.' + CONFIG_SHOW_NORTH, this._compass_show_north)}
`;
}
@@ -134,9 +110,18 @@ export class CompassCardEditor extends LitElement implements LovelaceCardEditor
if (child.indexOf('.') > -1) {
this.getValue(item, child);
}
- return { ...ancestor, [parent]: { ...ancestor[parent], [child]: item.checked !== undefined ? item.checked : item.value } };
+ return {
+ ...ancestor,
+ [parent]: {
+ ...ancestor[parent],
+ [child]: item.checked !== undefined ? item.checked : item.value,
+ },
+ };
} else {
- return { ...ancestor, [item.configValue]: item.checked !== undefined ? item.checked : item.value };
+ return {
+ ...ancestor,
+ [item.configValue]: item.checked !== undefined ? item.checked : item.value,
+ };
}
}
@@ -158,6 +143,34 @@ export class CompassCardEditor extends LitElement implements LovelaceCardEditor
fireEvent(this, 'config-changed', { config: this._config });
}
+ private getEditorDropDown(label: string, required: string, key: string, value: string, list): TemplateResult {
+ return html`