split templates

oedb/resources/demo/templates/view_events_new.html

@@ -0,0 +1,157 @@
+{% extends "layout.html" %}
+
+{% block title %}View Saved Events - OpenEventDatabase{% endblock %}
+
+{% block css %}
+<style>
+    #map { 
+        position: absolute; 
+        top: 0; 
+        bottom: 0; 
+        width: 100%; 
+    }
+    
+    .map-overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.9);
+        margin: 20px;
+        padding: 15px;
+        width: 300px;
+        border-radius: 5px;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+    
+    .event-list {
+        margin-top: 15px;
+        max-height: 60vh;
+        overflow-y: auto;
+    }
+    
+    .event-item {
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin-bottom: 10px;
+        padding: 10px;
+    }
+    
+    .event-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    
+    .event-header h3 {
+        margin: 0;
+        font-size: 16px;
+    }
+    
+    .event-actions {
+        display: flex;
+        gap: 5px;
+    }
+    
+    .event-details {
+        font-size: 14px;
+    }
+    
+    .event-details p {
+        margin: 5px 0;
+    }
+    
+    .controls {
+        display: flex;
+        gap: 10px;
+        margin-top: 15px;
+    }
+    
+    .no-events {
+        padding: 10px;
+        background: #f8f8f8;
+        border-radius: 4px;
+        text-align: center;
+        color: #666;
+    }
+    
+    .zoom-btn, .delete-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 5px;
+    }
+    
+    .zoom-btn {
+        color: #0078ff;
+    }
+    
+    .delete-btn {
+        color: #dc3545;
+    }
+    
+    .danger {
+        background-color: #dc3545;
+    }
+    
+    .danger:hover {
+        background-color: #c82333;
+    }
+</style>
+{% endblock %}
+
+{% block header %}Your Saved Events{% endblock %}
+
+{% block content %}
+<div id="map"></div>
+
+<!-- Hidden OAuth2 configuration for the JavaScript module -->
+<input type="hidden" id="osmClientId" value="{{ client_id }}">
+<input type="hidden" id="osmClientSecret" value="{{ client_secret }}">
+<input type="hidden" id="osmRedirectUri" value="{{ client_redirect }}">
+
+<div class="map-overlay">
+    <!-- Authentication section -->
+    <div id="auth-section" class="auth-section">
+        <h3>OpenStreetMap Authentication</h3>
+        <p>Authenticate with your OpenStreetMap account to include your username in reports.</p>
+        <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>
+    
+    <div id="event-count"></div>
+    
+    <div id="event-list" class="event-list"></div>
+    
+    <div class="controls">
+        <button id="refresh-btn">
+            <i class="fas fa-sync-alt"></i> Refresh
+        </button>
+        <button id="clear-btn" class="danger">
+            <i class="fas fa-trash-alt"></i> Clear All
+        </button>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/view_events.js"></script>
+{% endblock %}