Added search bar

stable.user.js

@@ -58,8 +58,8 @@
 
   var data // all data, which is in the resource txt
   var addEventListener // add event listener function
-  const serverAdress = 'https://qmining.frylabs.net/'
-  // const serverAdress = 'http://localhost:8080/'
+  // const serverAdress = 'https://qmining.frylabs.net/'
+  const serverAdress = 'http://localhost:8080/'
 
   // forcing pages for testing. unless you test, do not set these to true!
   // only one of these should be true for testing
@@ -2024,7 +2024,22 @@
 
         let collapsibles = []
 
-        Object.entries(grouped).forEach(([subjName, subjGroup]) => {
+        // --------------------------------------------------------------------------------
+        let searchBar = CreateNodeWithText(subjTable, '', 'input')
+        searchBar.style.backgroundColor = '#222d32'
+        searchBar.style.color = '#ffffff'
+        searchBar.style.width = '100%'
+        searchBar.addEventListener('keyup', function (e) {
+          collapsibles.forEach((x) => {
+            if (x.innerText.toLowerCase().includes(this.value.toLowerCase())) {
+              x.style.display = ''
+            } else {
+              x.style.display = 'none'
+            }
+          })
+        }) // adding click
+
+        Object.entries(grouped).forEach(([subjName, subjGroup], i) => {
           let b = CreateNodeWithText(subjTable, subjName, 'button')
           b.style.backgroundColor = '#222d32'
           b.style.color = '#ffffff'
@@ -2034,6 +2049,7 @@
           b.style.border = 'none'
           b.style.textAlign = 'left'
           b.style.outline = 'none'
+          b.setAttribute('id', 'subjectGroup' + i)
           collapsibles.push(b)
 
           let content = document.createElement('div')
@@ -2048,7 +2064,7 @@
           })
           content.style.display = ifGroupActive ? 'block' : 'none'
 
-          subjTable.appendChild(content)
+          b.appendChild(content)
 
           subjGroup.forEach((subj) => {
             let tbl = document.createElement('table')
@@ -2075,12 +2091,9 @@
               data.ChangeActive(subj.Name, checked)
             }) // adding click
           })
-        })
 
-        collapsibles.forEach((x) => {
-          x.addEventListener('click', function () {
+          b.addEventListener('click', function () {
             this.classList.toggle('active')
-            var content = this.nextElementSibling
             if (content.style.display === 'block') {
               content.style.display = 'none'
             } else {