98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
function imageTag(src) {
|
||
|
return src ? "<img src='" + src + "'/>" : "";
|
||
|
}
|
||
|
|
||
|
function $(query) {
|
||
|
return document.querySelector(query);
|
||
|
}
|
||
|
|
||
|
function $toggle(query, show) {
|
||
|
return $(query).style.display = (show ? 'block' : 'none');
|
||
|
}
|
||
|
|
||
|
function $$(query) {
|
||
|
return document.querySelectorAll(query);
|
||
|
}
|
||
|
|
||
|
function appendRow(table, html) {
|
||
|
const row = document.createElement("tr");
|
||
|
row.innerHTML = html;
|
||
|
table.appendChild(row);
|
||
|
}
|
||
|
|
||
|
document.onreadystatechange = async () => {
|
||
|
if (document.readyState == "complete") {
|
||
|
|
||
|
try {
|
||
|
let file, switchJsonUrl, switchJsonText;
|
||
|
if (location.search === "?combined") {
|
||
|
file = "combined_aaguid.json";
|
||
|
switchJsonUrl = ".";
|
||
|
switchJsonText = "Exclude MDS authenticators"
|
||
|
} else {
|
||
|
file = "aaguid.json";
|
||
|
switchJsonUrl = "./?combined";
|
||
|
switchJsonText = "Include MDS authenticators"
|
||
|
}
|
||
|
$("#switch-json").setAttribute("href", switchJsonUrl);
|
||
|
$("#switch-json").innerText = switchJsonText;
|
||
|
|
||
|
const response = await fetch("../" + file);
|
||
|
|
||
|
const json = await response.json();
|
||
|
|
||
|
$toggle("#loading", false);
|
||
|
$toggle("#main", true);
|
||
|
const table = $("#aaguids");
|
||
|
appendRow(table, `
|
||
|
<tr>
|
||
|
<th>AAGUID <br/></th>
|
||
|
<th>Name <br/>
|
||
|
<input id="filter" type="text" placeholder="Filter by name..."/>
|
||
|
<a id="clear-filter" href="#" title="clear">X</a>
|
||
|
</th>
|
||
|
<th>Icon light</th>
|
||
|
<th class="dark">Icon dark</th>
|
||
|
</tr>
|
||
|
`);
|
||
|
|
||
|
for (const aaguid in json) {
|
||
|
if (Object.hasOwnProperty.call(json, aaguid)) {
|
||
|
appendRow(table, `
|
||
|
<tr>
|
||
|
<td>${aaguid}</td>
|
||
|
<td class="name">${json[aaguid].name}</td>
|
||
|
<td class="icon">${imageTag(json[aaguid].icon_light)}</td>
|
||
|
<td class="icon dark">${imageTag(json[aaguid].icon_dark)}</td>
|
||
|
</tr>
|
||
|
`);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function applyFilter(filter) {
|
||
|
$$("#aaguids tr").forEach( (row) => {
|
||
|
const name = row.querySelector("td.name")?.innerText?.toLowerCase();
|
||
|
const show = !filter || (!name || name.indexOf(filter.toLowerCase()) >= 0);
|
||
|
row.style.display = (show ? 'table-row' : 'none');
|
||
|
});
|
||
|
}
|
||
|
|
||
|
$("#filter").addEventListener("keyup", () => {
|
||
|
applyFilter($("#filter").value);
|
||
|
});
|
||
|
|
||
|
$("#clear-filter").addEventListener("click", (event) => {
|
||
|
$("#filter").value = "";
|
||
|
applyFilter();
|
||
|
event.preventDefault();
|
||
|
});
|
||
|
|
||
|
} catch (err) {
|
||
|
$toggle("#loading-error", true);
|
||
|
console.error(err);
|
||
|
}
|
||
|
}
|
||
|
}
|