jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Calendar Panel: Persist Calendars in Local Storage (#7540)

Browse Source
This commit is contained in:
Zack Barett 2020-10-30 11:28:19 -05:00 committed by GitHub
parent 3dedbc5457
commit 1d9779d47c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/panels/calendar/ha-panel-calendar.ts
View File

@ -14,6 +14,7 @@ import {
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { styleMap } from "lit-html/directives/style-map"; import { styleMap } from "lit-html/directives/style-map";
import { LocalStorage } from "../../common/decorators/local-storage";
import { HASSDomEvent } from "../../common/dom/fire_event"; import { HASSDomEvent } from "../../common/dom/fire_event";
import "../../components/ha-card"; import "../../components/ha-card";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
@ -25,7 +26,6 @@ import type {
CalendarEvent, CalendarEvent,
CalendarViewChanged, CalendarViewChanged,
HomeAssistant, HomeAssistant,
SelectedCalendar,
} from "../../types"; } from "../../types";
import "./ha-full-calendar"; import "./ha-full-calendar";
@ -36,20 +36,20 @@ class PanelCalendar extends LitElement {
@property({ type: Boolean, reflect: true }) @property({ type: Boolean, reflect: true })
public narrow!: boolean; public narrow!: boolean;
@internalProperty() private _calendars: SelectedCalendar[] = []; @internalProperty() private _calendars: Calendar[] = [];
@internalProperty() private _events: CalendarEvent[] = []; @internalProperty() private _events: CalendarEvent[] = [];
@LocalStorage("deSelectedCalendars", true)
private _deSelectedCalendars: string[] = [];
private _start?: Date; private _start?: Date;
private _end?: Date; private _end?: Date;
protected firstUpdated(changedProps: PropertyValues): void { protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
this._calendars = getCalendars(this.hass).map((calendar) => ({ this._calendars = getCalendars(this.hass);
selected: true,
calendar,
}));
} }
protected render(): TemplateResult { protected render(): TemplateResult {
@ -75,19 +75,22 @@ class PanelCalendar extends LitElement {
</div> </div>
${this._calendars.map( ${this._calendars.map(
(selCal) => (selCal) =>
html`<div> html`
<mwc-formfield .label=${selCal.calendar.name}> <div>
<mwc-formfield .label=${selCal.name}>
<mwc-checkbox <mwc-checkbox
style=${styleMap({ style=${styleMap({
"--mdc-theme-secondary": selCal.calendar "--mdc-theme-secondary": selCal.backgroundColor!,
.backgroundColor!,
})} })}
.value=${selCal.calendar.entity_id} .value=${selCal.entity_id}
.checked=${selCal.selected} .checked=${!this._deSelectedCalendars.includes(
selCal.entity_id
)}
@change=${this._handleToggle} @change=${this._handleToggle}
></mwc-checkbox> ></mwc-checkbox>
</mwc-formfield> </mwc-formfield>
</div>` </div>
`
)} )}
</div> </div>
<ha-full-calendar <ha-full-calendar
@ -103,8 +106,8 @@ class PanelCalendar extends LitElement {
private get _selectedCalendars(): Calendar[] { private get _selectedCalendars(): Calendar[] {
return this._calendars return this._calendars
.filter((selCal) => selCal.selected) .filter((selCal) => !this._deSelectedCalendars.includes(selCal.entity_id))
.map((cal) => cal.calendar); .map((cal) => cal);
} }
private async _fetchEvents( private async _fetchEvents(
@ -121,24 +124,28 @@ class PanelCalendar extends LitElement {
private async _handleToggle(ev): Promise<void> { private async _handleToggle(ev): Promise<void> {
const results = this._calendars.map(async (cal) => { const results = this._calendars.map(async (cal) => {
if (ev.target.value !== cal.calendar.entity_id) { if (ev.target.value !== cal.entity_id) {
return cal; return cal;
} }
const checked = ev.target.checked; const checked = ev.target.checked;
if (checked) { if (checked) {
const events = await this._fetchEvents(this._start!, this._end!, [ const events = await this._fetchEvents(this._start!, this._end!, [cal]);
cal.calendar,
]);
this._events = [...this._events, ...events]; this._events = [...this._events, ...events];
this._deSelectedCalendars = this._deSelectedCalendars.filter(
(deCal) => deCal !== cal.entity_id
);
} else { } else {
this._events = this._events.filter( this._events = this._events.filter(
(event) => event.calendar !== cal.calendar.entity_id (event) => event.calendar !== cal.entity_id
); );
this._deSelectedCalendars = [
...this._deSelectedCalendars,
cal.entity_id,
];
} }
cal.selected = checked;
return cal; return cal;
}); });

5
src/types.ts
View File

@ -127,11 +127,6 @@ export interface Calendar {
backgroundColor?: string; backgroundColor?: string;
} }
export interface SelectedCalendar {
selected: boolean;
calendar: Calendar;
}
export interface CalendarEvent { export interface CalendarEvent {
summary: string; summary: string;
title: string; title: string;