99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
|
<!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>
|