1 line
No EOL
4.8 KiB
JavaScript
1 line
No EOL
4.8 KiB
JavaScript
const debounce=(e,t=300)=>{let n;return(...a)=>{clearTimeout(n),n=setTimeout((()=>e(...a)),t)}};class TableManager{constructor(e,t,n){this.container=document.querySelector(`#${e}`),this.searchInput=document.querySelector(`#${t}`),this.clearIcon=document.querySelector(`#${n}`),this._setupSearchFunctionality()}generateTable(e={}){if(!Object.keys(e).length)return void(this.container.innerHTML="<p>No data available.</p>");const t=Object.keys(e[Object.keys(e)[0]]);this.container.innerHTML=`\n <table id="${this.container.id.replace("-container","")}" aria-label="Service Comparison Table">\n <thead>\n <tr>\n <th>Service Name</th>\n ${t.map((e=>`<th>${e}</th>`)).join("")}\n </tr>\n </thead>\n <tbody>\n ${Object.entries(e).map((([e,n])=>`\n <tr>\n <td>${e}</td>\n ${t.map((e=>`\n <td style="text-align: center;">\n ${"yes"===n[e]?"✅":"❌"}\n </td>\n `)).join("")}\n </tr>\n `)).join("")}\n </tbody>\n </table>\n `}_setupSearchFunctionality(){const e=debounce((()=>{const e=this.searchInput.value.toLowerCase(),t=this.container.querySelectorAll("table tbody tr");this.clearIcon.style.display=e?"block":"none",t.forEach((t=>{const n=t.querySelector("td:first-child")?.textContent.toLowerCase();t.style.display=n?.includes(e)?"":"none"}))}));this.searchInput?.addEventListener("input",e),this.clearIcon?.addEventListener("click",(()=>{this.searchInput.value="",this.clearIcon.style.display="none",e()}))}}class ComparisonManager{constructor(e,t,n,a){this.container=document.querySelector(`#${e}`),this.select1=document.querySelector(`#${t}`),this.select2=document.querySelector(`#${n}`),this.data=a,this._populateDropdowns(),this._setupEventListeners()}_populateDropdowns(){const e=Object.keys(this.data[Object.keys(this.data)[0]]);[this.select1,this.select2].forEach((t=>{e.forEach((e=>{const n=document.createElement("option");n.value=e,n.textContent=e,t.appendChild(n)}))}))}_generateCompareTable(){const e=this.select1.value,t=this.select2.value;e&&t&&(this.container.innerHTML=`\n <button id="close-compare" title="Close Comparison">\n <span>Close</span>\n <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n <path d="M18 6L6 18M6 6l12 12"/>\n </svg>\n</button>\n <table id="compare-table" aria-label="Provider Comparison Table">\n <thead>\n <tr>\n <th>Service Name</th>\n <th>${e}</th>\n <th>${t}</th>\n </tr>\n </thead>\n <tbody>\n ${Object.entries(this.data).map((([n,a])=>`\n <tr>\n <td>${n}</td>\n <td>${"yes"===a[e]?"✅":"❌"}</td>\n <td>${"yes"===a[t]?"✅":"❌"}</td>\n </tr>\n `)).join("")}\n </tbody>\n </table>\n `,this.container.style.display="block",this._setupCloseButton())}_setupEventListeners(){[this.select1,this.select2].forEach((e=>{e?.addEventListener("change",(()=>this._generateCompareTable()))}))}_setupCloseButton(){this.container.querySelector("#close-compare")?.addEventListener("click",(()=>{this.container.style.display="none"}))}}class PricingManager{constructor(e){this.container=document.querySelector(`#${e}-table-container`)}generatePricingTable(e={}){if(!e.plans?.length)return void(this.container.innerHTML="<p>Error: Invalid pricing data structure.</p>");const t=Object.keys(e.plans[0]).filter((e=>"name"!==e));this.container.innerHTML=`\n <table id="pricing-table" aria-label="Service Pricing Table">\n <thead>\n <tr>\n <th>Plans</th>\n ${t.map((e=>`<th>${e}</th>`)).join("")}\n </tr>\n </thead>\n <tbody>\n ${e.plans.map((e=>`\n <tr>\n <td>${e.name}</td>\n ${t.map((t=>`\n <td style="text-align: center;">${e[t]}</td>\n `)).join("")}\n </tr>\n `)).join("")}\n </tbody>\n </table>\n `}}document.addEventListener("DOMContentLoaded",(async()=>{const e=new TableManager("file-hosts-table-container","host-search-input","clear-host-search"),t=new TableManager("adult-hosts-table-container","adult-host-search-input","clear-adult-host-search"),n=new PricingManager("pricing");try{const[a,r,o]=await Promise.all([fetch("./json/file-hosts.json").then((e=>e.json())),fetch("./json/adult-hosts.json").then((e=>e.json())),fetch("./json/pricing.json").then((e=>e.json()))]);e.generateTable(a),t.generateTable(r),n.generatePricingTable(o),new ComparisonManager("compare-table-container","provider1","provider2",a)}catch(a){const r="<p>Error loading data. Please try again later.</p>";e.container.innerHTML=r,t.container.innerHTML=r,n.container.innerHTML=r}})); |