81 lines
3.3 KiB
HTML
81 lines
3.3 KiB
HTML
<h2>Restaurant Tier List</h2>
|
|
<div id="tier-list">
|
|
</div>
|
|
|
|
<style>
|
|
.tier {
|
|
margin-bottom: 20px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tier h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.restaurant-item {
|
|
padding: 8px;
|
|
margin-bottom: 5px;
|
|
border-left: 5px solid;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tier-S { border-color: #4CAF50; background-color: #e8f5e9; } /* Green */
|
|
.tier-A { border-color: #2196F3; background-color: #e3f2fd; } /* Blue */
|
|
.tier-B { border-color: #FFC107; background-color: #fffde7; } /* Yellow */
|
|
.tier-C { border-color: #FF9800; background-color: #ffe0b2; } /* Orange */
|
|
.tier-D { border-color: #F44336; background-color: #ffebee; } /* Red */
|
|
.tier-Unrated { border-color: #9e9e9e; background-color: #f5f5f5; } /* Grey */
|
|
</style>
|
|
|
|
<script>
|
|
function loadTierList() {
|
|
const tierListDiv = document.getElementById('tier-list');
|
|
tierListDiv.innerHTML = '<p>Loading tier list...</p>';
|
|
|
|
fetch('../php/get_restaurant_tiers.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
tierListDiv.innerHTML = '';
|
|
const tierOrder = ['S', 'A', 'B', 'C', 'D', 'Unrated'];
|
|
|
|
tierOrder.forEach(tier => {
|
|
if (data[tier] && data[tier].length > 0) {
|
|
const tierDiv = document.createElement('div');
|
|
tierDiv.classList.add('tier', `tier-${tier}`);
|
|
tierDiv.innerHTML = `<h3>Tier ${tier}</h3>`;
|
|
const ul = document.createElement('ul');
|
|
data[tier].forEach(restaurant => {
|
|
const li = document.createElement('li');
|
|
li.classList.add('restaurant-item');
|
|
li.textContent = `${restaurant.name} (Score: ${restaurant.median_score !== null ? restaurant.median_score : 'N/A'})`;
|
|
ul.appendChild(li);
|
|
});
|
|
tierDiv.appendChild(ul);
|
|
tierListDiv.appendChild(tierDiv);
|
|
} else if (tier === 'Unrated' && data[tier] && data[tier].length > 0) {
|
|
const tierDiv = document.createElement('div');
|
|
tierDiv.classList.add('tier', `tier-${tier}`);
|
|
tierDiv.innerHTML = `<h3>Tier ${tier}</h3>`;
|
|
const ul = document.createElement('ul');
|
|
data[tier].forEach(restaurant => {
|
|
const li = document.createElement('li');
|
|
li.classList.add('restaurant-item');
|
|
li.textContent = `${restaurant.name} (Score: N/A)`;
|
|
ul.appendChild(li);
|
|
});
|
|
tierDiv.appendChild(ul);
|
|
tierListDiv.appendChild(tierDiv);
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading tier list:', error);
|
|
tierListDiv.innerHTML = '<p class="error">Failed to load tier list.</p>';
|
|
});
|
|
}
|
|
|
|
// Call this function when chart.html is loaded
|
|
loadTierList();
|
|
</script> |