diff --git a/src/editor.ts b/src/editor.ts index 2491a116..f5235978 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -1,8 +1,4 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ - -// TODO Add editor for control sizes -// TODO reorganizse editor by section - import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; @@ -23,28 +19,46 @@ const options = { secondary: localize('editor.basic_secondary'), show: true, }, - optional: { - icon: 'tune', - name: localize('editor.optional'), - secondary: localize('editor.optional_secondary'), + frigate: { + icon: 'alpha-f-box', + name: localize('editor.frigate'), + secondary: localize('editor.frigate_secondary'), show: false, }, - appearance: { - icon: 'palette', - name: localize('editor.appearance'), - secondary: localize('editor.appearance_secondary'), + view: { + icon: 'eye', + name: localize('editor.view'), + secondary: localize('editor.view_secondary'), show: false, }, - webrtc: { - icon: 'webrtc', - name: localize('editor.webrtc'), - secondary: localize('editor.webrtc_secondary'), + menu: { + icon: 'menu', + name: localize('editor.menu'), + secondary: localize('editor.menu_secondary'), show: false, }, - advanced: { - icon: 'cogs', - name: localize('editor.advanced'), - secondary: localize('editor.advanced_secondary'), + live: { + icon: 'cctv', + name: localize('editor.live'), + secondary: localize('editor.live_secondary'), + show: false, + }, + event_viewer: { + icon: 'filmstrip', + name: localize('editor.event_viewer'), + secondary: localize('editor.event_viewer_secondary'), + show: false, + }, + image: { + icon: 'image', + name: localize('editor.image'), + secondary: localize('editor.image_secondary'), + show: false, + }, + dimensions: { + icon: 'aspect-ratio', + name: localize('editor.dimensions'), + secondary: localize('editor.dimensions'), show: false, }, }; @@ -185,12 +199,62 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor })} + + ` + : ''} +
+
+ +
${options.frigate.name}
+
+
${options.frigate.secondary}
+
+ ${options.frigate.show + ? html` +
+ + + + +
+ ` + : ''} +
+
+ +
${options.view.name}
+
+
${options.view.secondary}
+
+ ${options.view.show + ? html` +
+
` : ''} -
+
- -
${options.optional.name}
+ +
${options.menu.name}
-
${options.optional.secondary}
+
${options.menu.secondary}
- ${options.optional.show - ? html`
- - + - ${Object.keys(liveProviders).map((key) => { - return html` - ${liveProviders[key]} - `; - })} - - - - - + + ${Object.keys(menuModes).map((key) => { + return html` + ${menuModes[key]} + `; + })} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ` + : ''} +
+
+ +
${options.live.name}
+
+
${options.live.secondary}
+
+ ${options.live.show + ? html` +
+
+ + + + + + ${Object.keys(liveProviders).map((key) => { + return html` + ${liveProviders[key]} + `; + })} + + + + + ${cameraEntities.map((entity) => { + return html` ${entity} `; + })} + + + +
+ ` + : ''} +
+
+ +
${options.event_viewer.name}
+
+
${options.event_viewer.secondary}
+
+ ${options.event_viewer.show + ? html`
+
- - - -
` - : ''} -
-
- -
${options.appearance.name}
-
-
${options.appearance.secondary}
-
- ${options.appearance.show - ? html` - - ${Object.keys(menuModes).map((key) => { - return html` - ${menuModes[key]} - `; - })} - - -
-
+ +
` + : ''} +
+
+ +
${options.image.name}
+
+
${options.image.secondary}
+
+ ${options.image.show + ? html`
+ +
` + : ''} +
+
+ +
${options.dimensions.name}
+
+
${options.dimensions.secondary}
+
+ ${options.dimensions.show + ? html`
-
- - - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
` - : ''} -
-
- -
${options.advanced.name}
-
-
${options.advanced.secondary}
-
- ${options.advanced.show - ? html`
- -
-
- -
` - : ''} -
-
- -
${options.webrtc.name}
-
-
${options.webrtc.secondary}
-
- ${options.webrtc.show - ? html`
- - - ${cameraEntities.map((entity) => { - return html` ${entity} `; - })} - - -
` : ''}
@@ -584,7 +642,7 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor } return obj[key]; }, newConfig); - key = parts[parts.length-1]; + key = parts[parts.length - 1]; } if (value !== undefined && objectTarget[key] === value) { diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 7a45a692..7c43d9bf 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -15,9 +15,9 @@ "frigate": { "camera_name": "Frigate camera name (Optional, autodetected from entity)", "client_id": "Frigate client id (For >1 Frigate server)", - "label": "Label/object filter", + "label": "Frigate label/object filter", "url": "Frigate server URL", - "zone": "Zone" + "zone": "Frigate zone" }, "view": { "default": "Default view", @@ -29,15 +29,15 @@ "snapshots": "Snapshots gallery", "image": "Static image" }, - "timeout": "View timeout (seconds)" + "timeout": "View timeout secs (before returning to default, 0=never)" }, "event_viewer": { - "autoplay_clip": "Autoplay most recent clip", + "autoplay_clip": "Autoplay most recent clip (In 'clip' view)", "lazy_load": "Lazily load event media", "controls": { "next_previous": { "style": "Event Viewer Next & Previous Control style", - "size": "Event Viewer Next & Previous Control size", + "size": "Event Viewer Next & Previous Control size (e.g. '48px')", "styles": { "thumbnails": "Thumbnails", "chevrons": "Chevrons", @@ -86,10 +86,11 @@ "hover-right": "Hover right", "above": "Above", "below": "Below" - } + }, + "button_size": "Menu button size (e.g. '40px')" }, "dimensions": { - "aspect_ratio": "Default aspect ratio", + "aspect_ratio": "Default aspect ratio (e.g. '16:9')", "aspect_ratio_mode": "Aspect ratio mode", "aspect_ratio_modes": { "unconstrained": "Unconstrained aspect ratio", @@ -101,14 +102,20 @@ "editor": { "basic": "Basic", "basic_secondary": "Basic options for most users", - "optional": "Optional", - "optional_secondary": "Optional configuration to tweak card behavior", - "appearance": "Appearance", - "appearance_secondary": "Appearance of the card", - "webrtc": "WebRTC", - "webrtc_secondary": "Optional WebRTC parameters", - "advanced": "Advanced", - "advanced_secondary": "Advanced options", + "frigate": "Frigate", + "frigate_secondary": "Frigate server options", + "view": "View", + "view_secondary": "Card view options", + "menu": "Menu", + "menu_secondary": "Menu options", + "live": "Live", + "live_secondary": "Live view options", + "event_viewer": "Event viewer", + "event_viewer_secondary": "Event viewer options", + "image": "Image", + "image_secondary": "Static image view options", + "dimensions": "Dimensions", + "dimensions_secondary": "Card dimensions options", "show_button": "Show button" }, "error": {