update to use single html with dynamic div

2025-04-16 09:31:36 +02:00
parent 0dcdfa7e76
commit 1d3febeec1
21 changed files with 794 additions and 179 deletions
@@ -0,0 +1,81 @@
+<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>