initial commit

static/index.js

@@ -0,0 +1,92 @@
+let items = {};
+
+document.onreadystatechange = function() {
+  if (document.readyState === 'interactive') {
+    document.getElementById('search').oninput = search;
+    const checkbox = document.getElementById('showhidden')
+    checkbox.oninput = showhidden;
+    fetch('/api/items').then((response) => response.json()).then((data) => {
+      items = data;
+      renderItems();
+      showhidden({target: checkbox});
+    });
+  }
+}
+
+function renderItems() {
+  const container = document.getElementById('results');
+  const template = document.getElementById('item');
+  const loading = document.getElementById('loading');
+
+  for (const [id, item] of Object.entries(items)) {
+    const clone = template.content.cloneNode(true);
+    const [loc, longloc] = getLocString(items, item);
+    clone.querySelector(".loc").textContent = loc;
+    clone.querySelector(".loc").title = longloc;
+    clone.querySelector(".type").textContent = item.type;
+    clone.querySelector(".id").textContent = item.id;
+    clone.querySelector(".name").textContent = item.name;
+    clone.querySelector(".content").textContent = item.content;
+    clone.querySelector(".note").textContent = item.note;
+    clone.querySelector(".result").id = id;
+    clone.querySelector("a").href = `form.html?id=${id}`;
+    if (item.hidden) {
+      clone.querySelector(".result").classList.add('hidden')
+    };
+    container.appendChild(clone);
+  };
+  loading.remove();
+}
+
+function getLocString(items, item) {
+  if (item.is_in == item.id) {
+    return ['in ↻', `${item.id} is in itself`];
+  }
+  let ancestors = [];
+  let next = item;
+  while (next) {
+    ancestors.unshift(next);
+    next = items[next.is_in];
+  }
+  ancestors.pop();
+  const loc = ancestors.map(i => i.id).join(' ➜ ') || '⬚';
+  let longloc = ancestors.map(i => `${i.type || ''} ${i.id} ${i.name && `(${i.name})` || ''}`).join(' ➜ ') || 'universe';
+  return [loc, `${item.id} is in ${longloc}`];
+}
+
+function search(e) {
+  const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
+  const query = e.target.value;
+  const regex = new RegExp(query, 'i')
+
+  for (const elem of document.getElementsByClassName('result')) {
+    const item = items[elem.id];
+    let found = false;
+    if (query) {
+      for (const a in searchAttrs) {
+        const attr = item[searchAttrs[a]];
+        if (attr && attr.match(regex)) {
+          found = true;
+          break;
+        }
+      }
+    } else {
+      found = true;
+    }
+
+    if (found) {
+      elem.classList.remove('filtered');
+    } else {
+      elem.classList.add('filtered');
+    }
+  }
+}
+
+function showhidden(e){
+  const container = document.getElementById('results');
+  if (e.target.checked) {
+    results.classList.add('showhidden');
+  } else {
+    results.classList.remove('showhidden');
+  }
+}