/* eslint-disable @typescript-eslint/no-explicit-any */ import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators'; import { HomeAssistant, LovelaceCardEditor, fireEvent } from 'custom-card-helpers'; import { localize } from './localize/localize'; import type { FrigateCardConfig } from './types'; import frigate_card_editor_style from './scss/editor.scss'; const options = { required: { icon: 'cog', name: localize('editor.required'), secondary: localize('editor.required_secondary'), show: true, }, optional: { icon: 'tune', name: localize('editor.optional'), secondary: localize('editor.optional_secondary'), show: false, }, appearance: { icon: 'palette', name: localize('editor.appearance'), secondary: localize('editor.appearance_secondary'), show: false, }, webrtc: { icon: 'webrtc', name: localize('editor.webrtc'), secondary: localize('editor.webrtc_secondary'), show: false, }, advanced: { icon: 'cogs', name: localize('editor.advanced'), secondary: localize('editor.advanced_secondary'), show: false, }, }; @customElement('frigate-card-editor') export class FrigateCardEditor extends LitElement implements LovelaceCardEditor { @property({ attribute: false }) public hass?: HomeAssistant; @state() private _config?: FrigateCardConfig; @state() private _toggle?: boolean; @state() private _helpers?: any; private _initialized = false; public setConfig(config: FrigateCardConfig): void { // Note: This does not use Zod to parse the configuration, so it may be // partially or completely invalid. It's more useful to have a partially // valid configuration here, to allow the user to fix the broken parts. this._config = config; this.loadCardHelpers(); } protected shouldUpdate(): boolean { if (!this._initialized) { this._initialize(); } return true; } protected _getEntities(domain: string): string[] { if (!this.hass) { return []; } const entities = Object.keys(this.hass.states).filter( (eid) => eid.substr(0, eid.indexOf('.')) === domain, ); entities.sort(); // Add a blank entry to unset a selection. entities.unshift(''); return entities; } protected render(): TemplateResult | void { if (!this.hass || !this._helpers) { return html``; } // The climate more-info has ha-switch and paper-dropdown-menu elements that are lazy loaded unless explicitly done here this._helpers.importMoreInfoControl('climate'); // You can restrict on domain type const cameraEntities = this._getEntities('camera'); const webrtcCameraEntity = this._config?.webrtc && (this._config?.webrtc as any).entity ? (this._config?.webrtc as any).entity : ''; const viewModes = { '': '', live: localize('menu.live'), clips: localize('menu.clips'), snapshots: localize('menu.snapshots'), clip: localize('menu.clip'), snapshot: localize('menu.snapshot'), }; const menuModes = { '': '', none: localize('menu_mode.none'), 'hidden-top': localize('menu_mode.hidden-top'), 'hidden-left': localize('menu_mode.hidden-left'), 'hidden-bottom': localize('menu_mode.hidden-bottom'), 'hidden-right': localize('menu_mode.hidden-right'), 'overlay-top': localize('menu_mode.overlay-top'), 'overlay-left': localize('menu_mode.overlay-left'), 'overlay-bottom': localize('menu_mode.overlay-bottom'), 'overlay-right': localize('menu_mode.overlay-right'), 'hover-top': localize('menu_mode.hover-top'), 'hover-left': localize('menu_mode.hover-left'), 'hover-bottom': localize('menu_mode.hover-bottom'), 'hover-right': localize('menu_mode.hover-right'), above: localize('menu_mode.above'), below: localize('menu_mode.below'), }; const liveProvider = { '': '', frigate: localize('live_provider.frigate'), webrtc: localize('live_provider.webrtc'), }; const controlsNextPrev = { '': '', thumbnails: localize('control.thumbnails'), chevrons: localize('control.chevrons'), none: localize('control.none'), }; return html`
${options.required.name}
${options.required.secondary}
${options.required.show ? html`
${cameraEntities.map((entity) => { return html` ${entity} `; })}
` : ''}
${options.optional.name}
${options.optional.secondary}
${options.optional.show ? html`
${Object.keys(viewModes).map((key) => { return html` ${viewModes[key]} `; })}
` : ''}
${options.appearance.name}
${options.appearance.secondary}
${options.appearance.show ? html` ${Object.keys(menuModes).map((key) => { return html` ${menuModes[key]} `; })}
${Object.keys(controlsNextPrev).map((key) => { return html` ${controlsNextPrev[key]} `; })}





` : ''}
${options.advanced.name}
${options.advanced.secondary}
${options.advanced.show ? html`
` : ''}
${options.webrtc.name}
${options.webrtc.secondary}
${options.webrtc.show ? html`
${Object.keys(liveProvider).map((key) => { return html` ${liveProvider[key]} `; })} ${cameraEntities.map((entity) => { return html` ${entity} `; })}
` : ''}
`; } private _initialize(): void { if (this.hass === undefined) return; if (this._config === undefined) return; if (this._helpers === undefined) return; this._initialized = true; } private async loadCardHelpers(): Promise { this._helpers = await (window as any).loadCardHelpers(); } private _toggleOption(ev): void { this._toggleThing(ev, options); } private _toggleThing(ev, optionList): void { const show = !optionList[ev.target.option].show; for (const [key] of Object.entries(optionList)) { optionList[key].show = false; } optionList[ev.target.option].show = show; this._toggle = !this._toggle; } private _valueChanged(ev): void { if (!this._config || !this.hass) { return; } const target = ev.target; const value = target.value?.trim(); let key: string = target.configValue; if (!key) { return; } // Need to deep copy the config so cannot use Object.assign. const newConfig = JSON.parse(JSON.stringify(this._config)); let objectTarget = newConfig; if (key.includes('.')) { const parts = key.split('.', 2); const configName = parts[0]; if (!(configName in newConfig)) { newConfig[configName] = {}; } objectTarget = newConfig[configName]; key = parts[1]; } if (value !== undefined && objectTarget[key] === value) { return; } else if (value === '') { delete objectTarget[key]; } else { objectTarget[key] = target.checked !== undefined ? target.checked : value; } this._config = newConfig; fireEvent(this, 'config-changed', { config: this._config }); } // Return compiled CSS styles (thus safe to use with unsafeCSS). static get styles(): CSSResultGroup { return unsafeCSS(frigate_card_editor_style); } }