danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added synamic generation of pricing table

Browse source
This commit is contained in:
fynks 2025-01-16 10:46:18 +05:00
parent 0751029d51
commit 5318ff0c5e
4 changed files with 356 additions and 2898 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

297
docs/app.js
View file

@ -1,140 +1,173 @@
document.addEventListener('DOMContentLoaded', async () => {
const fileHostsTableContainer = document.getElementById('file-hosts-table-container');
const hostSearchInput = document.getElementById('host-search-input');
const clearHostSearchIcon = document.getElementById('clear-host-search');
const provider1Select = document.getElementById('provider1');
const provider2Select = document.getElementById('provider2');
const compareTableContainer = document.getElementById('compare-table-container');
const closeCompareButton = document.getElementById('close-compare');
document.addEventListener('DOMContentLoaded', async () => {
const fileHostsTableContainer = document.getElementById('file-hosts-table-container');
const hostSearchInput = document.getElementById('host-search-input');
const clearHostSearchIcon = document.getElementById('clear-host-search');
const provider1Select = document.getElementById('provider1');
const provider2Select = document.getElementById('provider2');
const compareTableContainer = document.getElementById('compare-table-container');
const closeCompareButton = document.getElementById('close-compare');
const adultHostsTableContainer = document.getElementById('adult-hosts-table-container');
const adultHostSearchInput = document.getElementById('adult-host-search-input');
const clearAdultHostSearchIcon = document.getElementById('clear-adult-host-search');
const adultHostsTableContainer = document.getElementById('adult-hosts-table-container');
const adultHostSearchInput = document.getElementById('adult-host-search-input');
const clearAdultHostSearchIcon = document.getElementById('clear-adult-host-search');
// Initially hide the comparison table container
compareTableContainer.style.display = 'none';
const pricingSection = document.getElementById('pricing'); // Targeting the 'Pricing' section
try {
const [fileHostsResponse, adultHostsResponse] = await Promise.all([
fetch('./json/file-hosts.json'),
fetch('./json/adult-hosts.json')
]);
const fileHostsData = await fileHostsResponse.json();
const adultHostsData = await adultHostsResponse.json();
// Initially hide the comparison table container
compareTableContainer.style.display = 'none';
// 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>`;
try {
const [fileHostsResponse, adultHostsResponse, pricingResponse] = await Promise.all([
fetch('./json/file-hosts.json'),
fetch('./json/adult-hosts.json'),
fetch('./json/pricing.json') // Fetching the pricing data
]);
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>';
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';
tableHTML += '</tr>';
});
} 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>';
tableHTML += '</tbody></table>';
pricingSection.innerHTML = tableHTML;
} else {
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>';
}
});

2879
docs/index.html
View file

File diff suppressed because it is too large Load diff

74
docs/json/pricing.json Normal file
View 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": "-"
}
]
}

4
docs/styles.css
View file

@ -139,6 +139,10 @@ tr:last-child td:first-child {
tr:last-child td:last-child {
border-bottom-right-radius: var(--radius);
}
.pricing-tb{
font-weight: normal;
}
/* Search Container */
#search-container,