me0nline/Rippchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update to use single html with dynamic div

Browse Source
This commit is contained in:
me0nline
2025-04-16 09:31:36 +02:00
parent 0dcdfa7e76
commit 1d3febeec1
21 changed files with 794 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
htmls/add_restaurant.html
+8
View File
@@ -0,0 +1,8 @@
<h2>Add New Restaurant</h2>
<div class="error"></div>
<div class="success"></div>
<form id="add-restaurant-form">
Name: <input type="text" name="name" required><br><br>
Maps Link: <input type="text" name="maps_link"><br><br>
<input type="submit" value="Add Restaurant">
</form>
htmls/chart.html
+81
View File
@@ -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>
htmls/login.html
+8
View File
@@ -0,0 +1,8 @@
<h2>Login</h2>
<div class="error"></div>
<form id="login-form">
Username: <input type="text" name="username" required><br><br>
Password: <input type="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
<button id="register-btn">Request Account</button>
htmls/overview.html
+21
View File
@@ -0,0 +1,21 @@
<h2>Restaurant Overview</h2>
<div id="restaurant-list">
</div>
<script>
// This script might be moved to the main index.html or a separate JS file
function loadRestaurantOverview() {
const restaurantListDiv = document.getElementById('restaurant-list');
fetch('php/get_restaurant_overview.php')
.then(response => response.text())
.then(data => {
restaurantListDiv.innerHTML = data;
})
.catch(error => {
console.error('Error loading restaurant overview:', error);
restaurantListDiv.innerHTML = '<p class="error">Failed to load restaurant overview.</p>';
});
}
// Call this function when overview.html is loaded
loadRestaurantOverview();
</script>
htmls/register_request.html
+47
View File
@@ -0,0 +1,47 @@
<h2>Request Account</h2>
<div class="error"></div>
<div class="success"></div>
<form id="register-request-form">
Vorname: <input type="text" name="vorname" required><br><br>
Nachname: <input type="text" name="nachname" required><br><br>
Username: <input type="text" name="username" required><br><br>
<input type="submit" value="Request Account">
</form>
<script>
document.getElementById('register-request-form').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this);
fetch('../php/register_request.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const errorDiv = document.querySelector('#register-request-form + .error');
const successDiv = document.querySelector('#register-request-form + .error + .success');
if (data.success) {
if (successDiv) {
successDiv.textContent = data.message;
} else {
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="success">' + data.message + '</p>');
}
document.getElementById('register-request-form').reset();
} else {
if (errorDiv) {
errorDiv.textContent = data.error;
} else {
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="error">' + data.error + '</p>');
}
}
})
.catch(error => {
console.error('Error requesting registration:', error);
const errorDiv = document.querySelector('#register-request-form + .error');
if (errorDiv) {
errorDiv.textContent = 'Failed to request account due to network error.';
} else {
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="error">Failed to request account due to network error.</p>');
}
});
});
</script>