Mercurial > code > home > repos > front-door-display

--- a/Dockerfile	Sat Mar 18 19:34:12 2023 -0700
+++ b/Dockerfile	Tue Mar 05 16:20:04 2024 -0800
@@ -1,21 +1,4 @@
-FROM bang5:5000/base_basic
-
-ENV KEYRING=/usr/share/keyrings/nodesource.gpg
-ENV VERSION=node_16.x
-ENV DISTRO=jammy
-RUN apt-get install -y gpg
-
-RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee "$KEYRING" >/dev/null && \
-  echo "deb [signed-by=$KEYRING] https://deb.nodesource.com/$VERSION $DISTRO main" | tee /etc/apt/sources.list.d/nodesource.list && \
-  echo "deb-src [signed-by=$KEYRING] https://deb.nodesource.com/$VERSION $DISTRO main" | tee -a /etc/apt/sources.list.d/nodesource.list && \
-  apt-get update && \
-  apt-get remove -y nodejs libnode-dev libnode72 && \
-  apt-get install -y nodejs && \
-  apt autoremove -y && \
-  echo 2023-03-18 && \
-  pnpm add -g pnpm
-
-RUN pnpm set registry "https://bigasterisk.com/js/"
+FROM reg:5000/base_basic

 WORKDIR /opt
--- a/deploy.yaml	Sat Mar 18 19:34:12 2023 -0700
+++ b/deploy.yaml	Tue Mar 05 16:20:04 2024 -0800
@@ -16,7 +16,7 @@
       containers:

         - name: vite
-          image: bang5:5000/front_door_display_image
+          image: reg:5000/front_door_display_image
           command:
             - pnpx
             - vite
--- a/index.html	Sat Mar 18 19:34:12 2023 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>front-door-display</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" media="screen" href="src/main.css" />
-    <script type="module" src="src/main.ts"></script>
-  </head>
-  <body>
-    <fd-week-guide></fd-week-guide>
-    <fd-upcoming-events></fd-upcoming-events>
-  </body>
-</html>
--- a/skaffold.yaml	Sat Mar 18 19:34:12 2023 -0700
+++ b/skaffold.yaml	Tue Mar 05 16:20:04 2024 -0800
@@ -4,7 +4,8 @@
   name: front-door-display
 build:
   artifacts:
