servlist/index.html

99 lines
2.8 KiB
HTML
Raw Normal View History

2022-07-04 21:52:31 +03:00
<!DOCTYPE html>
<html lang="en">
<head>
<title>Services</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
font-size: 1.35em;
font-family: "sans-serif";
}
a, p {
margin: 0.45rem;
padding: 0;
text-decoration: none;
}
.service-link {
display: block;
border-bottom: 1px solid #000000;
}
.large {
font-size: 1.4em;
}
</style>
</head>
<body>
<main>
<p class="large">services</p>
<a href="#" id="load-services">load service list</a><span> | </span><a href="/services.json">view raw json</a><br>
<p class="large">list</p>
<div id="service-list-container">
<p>nothing here yet.</p>
</div>
</main>
<script>
const serviceListContainer = document.getElementById("service-list-container");
const loadServicesButton = document.getElementById("load-services");
async function loadServicesJson() {
const res = await fetch("/services.json");
const json = await res.json();
return json;
}
function insertServices(container, data) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
data.services.forEach(({ id, name }) => {
const idText = document.createElement("span");
idText.style.setProperty("color", "black");
idText.style.setProperty("float", "right");
idText.innerText = `[${id}]`;
const link = document.createElement("a");
link.href = `${data.provider.prefix}/${id}/${name}`;
link.innerText = `${name}`;
link.classList.add("service-link");
link.appendChild(idText);
container.appendChild(link);
});
}
async function displayServices() {
insertServices(serviceListContainer, await loadServicesJson());
}
async function main() {
loadServicesButton.onclick = displayServices;
if (location.hash !== "") {
const name = location.hash.substring(1, location.hash.length);
const serviceData = await loadServicesJson();
const foundService = serviceData.services.find(e => e.name === name);
if (foundService) {
window.location.hash = "";
window.location.pathname = `${serviceData.provider.prefix}/${foundService.id}/${foundService.name}`;
}
}
}
main();
</script>
</body>
</html>