deploy

niklasfasching · Mar 3, 2024 · a9971a1 · a9971a1
commit a9971a1
Show file tree

Hide file tree

Showing 66 changed files with 9,446 additions and 0 deletions.
diff --git a/docs/CNAME b/docs/CNAME
@@ -0,0 +1 @@
+www.guckschnell.de
diff --git a/docs/examples/freiluftkino/actions.html b/docs/examples/freiluftkino/actions.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>actions</title>
+    <script type="x-module" src="/modules/icon/index.html"></script>
+    <script type="text/x-template" id="x-actions" x-props="show">
+      <x-icon-share .if="$.props.share" .on:click="{$.onShare()}"/>
+      <x-icon-heart .if="$.props.heart" ..favorited="$.favorited" .on:click="$.toggleFavorite()"/>
+      <x-icon-visibility .if="$.props.visibility" hidden="{$.hidden}" .on:click="$.toggleHideMovie()"/>
+    </script>
+
+    <style>
+     x-actions {
+       color: #ccc;
+       display: flex;
+       gap: 0.5em;
+     }
+
+     x-actions svg:hover {
+       stroke: #fff;
+     }
+    </style>
+    <script type="module">
+     import {define, Component} from "/src/runtime.mjs";
+
+     define("x-actions", class extends Component {
+       onShare() {
+         return navigator.share({title: this.show.title, url: location.href});
+       }
+
+       toggleFavorite() {
+         if (this.favorited) delete this.app.db.favoriteShows[this.show.id];
+         else this.app.db.favoriteShows[this.show.id] = true;
+         if (this.favorited) delete this.app.db.hiddenMovies[this.show.key];
+       }
+
+       toggleHideMovie() {
+         if (this.hidden) delete this.app.db.hiddenMovies[this.show.key];
+         else this.app.db.hiddenMovies[this.show.key] = true;
+         if (this.hidden) delete this.app.db.favoriteShows[this.show.id];
+       }
+
+       get hidden() {
+         return this.app.db.hiddenMovies[this.show.key];
+       }
+
+       get favorited() {
+         return this.app.db.favoriteShows[this.show.id];
+       }
+     });
+    </script>
+  </head>
+</html>
diff --git a/docs/examples/freiluftkino/details.html b/docs/examples/freiluftkino/details.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>details</title>
+    <script type="x-module" src="/modules/icon/index.html"></script>
+    <script type="x-module" src="/modules/chart/index.html"></script>
+    <script type="x-module" src="actions.html"></script>
+    <script type="text/x-template" id="x-details" x-props="show history">
+      <x-nav/>
+      <main>
+        <div>
+          <div ..cover ..bookable="$.show.bookable">
+            <img src="{$.show.img}">
+            <div ..time>{$.show.date} - {$.show.time}</div>
+            <x-actions show="{$.show}" visibility share heart/>
+          </div>
+        </div>
+        <div ..content>
+          <div ..meta>
+            <div ..title><a href="{$.show.url}">{$.show.title}</a></div>
+            <a ..cinema href="{$.show.cinemaUrl}">{$.show.cinemaShortName}</a>
+          </div>
+          <div ..stats>
+            <div><b>Seats</b></div>
+            <small .if="$.show.available === -1">free, open seating</small>
+            <div .if="$.show.available !== -1">
+              <x-chart {...$.chart} formatTooltip="{$.formatTooltip}"/>
+              <span>{$.show.available || 0} free</span> |
+              <span>{$.show.reserved || 0} reserved</span>
+            </div>
+          </div>
+          <div ..links>
+            <a .if="$.show.trailer" ..button href="{$.show.trailer}" target="_blank" rel="noopener">trailer</a>
+          </div>
+          <div ..description>{$.show.description}</div>
+          <div ..alternatives .if="$.alternatives.length">
+            <h3>Alternatives</h3>
+            <div ..alternative ..cinema-excluded="$.app.db.excludedCinemas[show.cinemaName]" .for="show of $.alternatives">
+              <h4><a href="#/show/{show.id}">{show.title}</a></h4>
+              <div>{show.date.replaceAll(",", "")} <a href="{show.cinemaUrl}">{show.cinemaShortName}</a></div>
+              <div ..seats>
+                <small .if="show.available === -1">free, open seating</small>
+                <div .if="show.available !== -1">
+                  <span>{show.available || 0} free</span> |
+                  <span>{show.reserved || 0} reserved</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </script>
+
+    <style>
+     x-details main {
+       display: flex;
+       flex-direction: column;
+       gap: 1em;
+       max-width: 50em;
+       margin: 0 auto;
+       border-radius: 0.25em;
+       overflow: hidden;
+     }
+
+     x-details x-chart svg {
+       display: block;
+       width: 100%;
+       height: 2em;
+       fill: #fff;
+     }
+
+     x-details img {
+       height: 30em;
+       width: 100%;
+       object-fit: cover;
+     }
+
+     x-details .content {
+       display: flex;
+       flex-direction: column;
+       gap: 1em;
+       margin: 1em;
+     }
+
+     x-details .title {
+       font-size: 1.5em;
+       white-space: initial;
+     }
+
+     x-details x-actions {
+       position: absolute;
+       top: 0;
+       right: 0;
+       padding: 0.5em;
+       font-size: 1.5em;
+     }
+
+     x-details .cover {
+       position: relative;
+     }
+
+     x-details .time {
+       position: absolute;
+       pointer-events: none;
+       padding: 0.5em;
+       top: 0;
+       font-size: 1.5em;
+       font-weight: bold;
+       width: 100%;
+       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
+     }
+
+     x-details .description {
+       line-height: 1.5;
+     }
+
+     x-details .actions {
+       position: absolute;
+       top: 0;
+       right: 0;
+       padding: 0.5em;
+       font-size: 1.5em;
+     }
+
+     x-details .alternative.cinema-excluded, x-details .alternative .seats {
+       color: #888;
+     }
+
+    </style>
+    <script type="module">
+     import {define, Component} from "/src/runtime.mjs";
+
+     define("x-details", class extends Component {
+       onRender() {
+         this.chart = {
+           xMin: this.history[0]?.[0] || 0,
+           xMax: Date.now(),
+           yMin: 0,
+           yMax: Math.max(...this.history.map(([x, y]) => y)),
+           values: this.history,
+         };
+
+         this.alternatives = Object.values(this.props.shows).sort((a, b) => a.timestamp - b.timestamp).filter((show) => {
+           return this.show.key === show.key && this.show !== show;
+         });
+       }
+
+       formatTooltip({vx, vy}) {
+         const date = new Date(vx).toLocaleDateString("de").slice(0, -5);
+         const time = new Date(vx).toLocaleTimeString("de").slice(0, -3);
+         return `${date} ${time} | ${vy.toFixed()} free`;
+       }
+     });
+    </script>
+  </head>
+</html>
diff --git a/docs/examples/freiluftkino/icon.png b/docs/examples/freiluftkino/icon.png
diff --git a/docs/examples/freiluftkino/index.html b/docs/examples/freiluftkino/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>freiluftkino</title>
+    <link rel="manifest" href="manifest.webmanifest">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="/src/base.css" rel="stylesheet"/>
+    <link href="module.css" rel="stylesheet"/>
+    <script type="x-module" src="/modules/app/index.html"></script>
+    <script type="x-module" src="list.html"></script>
+    <script type="x-module" src="details.html"></script>
+    <script type="x-module" src="nav.html"></script>
+
+    <script type="module">
+     import {mount} from "/src/runtime.mjs";
+
+     (async () => {
+       const history = await fetch("https://niklasfasching.github.io/freiluftkino/history.json").then(r => r.json());
+       const shows = await fetch("https://niklasfasching.github.io/freiluftkino/shows.json").then(r => r.json());
+       for (const id in shows) {
+         shows[id].key = shows[id].title.toLowerCase().replace(/\(.*\)|-.*?film preview|open air:/g, "").trim();
+       }
+       await mount(document.body, "x-app", {
+         routes: {
+           "/": ["x-list", () => ({shows, history})],
+           "/favorites": ["x-list", () => ({shows, history})],
+           "/hidden": ["x-list", () => ({shows, history})],
+           "/cinema/{id}": ["x-list", () => ({shows, history})],
+           "/show/{id}": ["x-details", (app) => {
+             const show = shows[app.params.id];
+             return {shows, show, history: history[show?.url]};
+           }],
+         },
+         cinemas: Object.fromEntries(Object.values(shows).map(x => [x.cinemaId, x.cinemaShortName])),
+         shows,
+         history,
+         db: {
+           excludedCinemas: {},
+           onlyAvailable: false,
+           favoriteShows: {},
+           hiddenMovies: {},
+         },
+       });
+     })();
+    </script>
+  </head>
+</html>