alemi/upp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: loading indicator, time margins indicators

Browse source
This commit is contained in:
əlemi 2024-12-03 20:09:35 +01:00
parent 82a4f8dca3
commit 2594fc255c
Signed by: alemi
GPG key ID: A4895B84D311642C
1 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web/index.html
View file

@ -82,6 +82,24 @@
div.content { div.content {
min-height: calc(100vh - 3.5rem); min-height: calc(100vh - 3.5rem);
} }
span.dots {
&:after {
animation: dots 1.5s linear infinite;
display: inline-block;
content: "\00a0\00a0\00a0";
}
}
@keyframes dots {
0% { content: "\00a0\00a0\00a0"; }
25% { content: ".\00a0\00a0"; }
50% { content: "..\00a0"; }
75% { content: "..."; }
100% { content: "\00a0\00a0\00a0"; }
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style> </style>
</head> </head>
<body> <body>
@ -93,7 +111,7 @@
<hr class="color"/> <hr class="color"/>
<main id="uppe-rs-content"> <main id="uppe-rs-content">
<h2 class="center mt-3">loading<span class="dots"></span></h2>
</main> </main>
</div> </div>
@ -123,17 +141,22 @@ function cell(timestamp, rtt) {
function card(key, history, last_rtt) { function card(key, history, last_rtt) {
let bar = ""; let bar = "";
let now = Math.floor(Date.now() / 1000); let now = Math.floor(Date.now() / 1000);
let first = history[0][0]; let first = history[history.length - 1][0];
let hrs_ago = (now - first) / 3600; let hrs_ago = (now - first) / 3600;
for (let el of history) { for (let el of history) {
bar += cell(el[0], el[1]); bar += cell(el[0], el[1]);
} }
return `<div class="card"> return `<div class="card">
<h3 class="mt-0">${key} <code class="color">${last_rtt ? last_rtt + 'ms' : 'DOWN'}</code></h3> <h3 class="mt-0">${key} <code class="color">${last_rtt ? last_rtt + 'ms' : 'DOWN'}</code></h3>
<div class="box"> <table class="align">
${bar} <tr>
<p class="ma-0"><small>^ ~${hrs_ago.toFixed(1)}h ago</small></p> <td colspan="2">${bar}</td>
</div> </tr>
<tr>
<td><small>^ now</small></td>
<td class="rev"><small>~${hrs_ago.toFixed(1)}h ago ^</small></td>
</tr>
</table>
</div>`; </div>`;
} }