diff --git a/script.js b/script.js index f3ca310..ac87b5e 100644 --- a/script.js +++ b/script.js @@ -1,61 +1,70 @@ const statusEl = document.getElementById('services'); const lastUpdatedEl = document.getElementById('last-updated'); +const servers = [ + { + name: 'Cringe Studios', + url: 'https://amogus.cringe-studios.com/api/status' + }, + { + name: 'Another Server', + url: 'https://another-server.com/api/status' + }, + // Add more server configurations here +]; + function updateStatus(data) { - data = { - "time": "Sun, 13 Oct 2024 17:39:53 CEST", - "unixTime": 1728833993504, - "services": [ - { - "name": "Cringe Studios Server", - "ok": true - }, - { - "name": "Cringe Studios Website 2", - "ok": true - }, - { - "name": "Graphite Server", - "ok": true - }, - { - "name": "Graphite Website", - "ok": true - }, - { - "name": "Does not exist", - "ok": false - }, - { - "name": "Does not exist 2", - "ok": false - } - ] - }; - lastUpdatedEl.textContent = new Date(data.unixTime).toLocaleString(); + lastUpdatedEl.textContent = new Date(data.time).toLocaleString(); statusEl.innerHTML = ''; - data.services.forEach(service => { - const serviceItem = document.createElement('li'); - serviceItem.classList.add('service'); - serviceItem.classList.add(service.ok ? 'ok' : 'error'); - - const statusDot = document.createElement('div'); - statusDot.classList.add('status'); - serviceItem.appendChild(statusDot); - - const serviceName = document.createElement('span'); - serviceName.classList.add('name'); - serviceName.textContent = service.name; - serviceItem.appendChild(serviceName); - - statusEl.appendChild(serviceItem); - }); -} -updateStatus(null); + // Group services by server + const groupedServices = data.services.reduce((acc, service) => { + const serverName = service.server || 'Unknown'; + if (!acc[serverName]) { + acc[serverName] = []; + } + acc[serverName].push(service); + return acc; + }, {}); + + // Create server sections and service items + for (const serverName in groupedServices) { + const serverSection = document.createElement('div'); + serverSection.classList.add('server-section'); + serverSection.innerHTML = `

${serverName}

`; + + const servicesList = document.createElement('ul'); + groupedServices[serverName].forEach(service => { + const serviceItem = document.createElement('li'); + serviceItem.classList.add('service'); + serviceItem.classList.add(service.ok ? 'ok' : 'error'); + + const statusDot = document.createElement('div'); + statusDot.classList.add('status'); + serviceItem.appendChild(statusDot); + + const serviceName = document.createElement('span'); + serviceName.classList.add('name'); + serviceName.textContent = service.name; + serviceItem.appendChild(serviceName); + + servicesList.appendChild(serviceItem); + }); + + serverSection.appendChild(servicesList); + statusEl.appendChild(serverSection); + } +} -fetch('https://amogus.cringe-studios.com/api/status') - .then(response => response.json()) - .then(data => updateStatus(data)) +// Assuming the API response now includes a "server" property for each service +Promise.all(servers.map(server => fetch(server.url).then(response => response.json()).then(data => ({ ...data, server: server.name })))) + .then(responses => { + const mergedData = responses.reduce((acc, data) => { + acc.time = data.time; + acc.services = [...acc.services, ...data.services]; + return acc; + }, { services: [] }); + updateStatus(mergedData); + }) .catch(error => console.error('Error fetching status:', error));