54 lines
1.8 KiB
Plaintext
54 lines
1.8 KiB
Plaintext
async function loadConfig() {
|
|
const response = await fetch('config/services.json', { cache: 'no-store' });
|
|
if (!response.ok) throw new Error(`Config load failed: ${response.status}`);
|
|
return response.json();
|
|
}
|
|
|
|
function renderStatus(items) {
|
|
const grid = document.getElementById('status-grid');
|
|
grid.innerHTML = items.map(item => `
|
|
<article class="status-card">
|
|
<div class="status-top">
|
|
<span class="status-name">${item.name}</span>
|
|
<span class="status-state ${item.state}">
|
|
<span class="status-dot"></span>${item.label}
|
|
</span>
|
|
</div>
|
|
<div class="status-value">${item.value}</div>
|
|
<div class="status-detail">${item.detail}</div>
|
|
</article>
|
|
`).join('');
|
|
}
|
|
|
|
function renderServices(targetId, items, disabled = false) {
|
|
const grid = document.getElementById(targetId);
|
|
grid.innerHTML = items.map(item => {
|
|
const classes = `service-card${disabled ? ' disabled' : ''}`;
|
|
const tag = disabled ? 'div' : 'a';
|
|
const href = disabled ? '' : ` href="${item.url}"`;
|
|
return `
|
|
<${tag} class="${classes}"${href}>
|
|
<div class="service-icon">${item.icon}</div>
|
|
<h3>${item.name}</h3>
|
|
<p>${item.description}</p>
|
|
<div class="service-foot">
|
|
<span>${item.category}</span>
|
|
<span>${disabled ? 'Pending' : 'Open ↗'}</span>
|
|
</div>
|
|
</${tag}>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
loadConfig()
|
|
.then(config => {
|
|
renderStatus(config.status);
|
|
renderServices('service-grid', config.services);
|
|
renderServices('home-grid', config.home, true);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
document.getElementById('status-grid').innerHTML =
|
|
'<article class="status-card"><div class="status-name">Configuration</div><div class="status-value">Unavailable</div><div class="status-detail">Could not load services.json</div></article>';
|
|
});
|