105 lines
2.6 KiB
JavaScript
105 lines
2.6 KiB
JavaScript
const state = {model: null};
|
|
|
|
function hue(text) {
|
|
let h = 0;
|
|
for (const c of text) {
|
|
h = (h * 31 + c.codePointAt(0)) % 360;
|
|
}
|
|
return h;
|
|
}
|
|
|
|
function el(tag, className, text) {
|
|
const node = document.createElement(tag);
|
|
if (className) {
|
|
node.className = className;
|
|
}
|
|
if (text) {
|
|
node.textContent = text;
|
|
}
|
|
return node;
|
|
}
|
|
|
|
function initials(name) {
|
|
const words = name.trim().split(/\s+/);
|
|
if (words.length === 0 || !words[0]) {
|
|
return '?';
|
|
}
|
|
const first = words[0][0];
|
|
return words.length > 1 ? first + words[words.length - 1][0] : first;
|
|
}
|
|
|
|
function roles(p) {
|
|
return [p.isStudent && 'Student', p.isParent && 'Parent', p.isStaff && 'Staff'].filter(Boolean);
|
|
}
|
|
|
|
function card(p, family) {
|
|
const root = el('div', 'card');
|
|
if (p.photoUrl) {
|
|
const img = el('img', 'avatar');
|
|
img.src = p.photoUrl;
|
|
img.loading = 'lazy';
|
|
root.append(img);
|
|
} else {
|
|
const avatar = el('div', 'avatar', initials(p.fullName));
|
|
avatar.style.background = `hsl(${hue(p.fullName)} 60% 45%)`;
|
|
root.append(avatar);
|
|
}
|
|
const info = el('div');
|
|
info.append(el('div', 'name', p.fullName));
|
|
if (p.pronouns) {
|
|
info.append(el('div', 'pronouns', p.pronouns));
|
|
}
|
|
const who = [roles(p).join(' / ')];
|
|
if (p.grade) {
|
|
who.push([p.grade, p.classroom, p.section].filter(Boolean).join(' ▶ '));
|
|
}
|
|
if (p.jobTitle) {
|
|
who.push(p.jobTitle);
|
|
}
|
|
info.append(el('div', 'detail', who.join(' · ')));
|
|
if (family && family.name) {
|
|
info.append(el('div', 'detail', family.name));
|
|
}
|
|
if (family && family.address) {
|
|
info.append(el('div', 'detail', family.address));
|
|
}
|
|
const contact = [p.phone, p.email].filter(Boolean).join(' · ');
|
|
if (contact) {
|
|
info.append(el('div', 'detail', contact));
|
|
}
|
|
root.append(info);
|
|
return root;
|
|
}
|
|
|
|
function render() {
|
|
const q = document.querySelector('#search').value.trim().toLowerCase();
|
|
const list = document.querySelector('#people');
|
|
list.replaceChildren();
|
|
if (!state.model) {
|
|
return;
|
|
}
|
|
const matches = state.model.people.filter(p => {
|
|
const family = state.model.families[p.familyKey];
|
|
return `${p.fullName} ${family ? family.name : ''}`.toLowerCase().includes(q);
|
|
});
|
|
if (matches.length === 0) {
|
|
list.append(el('div', 'empty', 'No matches.'));
|
|
return;
|
|
}
|
|
for (const p of matches) {
|
|
list.append(card(p, state.model.families[p.familyKey]));
|
|
}
|
|
}
|
|
|
|
async function load() {
|
|
const res = await fetch('/directory/api/model');
|
|
if (!res.ok) {
|
|
throw new Error(`loading model failed: ${res.status}`);
|
|
}
|
|
state.model = await res.json();
|
|
render();
|
|
}
|
|
|
|
document.querySelector('#search').addEventListener('input', render);
|
|
load();
|