Display active/inactive statusses

This commit is contained in:
Jaco Greeff
2021-02-16 13:45:19 +01:00
parent 294e54dd78
commit 01040faa4e
+40 -10
View File
@@ -24,9 +24,12 @@
.row { align-items: center; display: flex; justify-content: center } .row { align-items: center; display: flex; justify-content: center }
table { margin: 0 0 1rem } table { margin: 0 0 1rem }
td { font-family: monospace; padding: 0.25rem 0.5rem; text-align: right } td { font-family: monospace; padding: 0.25rem 0.5rem; text-align: right }
td:last-child { width: 100% } td:nth-child(2) { width: 100% }
td > h3 { margin: 0; opacity: 0.25 } td > h3 { margin: 0; opacity: 0.25 }
tr + tr > td > h3 { margin-top: 0.5rem } tr + tr > td > h3 { margin-top: 0.5rem }
td > span { border-radius: 0.25em; color: white; font-size: 0.75rem; padding: 0.125em 0.375em }
td > span.active { background: darkred }
td > span.inactive { background: darkgrey }
</style> </style>
</head> </head>
<body> <body>
@@ -66,6 +69,7 @@
let navTo = ''; let navTo = '';
let metaJson; let metaJson;
let addrJson; let addrJson;
let urlStatus;
let addresses; let addresses;
let balances = []; let balances = [];
@@ -77,10 +81,11 @@
setTimeout(() => window.requestAnimationFrame(draw), 100); setTimeout(() => window.requestAnimationFrame(draw), 100);
} }
function appendRow (date, url = '') { function appendRow (date, url = '', status) {
const row = document.createElement('tr'); const row = document.createElement('tr');
const a = document.createElement('td'); const a = document.createElement('td');
const b = document.createElement('td'); const b = document.createElement('td');
const c = document.createElement('td');
a.appendChild(document.createTextNode(url)); a.appendChild(document.createTextNode(url));
@@ -90,13 +95,22 @@
b.appendChild(date); b.appendChild(date);
} }
if (typeof status === 'string') {
const s = document.createElement('span');
s.classList.add(status);
s.appendChild(document.createTextNode(status));
c.appendChild(s);
}
row.appendChild(a); row.appendChild(a);
row.appendChild(b); row.appendChild(b);
row.appendChild(c);
table.appendChild(row); table.appendChild(row);
} }
async function fillAddresses () { function fillAddresses () {
addresses.forEach((address, index) => { addresses.forEach((address, index) => {
const balance = balances[index] || ''; const balance = balances[index] || '';
@@ -104,10 +118,10 @@
}); });
} }
async function fillSites () { function fillSites () {
let prevMonth = ''; let prevMonth = '';
metaJson.forEach(({ date, url }) => { metaJson.forEach(({ date, url }, index) => {
const thisMonth = date.split('-').slice(0, 2).join('-'); const thisMonth = date.split('-').slice(0, 2).join('-');
if (thisMonth !== prevMonth) { if (thisMonth !== prevMonth) {
@@ -118,11 +132,11 @@
prevMonth = thisMonth; prevMonth = thisMonth;
} }
appendRow(date, url); appendRow(date, url, urlStatus[index] ? 'active' : 'inactive');
}); });
} }
async function fillTable (newNav) { function fillTable (newNav) {
if (newNav !== navTo) { if (newNav !== navTo) {
if (navTo) { if (navTo) {
document.getElementById(`btn-${navTo}`).classList = ''; document.getElementById(`btn-${navTo}`).classList = '';
@@ -134,13 +148,28 @@
table.innerHTML = ''; table.innerHTML = '';
if (navTo === 'sites') { if (navTo === 'sites') {
await fillSites(); fillSites();
} else { } else {
await fillAddresses(); fillAddresses();
} }
} }
} }
async function isUp (url) {
try {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 2000);
await fetch(url, { signal: controller.signal });
clearTimeout(id);
return true;
} catch (error) {
return false;
}
}
async function main () { async function main () {
draw(); draw();
@@ -157,6 +186,7 @@
.values(addrJson) .values(addrJson)
.reduce((all, addrs) => all.concat(...addrs), []) .reduce((all, addrs) => all.concat(...addrs), [])
.sort((a, b) => a.localeCompare(b)); .sort((a, b) => a.localeCompare(b));
urlStatus = await Promise.all(metaJson.map(({ url }) => `https://${url}`).map(isUp))
// Promise.all( // Promise.all(
// addresses.map((key) => fetch('https://polkadot.subscan.io/api/scan/search', { // addresses.map((key) => fetch('https://polkadot.subscan.io/api/scan/search', {
@@ -172,7 +202,7 @@
// }).then((body) => body.json()).then(({ data }) => (data && data.balance) || '0')) // }).then((body) => body.json()).then(({ data }) => (data && data.balance) || '0'))
// ).then((b) => balances = b).catch(console.error); // ).then((b) => balances = b).catch(console.error);
await fillTable('sites'); fillTable('sites');
} }
main(); main();