ajout de reality check dans les évènements traffic qui complète une propriété de l'évènement
This commit is contained in:
Tykayn
tykayn
parent
f18383fb9e
commit
f66e5e3f7b
5 changed files with 675 additions and 37 deletions
|
|
@ -111,31 +111,39 @@ class DemoMainResource:
|
|||
<h2>OpenEventDatabase Demo</h2>
|
||||
<p>This map shows current events from the OpenEventDatabase.</p>
|
||||
|
||||
<!-- Authentication section -->
|
||||
<div id="auth-section" class="auth-section">
|
||||
<h3>OpenStreetMap Authentication</h3>
|
||||
|
||||
<a href="https://www.openstreetmap.org/oauth2/authorize?client_id={client_id}&redirect_uri={client_redirect}&response_type=code&scope=read_prefs" class="osm-login-btn">
|
||||
<span class="osm-logo"></span>
|
||||
Login with OpenStreetMap
|
||||
</a>
|
||||
<script>
|
||||
// Replace server-side auth section with JavaScript-rendered version if available
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.osmAuth) {
|
||||
const clientId = document.getElementById('osmClientId').value;
|
||||
const redirectUri = document.getElementById('osmRedirectUri').value;
|
||||
const authSection = document.getElementById('auth-section');
|
||||
|
||||
// Only replace if osmAuth is loaded and has renderAuthSection method
|
||||
if (osmAuth.renderAuthSection) {
|
||||
authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- User Information Panel -->
|
||||
<div id="user-info-panel" class="user-info-panel" style="display: none; background-color: #f5f5f5; border-radius: 4px; padding: 10px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
<h3 style="margin-top: 0; margin-bottom: 10px; color: #333;">User Information</h3>
|
||||
<p>Username: <strong id="username-display">Anonymous</strong></p>
|
||||
<p>Points: <span id="points-display" style="font-weight: bold; color: #0078ff;">0</span></p>
|
||||
</div>
|
||||
|
||||
<!-- Authentication section -->
|
||||
<!--
|
||||
# <div id="auth-section" class="auth-section">
|
||||
# <h3>OpenStreetMap Authentication</h3>
|
||||
#
|
||||
# <a href="https://www.openstreetmap.org/oauth2/authorize?client_id={client_id}&redirect_uri={client_redirect}&response_type=code&scope=read_prefs" class="osm-login-btn">
|
||||
# <span class="osm-logo"></span>
|
||||
# Login with OpenStreetMap
|
||||
# </a>
|
||||
# <script>
|
||||
# // Replace server-side auth section with JavaScript-rendered version if available
|
||||
# document.addEventListener('DOMContentLoaded', function() {
|
||||
# if (window.osmAuth) {
|
||||
# const clientId = document.getElementById('osmClientId').value;
|
||||
# const redirectUri = document.getElementById('osmRedirectUri').value;
|
||||
# const authSection = document.getElementById('auth-section');
|
||||
#
|
||||
# // Only replace if osmAuth is loaded and has renderAuthSection method
|
||||
# if (osmAuth.renderAuthSection) {
|
||||
# authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
|
||||
# }
|
||||
# }
|
||||
# });
|
||||
# </script>
|
||||
# </div> -->
|
||||
|
||||
<h3>API Endpoints:</h3>
|
||||
<ul>
|
||||
<li><a href="/" >/ - API Information</a></li>
|
||||
|
|
@ -368,6 +376,29 @@ class DemoMainResource:
|
|||
popupContent += '</table>';
|
||||
popupContent += '</div>';
|
||||
|
||||
// Check if this event needs reality check (traffic events created more than 1 hour ago)
|
||||
const needsRealityCheck = checkIfNeedsRealityCheck(feature);
|
||||
|
||||
// Add reality check buttons if needed
|
||||
if (needsRealityCheck) {
|
||||
popupContent += `
|
||||
<div class="reality-check">
|
||||
<p>Is this traffic event still present?</p>
|
||||
<div class="reality-check-buttons">
|
||||
<button class="confirm-btn" onclick="confirmEvent('${properties.id}', true)">Yes, still there</button>
|
||||
<button class="deny-btn" onclick="confirmEvent('${properties.id}', false)">No, it's gone</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (properties['reality_check']) {
|
||||
// Show reality check information if it exists
|
||||
popupContent += `
|
||||
<div class="reality-check-info">
|
||||
<p>Reality check: ${properties['reality_check']}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add edit link
|
||||
popupContent += `<div style="margin-top: 10px; text-align: center;">
|
||||
<a href="/demo/edit/${properties.id}" class="edit-event-btn" style="display: inline-block; padding: 5px 10px; background-color: #0078ff; color: white; border-radius: 4px; text-decoration: none; font-weight: bold;">Edit Event</a>
|
||||
|
|
@ -459,6 +490,17 @@ class DemoMainResource:
|
|||
return relativeTime || "à l instant";
|
||||
}
|
||||
|
||||
// Function to check if an event needs a reality check (created more than 1 hour ago)
|
||||
function checkIfNeedsRealityCheck(event) {
|
||||
|
||||
|
||||
// Check if the event is a traffic event
|
||||
if (!event.properties.what || !event.properties.what.startsWith('traffic')) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Function to fit map to events bounds
|
||||
function fitMapToBounds(geojson) {
|
||||
if (geojson.features.length === 0) return;
|
||||
|
|
@ -477,6 +519,182 @@ class DemoMainResource:
|
|||
maxZoom: 12
|
||||
});
|
||||
}
|
||||
|
||||
// Function to update user information display
|
||||
function updateUserInfoDisplay() {
|
||||
const username = localStorage.getItem('oedb_username');
|
||||
const points = localStorage.getItem('oedb_points');
|
||||
const userInfoPanel = document.getElementById('user-info-panel');
|
||||
|
||||
// Only show the panel if the user has a username or points
|
||||
if (username || points) {
|
||||
userInfoPanel.style.display = 'block';
|
||||
|
||||
// Update username display
|
||||
if (username) {
|
||||
document.getElementById('username-display').textContent = username;
|
||||
}
|
||||
|
||||
// Update points display
|
||||
if (points) {
|
||||
document.getElementById('points-display').textContent = points;
|
||||
}
|
||||
}
|
||||
|
||||
// Add CSS for reality check buttons if not already added
|
||||
if (!document.getElementById('reality-check-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'reality-check-styles';
|
||||
style.textContent = `
|
||||
.reality-check {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #fff3e0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.reality-check-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.confirm-btn, .deny-btn {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
.confirm-btn {
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
.deny-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
}
|
||||
.reality-check-info {
|
||||
margin-top: 10px;
|
||||
padding: 8px;
|
||||
background-color: #e8f5e9;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle event confirmation or denial
|
||||
function confirmEvent(eventId, isConfirmed) {
|
||||
// Get username from localStorage or prompt for it
|
||||
let username = localStorage.getItem('oedb_username');
|
||||
|
||||
if (!username) {
|
||||
username = promptForUsername();
|
||||
if (!username) {
|
||||
// User cancelled the prompt
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Current date and time
|
||||
const now = new Date();
|
||||
const dateTimeString = now.toISOString();
|
||||
|
||||
// Create reality check string
|
||||
const realityCheckStatus = isConfirmed ? 'confirmed' : 'not confirmed';
|
||||
const realityCheckValue = `${dateTimeString} | ${username} | ${realityCheckStatus}`;
|
||||
|
||||
// Fetch the event to update
|
||||
fetch(`https://api.openeventdatabase.org/event/${eventId}`)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
} else {
|
||||
throw new Error(`Failed to fetch event ${eventId}`);
|
||||
}
|
||||
})
|
||||
.then(event => {
|
||||
// Add reality_check property
|
||||
event.properties['reality_check'] = realityCheckValue;
|
||||
|
||||
// Update the event
|
||||
return fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(event)
|
||||
});
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
// Save contribution to localStorage
|
||||
saveContribution(eventId, isConfirmed);
|
||||
|
||||
// Award points
|
||||
awardPoints(3);
|
||||
|
||||
// Show success message
|
||||
alert(`Thank you for your contribution! You've earned 3 points.`);
|
||||
|
||||
// Update user info display
|
||||
updateUserInfoDisplay();
|
||||
|
||||
// Refresh events to update the display
|
||||
fetchEvents();
|
||||
} else {
|
||||
throw new Error('Failed to update event');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating event:', error);
|
||||
alert(`Error: ${error.message}`);
|
||||
});
|
||||
}
|
||||
|
||||
// Function to prompt for username
|
||||
function promptForUsername() {
|
||||
const username = prompt('Please enter your username:');
|
||||
if (username) {
|
||||
localStorage.setItem('oedb_username', username);
|
||||
return username;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Function to save contribution to localStorage
|
||||
function saveContribution(eventId, isConfirmed) {
|
||||
// Get existing contributions
|
||||
let contributions = JSON.parse(localStorage.getItem('oedb_contributions') || '[]');
|
||||
|
||||
// Add new contribution
|
||||
contributions.push({
|
||||
eventId: eventId,
|
||||
timestamp: new Date().toISOString(),
|
||||
isConfirmed: isConfirmed
|
||||
});
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem('oedb_contributions', JSON.stringify(contributions));
|
||||
}
|
||||
|
||||
// Function to award points
|
||||
function awardPoints(points) {
|
||||
// Get current points
|
||||
let currentPoints = parseInt(localStorage.getItem('oedb_points') || '0');
|
||||
|
||||
// Add new points
|
||||
currentPoints += points;
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem('oedb_points', currentPoints.toString());
|
||||
}
|
||||
|
||||
// Update user info when the page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateUserInfoDisplay();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue