@@ -465,12 +450,16 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
* Render an option/"select" selector.
* @param configPath The configuration path to set/read.
* @param options The options to show in the selector.
+ * @param params Option parameters to control the selector.
* @returns A rendered template.
*/
protected _renderOptionSelector(
configPath: string,
options: string[] | { value: string; label: string }[],
- multiple?: boolean,
+ params?: {
+ multiple?: boolean;
+ label?: string;
+ },
): TemplateResult | void {
if (!this._config) {
return;
@@ -480,9 +469,40 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
this._valueChangedHandler(configPath, ev)}
+ >
+
+ `;
+ }
+
+ /**
+ * Render an icon selector.
+ * @param configPath The configuration path to set/read.
+ * @param params Optional parameters to control the selector.
+ * @returns A rendered template.
+ */
+ protected _renderIconSelector(
+ configPath: string,
+ params?: {
+ label?: string;
+ },
+ ): TemplateResult | void {
+ if (!this._config) {
+ return;
+ }
+
+ return html`
+
this._valueChangedHandler(configPath, ev)}
@@ -494,29 +514,30 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
/**
* Render a number slider.
* @param configPath Configuration path of the variable.
- * @param valueDefault The default value.
- * @param icon The icon to use on the slider.
- * @param min The minimum value.
- * @param max The maximum value.
+ * @param params Optional parameters to control the selector.
* @returns A rendered template.
*/
protected _renderNumberInput(
configPath: string,
- min?: number,
- max?: number,
+ params?: {
+ min?: number;
+ max?: number;
+ label?: string;
+ default?: number;
+ },
): TemplateResult | void {
if (!this._config) {
return;
}
const value = getConfigValue(this._config, configPath);
- const mode = max === undefined ? 'box' : 'slider';
+ const mode = params?.max === undefined ? 'box' : 'slider';
return html`
this._valueChangedHandler(configPath, ev)}
>
@@ -549,6 +570,62 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
);
}
+ /**
+ * Render an editor menu for the card menu buttons.
+ * @param button The name of the button.
+ * @returns A rendered template.
+ */
+ protected _renderMenuButton(button: string): TemplateResult {
+ const menuButtonAlignments: EditorSelectOption[] = [
+ { value: '', label: '' },
+ { value: 'matching', label: localize('config.menu.buttons.alignments.matching') },
+ { value: 'opposing', label: localize('config.menu.buttons.alignments.opposing') },
+ ];
+
+ return html`
+
+
+ ${this._expandedMenus[MENU_BUTTONS] === button
+ ? html`
+ ${this._renderSwitch(
+ `${CONF_MENU_BUTTONS}.${button}.enabled`,
+ frigateCardConfigDefaults.menu.buttons[button]?.enabled ?? true,
+ {
+ label: localize('config.menu.buttons.enabled'),
+ },
+ )}
+ ${this._renderOptionSelector(
+ `${CONF_MENU_BUTTONS}.${button}.alignment`,
+ menuButtonAlignments,
+ {
+ label: localize('config.menu.buttons.alignment'),
+ },
+ )}
+ ${this._renderNumberInput(`${CONF_MENU_BUTTONS}.${button}.priority`, {
+ max: FRIGATE_MENU_PRIORITY_MAX,
+ default: frigateCardConfigDefaults.menu.buttons[button]?.priority,
+ label: localize('config.menu.buttons.priority'),
+ })}
+ ${this._renderIconSelector(`${CONF_MENU_BUTTONS}.${button}.icon`, {
+ label: localize('config.menu.buttons.icon'),
+ })}
+
`
+ : ''}
+ `;
+ }
+
/**
* Render a camera header.
* @param cameraIndex The index of the camera to edit/add.
@@ -563,9 +640,10 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
): TemplateResult {
return html`