flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support media type in core filter.

Browse Source
This commit is contained in:
Dermot Duffy
2023-01-28 15:19:20 -08:00
parent 3cf278bd01
commit 931e9febce
7 changed files with 164 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/media-filter-core.ts
+104 -51
View File
@@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
import { createRef, ref, Ref } from 'lit/directives/ref.js';
import { DateRange } from '../camera/range';
import { localize } from '../localize/localize';
import mediaFilterStyle from '../scss/media-filter.scss';
import mediaFilterCoreStyle from '../scss/media-filter-core.scss';
import { ExtendedHomeAssistant } from '../types';
import { dispatchFrigateCardEvent } from '../utils/basic';
@@ -20,6 +20,7 @@ export interface ValueLabel<T> {
}
export interface MediaFilterCoreSelection {
mediaType?: MediaFilterMediaType;
cameraIDs?: Set<string>;
what?: Set<string>;
where?: Set<string>;
@@ -44,11 +45,26 @@ export enum MediaFilterCoreWhen {
Custom = 'custom',
}
export enum MediaFilterMediaType {
Clips = 'clips',
Snapshots = 'snapshots',
Recordings = 'recordings',
}
export interface MediaFilterCoreWhenSelection {
selection: MediaFilterCoreWhen;
custom?: DateRange;
}
export enum MediaFilterControl {
mediaType = 'mediaType',
when = 'when',
camera = 'camera',
what = 'what',
where = 'where',
favorite = 'favorite',
}
@customElement('frigate-card-media-filter-core')
export class FrigateCardMediaFilterCore extends LitElement {
@property({ attribute: false })
@@ -69,12 +85,17 @@ export class FrigateCardMediaFilterCore extends LitElement {
@property({ attribute: false })
public defaults?: MediaFilterCoreSelection;
@property({ attribute: false })
public controls?: Record<MediaFilterControl, boolean>;
protected _cameraOptions?: ValueLabel<string>[];
protected _whenOptions?: ValueLabel<MediaFilterCoreWhenSelection>[];
protected _whatOptions?: ValueLabel<string>[];
protected _whereOptions?: ValueLabel<string>[];
protected _favoriteOptions: ValueLabel<MediaFilterCoreFavoriteSelection>[];
protected _mediaTypeOptions: ValueLabel<MediaFilterMediaType>[];
protected _refMediaType: Ref<FilterElement<MediaFilterMediaType>> = createRef();
protected _refCamera: Ref<FilterElement<string>> = createRef();
protected _refWhen: Ref<FilterElement<MediaFilterCoreWhenSelection>> = createRef();
protected _refWhat: Ref<FilterElement<string>> = createRef();
@@ -98,6 +119,20 @@ export class FrigateCardMediaFilterCore extends LitElement {
label: localize('media_filter.not_favorite'),
},
];
this._mediaTypeOptions = [
{
value: MediaFilterMediaType.Clips,
label: localize('media_filter.media_types.clips'),
},
{
value: MediaFilterMediaType.Snapshots,
label: localize('media_filter.media_types.snapshots'),
},
{
value: MediaFilterMediaType.Recordings,
label: localize('media_filter.media_types.recordings'),
},
];
}
protected _valueChangedHandler(ev: CustomEvent<{ value: unknown }>): void {
@@ -106,6 +141,10 @@ export class FrigateCardMediaFilterCore extends LitElement {
return;
}
const values: MediaFilterCoreSelection = {
...(this._refMediaType.value &&
this._refMediaType.value.selectedItem?.value && {
mediaType: this._refMediaType.value.selectedItem?.value,
}),
...(this._refCamera.value &&
this._refCamera.value.selectedItem?.value && {
cameraIDs: new Set([this._refCamera.value.selectedItem.value]),
@@ -150,19 +189,19 @@ export class FrigateCardMediaFilterCore extends LitElement {
},
{
value: { selection: MediaFilterCoreWhen.Today },
label: localize('media_filter.today'),
label: localize('media_filter.whens.today'),
},
{
value: { selection: MediaFilterCoreWhen.Yesterday },
label: localize('media_filter.yesterday'),
label: localize('media_filter.whens.yesterday'),
},
{
value: { selection: MediaFilterCoreWhen.PastWeek },
label: localize('media_filter.past_week'),
label: localize('media_filter.whens.past_week'),
},
{
value: { selection: MediaFilterCoreWhen.PastMonth },
label: localize('media_filter.past_month'),
label: localize('media_filter.whens.past_month'),
},
...(this.whenOptions ?? []),
];
@@ -186,58 +225,72 @@ export class FrigateCardMediaFilterCore extends LitElement {
* @returns A rendered template.
*/
protected render(): TemplateResult | void {
return html`
<ha-combo-box
${ref(this._refWhen)}
.hass=${this.hass}
.label=${localize('media_filter.when')}
.items=${this._whenOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>
${this.cameraOptions
? html` <ha-combo-box
${ref(this._refCamera)}
return html` ${this.controls?.mediaType ?? true
? html` <ha-combo-box
${ref(this._refMediaType)}
.hass=${this.hass}
.label=${localize('media_filter.media_type')}
.items=${this._mediaTypeOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${this.controls?.when ?? true
? html`<ha-combo-box
${ref(this._refWhen)}
.hass=${this.hass}
.label=${localize('media_filter.when')}
.items=${this._whenOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${(this.controls?.camera ?? true) && this.cameraOptions
? html` <ha-combo-box
${ref(this._refCamera)}
.hass=${this.hass}
.label=${localize('media_filter.camera')}
.items=${this._cameraOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${(this.controls?.what ?? true) && this.whatOptions
? html` <ha-combo-box
${ref(this._refWhat)}
.hass=${this.hass}
.label=${localize('media_filter.what')}
.items="${this._whatOptions}"
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${(this.controls?.where ?? true) && this.whereOptions
? html`<ha-combo-box
${ref(this._refWhere)}
.hass=${this.hass}
.label=${localize('media_filter.where')}
.items=${this._whereOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${this.controls?.favorite ?? true
? html`
<ha-combo-box
${ref(this._refFavorite)}
.hass=${this.hass}
.label=${localize('media_filter.camera')}
.items=${this._cameraOptions}
.label=${localize('media_filter.favorite')}
.items=${this._favoriteOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${this.whatOptions
? html` <ha-combo-box
${ref(this._refWhat)}
.hass=${this.hass}
.label=${localize('media_filter.what')}
.items="${this._whatOptions}"
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
${this.whereOptions
? html`<ha-combo-box
${ref(this._refWhere)}
.hass=${this.hass}
.label=${localize('media_filter.where')}
.items=${this._whereOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>`
: ''}
<ha-combo-box
${ref(this._refFavorite)}
.hass=${this.hass}
.label=${localize('media_filter.favorite')}
.items=${this._favoriteOptions}
.allowCustomValue=${false}
@value-changed=${this._valueChangedHandler.bind(this)}
></ha-combo-box>
`;
></ha-combo-box>
`
: ''}`;
}
static get styles(): CSSResultGroup {
return unsafeCSS(mediaFilterStyle);
return unsafeCSS(mediaFilterCoreStyle);
}
}
src/components/media-filter.ts
+3 -6
View File
@@ -6,7 +6,6 @@ import startOfToday from 'date-fns/esm/startOfToday';
import startOfDay from 'date-fns/startOfDay';
import startOfYesterday from 'date-fns/startOfYesterday';
import {
css,
CSSResultGroup,
html,
LitElement,
@@ -14,6 +13,7 @@ import {
ReactiveController,
ReactiveControllerHost,
TemplateResult,
unsafeCSS,
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { CameraManager } from '../camera/manager';
@@ -38,6 +38,7 @@ import { prettifyTitle } from '../utils/basic';
import format from 'date-fns/format';
import parse from 'date-fns/parse';
import endOfMonth from 'date-fns/endOfMonth';
import mediaFilterStyle from '../scss/media-filter.scss';
@customElement('frigate-card-media-filter')
export class FrigateCardMediaFilter extends LitElement {
@@ -158,11 +159,7 @@ export class FrigateCardMediaFilter extends LitElement {
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
}
`;
return unsafeCSS(mediaFilterStyle);
}
}
src/localize/languages/en.json
+13 -5
View File
@@ -368,14 +368,22 @@
"all": "All",
"camera": "Camera",
"favorite": "Favorite",
"media_type": "Media Type",
"media_types": {
"clips": "Clips",
"snapshots": "Snapshots",
"recordings": "Recordings"
},
"not_favorite": "Not Favorite",
"past_month": "Past Month",
"past_week": "Past Week",
"today": "Today",
"what": "What",
"when": "When",
"where": "Where",
"yesterday": "Yesterday"
"whens": {
"past_month": "Past Month",
"past_week": "Past Week",
"today": "Today",
"yesterday": "Yesterday"
},
"where": "Where"
},
"recording": {
"events": "Events",
src/localize/languages/it.json
+13 -5
View File
@@ -339,14 +339,22 @@
"all": "",
"camera": "",
"favorite": "",
"media_type": "",
"media_types": {
"clips": "",
"snapshots": "",
"recordings": ""
},
"not_favorite": "",
"past_month": "",
"past_week": "",
"today": "",
"what": "",
"when": "",
"where": "",
"yesterday": ""
"whens": {
"past_month": "",
"past_week": "",
"today": "",
"yesterday": ""
},
"where": ""
},
"recording": {
"events": "Eventi",
src/localize/languages/pt-BR.json
+13 -5
View File
@@ -339,14 +339,22 @@
"all": "",
"camera": "",
"favorite": "",
"media_type": "",
"media_types": {
"clips": "",
"snapshots": "",
"recordings": ""
},
"not_favorite": "",
"past_month": "",
"past_week": "",
"today": "",
"what": "",
"when": "",
"where": "",
"yesterday": ""
"whens": {
"past_month": "",
"past_week": "",
"today": "",
"yesterday": ""
},
"where": ""
},
"recording": {
"events": "Eventos",
src/scss/media-filter-core.scss
+16
View File
@@ -0,0 +1,16 @@
:host {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
// Hide scrollbar: Firefox
scrollbar-width: none;
// Hide scrollbar: IE and Edge
-ms-overflow-style: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
:host::-webkit-scrollbar {
display: none;
}
src/scss/media-filter.scss
+2 -3
View File
@@ -1,5 +1,4 @@
:host {
display: flex;
flex-direction: column;
overflow: auto;
display: block;
height: 100%;
}