|
13
|
1 import { addHours, endOfToday, endOfTomorrow, format, isAfter, isWithinInterval, parseISO, startOfToday } from "date-fns";
|
|
|
2 import { LitElement, TemplateResult, css, html } from "lit";
|
|
1
|
3 import { customElement, property } from "lit/decorators.js";
|
|
|
4 import { sortBy } from "lodash";
|
|
|
5 import { DataFactory, NamedNode, Parser, Quad_Predicate, Quad_Subject, Store, Term } from "n3";
|
|
|
6 import { hideFeeds, hideTitles } from "./private";
|
|
|
7 import { shared } from "./shared";
|
|
|
8 const { namedNode } = DataFactory;
|
|
13
|
9 export { FdClock } from "./FdClock";
|
|
1
|
10 export { WeekGuide } from "./WeekGuide";
|
|
|
11 const EV = "http://bigasterisk.com/event#";
|
|
|
12 const RDF = "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
|
|
|
13
|
|
|
14 function getLiteral(store: Store, graph: Term, subj: Quad_Subject, pred: Quad_Predicate, missing: string | null): string {
|
|
|
15 let out = null;
|
|
|
16 store.getObjects(subj, pred, graph).forEach((attr) => {
|
|
|
17 out = attr.value;
|
|
|
18 });
|
|
|
19 if (!out) {
|
|
|
20 if (missing === null) {
|
|
|
21 throw new Error();
|
|
|
22 }
|
|
|
23 return missing;
|
|
|
24 }
|
|
|
25 return out;
|
|
|
26 }
|
|
|
27
|
|
|
28 class DisplayEvent {
|
|
|
29 constructor(private store: Store, private graph: Term, public uri: Quad_Subject) {}
|
|
|
30 get title(): string {
|
|
|
31 return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "title"), "(unnamed)");
|
|
|
32 }
|
|
|
33 get start(): string {
|
|
|
34 return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "start"), null);
|
|
|
35 }
|
|
|
36 get feed(): NamedNode {
|
|
|
37 return namedNode(getLiteral(this.store, this.graph, this.uri, namedNode(EV + "feed"), null));
|
|
|
38 }
|
|
|
39 shortDate(): TemplateResult {
|
|
|
40 const t = parseISO(this.start);
|
|
|
41 return html`<span class="d">${format(t, "EEE, MMM d,")}</span> <span class="t">${format(t, "HH:mm")}</span>`;
|
|
|
42 }
|
|
13
|
43 inHowLong(): TemplateResult {
|
|
|
44 // returns start()-now, like '5 days'
|
|
|
45 const t = parseISO(this.start).valueOf();
|
|
|
46 const now = Date.now();
|
|
|
47 const daysAway = (t - now) / 1000 / 86400;
|
|
|
48 const prec = daysAway < 2 ? 1 : 0;
|
|
|
49 const cls = "until " + (daysAway < 2 ? "until-2d" : daysAway < 7 ? "until-7d" : daysAway < 30 ? "until-1mo" : "");
|
|
|
50 return html`<span class="${cls}">${daysAway.toFixed(prec)} days</span>`;
|
|
|
51 }
|
|
1
|
52 show(): boolean {
|
|
|
53 const now = new Date();
|
|
|
54 const t = parseISO(this.start);
|
|
|
55
|
|
|
56 const start = startOfToday();
|
|
|
57 let end = endOfToday();
|
|
|
58 if (isAfter(now, addHours(startOfToday(), 18))) {
|
|
|
59 end = endOfTomorrow();
|
|
|
60 }
|
|
|
61
|
|
|
62 return isWithinInterval(t, { start, end }) && !hideTitles.has(this.title) && !hideFeeds.has(this.feed.value);
|
|
|
63 }
|
|
13
|
64 }
|
|
|
65
|
|
|
66 async function fetchGraph(url: string) {
|
|
|
67 return await fetch(url, {
|
|
|
68 method: "GET",
|
|
|
69 headers: {
|
|
|
70 Accept: "application/json",
|
|
|
71 "X-Pomerium-Authorization": document.cookie.substring(document.cookie.indexOf("=") + 1),
|
|
|
72 },
|
|
|
73 });
|
|
|
74 }
|
|
|
75
|
|
|
76 async function parseGraph(r: Response, done: (store: Store) => void) {
|
|
|
77 const store = new Store();
|
|
|
78 const n3txt = await r.text();
|
|
|
79 const parser = new Parser({ format: "application/trig" });
|
|
|
80 parser.parse(n3txt, (error, quad, prefixes) => {
|
|
|
81 if (quad) {
|
|
|
82 store.addQuad(quad);
|
|
|
83 } else {
|
|
|
84 done(store);
|
|
|
85 }
|
|
|
86 });
|
|
1
|
87 }
|
|
|
88
|
|
|
89 @customElement("fd-upcoming-events")
|
|
|
90 export class UpcomingEvents extends LitElement {
|
|
|
91 static styles = [
|
|
|
92 shared,
|
|
|
93 css`
|
|
|
94 ol {
|
|
|
95 list-style-type: circle;
|
|
|
96 font-size: 16px;
|
|
|
97 background: #cd66bb2e;
|
|
|
98 padding: 9px;
|
|
|
99 width: fit-content;
|
|
|
100 position: relative;
|
|
|
101 top: -21px;
|
|
|
102 border-radius: 14px;
|
|
|
103 }
|
|
|
104 span.d {
|
|
|
105 opacity: 0.5;
|
|
|
106 }
|
|
|
107 `,
|
|
|
108 ];
|
|
13
|
109 @property() evs: DisplayEvent[];
|
|
|
110 constructor() {
|
|
|
111 super();
|
|
|
112 this.evs = [];
|
|
|
113 this.load();
|
|
|
114 setInterval(this.load.bind(this), 5 * 60 * 1000);
|
|
|
115 }
|
|
|
116
|
|
|
117 async load() {
|
|
|
118 const r = await fetchGraph("/gcalendarwatch/graph/calendar/upcoming");
|
|
|
119 await parseGraph(r, (store: Store) => {
|
|
|
120 const graph = namedNode(EV + "gcalendar");
|
|
|
121 this.evs = [];
|
|
|
122 store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
|
|
|
123 const de = new DisplayEvent(store, graph, ev);
|
|
|
124 if (de.show()) {
|
|
|
125 this.evs = [...this.evs, de];
|
|
|
126 }
|
|
|
127 });
|
|
|
128 this.evs = sortBy(this.evs, "start");
|
|
|
129 });
|
|
|
130 }
|
|
|
131
|
|
1
|
132 render() {
|
|
|
133 return html`
|
|
|
134 <h1 data-text="Calendar">Calendar</h1>
|
|
|
135 <ol>
|
|
13
|
136 ${this.evs.map((d) => html`<li><span class="date">${d.shortDate()}</span> ${d.title}</li>`)}
|
|
1
|
137 </ol>
|
|
|
138 `;
|
|
|
139 }
|
|
|
140 }
|
|
13
|
141
|
|
|
142 @customElement("fd-countdown")
|
|
|
143 export class FdCountdown extends LitElement {
|
|
|
144 static styles = [
|
|
|
145 shared,
|
|
|
146 css`
|
|
|
147 ol {
|
|
|
148 list-style: none;
|
|
|
149 font-size: 16px;
|
|
|
150 background: #cd66bb2e;
|
|
|
151 padding: 9px;
|
|
|
152 width: fit-content;
|
|
|
153 position: relative;
|
|
|
154 top: -21px;
|
|
|
155 border-radius: 14px;
|
|
|
156 }
|
|
|
157 span.d {
|
|
|
158 opacity: 0.5;
|
|
|
159 }
|
|
|
160 li:has(.until) {
|
|
|
161 color: #666;
|
|
|
162 }
|
|
|
163 li:has(.until-2d) {
|
|
|
164 color: #fff;
|
|
|
165 }
|
|
|
166 li:has(.until-7d) {
|
|
|
167 color: #ccc;
|
|
|
168 }
|
|
|
169 li:has(.until-30d) {
|
|
|
170 color: #999;
|
|
|
171 }
|
|
|
172 li:has(.until)::before {
|
|
|
173 display: inline-block;
|
|
|
174 width: 1.4em;
|
|
|
175 content: "";
|
|
|
176 }
|
|
|
177 li:has(.until-2d)::before {
|
|
|
178 content: "🌕";
|
|
|
179 }
|
|
|
180 li:has(.until-7d)::before {
|
|
|
181 content: "🌙";
|
|
|
182 }
|
|
|
183 li:has(.until-30d)::before {
|
|
|
184 content: "🌑";
|
|
|
185 }
|
|
|
186 `,
|
|
|
187 ];
|
|
|
188 @property() evs: DisplayEvent[];
|
|
|
189 constructor() {
|
|
|
190 super();
|
|
|
191 this.evs = [];
|
|
|
192 this.load();
|
|
|
193 setInterval(this.load.bind(this), 5 * 60 * 1000);
|
|
|
194 }
|
|
|
195 async load() {
|
|
|
196 const store = new Store();
|
|
|
197 const r = await fetchGraph("/gcalendarwatch/graph/calendar/countdown");
|
|
|
198 await parseGraph(r, (store: Store) => {
|
|
|
199 const graph = namedNode(EV + "gcalendar");
|
|
|
200 this.evs = [];
|
|
|
201 store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
|
|
|
202 const de = new DisplayEvent(store, graph, ev);
|
|
|
203 this.evs = [...this.evs, de];
|
|
|
204 });
|
|
|
205 this.evs = sortBy(this.evs, "start");
|
|
|
206 });
|
|
|
207 }
|
|
|
208 render() {
|
|
|
209 return html`<h1 data-text="Coming Soon">Coming Soon</h1>
|
|
|
210 <ol>
|
|
|
211 ${this.evs.map((d) => html`<li>In ${d.inHowLong()}, ${d.title}</li>`)}
|
|
|
212 </ol> `;
|
|
|
213 }
|
|
|
214 }
|
