Added search bar

This commit is contained in:
MrFry 2020-01-22 16:33:08 +01:00
parent b343a92b41
commit 5379365fdc

View file

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