feat: realtime services

This commit is contained in:
Strix 2023-10-16 01:35:06 +02:00
parent ae0381f483
commit 39134b5229
No known key found for this signature in database
GPG key ID: 49B2E37B8915B774
3 changed files with 49 additions and 6 deletions

View file

@ -6,17 +6,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IXVD - Home</title>
<link rel="stylesheet" href="/obj/css/main.css">
<script src="obj/js/services.js" defer></script>
</head>
<body>
<main>
<h1>IXVD</h1>
<p>Home of people that love software, games and developing!</p>
<div>
<h2>Links</h2>
<div id="links">
<a href="//pad.ixvd.net">IXVD's cryptpad</a>
<a href="//git.ixvd.net">IXVD's git server</a>
<a href="//s.ixvd.net">IXVD's status page</a>
<div id="services">
<h2>Services</h2>
<div id="service-holder">
Nothing (yet)!
</div>
</div>
<br/>

View file

@ -23,6 +23,20 @@ main {
background-color: #fff;
}
#service-holder {
display: flex;
flex-direction: column;
}
#service-holder .service {
display: grid;
grid-template-columns: 1fr 1fr;
}
#service-holder .service > .service-status {
text-align: right;
}
a {
color: #000;
transition: 0.5s all;

30
public/obj/js/services.js Normal file
View file

@ -0,0 +1,30 @@
const SERVICE_BLACKLIST = [
'ixvd.net',
'proxy',
'2d.neo.ixvd.net',
'pad.sandbox.neo.ixvd.net',
];
const serviceHolderDiv = document.querySelector('#service-holder');
async function update() {
serviceHolderDiv.innerHTML = 'Loading...';
let fetchResult = await (await fetch('https://s.ixvd.net/api/v1/endpoints/statuses')).json()
serviceHolderDiv.innerHTML = '';
fetchResult.forEach(s => {
if (!s.results || s.results.length === 0) return;
let service = s.results[0];
if (service.hostname && !SERVICE_BLACKLIST.includes(service.hostname) && service.status === 200) {
let serviceDiv = document.createElement('div');
serviceDiv.classList.add('service');
serviceDiv.innerHTML = `
<span class="service-name"><a href="https://${service.hostname}" target="_blank" style="color: #de4aff">${service.hostname}</a></span>
<span class="service-status"><b style="color: ${service.success ? '#4f4' : 'red'}">${service.success ? 'Online' : 'Offline'}</b></span>
`;
serviceHolderDiv.appendChild(serviceDiv);
}
})
}
update();