From f8085c116bcf9308ab60561c290b78bba7aba4e5 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sat, 14 Aug 2021 13:55:15 -0700 Subject: [PATCH] Initial card editor. --- src/editor.ts | 205 ++++++++++++++++++-------------------------- src/frigate-card.ts | 1 + src/types.ts | 5 +- 3 files changed, 88 insertions(+), 123 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 7ee86350..7d21ff59 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -9,7 +9,7 @@ import { css, state, } from 'lit-element'; -import { HomeAssistant, fireEvent, LovelaceCardEditor, ActionConfig } from 'custom-card-helpers'; +import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers'; import { FrigateCardConfig } from './types'; @@ -20,10 +20,10 @@ const options = { secondary: 'Required options for this card to function', show: true, }, - actions: { + optional: { icon: 'gesture-tap-hold', - name: 'Actions', - secondary: 'Perform actions based on tapping/clicking', + name: 'Optional', + secondary: 'Optional configuration to tune this', show: false, options: { tap: { @@ -45,13 +45,7 @@ const options = { show: false, }, }, - }, - appearance: { - icon: 'palette', - name: 'Appearance', - secondary: 'Customize the name, icon, etc', - show: false, - }, + } }; @customElement('frigate-card-editor') @@ -64,7 +58,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor public setConfig(config: FrigateCardConfig): void { this._config = config; - this.loadCardHelpers(); } @@ -76,20 +69,13 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor return true; } - get _name(): string { - return "Frigate"; - } - - get _camera_entity(): string { - return this._config?.camera_entity || ''; - } - - get _show_warning(): boolean { - return this._config?.show_warning || false; - } - - get _show_error(): boolean { - return this._config?.show_error || false; + protected _getEntities(domain: string) : string[] { + if (!this.hass) { + return []; + } + const entities = Object.keys( + this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === domain); + return entities.sort(); } protected render(): TemplateResult | void { @@ -101,7 +87,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor this._helpers.importMoreInfoControl('climate'); // You can restrict on domain type - const entities = Object.keys(this.hass.states).filter(eid => eid.substr(0, eid.indexOf('.')) === 'sun'); + const camera_entities = this._getEntities('camera'); + const binary_sensor_entities = this._getEntities('binary_sensor'); + + const view_modes = { + "live": "Live view", + "clips": "Clip gallery", + "snapshots": "Snapshot gallery", + "clip": "Latest clip", + "snapshot": "Latest snapshot", + } return html`
@@ -116,110 +111,82 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor ? html`
- - ${entities.map(entity => { + + ${camera_entities.map(entity => { return html` ${entity} `; })} -
- ` - : ''} -
-
- -
${options.actions.name}
-
-
${options.actions.secondary}
-
- ${options.actions.show - ? html` -
-
-
- -
${options.actions.options.tap.name}
-
-
${options.actions.options.tap.secondary}
-
- ${options.actions.options.tap.show - ? html` -
- Action Editors Coming Soon -
- ` - : ''} -
-
- -
${options.actions.options.hold.name}
-
-
${options.actions.options.hold.secondary}
-
- ${options.actions.options.hold.show - ? html` -
- Action Editors Coming Soon -
- ` - : ''} -
-
- -
${options.actions.options.double_tap.name}
-
-
${options.actions.options.double_tap.secondary}
-
- ${options.actions.options.double_tap.show - ? html` -
- Action Editors Coming Soon -
- ` - : ''} -
- ` - : ''} -
-
- -
${options.appearance.name}
-
-
${options.appearance.secondary}
-
- ${options.appearance.show - ? html` -
-
- - - - - -
` : ''} +
+
+ +
${options.optional.name}
+
+
${options.optional.secondary}
+
+ ${options.optional.show + ? html` +
+ + + ${binary_sensor_entities.map(entity => { + return html` + ${entity} + `; + })} + + + + + + ${Object.keys(view_modes).map(key => { + return html` + ${view_modes[key]} + + `; + })} + + + +
` + : '' + }
`; } @@ -235,10 +202,6 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor this._helpers = await (window as any).loadCardHelpers(); } - private _toggleAction(ev): void { - this._toggleThing(ev, options.actions.options); - } - private _toggleOption(ev): void { this._toggleThing(ev, options); } diff --git a/src/frigate-card.ts b/src/frigate-card.ts index a864189d..d3adb196 100644 --- a/src/frigate-card.ts +++ b/src/frigate-card.ts @@ -1,5 +1,6 @@ // TODO Feature: Make editor work. // TODO Feature: Add title to clips / snapshots playing/viewing +// TODO Quality: Single enum for view modes across enum and types and editor. // TODO Bug: Sometimes webrtc component shows up as not found in browser (maybe after fresh build?) // TODO Last step: Add documentation & screenshots. diff --git a/src/types.ts b/src/types.ts index 5b458e20..6cfdd311 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ import { ActionConfig, LovelaceCard, LovelaceCardConfig, LovelaceCardEditor } from 'custom-card-helpers'; -import { z } from "zod"; +import { number, z } from "zod"; declare global { interface HTMLElementTagNameMap { @@ -18,7 +18,8 @@ export const frigateCardConfigSchema = z.object({ frigate_url: z.string().url(), frigate_camera_name: z.string().optional(), view_default: z.enum(["live", "clips", "clip", "snapshots", "snapshot"]).optional().default("live"), - view_timeout: z.number().optional(), + + view_timeout: z.number().or(z.string().regex(/^\d+$/).transform(val => Number(val))), live_provider: z.enum(["frigate", "webrtc"]).default("frigate"), webrtc: z.object({}).passthrough().optional(), label: z.string().optional(),