From 667dfb295375ef6594aef39a30e17a5d208d1b23 Mon Sep 17 00:00:00 2001
From: eraseyourknees <112027564+eraseyourknees@users.noreply.github.com>
Date: Sun, 18 Sep 2022 21:45:58 +0200
Subject: [PATCH] Add regex search

---
 css/style.css | 11 +++++++++++
 index.html    | 12 +++++++-----
 js/msdl.js    | 54 +++++++++++++++++++++++++++++++++++++--------------
 3 files changed, 57 insertions(+), 20 deletions(-)
 create mode 100644 css/style.css
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e5b7d4d
--- /dev/null
+++ b/css/style.css
@@ -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;
+}
diff --git a/index.html b/index.html
index 7dcbb9a..bb8955c 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/msdl.js b/js/msdl.js
index 12015f3..435e586 100644
--- a/js/msdl.js
+++ b/js/msdl.js
@@ -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();
 }
 
