457 lines
22 KiB
HTML
457 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||
<meta name="description" content="Interactive canvassing web-app & viewer Changemaker-lite nocodb">
|
||
<title>Map by BNKops</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||
crossorigin="" />
|
||
|
||
<!-- Leaflet MarkerCluster CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
|
||
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body class="authenticating">
|
||
<div id="app" class="app-hidden">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<h1>Map</h1>
|
||
|
||
<!-- Unified search container -->
|
||
<div class="unified-search-container">
|
||
<div class="search-mode-toggle">
|
||
<button class="search-mode-btn active" data-mode="docs">📚 Docs</button>
|
||
<button class="search-mode-btn" data-mode="map">📍 Map</button>
|
||
<button class="search-mode-btn" data-mode="database">🗄️ DB</button>
|
||
</div>
|
||
<div class="unified-search-wrapper">
|
||
<input type="text"
|
||
id="unified-search-input"
|
||
class="unified-search-input"
|
||
placeholder="Search docs... (Ctrl+K)"
|
||
autocomplete="off">
|
||
<span class="unified-search-icon">🔍</span>
|
||
</div>
|
||
<div id="unified-search-results" class="unified-search-results hidden">
|
||
<div class="unified-search-results-header">
|
||
<span class="results-count"></span>
|
||
<button class="close-results" title="Close (Esc)">×</button>
|
||
</div>
|
||
<div class="unified-search-results-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-actions">
|
||
<a href="#" id="homepage-link" class="btn btn-secondary" style="display: none;">
|
||
<span class="btn-icon">🖥️</span>
|
||
<span class="btn-text">Homepage</span>
|
||
</a>
|
||
|
||
<a href="/shifts.html" class="btn btn-secondary">
|
||
<span class="btn-icon">📅</span>
|
||
<span class="btn-text">View Shifts</span>
|
||
</a>
|
||
<div class="user-info">
|
||
<span class="user-email" id="user-email">Loading...</span>
|
||
</div>
|
||
<div class="location-count" id="location-count">0 locations</div>
|
||
<!-- Add logout button for desktop -->
|
||
<button id="logout-btn" class="btn btn-danger">
|
||
<span class="btn-icon">🚪</span>
|
||
<span class="btn-text">Logout</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Mobile dropdown menu -->
|
||
<div class="mobile-dropdown" id="mobile-dropdown">
|
||
<button class="mobile-dropdown-toggle" id="mobile-dropdown-toggle">
|
||
<span>☰</span>
|
||
</button>
|
||
<div class="mobile-dropdown-content" id="mobile-dropdown-content">
|
||
<div class="mobile-dropdown-item">
|
||
<a href="/shifts.html" style="color: inherit; text-decoration: none;">📅 View Shifts</a>
|
||
</div>
|
||
|
||
<!-- Admin link will be added here dynamically if user is admin -->
|
||
<div class="mobile-dropdown-item location-info">
|
||
<span id="mobile-location-count">0 locations</span>
|
||
</div>
|
||
<div class="mobile-dropdown-item user-info">
|
||
<span id="mobile-user-email">Loading...</span>
|
||
</div>
|
||
<!-- Add logout button for mobile -->
|
||
<div class="mobile-dropdown-item">
|
||
<button id="mobile-logout-btn" style="background: none; border: none; color: inherit; font-size: inherit; cursor: pointer; width: 100%; text-align: left;">
|
||
🚪 Logout
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Map container -->
|
||
<div id="map-container">
|
||
<div id="map"></div>
|
||
|
||
<!-- Desktop map controls -->
|
||
<div class="map-controls">
|
||
<button id="toggle-start-location-btn" class="btn btn-secondary">
|
||
<span class="btn-icon">🏠</span>
|
||
<span class="btn-text">Hide Start Location</span>
|
||
</button>
|
||
<button id="toggle-edmonton-layer-btn" class="btn btn-secondary" title="Toggle City of Edmonton suite/apartment data">
|
||
<span class="btn-icon">🚪</span>
|
||
<span class="btn-text">City Data</span>
|
||
</button>
|
||
<button id="refresh-btn" class="btn btn-primary">
|
||
<span class="btn-icon">🔄</span>
|
||
<span class="btn-text">Refresh</span>
|
||
</button>
|
||
<button id="geolocate-btn" class="btn btn-secondary">
|
||
<span class="btn-icon">📍</span>
|
||
<span class="btn-text">Find Me</span>
|
||
</button>
|
||
<button id="add-location-btn" class="btn btn-success">
|
||
<span class="btn-icon">➕</span>
|
||
<span class="btn-text">Add Location Here</span>
|
||
</button>
|
||
<button id="fullscreen-btn" class="btn btn-secondary">
|
||
<span class="btn-icon">⛶</span>
|
||
<span class="btn-text">Fullscreen</span>
|
||
</button>
|
||
<!-- Add cut selector with multi-select support -->
|
||
<div class="cut-selector-container">
|
||
<button id="cut-selector" class="cut-selector">
|
||
Select map overlays...
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Mobile floating sidebar -->
|
||
<div class="mobile-sidebar" id="mobile-sidebar">
|
||
<button id="mobile-toggle-start-location-btn" class="btn btn-secondary" title="Toggle Start Location">
|
||
🏠
|
||
</button>
|
||
<button id="mobile-refresh-btn" class="btn btn-primary" title="Refresh">
|
||
🔄
|
||
</button>
|
||
<button id="mobile-geolocate-btn" class="btn btn-secondary" title="Find Me">
|
||
📍
|
||
</button>
|
||
<button id="mobile-add-location-btn" class="btn btn-success" title="Add Location">
|
||
➕
|
||
</button>
|
||
<button id="mobile-toggle-edmonton-layer-btn" class="btn btn-secondary" title="Toggle Edmonton Suites">
|
||
🚪
|
||
</button>
|
||
|
||
<!-- Add mobile overlay button -->
|
||
<button id="mobile-overlay-btn" class="btn btn-secondary" title="Map Overlays">
|
||
✂️
|
||
</button>
|
||
|
||
<button id="mobile-fullscreen-btn" class="btn btn-secondary" title="Fullscreen">
|
||
⛶
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Add cut legend -->
|
||
<div id="cut-legend" class="cut-legend">
|
||
<div id="cut-legend-content" class="cut-legend-content"></div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Crosshair for location selection -->
|
||
<div id="crosshair" class="crosshair hidden">
|
||
<div class="crosshair-x"></div>
|
||
<div class="crosshair-y"></div>
|
||
<div class="crosshair-info">Click to add location</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">
|
||
<!-- Hidden ID field - don't include in form data -->
|
||
<input type="hidden" id="edit-location-id" data-exclude="true">
|
||
<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="confirm-address-edit-btn">
|
||
📍 Confirm Address
|
||
</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="Regular">Regular</option>
|
||
<option value="Large">Large</option>
|
||
<option value="Unsure">Unsure</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" id="save-edit-location-btn">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="confirm-address-add-btn">
|
||
📍 Confirm Address
|
||
</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="Regular">Regular</option>
|
||
<option value="Large">Large</option>
|
||
<option value="Unsure">Unsure</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" id="save-location-btn">
|
||
Save Location
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile overlay modal -->
|
||
<div id="mobile-overlay-modal" class="modal hidden">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Map Overlays</h2>
|
||
<button class="modal-close" data-action="close-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="overlay-actions">
|
||
<button class="btn btn-primary btn-sm" data-action="show-all">Show All</button>
|
||
<button class="btn btn-secondary btn-sm" data-action="hide-all">Hide All</button>
|
||
</div>
|
||
<div id="mobile-overlay-list" class="mobile-overlay-list">
|
||
<!-- Will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div id="loading" class="loading-overlay">
|
||
<div class="spinner"></div>
|
||
<p>Authenticating...</p>
|
||
<p class="loading-patience-message">
|
||
Loading map can take several seconds, even up to a minute. Please be patient.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||
crossorigin=""></script>
|
||
|
||
<!-- Leaflet MarkerCluster JS -->
|
||
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||
|
||
<!-- Cache Management -->
|
||
<script src="js/cache-manager.js"></script>
|
||
|
||
<!-- Listmonk Status -->
|
||
<script src="js/listmonk-status.js"></script>
|
||
|
||
<!-- Application JavaScript -->
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|