1 files changed, 166 insertions, 0 deletions
diff --git a/dist/utah/script.js b/dist/utah/script.js
new file mode 100644
index 0000000..1701a3a
--- /dev/null
+++ b/dist/utah/script.js
@@ -0,0 +1,166 @@
+/* global dragula, CAMERAS */
+
+const STATE = loadState();
+
+function loadState() {
+  let hash = document.location.hash;
+  if (hash.length === 0) {
+    const DEFAULTS = [139];
+    history.replaceState(null, "", "#" + DEFAULTS.join(","));
+    return DEFAULTS;
+  }
+  hash = hash.replace(/^#/, "");
+  if (hash.length === 0) {
+    return [];
+  }
+  return hash.split(",").map(x => parseInt(x));
+}
+
+function handleCheckbox(evt) {
+  const id = parseInt(evt.target.dataset.id);
+  if (evt.target.checked) {
+    if (!STATE.includes(id)) {
+      appendCamera(id);
+    }
+  } else {
+    if (STATE.includes(id)) {
+      removeCamera(id);
+    }
+  }
+}
+
+function findCamera(id) {
+  for (let cameras of Object.values(CAMERAS)) {
+    let found = cameras.find(x => x.id === id);
+    if (found !== undefined) {
+      return found;
+    }
+  }
+}
+
+function loadData() {
+  const nav = document.querySelector("nav");
+  for (let neighborhood of Object.keys(CAMERAS)) {
+    const section = document.createElement("section");
+    const h2 = document.createElement("h2");
+    h2.innerText = neighborhood;
+    section.append(h2);
+
+    const boxes = document.createElement("ul");
+    section.append(boxes);
+    for (let { id, stream, name } of CAMERAS[neighborhood]) {
+      const label = document.createElement("label");
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      checkbox.dataset.id = id;
+      checkbox.addEventListener("input", handleCheckbox);
+      checkbox.checked = STATE.includes(id);
+      label.append(checkbox);
+      const text = document.createTextNode(name);
+      label.append(text);
+
+      const li = document.createElement("li");
+      li.append(label);
+      boxes.append(li);
+    }
+
+    nav.append(section);
+  }
+
+  for (let id of STATE) {
+    let { url, name } = findCamera(id);
+    document.querySelector("main").append(makeCameraStream(id, url, name));
+  }
+}
+
+function makeCameraStream(id, url, title) {
+  var section = document.createElement("section");
+  section.dataset.id = id;
+  var header = document.createElement("h2");
+  header.innerText = title;
+  var close = document.createElement("button");
+  close.className = 'close';
+  close.type = "button";
+  close.innerText = "X";
+  header.append(close);
+  close.addEventListener('click', evt => {
+    removeCamera(parseInt(evt.target.parentNode.parentNode.dataset.id));
+  });
+  section.append(header);
+  var img = document.createElement("img");
+  img.className = 'reload';
+  img.src = url;
+  section.append(img);
+  return section;
+}
+
+function appendCamera(id) {
+  STATE.push(id);
+  history.replaceState(null, "", "#" + STATE.join(","));
+  let { url, name } = findCamera(id);
+  document.querySelector("main").append(makeCameraStream(id, url, name));
+}
+function removeCamera(id) {
+  const oldIndex = STATE.indexOf(id);
+  if (oldIndex > -1) {
+    STATE.splice(oldIndex, 1);
+  }
+  history.replaceState(null, "", "#" + STATE.join(","));
+  for (let video of document.querySelectorAll("main section")) {
+    if (video.dataset.id === id) {
+      video.remove();
+    }
+  }
+  for (let checkbox of document.querySelectorAll('nav input')) {
+    if (checkbox.dataset.id === id) {
+      checkbox.checked = false;
+    }
+  }
+}
+
+document.getElementById("vidwidth").addEventListener("input", e => {
+  document.body.style.setProperty("--video-width", e.target.value + "vw");
+});
+document.getElementById("filter").addEventListener("input", e => {
+  let filter = e.target.value;
+  for (let neighborhood of document.querySelectorAll("nav section")) {
+    neighborhood.hidden = true;
+    for (let box of neighborhood.querySelectorAll("li")) {
+      const matches = box.innerText
+        .toLowerCase()
+        .includes(filter.toLowerCase());
+      box.hidden = !matches;
+      neighborhood.hidden = neighborhood.hidden && !matches;
+    }
+  }
+});
+
+loadData();
+
+const dragHandler = dragula([document.querySelector("main")], {
+  moves(el, container, handle) {
+    return handle.tagName.toLowerCase() === "h2";
+  }
+});
+dragHandler.on("drop", (el, target, source, sibling) => {
+  const myID = parseInt(el.dataset.id);
+  const neighborID = parseInt(sibling.dataset.id);
+  const oldIndex = STATE.indexOf(myID);
+  if (oldIndex > -1) {
+    STATE.splice(oldIndex, 1);
+  }
+  const newIndex = STATE.indexOf(neighborID);
+  if (newIndex > -1) {
+    STATE.splice(newIndex, 0, myID);
+  } else {
+    console.log("uhhhhh fuck");
+  }
+  history.replaceState(null, "", "#" + STATE.join(","));
+});
+
+function pokeImages() {
+  for (let img of document.querySelectorAll('img.reload')) {
+    img.src = img.src.replace(/(\?0\.\d+)?$/, '?' + Math.random());
+  }
+}
+setInterval(pokeImages, 1000);