up demo with less stuff
This commit is contained in:
parent
91e34032b2
commit
2e3c2cd25d
3 changed files with 73 additions and 19 deletions
|
@ -52,6 +52,13 @@ class DemoMainResource:
|
|||
<script src="/static/demo_auth.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
|
||||
.logo{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
.sources{
|
||||
font-size: 0.8rem
|
||||
}
|
||||
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
|
@ -63,6 +70,28 @@ class DemoMainResource:
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
max-width: 300px;
|
||||
}
|
||||
/* Styles pour listes dépliantes */
|
||||
#endpoints_list, #demo_pages_list {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#endpoints_list_header, #demo_pages_list_header {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#endpoints_list_header:after, #demo_pages_list_header:after {
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 0.8em;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#endpoints_list_header.active:after, #demo_pages_list_header.active:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.map-style-control {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
@ -108,9 +137,12 @@ class DemoMainResource:
|
|||
<input type="hidden" id="osmRedirectUri" value="{client_redirect}">
|
||||
|
||||
<div class="map-overlay">
|
||||
<h2>OpenEventDatabase Demo</h2>
|
||||
<p>This map shows current events from the OpenEventDatabase.</p>
|
||||
|
||||
<h2>
|
||||
<img src="/static/oedb.png" class="logo" />
|
||||
OpenEventDatabase Demo</h2>
|
||||
<p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
|
||||
<p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
|
||||
|
||||
<!-- 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>
|
||||
|
@ -144,14 +176,14 @@ class DemoMainResource:
|
|||
# </script>
|
||||
# </div> -->
|
||||
|
||||
<h3>API Endpoints:</h3>
|
||||
<ul>
|
||||
<h3 id="endpoints_list_header">API Endpoints:</h3>
|
||||
<ul id="endpoints_list">
|
||||
<li><a href="/" >/ - API Information</a></li>
|
||||
<li><a href="/event" >/event - Get Events</a></li>
|
||||
<li><a href="/stats" >/stats - Database Statistics</a></li>
|
||||
</ul>
|
||||
<h3>Demo Pages:</h3>
|
||||
<ul>
|
||||
<h3 id="demo_pages_list_header">Demo Pages:</h3>
|
||||
<ul id="demo_pages_list">
|
||||
<li><a href="/demo/search" >/demo/search - Advanced Search</a></li>
|
||||
<li><a href="/demo/by-what" >/demo/by-what - Events by Type</a></li>
|
||||
<li><a href="/demo/map-by-what" >/demo/map-by-what - Map by Event Type</a></li>
|
||||
|
@ -160,22 +192,44 @@ class DemoMainResource:
|
|||
<li><a href="/event?what=music" >Search Music Events</a></li>
|
||||
<li><a href="/event?what=sport" >Search Sport Events</a></li>
|
||||
</ul>
|
||||
<p><a href="/demo/traffic" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Traffic event</a></p>
|
||||
<p><a href="/demo/add" class="add-event-btn" style="display: block; text-align: center; margin-top: 15px; padding: 8px; background-color: #0078ff; color: white; border-radius: 4px; font-weight: bold;">+ Any Event</a></p>
|
||||
<p style="text-align: center; margin-top: 10px;">
|
||||
<a href="https://source.cipherbliss.com/tykayn/oedb-backend" title="View Source Code on Cipherbliss" style="font-size: 24px;">
|
||||
<a class="sources" href="https://source.cipherbliss.com/tykayn/oedb-backend" title="View Source Code on Cipherbliss" style="font-size: 24px;">
|
||||
<i class="fas fa-code-branch"></i> sources
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="map-style-control">
|
||||
<h4 style="margin-top: 0; margin-bottom: 10px;">Map Style</h4>
|
||||
<button id="style-default" class="active">Default</button>
|
||||
<button id="style-osm-vector">OSM Vector</button>
|
||||
<button id="style-osm-raster">OSM Raster</button>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// Fonction pour gérer les listes dépliantes
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const endpointsHeader = document.getElementById('endpoints_list_header');
|
||||
const endpointsList = document.getElementById('endpoints_list');
|
||||
const demoPagesHeader = document.getElementById('demo_pages_list_header');
|
||||
const demoPagesList = document.getElementById('demo_pages_list');
|
||||
|
||||
// Fonction pour basculer l'affichage d'une liste
|
||||
function toggleList(header, list) {
|
||||
header.addEventListener('click', function() {
|
||||
if (list.style.display === 'none' || list.style.display === '') {
|
||||
list.style.display = 'block';
|
||||
header.classList.add('active');
|
||||
} else {
|
||||
list.style.display = 'none';
|
||||
header.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialiser les listes comme repliées
|
||||
endpointsList.style.display = 'none';
|
||||
demoPagesList.style.display = 'none';
|
||||
|
||||
// Ajouter les écouteurs d'événements
|
||||
toggleList(endpointsHeader, endpointsList);
|
||||
toggleList(demoPagesHeader, demoPagesList);
|
||||
});
|
||||
|
||||
// Map style URLs
|
||||
const mapStyles = {
|
||||
default: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
|
|
BIN
oedb/resources/demo/static/oedb.png
Normal file
BIN
oedb/resources/demo/static/oedb.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
|
@ -1209,9 +1209,9 @@
|
|||
|
||||
// Update the content
|
||||
userInfoPanel.innerHTML = `
|
||||
<h3>User Information</h3>
|
||||
<p>Username: <strong>${username}</strong></p>
|
||||
<p>Points: <span class="user-points">${points}</span></p>
|
||||
<!-- <h3>User Information</h3>-->
|
||||
<p> <strong>${username}</strong></p>
|
||||
<p> <span class="user-points">${points}</span> points</p>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue