386 lines
17 KiB
JavaScript
386 lines
17 KiB
JavaScript
/* ═══════════════════════════════════════════════════════
|
|
RECON // Curated Lists Controller (grouped by source)
|
|
═══════════════════════════════════════════════════════ */
|
|
(function () {
|
|
'use strict';
|
|
|
|
const API = '/api/awesomelist';
|
|
const root = document.getElementById('awesomelistRoot');
|
|
if (!root) return;
|
|
|
|
let state = { view: 'index', sectors: [], searchTimeout: null };
|
|
|
|
// ─── Utilities ───────────────────────────────────────
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s || '';
|
|
return d.innerHTML;
|
|
}
|
|
|
|
function md(s) {
|
|
if (!s) return '';
|
|
let h = esc(s);
|
|
h = h.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
|
h = h.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
h = h.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
|
h = h.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
return h;
|
|
}
|
|
|
|
function fmt(n) {
|
|
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
}
|
|
|
|
// ─── API Fetch ───────────────────────────────────────
|
|
async function api(endpoint) {
|
|
const res = await fetch(API + endpoint);
|
|
if (!res.ok) throw new Error(`API ${res.status}`);
|
|
return res.json();
|
|
}
|
|
|
|
// ─── Render: Index View ──────────────────────────────
|
|
function renderIndex(data) {
|
|
state.view = 'index';
|
|
state.sectors = data.sectors || [];
|
|
|
|
let html = '';
|
|
|
|
// Stats bar
|
|
html += `<div class="crt-stats-bar">
|
|
<div class="crt-stat"><span class="crt-stat-label">DATABASE</span><span class="crt-stat-value">● ONLINE</span></div>
|
|
<div class="crt-stat"><span class="crt-stat-label">TOTAL ASSETS</span><span class="crt-stat-value">${fmt(data.total_entries)}</span></div>
|
|
<div class="crt-stat"><span class="crt-stat-label">SECTORS</span><span class="crt-stat-value">${data.total_sectors}</span></div>
|
|
<div class="crt-stat"><span class="crt-stat-label">STATUS</span><span class="crt-stat-value">● DECLASSIFIED</span></div>
|
|
</div>`;
|
|
|
|
// Search
|
|
html += `<div class="crt-search-container">
|
|
<span class="crt-search-icon">⌕</span>
|
|
<input type="text" class="crt-search-input" id="crtSearch" placeholder="SEARCH ALL ASSETS..." autocomplete="off">
|
|
<span class="crt-search-count" id="crtSearchCount"></span>
|
|
</div>`;
|
|
|
|
// Search results container
|
|
html += `<div class="crt-search-results" id="crtSearchResults"></div>`;
|
|
|
|
// Sector grid
|
|
html += `<div class="crt-grid" id="crtGrid">`;
|
|
for (const sec of state.sectors) {
|
|
if (sec.entry_count === 0) continue;
|
|
html += `<div class="crt-card" data-slug="${esc(sec.slug)}">
|
|
<span class="crt-card-icon">${sec.icon}</span>
|
|
<div class="crt-card-code">${esc(sec.code)}</div>
|
|
<div class="crt-card-name">${esc(sec.name)}</div>
|
|
<div class="crt-card-meta">
|
|
<span class="crt-card-count">${fmt(sec.entry_count)} assets</span>
|
|
<span class="crt-card-stars">${sec.subcategory_count} lists</span>
|
|
</div>
|
|
<div class="crt-card-status">● ACCESSIBLE</div>
|
|
</div>`;
|
|
}
|
|
html += `</div>`;
|
|
|
|
root.innerHTML = html;
|
|
bindIndexEvents();
|
|
}
|
|
|
|
// ─── Render: Sector Detail ───────────────────────────
|
|
function renderSector(sec) {
|
|
state.view = 'detail';
|
|
state.currentSector = sec;
|
|
let html = '';
|
|
|
|
// Back button
|
|
html += `<div class="crt-back" id="crtBack">◄ BACK TO INDEX</div>`;
|
|
|
|
// Detail header
|
|
html += `<div class="crt-detail-header">
|
|
<div class="crt-detail-code">${esc(sec.code)}</div>
|
|
<div class="crt-detail-title">${esc(sec.icon)} ${esc(sec.name)}</div>
|
|
<div class="crt-detail-meta">
|
|
<span>${fmt(sec.total_entries)} ASSETS</span>
|
|
<span>${sec.list_count} LISTS</span>
|
|
</div>
|
|
</div>`;
|
|
|
|
// Search within sector
|
|
html += `<div class="crt-search-container">
|
|
<span class="crt-search-icon">⌕</span>
|
|
<input type="text" class="crt-search-input" id="crtCatSearch" placeholder="FILTER THIS SECTOR..." autocomplete="off">
|
|
</div>`;
|
|
|
|
// List cards (one per source list)
|
|
html += `<div class="crt-sub-grid" id="crtSubGrid">`;
|
|
for (let i = 0; i < sec.lists.length; i++) {
|
|
const lst = sec.lists[i];
|
|
if (lst.total_entries === 0) continue;
|
|
html += `<div class="crt-sub-card" data-list-idx="${i}">
|
|
<div class="crt-sub-card-name">${esc(lst.name)}</div>
|
|
<div class="crt-sub-card-stats">
|
|
<span>${lst.total_entries} items</span>
|
|
<span>${lst.subcategories.length} sections</span>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
html += `</div>`;
|
|
|
|
// Shared detail panel
|
|
html += `<div class="crt-sub-detail" id="crtSubDetail" style="display:none">
|
|
<div class="crt-sub-detail-header" id="crtSubDetailHeader"></div>
|
|
<div class="crt-sub-detail-notes" id="crtSubDetailNotes"></div>
|
|
<div class="crt-sub-detail-entries" id="crtSubDetailEntries"></div>
|
|
</div>`;
|
|
|
|
root.innerHTML = html;
|
|
bindDetailEvents(sec);
|
|
}
|
|
|
|
// ─── Render: Single Entry ────────────────────────────
|
|
function renderEntry(entry) {
|
|
const starClass = entry.starred ? ' starred' : '';
|
|
const starIcon = entry.starred ? '⭐' : '·';
|
|
let html = `<div class="crt-entry${starClass}">`;
|
|
html += `<span class="crt-entry-star">${starIcon}</span>`;
|
|
html += `<div class="crt-entry-content">`;
|
|
|
|
if (entry.url) {
|
|
html += `<div class="crt-entry-name"><a href="${esc(entry.url)}" target="_blank" rel="noopener">${esc(entry.name || entry.url)}</a></div>`;
|
|
} else if (entry.name) {
|
|
html += `<div class="crt-entry-name">${md(entry.name)}</div>`;
|
|
}
|
|
|
|
if (entry.description) {
|
|
html += `<div class="crt-entry-desc">${md(entry.description)}</div>`;
|
|
}
|
|
|
|
if (entry.extra_links && entry.extra_links.length > 0) {
|
|
html += `<div class="crt-entry-extra">`;
|
|
for (const link of entry.extra_links) {
|
|
html += `<a href="${esc(link.url)}" target="_blank" rel="noopener">${esc(link.name)}</a>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
|
|
html += `</div></div>`;
|
|
return html;
|
|
}
|
|
|
|
// ─── Render: Search Results ──────────────────────────
|
|
function renderSearchResults(data) {
|
|
const container = document.getElementById('crtSearchResults');
|
|
const countEl = document.getElementById('crtSearchCount');
|
|
const grid = document.getElementById('crtGrid');
|
|
|
|
if (!data.results || data.results.length === 0) {
|
|
container.innerHTML = data.query ? '<div class="crt-empty">NO MATCHING ASSETS FOUND</div>' : '';
|
|
countEl.textContent = data.query ? '0 RESULTS' : '';
|
|
if (grid) grid.style.display = data.query ? 'none' : '';
|
|
return;
|
|
}
|
|
|
|
countEl.textContent = `${data.results.length} RESULTS`;
|
|
if (grid) grid.style.display = 'none';
|
|
|
|
let html = '';
|
|
for (const r of data.results) {
|
|
const starIcon = r.starred ? '⭐ ' : '';
|
|
html += `<div class="crt-search-result">`;
|
|
html += `<div class="crt-result-breadcrumb">${esc(r.sector_code)} // ${esc(r.sector_name)} / ${esc(r.subcategory)}</div>`;
|
|
html += `<div class="crt-result-name">${starIcon}`;
|
|
if (r.url) {
|
|
html += `<a href="${esc(r.url)}" target="_blank" rel="noopener">${esc(r.name || r.url)}</a>`;
|
|
} else {
|
|
html += md(r.name);
|
|
}
|
|
html += `</div>`;
|
|
if (r.description) {
|
|
html += `<div class="crt-result-desc">${md(r.description)}</div>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// ─── Event Bindings: Index ───────────────────────────
|
|
function bindIndexEvents() {
|
|
document.querySelectorAll('.crt-card').forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
loadSector(card.dataset.slug);
|
|
});
|
|
});
|
|
|
|
const searchInput = document.getElementById('crtSearch');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', () => {
|
|
clearTimeout(state.searchTimeout);
|
|
const q = searchInput.value.trim();
|
|
if (q.length < 2) {
|
|
renderSearchResults({ query: '', results: [] });
|
|
return;
|
|
}
|
|
state.searchTimeout = setTimeout(async () => {
|
|
try {
|
|
const data = await api(`/search?q=${encodeURIComponent(q)}&limit=100`);
|
|
renderSearchResults(data);
|
|
} catch (e) {
|
|
console.warn('Search failed:', e);
|
|
}
|
|
}, 300);
|
|
});
|
|
}
|
|
}
|
|
|
|
// ─── Event Bindings: Detail ──────────────────────────
|
|
function bindDetailEvents(sec) {
|
|
// Back button
|
|
document.getElementById('crtBack').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
loadIndex();
|
|
});
|
|
|
|
// List card clicks — show all subcategories and entries for that source list
|
|
document.querySelectorAll('.crt-sub-card').forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const idx = parseInt(card.dataset.listIdx);
|
|
const lst = sec.lists[idx];
|
|
const panel = document.getElementById('crtSubDetail');
|
|
const headerEl = document.getElementById('crtSubDetailHeader');
|
|
const notesEl = document.getElementById('crtSubDetailNotes');
|
|
const entriesEl = document.getElementById('crtSubDetailEntries');
|
|
|
|
const wasActive = card.classList.contains('active');
|
|
document.querySelectorAll('.crt-sub-card').forEach(c => c.classList.remove('active'));
|
|
|
|
if (wasActive) {
|
|
panel.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
card.classList.add('active');
|
|
|
|
// Header
|
|
headerEl.innerHTML = `<span class="crt-sub-toggle">▾</span> <span class="crt-sub-detail-name">${esc(lst.name)}</span> <span class="crt-sub-count">${lst.total_entries} items across ${lst.subcategories.length} sections</span>`;
|
|
|
|
notesEl.innerHTML = '';
|
|
notesEl.style.display = 'none';
|
|
|
|
// Build entries grouped by subcategory with collapsible headings
|
|
let eh = '';
|
|
for (let si = 0; si < lst.subcategories.length; si++) {
|
|
const sub = lst.subcategories[si];
|
|
if (sub.entries.length === 0) continue;
|
|
// Strip the source prefix from subcategory name if it starts with list name
|
|
let subName = sub.name;
|
|
const prefix = lst.name + ' — ';
|
|
if (subName.startsWith(prefix)) {
|
|
subName = subName.slice(prefix.length);
|
|
}
|
|
if (subName === lst.name) subName = 'General';
|
|
|
|
eh += `<div class="crt-subcat-group" data-subcat-idx="${si}">`;
|
|
eh += `<div class="crt-subcat-heading" data-subcat-toggle="${si}"><span class="crt-subcat-arrow">▸</span> ${esc(subName)} <span class="crt-subcat-count">${sub.entries.length}</span></div>`;
|
|
eh += `<div class="crt-subcat-entries" data-subcat-body="${si}" style="display:none">`;
|
|
for (const entry of sub.entries) eh += renderEntry(entry);
|
|
eh += `</div>`;
|
|
eh += `</div>`;
|
|
}
|
|
entriesEl.innerHTML = eh;
|
|
|
|
// Bind subcategory toggle clicks
|
|
entriesEl.querySelectorAll('.crt-subcat-heading').forEach(heading => {
|
|
heading.addEventListener('click', (ev) => {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
const toggleIdx = heading.dataset.subcatToggle;
|
|
const body = entriesEl.querySelector(`[data-subcat-body="${toggleIdx}"]`);
|
|
const arrow = heading.querySelector('.crt-subcat-arrow');
|
|
if (body.style.display === 'none') {
|
|
body.style.display = '';
|
|
if (arrow) arrow.textContent = '▾';
|
|
heading.classList.add('expanded');
|
|
} else {
|
|
body.style.display = 'none';
|
|
if (arrow) arrow.textContent = '▸';
|
|
heading.classList.remove('expanded');
|
|
}
|
|
});
|
|
});
|
|
|
|
panel.style.display = '';
|
|
panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
});
|
|
|
|
// Local filter on list cards
|
|
const catSearch = document.getElementById('crtCatSearch');
|
|
if (catSearch) {
|
|
catSearch.addEventListener('input', () => {
|
|
const q = catSearch.value.trim().toLowerCase();
|
|
document.querySelectorAll('.crt-sub-card').forEach(card => {
|
|
if (!q) {
|
|
card.style.display = '';
|
|
return;
|
|
}
|
|
const text = card.textContent.toLowerCase();
|
|
card.style.display = text.includes(q) ? '' : 'none';
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// ─── Load Functions ──────────────────────────────────
|
|
async function loadIndex() {
|
|
root.innerHTML = '<div class="crt-loading">ACCESSING RECON DATABASE...</div>';
|
|
try {
|
|
const data = await api('');
|
|
renderIndex(data);
|
|
history.pushState({ view: 'index' }, '', '/recon');
|
|
} catch (e) {
|
|
root.innerHTML = `<div class="crt-empty">DATABASE ACCESS DENIED // ${esc(e.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
async function loadSector(slug) {
|
|
root.innerHTML = '<div class="crt-loading">DECRYPTING SECTOR DATA...</div>';
|
|
try {
|
|
const data = await api(`/${slug}`);
|
|
renderSector(data);
|
|
history.pushState({ view: 'detail', slug: slug }, '', `/recon?sector=${slug}`);
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} catch (e) {
|
|
root.innerHTML = `<div class="crt-empty">SECTOR NOT FOUND // ${esc(e.message)}</div>`;
|
|
}
|
|
}
|
|
|
|
// ─── Handle Back/Forward ─────────────────────────────
|
|
window.addEventListener('popstate', (e) => {
|
|
if (e.state && e.state.view === 'detail' && e.state.slug) {
|
|
loadSector(e.state.slug);
|
|
} else {
|
|
loadIndex();
|
|
}
|
|
});
|
|
|
|
// ─── Init ────────────────────────────────────────────
|
|
function init() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const sector = params.get('sector');
|
|
if (sector) {
|
|
loadSector(sector);
|
|
} else {
|
|
loadIndex();
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|