121 lines
No EOL
3.5 KiB
JavaScript
121 lines
No EOL
3.5 KiB
JavaScript
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 = `item-${id}`;
|
|
clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
|
|
if (item.hidden) {
|
|
clone.querySelector(".result").classList.add('hidden')
|
|
};
|
|
container.appendChild(clone);
|
|
};
|
|
loading.remove();
|
|
}
|
|
|
|
function getLocString(items, item) {
|
|
item.ancestors = [];
|
|
let next = item;
|
|
let loop = false;
|
|
while (next) {
|
|
if (item.ancestors.includes(next)) {
|
|
loop = true;
|
|
if (item.ancestors.length == 1) {
|
|
item.ancestors.push(null);
|
|
}
|
|
break;
|
|
}
|
|
item.ancestors.unshift(next);
|
|
next = items[next.is_in];
|
|
}
|
|
item.ancestors.pop();
|
|
let loc = item.ancestors.map(i => i.id).join(' ➜ ') || '⬚';
|
|
let longloc = item.ancestors.map(i => `${i.type || ''} ${i.id} ${i.name && `(${i.name})` || ''}`).join(' ➜ ') || 'universe';
|
|
if (loop) {
|
|
loc += ' ↻';
|
|
longloc += ' ↻';
|
|
}
|
|
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.slice(5)];
|
|
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');
|
|
}
|
|
}
|
|
|
|
function showItem(e) {
|
|
const item = items[e.target.id.slice(5)];
|
|
const ancestors = item.ancestors.concat(item);
|
|
for (let i = ancestors.length-1; i >= 0; i--) {
|
|
const ancestor = ancestors[i];
|
|
if (ancestor.coords_bl && ancestor.coords_tr) {
|
|
if (ancestor != item) {
|
|
const mapnote = `Showing ${ancestor.type || ''} ${ancestor.id} ${ancestor.name && `(${ancestor.name})` || ''}`;
|
|
document.getElementById('mapnote').textContent = mapnote;
|
|
}
|
|
coordsToMap(ancestor.coords_bl, ancestor.coords_tr);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function hideItem(e) {
|
|
clearMap();
|
|
} |