|
2
|
1 import { addHours, endOfToday, endOfTomorrow, format, isAfter, isBefore, isToday, isTomorrow, isWithinInterval, parseISO, startOfToday } from "date-fns";
|
|
|
2 import { css, html, LitElement, TemplateResult } from "lit";
|
|
|
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;
|
|
|
9 export { WeekGuide } from "./WeekGuide";
|
|
|
10 const EV = "http://bigasterisk.com/event#";
|
|
|
11 const RDF = "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
|
|
|
12
|
|
5
|
13 function updateTime() {
|
|
|
14 document.querySelector("#time").innerText = new Date().toTimeString().slice(0, 8);
|
|
|
15 }
|
|
|
16 setInterval(updateTime, 1000)
|
|
|
17 updateTime()
|
|
4
|
18
|
|
|
19 // Function to send a POST request
|
|
|
20 function sendPostRequest(data) {
|
|
|
21 fetch('https://example.com/api', {
|
|
|
22 method: 'POST',
|
|
|
23 headers: {
|
|
|
24 'Content-Type': 'application/json',
|
|
|
25 },
|
|
|
26 body: JSON.stringify(data),
|
|
|
27 })
|
|
|
28 .then(response => {
|
|
|
29 if (!response.ok) {
|
|
|
30 throw new Error('Network response was not ok');
|
|
|
31 }
|
|
|
32 return response.json();
|
|
|
33 })
|
|
|
34 .then(data => {
|
|
|
35 console.log('POST request successful');
|
|
|
36 // Handle response data if needed
|
|
|
37 })
|
|
|
38 .catch(error => {
|
|
|
39 console.error('There was a problem with the POST request:', error);
|
|
|
40 });
|
|
|
41 }
|
|
|
42
|
|
|
43 // Callback function to handle DOM changes
|
|
|
44 function handleDomChanges(mutationsList, observer) {
|
|
|
45 // Send a POST request whenever the DOM changes
|
|
|
46 sendPostRequest({ domChanges: mutationsList });
|
|
|
47 }
|
|
|
48
|
|
|
49 // Create a MutationObserver instance
|
|
|
50 const observer = new MutationObserver(handleDomChanges);
|
|
|
51
|
|
|
52 // Start observing the DOM for changes
|
|
|
53 observer.observe(document.body, { subtree: true, childList: true, attributes: true });
|
|
|
54
|
|
|
55
|
|
2
|
56 function getLiteral(store: Store, graph: Term, subj: Quad_Subject, pred: Quad_Predicate, missing: string | null): string {
|
|
|
57 let out = null;
|
|
|
58 store.getObjects(subj, pred, graph).forEach((attr) => {
|
|
|
59 out = attr.value;
|
|
|
60 });
|
|
|
61 if (!out) {
|
|
|
62 if (missing === null) {
|
|
|
63 throw new Error();
|
|
|
64 }
|
|
|
65 return missing;
|
|
|
66 }
|
|
|
67 return out;
|
|
|
68 }
|
|
|
69
|
|
|
70 class DisplayEvent {
|
|
|
71 constructor(private store: Store, private graph: Term, public uri: Quad_Subject) {}
|
|
|
72 get title(): string {
|
|
|
73 return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "title"), "(unnamed)");
|
|
|
74 }
|
|
|
75 get start(): string {
|
|
|
76 return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "start"), null);
|
|
|
77 }
|
|
|
78 get feed(): NamedNode {
|
|
|
79 return namedNode(getLiteral(this.store, this.graph, this.uri, namedNode(EV + "feed"), null));
|
|
|
80 }
|
|
|
81 shortDate(): TemplateResult {
|
|
|
82 const t = parseISO(this.start);
|
|
|
83 return html`<span class="d">${format(t, "EEE, MMM d,")}</span> <span class="t">${format(t, "HH:mm")}</span>`;
|
|
|
84 }
|
|
|
85 show(): boolean {
|
|
|
86 const now = new Date();
|
|
|
87 const t = parseISO(this.start);
|
|
|
88
|
|
|
89 const start = startOfToday();
|
|
|
90 let end = endOfToday();
|
|
|
91 if (isAfter(now, addHours(startOfToday(), 18))) {
|
|
|
92 end = endOfTomorrow();
|
|
|
93 }
|
|
|
94
|
|
|
95 return isWithinInterval(t, { start, end }) && !hideTitles.has(this.title) && !hideFeeds.has(this.feed.value);
|
|
|
96 }
|
|
|
97 toHtml(): TemplateResult {
|
|
|
98 return html`
|
|
|
99 <li>
|
|
|
100 <span class="date">${this.shortDate()}</span> ${this.title}
|
|
|
101 <!--${this.feed}-->
|
|
|
102 </li>
|
|
|
103 `;
|
|
|
104 }
|
|
|
105 }
|
|
|
106
|
|
|
107 @customElement("fd-upcoming-events")
|
|
|
108 export class UpcomingEvents extends LitElement {
|
|
|
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 store = new Store();
|
|
|
119 const r = await fetch("/gcalendarwatch/graph/calendar/upcoming",
|
|
|
120
|
|
|
121 {
|
|
|
122 method: 'GET',
|
|
|
123 headers: {
|
|
|
124 Accept: 'application/json',
|
|
|
125 'X-Pomerium-Authorization': document.cookie.substring(
|
|
|
126 document.cookie.indexOf('=') + 1,
|
|
|
127 ),
|
|
|
128 },
|
|
|
129 }
|
|
|
130
|
|
|
131 );
|
|
|
132 const n3txt = await r.text();
|
|
|
133 const parser = new Parser({ format: "application/trig" });
|
|
|
134 parser.parse(n3txt, (error, quad, prefixes) => {
|
|
|
135 if (quad) {
|
|
|
136 store.addQuad(quad);
|
|
|
137 } else {
|
|
|
138 const graph = namedNode(EV + "gcalendar");
|
|
|
139 this.evs = [];
|
|
|
140 store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
|
|
|
141 const de = new DisplayEvent(store, graph, ev);
|
|
|
142 if (de.show()) {
|
|
|
143 this.evs = [...this.evs, de];
|
|
|
144 }
|
|
|
145 });
|
|
|
146 this.evs = sortBy(this.evs, "start");
|
|
|
147 }
|
|
|
148 });
|
|
|
149 }
|
|
|
150 static styles = [
|
|
|
151 shared,
|
|
|
152 css`
|
|
|
153 ol {
|
|
|
154 list-style-type: circle;
|
|
|
155 font-size: 16px;
|
|
|
156 background: #cd66bb2e;
|
|
|
157 padding: 9px;
|
|
|
158 width: fit-content;
|
|
|
159 position: relative;
|
|
|
160 top: -21px;
|
|
|
161 border-radius: 14px;
|
|
|
162 }
|
|
|
163 span.d {
|
|
|
164 opacity: 0.5;
|
|
|
165 }
|
|
|
166 span.t {
|
|
|
167 color: #50fa7b;
|
|
|
168 }
|
|
|
169 `,
|
|
|
170 ];
|
|
|
171 render() {
|
|
|
172 return html`
|
|
|
173 <h1 data-text="Calendar">Calendar</h1>
|
|
|
174 <ol>
|
|
|
175 ${this.evs.map((d) => d.toHtml())}
|
|
|
176 </ol>
|
|
|
177 `;
|
|
|
178 }
|
|
|
179 }
|
