|
15
|
1 import { LitElement, css, html } from "lit";
|
|
|
2 import { customElement, property } from "lit/decorators.js";
|
|
20
|
3 import { sortBy, sortedUniqBy } from "lodash";
|
|
15
|
4 import { DataFactory, Quad_Subject, Store } from "n3";
|
|
|
5 import { shared } from "./shared";
|
|
|
6 import { EV, fetchGraph, parseGraph, RDF } from "./parseRdf";
|
|
|
7 import { DisplayEvent } from "./DisplayEvent";
|
|
|
8
|
|
|
9 const { namedNode } = DataFactory;
|
|
|
10
|
|
|
11 @customElement("fd-upcoming-events")
|
|
|
12 export class UpcomingEvents extends LitElement {
|
|
|
13 static styles = [
|
|
|
14 shared,
|
|
|
15 css`
|
|
|
16 `,
|
|
|
17 ];
|
|
|
18 @property() evs: DisplayEvent[];
|
|
|
19 constructor() {
|
|
|
20 super();
|
|
|
21 this.evs = [];
|
|
|
22 this.load();
|
|
|
23 setInterval(this.load.bind(this), 5 * 60 * 1000);
|
|
|
24 }
|
|
|
25
|
|
|
26 async load() {
|
|
|
27 const r = await fetchGraph("/gcalendarwatch/graph/calendar/upcoming");
|
|
|
28 await parseGraph(r, (store: Store) => {
|
|
|
29 const graph = namedNode(EV + "gcalendar");
|
|
|
30 this.evs = [];
|
|
|
31 store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
|
|
|
32 const de = new DisplayEvent(store, graph, ev);
|
|
|
33 if (de.show()) {
|
|
|
34 this.evs = [...this.evs, de];
|
|
|
35 }
|
|
|
36 });
|
|
20
|
37 this.evs = sortedUniqBy(sortBy(this.evs, "start"), (de) => de.start + de.title);
|
|
15
|
38 });
|
|
|
39 }
|
|
|
40
|
|
|
41 render() {
|
|
|
42 return html`
|
|
17
|
43 <h1>Calendar</h1>
|
|
15
|
44 <ol>
|
|
|
45 ${this.evs.map((d) => html`<li><span class="date">${d.shortDate()}</span> ${d.title}</li>`)}
|
|
|
46 </ol>
|
|
|
47 `;
|
|
|
48 }
|
|
|
49 }
|
