[js] Gallery frontend

2 files changed, 78 insertions, 0 deletions

diff --git a/haunt/pages/gallery.sxml b/haunt/pages/gallery.sxml
new file mode 100644
index 0000000..f01dda0
--- /dev/null
+++ b/haunt/pages/gallery.sxml
@@ -0,0 +1,12 @@
+(use-modules (jakob theme)
+             (jakob utils sxml))
+
+(theme
+ #:title "Photo Gallery"
+ #:content
+ `((div (@ (id "gallery-container"))
+        (div (@ (id "loading"))
+             ,(image "hourglass.gif")
+             (p "Loading..."))
+        (div (@ (id "event-info"))))
+   ,(script "gallery.js")))
diff --git a/haunt/static/js/gallery.js b/haunt/static/js/gallery.js
new file mode 100644
index 0000000..29ed652
--- /dev/null
+++ b/haunt/static/js/gallery.js
@@ -0,0 +1,66 @@
+/*
+ * gallery.js -- Simple web-based gallery viewer.
+ * Copyright © 2022 Jakob L. Kreuze <zerodaysfordays@sdf.org>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+// Immediately send off an XHR to load info from the backend.
+const urlParams = new URLSearchParams(window.location.search);
+if (!urlParams.get("g")) {
+  document.getElementById("loading").remove();
+  let elem = document.createElement("p");
+  elem.innerHTML = "No gallery code provided.";
+  document.getElementById("gallery-container").appendChild(elem);
+} else {
+  let xhr = new XMLHttpRequest();
+  xhr.open("GET", `${location.protocol}//${location.host}/api/gallery?g=${urlParams.get("g")}`);
+  xhr.send();
+  xhr.onload = function(data) {
+    document.getElementById("loading").remove();
+    if (xhr.status != 200) {
+      let elem = document.createElement("p");
+      elem.innerHTML = "Invalid gallery code.";
+      document.getElementById("gallery-container").appendChild(elem);
+    } else {
+      let response = JSON.parse(xhr.response);
+
+      let elem = document.createElement("h1");
+      elem.innerHTML = response.info.title;
+      document.getElementById("gallery-container").appendChild(elem);
+
+      elem = document.createElement("h3");
+      elem.innerHTML = response.info.description;
+      document.getElementById("gallery-container").appendChild(elem);
+
+      let imagesContainer = document.createElement("div");
+      document.getElementById("gallery-container").appendChild(imagesContainer);
+
+      for (let image of response.images) {
+        elem = document.createElement("a");
+        elem.href = `${location.protocol}//${location.host}/api/gallery/image?name=${image.filename}`
+        let thumb = document.createElement("img");
+        thumb.src = `${location.protocol}//${location.host}/api/gallery/image?name=${image.thumbnail}`;
+        thumb.alt = `${image.title}`;
+        thumb.title = `${image.title} - ${image.datetime}`;
+        elem.appendChild(thumb);
+        imagesContainer.appendChild(elem);
+      }
+    }
+  }
+  xhr.onerror = function(error) {
+    throw new Error(`Request failed: ${error}`);
+  }
+}