const APP_JS_CONTENT: &str = "// Inspired by on: https://github.com/alitursucular/filter-and-sort-dynamically-created-table-with-vanilla-javascript-demo/blob/master/js/index.js\n\n\nconst tbody = document.querySelector(\'tbody\');\nconst thead = document.querySelector(\'thead\');\nconst th = document.querySelectorAll(\'thead th\');\nconst err = document.querySelector(\'.err\');\n\nlet filterInput = document.querySelector(\'.filter-input\');\nconst entries = document.querySelectorAll(\'.entry\');\n\nfilterInput.addEventListener(\'keyup\', () => {\n let query = filterInput.value.toUpperCase().trim();\n let j = 0;\n\n entries.forEach((data) => {\n thead.style.opacity = \'1\'\n err.style.display = \'\';\n if (data.innerText.toUpperCase().indexOf(query) > -1) {\n data.style.display = \'\';\n } else {\n data.style.display = \'none\';\n j++;\n if (j === entries.length) {\n thead.style.opacity = \'0.2\'\n err.style.display = \'flex\';\n }\n }\n });\n});\n\nlet sortDirection;\n\nth.forEach((columnHeader, columnI) => {\n columnHeader.addEventListener(\'click\', () => {\n sortDirection = !sortDirection;\n\n tbody.replaceChildren(...Array.from(entries).sort((a, b) => {\n let lhs = a.querySelectorAll(\"td\")[columnI].innerHTML;\n let rhs = b.querySelectorAll(\"td\")[columnI].innerHTML;\n\n\n if (columnI === 0) {\n lhs = lhs.split(\'.\')\n .map(p => parseInt(p))\n .reverse()\n .reduce((acc,val,i) => acc+(val*(256**i)),0)\n\n rhs = rhs.split(\'.\')\n .map(p => parseInt(p))\n .reverse()\n .reduce((acc,val,i) => acc+(val*(256**i)),0)\n }\n\n return sortDirection ? lhs > rhs : lhs < rhs;\n }));\n });\n});\n\n";