added synamic generation of pricing table
This commit is contained in:
fynks
parent
0751029d51
commit
5318ff0c5e
4 changed files with 356 additions and 2898 deletions
295
docs/app.js
295
docs/app.js
|
|
@ -1,140 +1,173 @@
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
const fileHostsTableContainer = document.getElementById('file-hosts-table-container');
|
const fileHostsTableContainer = document.getElementById('file-hosts-table-container');
|
||||||
const hostSearchInput = document.getElementById('host-search-input');
|
const hostSearchInput = document.getElementById('host-search-input');
|
||||||
const clearHostSearchIcon = document.getElementById('clear-host-search');
|
const clearHostSearchIcon = document.getElementById('clear-host-search');
|
||||||
const provider1Select = document.getElementById('provider1');
|
const provider1Select = document.getElementById('provider1');
|
||||||
const provider2Select = document.getElementById('provider2');
|
const provider2Select = document.getElementById('provider2');
|
||||||
const compareTableContainer = document.getElementById('compare-table-container');
|
const compareTableContainer = document.getElementById('compare-table-container');
|
||||||
const closeCompareButton = document.getElementById('close-compare');
|
const closeCompareButton = document.getElementById('close-compare');
|
||||||
|
|
||||||
const adultHostsTableContainer = document.getElementById('adult-hosts-table-container');
|
const adultHostsTableContainer = document.getElementById('adult-hosts-table-container');
|
||||||
const adultHostSearchInput = document.getElementById('adult-host-search-input');
|
const adultHostSearchInput = document.getElementById('adult-host-search-input');
|
||||||
const clearAdultHostSearchIcon = document.getElementById('clear-adult-host-search');
|
const clearAdultHostSearchIcon = document.getElementById('clear-adult-host-search');
|
||||||
|
|
||||||
// Initially hide the comparison table container
|
const pricingSection = document.getElementById('pricing'); // Targeting the 'Pricing' section
|
||||||
compareTableContainer.style.display = 'none';
|
|
||||||
|
|
||||||
try {
|
// Initially hide the comparison table container
|
||||||
const [fileHostsResponse, adultHostsResponse] = await Promise.all([
|
compareTableContainer.style.display = 'none';
|
||||||
fetch('./json/file-hosts.json'),
|
|
||||||
fetch('./json/adult-hosts.json')
|
|
||||||
]);
|
|
||||||
const fileHostsData = await fileHostsResponse.json();
|
|
||||||
const adultHostsData = await adultHostsResponse.json();
|
|
||||||
|
|
||||||
// Function to generate a table
|
try {
|
||||||
const generateTable = (data, tableId) => {
|
const [fileHostsResponse, adultHostsResponse, pricingResponse] = await Promise.all([
|
||||||
const container = document.getElementById(tableId);
|
fetch('./json/file-hosts.json'),
|
||||||
let tableHTML = `<table id="${tableId.replace('-container', '')}"><thead><tr><th>Service Name</th>`;
|
fetch('./json/adult-hosts.json'),
|
||||||
const providers = Object.keys(data[Object.keys(data)[0]]);
|
fetch('./json/pricing.json') // Fetching the pricing data
|
||||||
providers.forEach(provider => {
|
]);
|
||||||
tableHTML += `<th>${provider}</th>`;
|
const fileHostsData = await fileHostsResponse.json();
|
||||||
|
const adultHostsData = await adultHostsResponse.json();
|
||||||
|
const pricingData = await pricingResponse.json(); // Parsed pricing data
|
||||||
|
|
||||||
|
// Function to generate a table
|
||||||
|
const generateTable = (data, tableId) => {
|
||||||
|
const container = document.getElementById(tableId);
|
||||||
|
let tableHTML = `<table id="${tableId.replace('-container', '')}"><thead><tr><th>Service Name</th>`;
|
||||||
|
const providers = Object.keys(data[Object.keys(data)[0]]);
|
||||||
|
providers.forEach(provider => {
|
||||||
|
tableHTML += `<th>${provider}</th>`;
|
||||||
|
});
|
||||||
|
tableHTML += '</tr></thead><tbody>';
|
||||||
|
|
||||||
|
for (const host in data) {
|
||||||
|
tableHTML += `<tr><td>${host}</td>`;
|
||||||
|
providers.forEach(provider => {
|
||||||
|
const status = data[host][provider];
|
||||||
|
const icon = status === 'yes' ? '✅' : '❌';
|
||||||
|
tableHTML += `<td style="text-align: center;">${icon}</td>`;
|
||||||
|
});
|
||||||
|
tableHTML += '</tr>';
|
||||||
|
}
|
||||||
|
tableHTML += '</tbody></table>';
|
||||||
|
container.innerHTML = tableHTML;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to generate the pricing table
|
||||||
|
const generatePricingTable = (pricingData) => {
|
||||||
|
let tableHTML = '<table><thead><tr><th>Plans</th>';
|
||||||
|
// Extract service names from the first plan object
|
||||||
|
if (pricingData.plans && pricingData.plans.length > 0) {
|
||||||
|
const services = Object.keys(pricingData.plans[0]).filter(key => key !== 'name');
|
||||||
|
services.forEach(service => {
|
||||||
|
tableHTML += `<th>${service}</th>`;
|
||||||
|
});
|
||||||
|
tableHTML += '</tr></thead><tbody>';
|
||||||
|
|
||||||
|
pricingData.plans.forEach(plan => {
|
||||||
|
tableHTML += '<tr class=pricing-tb>';
|
||||||
|
tableHTML += `<td>${plan.name}</td>`;
|
||||||
|
services.forEach(service => {
|
||||||
|
tableHTML += `<td>${plan[service]}</td>`;
|
||||||
});
|
});
|
||||||
tableHTML += '</tr></thead><tbody>';
|
tableHTML += '</tr>';
|
||||||
|
|
||||||
for (const host in data) {
|
|
||||||
tableHTML += `<tr><td>${host}</td>`;
|
|
||||||
providers.forEach(provider => {
|
|
||||||
const status = data[host][provider];
|
|
||||||
const icon = status === 'yes' ? '✅' : '❌';
|
|
||||||
tableHTML += `<td style="text-align: center;">${icon}</td>`;
|
|
||||||
});
|
|
||||||
tableHTML += '</tr>';
|
|
||||||
}
|
|
||||||
tableHTML += '</tbody></table>';
|
|
||||||
container.innerHTML = tableHTML;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to populate provider dropdowns
|
|
||||||
const populateProviderDropdowns = (data) => {
|
|
||||||
const providers = Object.keys(data[Object.keys(data)[0]]);
|
|
||||||
providers.forEach(provider => {
|
|
||||||
const option1 = document.createElement('option');
|
|
||||||
option1.value = provider;
|
|
||||||
option1.textContent = provider;
|
|
||||||
provider1Select.appendChild(option1);
|
|
||||||
|
|
||||||
const option2 = document.createElement('option');
|
|
||||||
option2.value = provider;
|
|
||||||
option2.textContent = provider;
|
|
||||||
provider2Select.appendChild(option2);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to generate the comparison table
|
|
||||||
const generateCompareTable = (data, provider1, provider2) => {
|
|
||||||
let tableHTML = '<table id="compare-table"><thead><tr><th>Service Name</th><th>' + provider1 + '</th><th>' + provider2 + '</th></tr></thead><tbody>';
|
|
||||||
|
|
||||||
for (const host in data) {
|
|
||||||
const status1 = data[host][provider1];
|
|
||||||
const status2 = data[host][provider2];
|
|
||||||
const icon1 = status1 === 'yes' ? '✅' : '❌';
|
|
||||||
const icon2 = status2 === 'yes' ? '✅' : '❌';
|
|
||||||
tableHTML += `<tr><td>${host}</td><td>${icon1}</td><td>${icon2}</td></tr>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
tableHTML += '</tbody></table>';
|
|
||||||
compareTableContainer.innerHTML = `<button id="close-compare" title="Close Comparison">X</button>` + tableHTML;
|
|
||||||
// Re-add the event listener for the close button after it's generated
|
|
||||||
document.getElementById('close-compare').addEventListener('click', () => {
|
|
||||||
compareTableContainer.style.display = 'none';
|
|
||||||
});
|
|
||||||
compareTableContainer.style.display = 'block';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function for search functionality with clear icon visibility
|
|
||||||
const setupSearch = (searchInput, clearIcon, tableContainerId) => {
|
|
||||||
searchInput.addEventListener('input', () => {
|
|
||||||
const searchTerm = searchInput.value.toLowerCase();
|
|
||||||
const rows = document.querySelectorAll(`#${tableContainerId} table tbody tr`);
|
|
||||||
if (!rows) return;
|
|
||||||
|
|
||||||
// Show/hide clear icon based on input
|
|
||||||
clearIcon.style.display = searchTerm ? 'block' : 'none';
|
|
||||||
|
|
||||||
rows.forEach(row => {
|
|
||||||
const serviceName = row.querySelector('td:first-child').textContent.toLowerCase();
|
|
||||||
row.style.display = serviceName.includes(searchTerm) ? '' : 'none';
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
clearIcon.addEventListener('click', () => {
|
|
||||||
searchInput.value = '';
|
|
||||||
clearIcon.style.display = 'none';
|
|
||||||
// Trigger the input event to refresh the table
|
|
||||||
searchInput.dispatchEvent(new Event('input'));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Initial table generation and dropdown population
|
|
||||||
generateTable(fileHostsData, 'file-hosts-table-container');
|
|
||||||
generateTable(adultHostsData, 'adult-hosts-table-container');
|
|
||||||
populateProviderDropdowns(fileHostsData);
|
|
||||||
|
|
||||||
// Setup search for both tables
|
|
||||||
setupSearch(hostSearchInput, clearHostSearchIcon, 'file-hosts-table-container');
|
|
||||||
setupSearch(adultHostSearchInput, clearAdultHostSearchIcon, 'adult-hosts-table-container');
|
|
||||||
|
|
||||||
// Comparison functionality
|
|
||||||
const handleCompare = () => {
|
|
||||||
const provider1 = provider1Select.value;
|
|
||||||
const provider2 = provider2Select.value;
|
|
||||||
if (provider1 && provider2) {
|
|
||||||
generateCompareTable(fileHostsData, provider1, provider2);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
provider1Select.addEventListener('change', handleCompare);
|
|
||||||
provider2Select.addEventListener('change', handleCompare);
|
|
||||||
|
|
||||||
// Close comparison functionality
|
|
||||||
closeCompareButton.addEventListener('click', () => {
|
|
||||||
compareTableContainer.style.display = 'none';
|
|
||||||
});
|
});
|
||||||
|
|
||||||
} catch (error) {
|
tableHTML += '</tbody></table>';
|
||||||
console.error('Error fetching or parsing JSON:', error);
|
pricingSection.innerHTML = tableHTML;
|
||||||
fileHostsTableContainer.innerHTML = '<p>Error loading file hosts data.</p>';
|
} else {
|
||||||
adultHostsTableContainer.innerHTML = '<p>Error loading adult hosts data.</p>';
|
pricingSection.innerHTML = '<p>Error: Pricing data structure is incorrect.</p>';
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to populate provider dropdowns
|
||||||
|
const populateProviderDropdowns = (data) => {
|
||||||
|
const providers = Object.keys(data[Object.keys(data)[0]]);
|
||||||
|
providers.forEach(provider => {
|
||||||
|
const option1 = document.createElement('option');
|
||||||
|
option1.value = provider;
|
||||||
|
option1.textContent = provider;
|
||||||
|
provider1Select.appendChild(option1);
|
||||||
|
|
||||||
|
const option2 = document.createElement('option');
|
||||||
|
option2.value = provider;
|
||||||
|
option2.textContent = provider;
|
||||||
|
provider2Select.appendChild(option2);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to generate the comparison table
|
||||||
|
const generateCompareTable = (data, provider1, provider2) => {
|
||||||
|
let tableHTML = '<table id="compare-table"><thead><tr><th>Service Name</th><th>' + provider1 + '</th><th>' + provider2 + '</th></tr></thead><tbody>';
|
||||||
|
|
||||||
|
for (const host in data) {
|
||||||
|
const status1 = data[host][provider1];
|
||||||
|
const status2 = data[host][provider2];
|
||||||
|
const icon1 = status1 === 'yes' ? '✅' : '❌';
|
||||||
|
const icon2 = status2 === 'yes' ? '✅' : '❌';
|
||||||
|
tableHTML += `<tr><td>${host}</td><td>${icon1}</td><td>${icon2}</td></tr>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
tableHTML += '</tbody></table>';
|
||||||
|
compareTableContainer.innerHTML = `<button id="close-compare" title="Close Comparison">X</button>` + tableHTML;
|
||||||
|
// Re-add the event listener for the close button after it's generated
|
||||||
|
document.getElementById('close-compare').addEventListener('click', () => {
|
||||||
|
compareTableContainer.style.display = 'none';
|
||||||
|
});
|
||||||
|
compareTableContainer.style.display = 'block';
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function for search functionality with clear icon visibility
|
||||||
|
const setupSearch = (searchInput, clearIcon, tableContainerId) => {
|
||||||
|
searchInput.addEventListener('input', () => {
|
||||||
|
const searchTerm = searchInput.value.toLowerCase();
|
||||||
|
const rows = document.querySelectorAll(`#${tableContainerId} table tbody tr`);
|
||||||
|
if (!rows) return;
|
||||||
|
|
||||||
|
// Show/hide clear icon based on input
|
||||||
|
clearIcon.style.display = searchTerm ? 'block' : 'none';
|
||||||
|
|
||||||
|
rows.forEach(row => {
|
||||||
|
const serviceName = row.querySelector('td:first-child').textContent.toLowerCase();
|
||||||
|
row.style.display = serviceName.includes(searchTerm) ? '' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
clearIcon.addEventListener('click', () => {
|
||||||
|
searchInput.value = '';
|
||||||
|
clearIcon.style.display = 'none';
|
||||||
|
// Trigger the input event to refresh the table
|
||||||
|
searchInput.dispatchEvent(new Event('input'));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initial table generation and dropdown population
|
||||||
|
generateTable(fileHostsData, 'file-hosts-table-container');
|
||||||
|
generateTable(adultHostsData, 'adult-hosts-table-container');
|
||||||
|
populateProviderDropdowns(fileHostsData);
|
||||||
|
generatePricingTable(pricingData); // Generate pricing table
|
||||||
|
|
||||||
|
// Setup search for both tables
|
||||||
|
setupSearch(hostSearchInput, clearHostSearchIcon, 'file-hosts-table-container');
|
||||||
|
setupSearch(adultHostSearchInput, clearAdultHostSearchIcon, 'adult-hosts-table-container');
|
||||||
|
|
||||||
|
// Comparison functionality
|
||||||
|
const handleCompare = () => {
|
||||||
|
const provider1 = provider1Select.value;
|
||||||
|
const provider2 = provider2Select.value;
|
||||||
|
if (provider1 && provider2) {
|
||||||
|
generateCompareTable(fileHostsData, provider1, provider2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
provider1Select.addEventListener('change', handleCompare);
|
||||||
|
provider2Select.addEventListener('change', handleCompare);
|
||||||
|
|
||||||
|
// Close comparison functionality
|
||||||
|
closeCompareButton.addEventListener('click', () => {
|
||||||
|
compareTableContainer.style.display = 'none';
|
||||||
});
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching or parsing JSON:', error);
|
||||||
|
fileHostsTableContainer.innerHTML = '<p>Error loading file hosts data.</p>';
|
||||||
|
adultHostsTableContainer.innerHTML = '<p>Error loading adult hosts data.</p>';
|
||||||
|
pricingSection.innerHTML = '<p>Error loading pricing data.</p>';
|
||||||
|
}
|
||||||
|
});
|
||||||
2873
docs/index.html
2873
docs/index.html
File diff suppressed because it is too large
Load diff
74
docs/json/pricing.json
Normal file
74
docs/json/pricing.json
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
{
|
||||||
|
"plans": [
|
||||||
|
{
|
||||||
|
"name": "Free/Trial",
|
||||||
|
"AllDebrid": "7 days*",
|
||||||
|
"Premiumize": "-",
|
||||||
|
"Real-Debrid": "-",
|
||||||
|
"TorBox": "0$/month",
|
||||||
|
"Debrid-Link": "Yes",
|
||||||
|
"Linksnappy": "-",
|
||||||
|
"Mega-Debrid": "-"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "7 Days",
|
||||||
|
"AllDebrid": "-",
|
||||||
|
"Premiumize": "-",
|
||||||
|
"Real-Debrid": "-",
|
||||||
|
"TorBox": "-",
|
||||||
|
"Debrid-Link": "-",
|
||||||
|
"Linksnappy": "$4.99 USD",
|
||||||
|
"Mega-Debrid": "-"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "15 Days",
|
||||||
|
"AllDebrid": "-",
|
||||||
|
"Premiumize": "-",
|
||||||
|
"Real-Debrid": "3 €",
|
||||||
|
"TorBox": "-",
|
||||||
|
"Debrid-Link": "3 €",
|
||||||
|
"Linksnappy": "-",
|
||||||
|
"Mega-Debrid": "-"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "30 Days",
|
||||||
|
"AllDebrid": "2.99€/mo (Recur) / 3.99€ (One-time)",
|
||||||
|
"Premiumize": "€9.99 / mo",
|
||||||
|
"Real-Debrid": "4 €",
|
||||||
|
"TorBox": "Starts from $2.1/mo",
|
||||||
|
"Debrid-Link": "4 €",
|
||||||
|
"Linksnappy": "$12.99 USD",
|
||||||
|
"Mega-Debrid": "4 €"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "90 Days",
|
||||||
|
"AllDebrid": "-",
|
||||||
|
"Premiumize": "€8.33 / month (€24.99 total)",
|
||||||
|
"Real-Debrid": "9 €",
|
||||||
|
"TorBox": "-",
|
||||||
|
"Debrid-Link": "9 €",
|
||||||
|
"Linksnappy": "$29.99 USD",
|
||||||
|
"Mega-Debrid": "9 €"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "180 Days",
|
||||||
|
"AllDebrid": "-",
|
||||||
|
"Premiumize": "€5.75 / month (€69.99 total)",
|
||||||
|
"Real-Debrid": "16 €",
|
||||||
|
"TorBox": "-",
|
||||||
|
"Debrid-Link": "16 €",
|
||||||
|
"Linksnappy": "$54.99 USD",
|
||||||
|
"Mega-Debrid": "16 €"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "300 Days",
|
||||||
|
"AllDebrid": "-",
|
||||||
|
"Premiumize": "-",
|
||||||
|
"Real-Debrid": "-",
|
||||||
|
"TorBox": "-",
|
||||||
|
"Debrid-Link": "25 €",
|
||||||
|
"Linksnappy": "-",
|
||||||
|
"Mega-Debrid": "-"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -139,6 +139,10 @@ tr:last-child td:first-child {
|
||||||
tr:last-child td:last-child {
|
tr:last-child td:last-child {
|
||||||
border-bottom-right-radius: var(--radius);
|
border-bottom-right-radius: var(--radius);
|
||||||
}
|
}
|
||||||
|
.pricing-tb{
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Search Container */
|
/* Search Container */
|
||||||
#search-container,
|
#search-container,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue