299 lines
15 KiB
HTML
299 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Interactive map viewer for NocoDB location data">
|
||
<title>NocoDB Map Viewer</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
crossorigin="" />
|
||
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<h1>Location Map Viewer</h1>
|
||
<div class="header-actions">
|
||
<button id="refresh-btn" class="btn btn-secondary" title="Refresh locations">
|
||
🔄 Refresh
|
||
</button>
|
||
<span id="location-count" class="location-count">Loading...</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Map Container -->
|
||
<div id="map-container">
|
||
<div id="map"></div>
|
||
|
||
<!-- Map Controls -->
|
||
<div class="map-controls">
|
||
<button id="geolocate-btn" class="btn btn-primary" title="Find my location">
|
||
<span class="btn-icon">📍</span><span class="btn-text">My Location</span>
|
||
</button>
|
||
<button id="add-location-btn" class="btn btn-success" title="Add location at map center">
|
||
<span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>
|
||
</button>
|
||
<button id="fullscreen-btn" class="btn btn-secondary" title="Toggle fullscreen">
|
||
<span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Crosshair for adding locations -->
|
||
<div id="crosshair" class="crosshair hidden">
|
||
<div class="crosshair-x"></div>
|
||
<div class="crosshair-y"></div>
|
||
<div class="crosshair-info">Click "Add Location Here" to save this point</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status Messages -->
|
||
<div id="status-container" class="status-container"></div>
|
||
|
||
<!-- Edit Location Footer Form -->
|
||
<div id="edit-footer" class="edit-footer hidden">
|
||
<div class="edit-footer-content">
|
||
<div class="edit-footer-header">
|
||
<h2>Edit Location</h2>
|
||
<button class="btn btn-secondary btn-sm" id="close-edit-footer-btn">✕ Close</button>
|
||
</div>
|
||
<form id="edit-location-form">
|
||
<input type="hidden" id="edit-location-id" name="id">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-first-name">First Name</label>
|
||
<input type="text" id="edit-first-name" name="First Name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-last-name">Last Name</label>
|
||
<input type="text" id="edit-last-name" name="Last Name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-location-email">Email</label>
|
||
<input type="email" id="edit-location-email" name="Email">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-location-phone">Phone Number</label>
|
||
<input type="tel" id="edit-location-phone" name="Phone">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-location-unit">Unit Number</label>
|
||
<input type="text" id="edit-location-unit" name="Unit Number">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-support-level">Support Level</label>
|
||
<select id="edit-support-level" name="Support Level">
|
||
<option value="">-- Select --</option>
|
||
<option value="1">1 - Strong Support (Green)</option>
|
||
<option value="2">2 - Moderate Support (Yellow)</option>
|
||
<option value="3">3 - Low Support (Orange)</option>
|
||
<option value="4">4 - No Support (Red)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-location-address">Address</label>
|
||
<div style="display: flex; gap: 10px;">
|
||
<input type="text" id="edit-location-address" name="Address" style="flex: 1;">
|
||
<button type="button" class="btn btn-secondary btn-sm" id="lookup-address-edit-btn">
|
||
🔍 Lookup
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="edit-sign" name="Sign" value="true">
|
||
Has Campaign Sign
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-sign-size">Sign Size</label>
|
||
<select id="edit-sign-size" name="Sign Size">
|
||
<option value="">-- Select --</option>
|
||
<option value="Small">Small</option>
|
||
<option value="Medium">Medium</option>
|
||
<option value="Large">Large</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-location-notes">Notes</label>
|
||
<textarea id="edit-location-notes" name="Notes" rows="4"></textarea>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="edit-location-lat">Latitude</label>
|
||
<input type="number" id="edit-location-lat" name="latitude" step="0.00000001">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="edit-location-lng">Longitude</label>
|
||
<input type="number" id="edit-location-lng" name="longitude" step="0.00000001">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="edit-geo-location">Geo-Location</label>
|
||
<input type="text" id="edit-geo-location" name="Geo-Location"
|
||
placeholder="e.g., 53.5461;-113.4938">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" id="delete-location-btn">Delete</button>
|
||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Location Modal -->
|
||
<div id="add-modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Add New Location</h2>
|
||
<button class="modal-close" id="close-modal-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="location-form">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="first-name">First Name</label>
|
||
<input type="text" id="first-name" name="First Name"
|
||
placeholder="Enter first name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="last-name">Last Name</label>
|
||
<input type="text" id="last-name" name="Last Name"
|
||
placeholder="Enter last name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-email">Email</label>
|
||
<input type="email" id="location-email" name="Email"
|
||
placeholder="Enter email address">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-phone">Phone Number</label>
|
||
<input type="tel" id="location-phone" name="Phone"
|
||
placeholder="Enter phone number">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="location-unit">Unit Number</label>
|
||
<input type="text" id="location-unit" name="Unit Number"
|
||
placeholder="Enter unit number">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="support-level">Support Level</label>
|
||
<select id="support-level" name="Support Level">
|
||
<option value="">-- Select --</option>
|
||
<option value="1">1 - Strong Support (Green)</option>
|
||
<option value="2">2 - Moderate Support (Yellow)</option>
|
||
<option value="3">3 - Low Support (Orange)</option>
|
||
<option value="4">4 - No Support (Red)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-address">Address</label>
|
||
<div style="display: flex; gap: 10px;">
|
||
<input type="text" id="location-address" name="Address"
|
||
placeholder="Enter address" style="flex: 1;">
|
||
<button type="button" class="btn btn-secondary btn-sm" id="lookup-address-add-btn">
|
||
🔍 Lookup
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="sign" name="Sign" value="true">
|
||
Has Campaign Sign
|
||
</label>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="sign-size">Sign Size</label>
|
||
<select id="sign-size" name="Sign Size">
|
||
<option value="">-- Select --</option>
|
||
<option value="Small">Small</option>
|
||
<option value="Medium">Medium</option>
|
||
<option value="Large">Large</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="location-notes">Notes</label>
|
||
<textarea id="location-notes" name="Notes" rows="4"
|
||
placeholder="Enter additional details"></textarea>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="location-lat">Latitude</label>
|
||
<input type="number" id="location-lat" name="latitude"
|
||
step="0.00000001" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="location-lng">Longitude</label>
|
||
<input type="number" id="location-lng" name="longitude"
|
||
step="0.00000001" readonly>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="geo-location">Geo-Location</label>
|
||
<input type="text" id="geo-location" name="Geo-Location"
|
||
placeholder="e.g., 53.5461;-113.4938"
|
||
title="Enter as 'latitude;longitude' or 'latitude, longitude'">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-secondary" id="cancel-modal-btn">
|
||
Cancel
|
||
</button>
|
||
<button type="submit" class="btn btn-primary">
|
||
Save Location
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div id="loading" class="loading-overlay">
|
||
<div class="spinner"></div>
|
||
<p>Loading map...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
crossorigin=""></script>
|
||
|
||
<!-- Application JavaScript -->
|
||
<script src="js/map.js"></script>
|
||
</body>
|
||
</html>
|