-  - image: bang5:5000/front_door_display_image
+  - image: reg:5000/front_door_display_image
+    platforms: [amd64]
     sync:
       infer:
       - index.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/index.html	Tue Mar 05 16:20:04 2024 -0800
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>front-door-display</title>
+    <meta http-equiv="refresh" content="3600" />
+    <!--auth timeout workaround-->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" media="screen" href="src/main.css" />
+    <script type="module" src="src/main.ts"></script>
+  </head>
+  <body>
+    <fd-week-guide></fd-week-guide>
+    <fd-upcoming-events></fd-upcoming-events>
+    <iframe src="/fingerprint/"></iframe>
+    <script type="module" src="https://bigasterisk.com/lib/bigast/v2/loginBar.js"></script>
+    <bigast-loginbar></bigast-loginbar>
+    <script>
+      // try doing a fetch test to see if reload is likely to work, and only then do a reload
+    </script>
+  </body>
+</html>
--- a/src/main.css	Sat Mar 18 19:34:12 2023 -0700
+++ b/src/main.css	Tue Mar 05 16:20:04 2024 -0800
@@ -3,6 +3,7 @@
 body {
   width: 800px;
   height: 480px;
+  overflow: hidden;
 }
 html {
   background: gray;
@@ -19,3 +20,12 @@
 body > * {
   /*outline: 1px orange solid;*/
 }
+iframe {
+  background: #8bbe9c;
+  display: inline-block;
+  position: fixed;
+  top: 3em;
+  left: 12em;
+  width: 480px;
+  height: 380px;
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main.ts	Tue Mar 05 16:20:04 2024 -0800
@@ -0,0 +1,136 @@
+import { addHours, endOfToday, endOfTomorrow, format, isAfter, isBefore, isToday, isTomorrow, isWithinInterval, parseISO, startOfToday } from "date-fns";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { sortBy } from "lodash";
+import { DataFactory, NamedNode, Parser, Quad_Predicate, Quad_Subject, Store, Term } from "n3";
+import { hideFeeds, hideTitles } from "./private";
+import { shared } from "./shared";
+const { namedNode } = DataFactory;
+export { WeekGuide } from "./WeekGuide";
+const EV = "http://bigasterisk.com/event#";
+const RDF = "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+
+function getLiteral(store: Store, graph: Term, subj: Quad_Subject, pred: Quad_Predicate, missing: string | null): string {
+  let out = null;
+  store.getObjects(subj, pred, graph).forEach((attr) => {
+    out = attr.value;
+  });
+  if (!out) {
+    if (missing === null) {
+      throw new Error();
+    }
+    return missing;
+  }
+  return out;
+}
+
+class DisplayEvent {
+  constructor(private store: Store, private graph: Term, public uri: Quad_Subject) {}
+  get title(): string {
+    return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "title"), "(unnamed)");
+  }
+  get start(): string {
+    return getLiteral(this.store, this.graph, this.uri, namedNode(EV + "start"), null);
+  }
+  get feed(): NamedNode {
+    return namedNode(getLiteral(this.store, this.graph, this.uri, namedNode(EV + "feed"), null));
+  }
+  shortDate(): TemplateResult {
+    const t = parseISO(this.start);
+    return html`<span class="d">${format(t, "EEE, MMM d,")}</span> <span class="t">${format(t, "HH:mm")}</span>`;
+  }
+  show(): boolean {
+    const now = new Date();
+    const t = parseISO(this.start);
+
+    const start = startOfToday();
+    let end = endOfToday();
+    if (isAfter(now, addHours(startOfToday(), 18))) {
+      end = endOfTomorrow();
+    }
+
+    return isWithinInterval(t, { start, end }) && !hideTitles.has(this.title) && !hideFeeds.has(this.feed.value);
+  }
+  toHtml(): TemplateResult {
+    return html`
+      <li>
+        <span class="date">${this.shortDate()}</span> ${this.title}
+        <!--${this.feed}-->
+      </li>
+    `;
+  }
+}
+
+@customElement("fd-upcoming-events")
+export class UpcomingEvents extends LitElement {
+  @property() evs: DisplayEvent[];
+  constructor() {
+    super();
+    this.evs = [];
+    this.load();
+    setInterval(this.load.bind(this), 5 * 60 * 1000);
+  }
+
+  async load() {
+    const store = new Store();
+    const r = await fetch("/gcalendarwatch/graph/calendar/upcoming",
+
+    {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'X-Pomerium-Authorization': document.cookie.substring(
+          document.cookie.indexOf('=') + 1,
+        ),
+      },
+    }
+
+    );
+    const n3txt = await r.text();
+    const parser = new Parser({ format: "application/trig" });
+    parser.parse(n3txt, (error, quad, prefixes) => {
+      if (quad) {
+        store.addQuad(quad);
+      } else {
+        const graph = namedNode(EV + "gcalendar");
+        this.evs = [];
+        store.getSubjects(namedNode(RDF + "type"), namedNode(EV + "Event"), graph).forEach((ev: Quad_Subject) => {
+          const de = new DisplayEvent(store, graph, ev);
+          if (de.show()) {
+            this.evs = [...this.evs, de];
+          }
+        });
+        this.evs = sortBy(this.evs, "start");
+      }
+    });
+  }
+  static styles = [
+    shared,
+    css`
+      ol {
+        list-style-type: circle;
+        font-size: 16px;
+        background: #cd66bb2e;
+        padding: 9px;
+        width: fit-content;
+        position: relative;
+        top: -21px;
+        border-radius: 14px;
+      }
+      span.d {
+        opacity: 0.5;
+      }
+      span.t {
+        color: #50fa7b;
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <h1 data-text="Calendar">Calendar</h1>
+      <ol>
+        ${this.evs.map((d) => d.toHtml())}
+      </ol>
+    `;
+  }
+}