Add regex search

This commit is contained in:
eraseyourknees
2022-09-18 21:45:58 +02:00
parent 7e837b177f
commit 667dfb2953
3 changed files with 57 additions and 20 deletions
+11
View File
@@ -0,0 +1,11 @@
#search-products {
width: calc(100% - 20px);
}
#products-list,
#msdl-ms-content,
#msdl-please-wait,
#msdl-processing-error,
#back-to-products {
display: none;
}
+7 -5
View File
@@ -16,6 +16,7 @@
<title>Microsoft Software Download Listing</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<link rel="stylesheet" href="css/style.css">
<script defer src="js/msdl.js"></script>
</head>
<body>
@@ -29,8 +30,9 @@
<p>This page requires JavaScript to work.</p>
</noscript>
<div id="products-list" style="display: none;">
<div id="products-list">
<h2>Select product</h2>
<input id="search-products" type="search" placeholder="Search with regex..." onInput="updateResults();">
<table style="table-layout: auto;">
<thead>
<tr>
@@ -42,19 +44,19 @@
</table>
</div>
<div id="msdl-ms-content" style="display: none;"></div>
<div id="msdl-ms-content"></div>
<div id="msdl-please-wait" style="display: none;">
<div id="msdl-please-wait">
<h2>Please wait...</h2>
<p>Please wait while the data you requested is being retrieved.</p>
</div>
<div id="msdl-processing-error" style="display: none;">
<div id="msdl-processing-error">
<h2>Error</h2>
<p>An error has occurred while processing your request.</p>
</div>
<div id="back-to-products" style="display: none;">
<div id="back-to-products">
<hr>
<button onClick="backToProducts();">Go back to the product list</button>
</div>
+39 -15
View File
@@ -11,6 +11,8 @@ const backToProductsDiv = document.getElementById('back-to-products');
var msdlXhr = new XMLHttpRequest();
var availableProducts = {};
function uuidv4() {
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
@@ -148,24 +150,40 @@ function prepareDownload(id) {
return getLanguages(id);
}
function createTable(data) {
function addTableElement(table, value, data) {
var a = document.createElement('a')
a.href = "#" + value;
a.setAttribute("onClick", "prepareDownload(" + value + ");");
a.appendChild(document.createTextNode(data[value]))
var tr = table.insertRow();
var td = tr.insertCell();
td.appendChild(a);
var td2 = tr.insertCell();
td2.appendChild(document.createTextNode(value))
}
function createTable(data, search) {
var table = document.getElementById('products-table-body');
var regex = new RegExp('' + search + '', 'ig');
table.innerHTML = "";
for(value in data) {
var a = document.createElement('a')
a.href = "#" + value;
a.setAttribute("onClick", "prepareDownload(" + value + ");");
a.appendChild(document.createTextNode(data[value]))
var tr = table.insertRow();
var td = tr.insertCell();
td.appendChild(a);
var td2 = tr.insertCell();
td2.appendChild(document.createTextNode(value))
if(data[value].match(regex) == null)
continue;
addTableElement(table, value, data);
}
}
function updateResults() {
var search = document.getElementById('search-products');
createTable(availableProducts, search.value);
}
function checkHash() {
var hash = window.location.hash;
if(hash.length == 0)
@@ -175,13 +193,19 @@ function checkHash() {
}
function preparePage(resp) {
var data = JSON.parse(resp);
var products = JSON.parse(resp);
if(!products['products']) {
pleaseWait.style.display = 'none';
processingError.style.display = 'block';
return;
}
createTable(data['products']);
availableProducts = products['products'];
pleaseWait.style.display = 'none';
productsList.style.display = 'block';
updateResults();
checkHash();
}