diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..8a607c8
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,143 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Running the Application
+```bash
+# Install dependencies
+npm install
+
+# Start the server (production mode)
+npm start
+
+# Start with auto-reload (development mode)
+npm run dev
+
+# Development with CSS watching (recommended for frontend work)
+npm run dev-with-css
+```
+
+The application runs on port 3000 by default. Visit http://localhost:3000 to view the website.
+
+### CSS Development
+CSS is generated from SCSS and should NOT be committed to git.
+```bash
+# Build CSS once (compressed for production)
+npm run build-css
+
+# Build CSS with source maps (for development)
+npm run build-css:dev
+
+# Watch SCSS files and auto-compile changes
+npm run watch-css
+```
+
+### Testing
+```bash
+# Run all tests
+npm test
+
+# Run tests with coverage report
+npm run test:coverage
+```
+
+### Environment Setup
+Before running the application, you must configure environment variables:
+```bash
+cp .env.example .env
+# Edit .env to add your MapBox token and admin password
+```
+
+Required environment variables:
+- `MAPBOX_ACCESS_TOKEN`: MapBox API token for geocoding (get free token at https://account.mapbox.com/access-tokens/)
+- `ADMIN_PASSWORD`: Password for admin panel access at /admin
+- `PORT`: Server port (default: 3000)
+
+## Architecture Overview
+
+### Backend (Node.js/Express)
+- **server.js**: Main Express server with modular route architecture
+ - Uses two SQLite databases: `icewatch.db` (locations) and `profanity.db` (content moderation)
+ - Automatic cleanup of reports older than 48 hours via node-cron
+ - Bearer token authentication for admin endpoints
+ - Environment variable configuration via dotenv
+
+### Route Architecture
+Routes are organized as factory functions accepting dependencies:
+
+- **routes/config.js**: Public API configuration endpoints
+- **routes/locations.js**: Location submission and retrieval with profanity filtering
+- **routes/admin.js**: Admin panel functionality with authentication middleware
+
+### Database Schema
+**Main Database (`icewatch.db`)**:
+```sql
+CREATE TABLE locations (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ address TEXT NOT NULL,
+ latitude REAL,
+ longitude REAL,
+ timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+ description TEXT,
+ persistent INTEGER DEFAULT 0,
+ created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Profanity Database (`profanity.db`)**:
+Managed by the `ProfanityFilter` class for content moderation.
+
+### Frontend (Vanilla JavaScript)
+Multiple map implementations for flexibility:
+
+- **public/app.js**: Main implementation using Leaflet.js
+ - Auto-detects available geocoding services (MapBox preferred, Nominatim fallback)
+
+- **public/app-mapbox.js**: MapBox GL JS implementation for enhanced features
+
+- **public/app-google.js**: Google Maps implementation (alternative)
+
+- **public/admin.js**: Admin panel functionality
+ - Location management (view, edit, delete)
+ - Persistent location toggle
+ - Profanity word management
+
+- **public/utils.js**: Shared utilities across implementations
+
+### API Endpoints
+
+Public endpoints:
+- `GET /api/config`: Returns MapBox token for frontend geocoding
+- `GET /api/locations`: Active locations (< 48 hours old or persistent)
+- `POST /api/locations`: Submit new location report (with profanity filtering)
+
+Admin endpoints (require Bearer token):
+- `POST /api/admin/login`: Authenticate and receive token
+- `GET /api/admin/locations`: All locations including expired
+- `PUT /api/admin/locations/:id`: Update location details
+- `PATCH /api/admin/locations/:id/persistent`: Toggle persistent status
+- `DELETE /api/admin/locations/:id`: Delete location
+- Profanity management: `/api/admin/profanity-words` (GET, POST, PUT, DELETE)
+
+### SCSS Organization
+SCSS files are in `src/scss/`:
+- `main.scss`: Entry point importing all other files
+- `_variables.scss`: Theme colors and configuration
+- `_mixins.scss`: Reusable style patterns
+- `pages/`: Page-specific styles (home, admin, privacy)
+- `components/`: Component styles (navbar, map, cards, forms)
+
+### Key Design Patterns
+
+1. **Modular Route Architecture**: Routes accept dependencies as parameters for testability
+2. **Dual Database Design**: Separate databases for application data and content moderation
+3. **Graceful Degradation**: Fallback geocoding providers and error handling
+4. **Automated Maintenance**: Cron-based cleanup of expired reports
+5. **Security**: Server-side content filtering, environment-based configuration
+
+### Deployment
+- Automated deployment script for Debian 12 ARM64 in `scripts/deploy.sh`
+- Caddy reverse proxy configuration in `scripts/Caddyfile`
+- Systemd service files for process management
\ No newline at end of file
diff --git a/models/Location.js b/models/Location.js
new file mode 100644
index 0000000..8d5c5d7
--- /dev/null
+++ b/models/Location.js
@@ -0,0 +1,131 @@
+class Location {
+ constructor(db) {
+ this.db = db;
+ }
+
+ async getActive(hoursThreshold = 48) {
+ const cutoffTime = new Date(Date.now() - hoursThreshold * 60 * 60 * 1000).toISOString();
+ return new Promise((resolve, reject) => {
+ this.db.all(
+ 'SELECT * FROM locations WHERE created_at > ? OR persistent = 1 ORDER BY created_at DESC',
+ [cutoffTime],
+ (err, rows) => {
+ if (err) return reject(err);
+ resolve(rows);
+ }
+ );
+ });
+ }
+
+ async getAll() {
+ return new Promise((resolve, reject) => {
+ this.db.all(
+ 'SELECT id, address, description, latitude, longitude, persistent, created_at FROM locations ORDER BY created_at DESC',
+ [],
+ (err, rows) => {
+ if (err) return reject(err);
+ resolve(rows);
+ }
+ );
+ });
+ }
+
+ async create(location) {
+ const { address, latitude, longitude, description } = location;
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'INSERT INTO locations (address, latitude, longitude, description) VALUES (?, ?, ?, ?)',
+ [address, latitude, longitude, description],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ id: this.lastID, ...location });
+ }
+ );
+ });
+ }
+
+ async update(id, location) {
+ const { address, latitude, longitude, description } = location;
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'UPDATE locations SET address = ?, latitude = ?, longitude = ?, description = ? WHERE id = ?',
+ [address, latitude, longitude, description, id],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async togglePersistent(id, persistent) {
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'UPDATE locations SET persistent = ? WHERE id = ?',
+ [persistent ? 1 : 0, id],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async delete(id) {
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'DELETE FROM locations WHERE id = ?',
+ [id],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async cleanupExpired(hoursThreshold = 48) {
+ const cutoffTime = new Date(Date.now() - hoursThreshold * 60 * 60 * 1000).toISOString();
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'DELETE FROM locations WHERE created_at < ? AND persistent = 0',
+ [cutoffTime],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async initializeTable() {
+ return new Promise((resolve, reject) => {
+ this.db.serialize(() => {
+ this.db.run(`
+ CREATE TABLE IF NOT EXISTS locations (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ address TEXT NOT NULL,
+ latitude REAL,
+ longitude REAL,
+ timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+ description TEXT,
+ created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+ )
+ `, (err) => {
+ if (err) return reject(err);
+
+ this.db.run(`
+ ALTER TABLE locations ADD COLUMN persistent INTEGER DEFAULT 0
+ `, (err) => {
+ if (err && !err.message.includes('duplicate column name')) {
+ return reject(err);
+ }
+ resolve();
+ });
+ });
+ });
+ });
+ }
+}
+
+module.exports = Location;
\ No newline at end of file
diff --git a/models/ProfanityWord.js b/models/ProfanityWord.js
new file mode 100644
index 0000000..76ed356
--- /dev/null
+++ b/models/ProfanityWord.js
@@ -0,0 +1,96 @@
+class ProfanityWord {
+ constructor(db) {
+ this.db = db;
+ }
+
+ async getAll() {
+ return new Promise((resolve, reject) => {
+ this.db.all(
+ 'SELECT id, word, severity, category, created_at, created_by FROM profanity_words ORDER BY created_at DESC',
+ [],
+ (err, rows) => {
+ if (err) return reject(err);
+ resolve(rows);
+ }
+ );
+ });
+ }
+
+ async loadWords() {
+ return new Promise((resolve, reject) => {
+ this.db.all(
+ 'SELECT word, severity, category FROM profanity_words',
+ [],
+ (err, rows) => {
+ if (err) return reject(err);
+ resolve(rows);
+ }
+ );
+ });
+ }
+
+ async create(word, severity, category, createdBy = 'admin') {
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'INSERT INTO profanity_words (word, severity, category, created_by) VALUES (?, ?, ?, ?)',
+ [word.toLowerCase(), severity, category, createdBy],
+ function(err) {
+ if (err) return reject(err);
+ resolve({
+ id: this.lastID,
+ word: word.toLowerCase(),
+ severity,
+ category,
+ created_by: createdBy
+ });
+ }
+ );
+ });
+ }
+
+ async update(id, word, severity, category) {
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'UPDATE profanity_words SET word = ?, severity = ?, category = ? WHERE id = ?',
+ [word.toLowerCase(), severity, category, id],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async delete(id) {
+ return new Promise((resolve, reject) => {
+ this.db.run(
+ 'DELETE FROM profanity_words WHERE id = ?',
+ [id],
+ function(err) {
+ if (err) return reject(err);
+ resolve({ changes: this.changes });
+ }
+ );
+ });
+ }
+
+ async initializeTable() {
+ return new Promise((resolve, reject) => {
+ this.db.run(`
+ CREATE TABLE IF NOT EXISTS profanity_words (
+ id INTEGER PRIMARY KEY AUTOINCREMENT,
+ word TEXT NOT NULL UNIQUE,
+ severity TEXT NOT NULL,
+ category TEXT NOT NULL,
+ created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+ created_by TEXT DEFAULT 'system'
+ )
+ `, (err) => {
+ if (err) return reject(err);
+ resolve();
+ });
+ });
+ }
+}
+
+module.exports = ProfanityWord;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1e1742b..852b6cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
"": {
"name": "great-lakes-ice-report",
"version": "1.0.0",
+ "hasInstallScript": true,
"license": "MIT",
"dependencies": {
"cors": "^2.8.5",
diff --git a/public/app-mapbox-refactored.js b/public/app-mapbox-refactored.js
new file mode 100644
index 0000000..3726a93
--- /dev/null
+++ b/public/app-mapbox-refactored.js
@@ -0,0 +1,350 @@
+/**
+ * MapBox implementation with table view and theme toggle using MapBase
+ */
+class MapBoxApp extends MapBase {
+ constructor() {
+ super();
+ this.config = { hasMapbox: false, mapboxAccessToken: null };
+ this.currentView = 'map'; // 'map' or 'table'
+ this.initializeConfig();
+ this.initializeMapBoxFeatures();
+ }
+
+ /**
+ * Initialize API configuration
+ */
+ async initializeConfig() {
+ try {
+ const configResponse = await fetch('/api/config');
+ this.config = await configResponse.json();
+ console.log('π§ API Configuration:', this.config.hasMapbox ? 'MapBox enabled' : 'Using Nominatim fallback');
+ } catch (error) {
+ console.warn('Failed to load API configuration, using fallback');
+ }
+
+ this.initializeMap();
+ }
+
+ /**
+ * Initialize MapBox-specific features
+ */
+ initializeMapBoxFeatures() {
+ this.initializeViewToggle();
+ this.initializeThemeToggle();
+ }
+
+ /**
+ * Initialize the Leaflet map
+ */
+ initializeMap() {
+ this.map = L.map('map').setView([42.9634, -85.6681], 10);
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ }).addTo(this.map);
+ }
+
+ /**
+ * Initialize view toggle functionality
+ */
+ initializeViewToggle() {
+ const mapViewBtn = document.getElementById('map-view-btn');
+ const tableViewBtn = document.getElementById('table-view-btn');
+
+ if (mapViewBtn && tableViewBtn) {
+ mapViewBtn.addEventListener('click', () => this.switchView('map'));
+ tableViewBtn.addEventListener('click', () => this.switchView('table'));
+ }
+ }
+
+ /**
+ * Initialize theme toggle functionality
+ */
+ initializeThemeToggle() {
+ const themeToggle = document.getElementById('theme-toggle');
+ if (themeToggle) {
+ themeToggle.addEventListener('click', () => this.toggleTheme());
+ }
+
+ // Apply saved theme on load
+ const savedTheme = localStorage.getItem('theme');
+ if (savedTheme) {
+ document.body.dataset.theme = savedTheme;
+ }
+ }
+
+ /**
+ * Toggle between light and dark theme
+ */
+ toggleTheme() {
+ const currentTheme = document.body.dataset.theme || 'light';
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+
+ document.body.dataset.theme = newTheme;
+ localStorage.setItem('theme', newTheme);
+ }
+
+ /**
+ * Switch between map and table view
+ */
+ switchView(viewType) {
+ this.currentView = viewType;
+
+ const mapView = document.getElementById('map-view');
+ const tableView = document.getElementById('table-view');
+ const mapViewBtn = document.getElementById('map-view-btn');
+ const tableViewBtn = document.getElementById('table-view-btn');
+
+ if (viewType === 'map') {
+ mapView.style.display = 'block';
+ tableView.style.display = 'none';
+ mapViewBtn.classList.add('active');
+ tableViewBtn.classList.remove('active');
+
+ // Invalidate map size after showing
+ setTimeout(() => this.map.invalidateSize(), 100);
+ } else {
+ mapView.style.display = 'none';
+ tableView.style.display = 'block';
+ mapViewBtn.classList.remove('active');
+ tableViewBtn.classList.add('active');
+ }
+ }
+
+ /**
+ * Create custom marker for location
+ */
+ createMarker(location) {
+ const isPersistent = !!location.persistent;
+ const timeAgo = window.getTimeAgo ? window.getTimeAgo(location.created_at) : '';
+ const persistentText = isPersistent ? '
π Persistent Report' : '';
+
+ const customIcon = this.createCustomIcon(isPersistent);
+
+ const marker = L.marker([location.latitude, location.longitude], {
+ icon: customIcon
+ })
+ .addTo(this.map)
+ .bindPopup(`${location.address}
${location.description || 'No additional details'}
Reported ${timeAgo}${persistentText}`);
+
+ return marker;
+ }
+
+ /**
+ * Create custom icon for markers
+ */
+ createCustomIcon(isPersistent = false) {
+ const iconColor = isPersistent ? '#28a745' : '#dc3545';
+ const iconSymbol = isPersistent ? 'π' : 'β οΈ';
+
+ return L.divIcon({
+ className: 'custom-marker',
+ html: `
+ ${iconSymbol}
+ `,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15],
+ popupAnchor: [0, -15]
+ });
+ }
+
+ /**
+ * Display locations (override to handle table view)
+ */
+ displayLocations(locations) {
+ super.displayLocations(locations);
+
+ // Update table view if currently active
+ if (this.currentView === 'table') {
+ this.renderTable(locations);
+ }
+ }
+
+ /**
+ * Render table view
+ */
+ renderTable(locations) {
+ const reportsTableBody = document.getElementById('reports-tbody');
+ const tableLocationCount = document.getElementById('table-location-count');
+
+ if (!reportsTableBody || !locations || locations.length === 0) {
+ if (reportsTableBody) {
+ reportsTableBody.innerHTML = '| No active reports |
';
+ }
+ if (tableLocationCount) {
+ tableLocationCount.textContent = '0 active reports';
+ }
+ return;
+ }
+
+ // Sort by most recent first
+ const sortedLocations = [...locations].sort((a, b) =>
+ new Date(b.created_at) - new Date(a.created_at)
+ );
+
+ const tableHTML = sortedLocations.map(location => {
+ const timeAgo = window.getTimeAgo ? window.getTimeAgo(location.created_at) : '';
+ const timeRemaining = this.getTimeRemaining(location.created_at, location.persistent);
+ const remainingClass = this.getRemainingClass(location.created_at, location.persistent);
+ const reportedTime = new Date(location.created_at).toLocaleString();
+
+ return `
+
+ | ${location.address} |
+
+ ${location.description || 'No additional details'}
+ |
+ ${timeAgo} |
+ ${timeRemaining} |
+
+ `;
+ }).join('');
+
+ reportsTableBody.innerHTML = tableHTML;
+ tableLocationCount.textContent = `${locations.length} active report${locations.length !== 1 ? 's' : ''}`;
+ }
+
+ /**
+ * Get time remaining for a report
+ */
+ getTimeRemaining(createdAt, isPersistent) {
+ if (isPersistent) {
+ return 'βΎοΈ Persistent';
+ }
+
+ const created = new Date(createdAt);
+ const now = new Date();
+ const elapsed = now - created;
+ const remaining = (48 * 60 * 60 * 1000) - elapsed; // 48 hours in ms
+
+ if (remaining <= 0) {
+ return 'β° Expired';
+ }
+
+ const hours = Math.floor(remaining / (60 * 60 * 1000));
+ const minutes = Math.floor((remaining % (60 * 60 * 1000)) / (60 * 1000));
+
+ if (hours >= 24) {
+ const days = Math.floor(hours / 24);
+ const remainingHours = hours % 24;
+ return `${days}d ${remainingHours}h`;
+ }
+
+ return `${hours}h ${minutes}m`;
+ }
+
+ /**
+ * Get CSS class for time remaining
+ */
+ getRemainingClass(createdAt, isPersistent) {
+ if (isPersistent) {
+ return 'persistent';
+ }
+
+ const created = new Date(createdAt);
+ const now = new Date();
+ const elapsed = now - created;
+ const remaining = (48 * 60 * 60 * 1000) - elapsed;
+
+ if (remaining <= 0) {
+ return 'expired';
+ } else if (remaining < 6 * 60 * 60 * 1000) { // Less than 6 hours
+ return 'expiring-soon';
+ } else if (remaining < 24 * 60 * 60 * 1000) { // Less than 24 hours
+ return 'expiring-today';
+ }
+
+ return 'fresh';
+ }
+
+ /**
+ * Search for addresses using MapBox or Nominatim fallback
+ */
+ async searchAddress(query) {
+ try {
+ let results = [];
+
+ // Try MapBox first if available
+ if (this.config.hasMapbox && this.config.mapboxAccessToken) {
+ try {
+ results = await this.searchMapBox(query);
+ if (results.length > 0) {
+ this.showAutocomplete(results);
+ return;
+ }
+ } catch (error) {
+ console.warn('MapBox search failed, falling back to Nominatim:', error);
+ }
+ }
+
+ // Fallback to Nominatim
+ results = await this.searchNominatim(query);
+ this.showAutocomplete(results);
+
+ } catch (error) {
+ console.error('Error searching addresses:', error);
+ this.showAutocomplete([]);
+ }
+ }
+
+ /**
+ * Search using MapBox API
+ */
+ async searchMapBox(query) {
+ const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${this.config.mapboxAccessToken}&country=us&proximity=-85.6681,42.9634&limit=5`);
+ const data = await response.json();
+
+ if (data.features && data.features.length > 0) {
+ return data.features.map(feature => ({
+ display_name: feature.place_name,
+ lat: feature.center[1],
+ lon: feature.center[0]
+ }));
+ }
+
+ return [];
+ }
+
+ /**
+ * Search using Nominatim as fallback
+ */
+ async searchNominatim(query) {
+ const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&extratags=1&limit=5&q=${encodeURIComponent(query + ', Michigan')}`);
+ const data = await response.json();
+
+ if (data && data.length > 0) {
+ return data.slice(0, 5);
+ }
+
+ return [];
+ }
+
+ /**
+ * Handle submission errors (override to handle profanity rejection)
+ */
+ handleSubmitError(data) {
+ if (data.error === 'Submission rejected' && data.message) {
+ // Enhanced profanity rejection handling
+ this.showMessage(data.message, 'error', 10000);
+ } else {
+ super.handleSubmitError(data);
+ }
+ }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ new MapBoxApp();
+});
\ No newline at end of file
diff --git a/public/app-refactored.js b/public/app-refactored.js
new file mode 100644
index 0000000..2aa5e36
--- /dev/null
+++ b/public/app-refactored.js
@@ -0,0 +1,221 @@
+/**
+ * Nominatim-only implementation using MapBase
+ */
+class NominatimMapApp extends MapBase {
+ constructor() {
+ super();
+ this.initializeMap();
+ }
+
+ /**
+ * Initialize the Leaflet map
+ */
+ initializeMap() {
+ this.map = L.map('map').setView([42.9634, -85.6681], 10);
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 18,
+ }).addTo(this.map);
+ }
+
+ /**
+ * Create custom marker for location
+ */
+ createMarker(location) {
+ const isPersistent = !!location.persistent;
+ const timeAgo = window.getTimeAgo ? window.getTimeAgo(location.created_at) : '';
+ const persistentText = isPersistent ? '
π Persistent Report' : '';
+
+ const customIcon = this.createCustomIcon(isPersistent);
+
+ const marker = L.marker([location.latitude, location.longitude], {
+ icon: customIcon
+ })
+ .addTo(this.map)
+ .bindPopup(`${location.address}
${location.description || 'No additional details'}
Reported ${timeAgo}${persistentText}`);
+
+ return marker;
+ }
+
+ /**
+ * Create custom icon for markers
+ */
+ createCustomIcon(isPersistent = false) {
+ const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+ const iconSymbol = isPersistent ? 'π' : 'β οΈ'; // Lock for persistent, warning for temporary
+
+ return L.divIcon({
+ className: 'custom-marker',
+ html: `
+ ${iconSymbol}
+ `,
+ iconSize: [30, 30],
+ iconAnchor: [15, 15],
+ popupAnchor: [0, -15]
+ });
+ }
+
+ /**
+ * Search for addresses using Nominatim
+ */
+ async searchAddress(query) {
+ try {
+ // Generate multiple search variations for better results
+ const searches = [
+ query, // Original query
+ query.replace(' & ', ' and '), // Replace & with 'and'
+ query.replace(' and ', ' & '), // Replace 'and' with &
+ query.replace(' at ', ' & '), // Replace 'at' with &
+ `${query}, Michigan`, // Add Michigan if not present
+ `${query}, MI`, // Add MI if not present
+ ];
+
+ // Add street type variations
+ const streetVariations = [];
+ searches.forEach(search => {
+ streetVariations.push(search);
+ streetVariations.push(search.replace(' St ', ' Street '));
+ streetVariations.push(search.replace(' Street ', ' St '));
+ streetVariations.push(search.replace(' Ave ', ' Avenue '));
+ streetVariations.push(search.replace(' Avenue ', ' Ave '));
+ streetVariations.push(search.replace(' Rd ', ' Road '));
+ streetVariations.push(search.replace(' Road ', ' Rd '));
+ streetVariations.push(search.replace(' Blvd ', ' Boulevard '));
+ streetVariations.push(search.replace(' Boulevard ', ' Blvd '));
+ });
+
+ // Remove duplicates
+ const uniqueSearches = [...new Set(streetVariations)];
+
+ // Try each search variation until we get results
+ for (const searchQuery of uniqueSearches) {
+ try {
+ const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&extratags=1&limit=5&q=${encodeURIComponent(searchQuery)}`);
+ const data = await response.json();
+
+ if (data && data.length > 0) {
+ // Prefer results that are in Michigan/Grand Rapids
+ const michiganResults = data.filter(item =>
+ item.display_name.toLowerCase().includes('michigan') ||
+ item.display_name.toLowerCase().includes('grand rapids') ||
+ item.display_name.toLowerCase().includes(', mi')
+ );
+
+ const results = michiganResults.length > 0 ? michiganResults : data;
+ this.showAutocomplete(results.slice(0, 5));
+ return;
+ }
+ } catch (error) {
+ console.warn(`Geocoding failed for: "${searchQuery}"`, error);
+ }
+ }
+
+ // If no results found, show empty autocomplete
+ this.showAutocomplete([]);
+
+ } catch (error) {
+ console.error('Error searching addresses:', error);
+ this.showAutocomplete([]);
+ }
+ }
+
+ /**
+ * Handle form submission with enhanced geocoding
+ */
+ async handleSubmit() {
+ const address = this.addressInput.value.trim();
+ const description = this.descriptionInput.value.trim();
+
+ if (!address) {
+ this.showMessage('Please enter an address', 'error');
+ return;
+ }
+
+ // If coordinates are not set, try to geocode the address
+ let lat = parseFloat(this.addressInput.dataset.lat);
+ let lon = parseFloat(this.addressInput.dataset.lon);
+
+ if (!lat || !lon || isNaN(lat) || isNaN(lon)) {
+ // Try to geocode the current address value
+ const geocodeResult = await this.geocodeAddress(address);
+ if (geocodeResult) {
+ lat = parseFloat(geocodeResult.lat);
+ lon = parseFloat(geocodeResult.lon);
+ } else {
+ this.showMessage('Please select a valid address from the suggestions', 'error');
+ return;
+ }
+ }
+
+ // Disable submit button
+ this.submitButton.disabled = true;
+ this.submitButton.innerHTML = ' Submitting...';
+
+ try {
+ const response = await fetch('/api/locations', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ address,
+ latitude: lat,
+ longitude: lon,
+ description
+ })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ this.showMessage('Location reported successfully!', 'success');
+ this.resetForm();
+ this.refreshLocations();
+ } else {
+ this.handleSubmitError(data);
+ }
+ } catch (error) {
+ console.error('Error submitting location:', error);
+ this.showMessage('Error submitting location. Please try again.', 'error');
+ } finally {
+ this.submitButton.disabled = false;
+ this.submitButton.innerHTML = ' Report Ice';
+ }
+ }
+
+ /**
+ * Geocode an address using Nominatim
+ */
+ async geocodeAddress(address) {
+ try {
+ const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(address + ', Michigan')}`);
+ const data = await response.json();
+
+ if (data && data.length > 0) {
+ return data[0];
+ }
+
+ return null;
+ } catch (error) {
+ console.error('Error geocoding address:', error);
+ return null;
+ }
+ }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ new NominatimMapApp();
+});
\ No newline at end of file
diff --git a/public/map-base.js b/public/map-base.js
new file mode 100644
index 0000000..96b7fff
--- /dev/null
+++ b/public/map-base.js
@@ -0,0 +1,399 @@
+/**
+ * Base class for all map implementations
+ * Provides common functionality for map display, location management, and UI interactions
+ */
+class MapBase {
+ constructor() {
+ // Map instance (to be initialized by subclasses)
+ this.map = null;
+ this.currentMarkers = [];
+
+ // Autocomplete state
+ this.autocompleteTimeout = null;
+ this.selectedIndex = -1;
+ this.autocompleteResults = [];
+
+ // Update interval
+ this.updateInterval = null;
+
+ // DOM elements
+ this.addressInput = document.getElementById('address');
+ this.descriptionInput = document.getElementById('description');
+ this.submitButton = document.querySelector('.submit-btn');
+ this.messageElement = document.getElementById('message');
+ this.locationCountElement = document.getElementById('location-count');
+ this.lastUpdateElement = document.getElementById('last-update');
+ this.autocompleteContainer = document.getElementById('autocomplete');
+ this.locationsContainer = document.querySelector('.locations-container');
+
+ // Initialize event listeners
+ this.initializeEventListeners();
+
+ // Start automatic refresh
+ this.startAutoRefresh();
+ }
+
+ /**
+ * Initialize common event listeners
+ */
+ initializeEventListeners() {
+ // Form submission
+ document.getElementById('location-form').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleSubmit();
+ });
+
+ // Address input with autocomplete
+ this.addressInput.addEventListener('input', (e) => {
+ this.handleAddressInput(e);
+ });
+
+ // Keyboard navigation for autocomplete
+ this.addressInput.addEventListener('keydown', (e) => {
+ this.handleAutocompleteKeydown(e);
+ });
+
+ // Click outside to close autocomplete
+ document.addEventListener('click', (e) => {
+ if (!e.target.closest('.search-container')) {
+ this.hideAutocomplete();
+ }
+ });
+
+ // Refresh button
+ const refreshButton = document.getElementById('refresh-button');
+ if (refreshButton) {
+ refreshButton.addEventListener('click', () => {
+ this.refreshLocations();
+ });
+ }
+ }
+
+ /**
+ * Handle address input for autocomplete
+ */
+ handleAddressInput(e) {
+ clearTimeout(this.autocompleteTimeout);
+ const query = e.target.value.trim();
+
+ if (query.length < 3) {
+ this.hideAutocomplete();
+ return;
+ }
+
+ this.autocompleteTimeout = setTimeout(() => {
+ this.searchAddress(query);
+ }, 300);
+ }
+
+ /**
+ * Handle keyboard navigation in autocomplete
+ */
+ handleAutocompleteKeydown(e) {
+ if (!this.autocompleteContainer.classList.contains('show')) return;
+
+ switch(e.key) {
+ case 'ArrowDown':
+ e.preventDefault();
+ this.selectedIndex = Math.min(this.selectedIndex + 1, this.autocompleteResults.length - 1);
+ this.updateSelection();
+ break;
+ case 'ArrowUp':
+ e.preventDefault();
+ this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+ this.updateSelection();
+ break;
+ case 'Enter':
+ e.preventDefault();
+ if (this.selectedIndex >= 0) {
+ this.selectAddress(this.selectedIndex);
+ }
+ break;
+ case 'Escape':
+ this.hideAutocomplete();
+ break;
+ }
+ }
+
+ /**
+ * Search for addresses - to be implemented by subclasses
+ */
+ async searchAddress(query) {
+ // To be implemented by subclasses
+ throw new Error('searchAddress must be implemented by subclass');
+ }
+
+ /**
+ * Show autocomplete results
+ */
+ showAutocomplete(results) {
+ this.autocompleteResults = results;
+ this.selectedIndex = -1;
+
+ if (results.length === 0) {
+ this.hideAutocomplete();
+ return;
+ }
+
+ this.autocompleteContainer.innerHTML = results.map((result, index) => `
+
+ ${result.display_name || result.formatted_address || result.name}
+
+ `).join('');
+
+ // Add click handlers
+ this.autocompleteContainer.querySelectorAll('.autocomplete-item').forEach(item => {
+ item.addEventListener('click', () => {
+ this.selectAddress(parseInt(item.dataset.index));
+ });
+ });
+
+ this.autocompleteContainer.classList.add('show');
+ }
+
+ /**
+ * Hide autocomplete dropdown
+ */
+ hideAutocomplete() {
+ this.autocompleteContainer.classList.remove('show');
+ this.autocompleteContainer.innerHTML = '';
+ this.selectedIndex = -1;
+ }
+
+ /**
+ * Update visual selection in autocomplete
+ */
+ updateSelection() {
+ const items = this.autocompleteContainer.querySelectorAll('.autocomplete-item');
+ items.forEach((item, index) => {
+ item.classList.toggle('selected', index === this.selectedIndex);
+ });
+ }
+
+ /**
+ * Select an address from autocomplete
+ */
+ selectAddress(index) {
+ const result = this.autocompleteResults[index];
+ if (result) {
+ this.addressInput.value = result.display_name || result.formatted_address || result.name;
+ this.addressInput.dataset.lat = result.lat || result.latitude;
+ this.addressInput.dataset.lon = result.lon || result.longitude;
+ this.hideAutocomplete();
+ }
+ }
+
+ /**
+ * Handle form submission
+ */
+ async handleSubmit() {
+ const address = this.addressInput.value.trim();
+ const description = this.descriptionInput.value.trim();
+ const lat = parseFloat(this.addressInput.dataset.lat);
+ const lon = parseFloat(this.addressInput.dataset.lon);
+
+ if (!address) {
+ this.showMessage('Please enter an address', 'error');
+ return;
+ }
+
+ if (!lat || !lon || isNaN(lat) || isNaN(lon)) {
+ this.showMessage('Please select a valid address from the suggestions', 'error');
+ return;
+ }
+
+ // Disable submit button
+ this.submitButton.disabled = true;
+ this.submitButton.innerHTML = ' Submitting...';
+
+ try {
+ const response = await fetch('/api/locations', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ address,
+ latitude: lat,
+ longitude: lon,
+ description
+ })
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ this.showMessage('Location reported successfully!', 'success');
+ this.resetForm();
+ this.refreshLocations();
+ } else {
+ this.handleSubmitError(data);
+ }
+ } catch (error) {
+ console.error('Error submitting location:', error);
+ this.showMessage('Error submitting location. Please try again.', 'error');
+ } finally {
+ this.submitButton.disabled = false;
+ this.submitButton.innerHTML = ' Report Ice';
+ }
+ }
+
+ /**
+ * Handle submission errors
+ */
+ handleSubmitError(data) {
+ if (data.error === 'Submission rejected' && data.message) {
+ // Profanity rejection
+ this.showMessage(data.message, 'error', 10000);
+ } else {
+ this.showMessage(data.error || 'Error submitting location', 'error');
+ }
+ }
+
+ /**
+ * Reset form after successful submission
+ */
+ resetForm() {
+ this.addressInput.value = '';
+ this.addressInput.dataset.lat = '';
+ this.addressInput.dataset.lon = '';
+ this.descriptionInput.value = '';
+ }
+
+ /**
+ * Show a message to the user
+ */
+ showMessage(text, type = 'info', duration = 5000) {
+ this.messageElement.textContent = text;
+ this.messageElement.className = `message ${type} show`;
+
+ setTimeout(() => {
+ this.messageElement.classList.remove('show');
+ }, duration);
+ }
+
+ /**
+ * Clear all markers from the map
+ */
+ clearMarkers() {
+ this.currentMarkers.forEach(marker => {
+ if (this.map && marker) {
+ this.map.removeLayer(marker);
+ }
+ });
+ this.currentMarkers = [];
+ }
+
+ /**
+ * Create a marker - to be implemented by subclasses
+ */
+ createMarker(location) {
+ // To be implemented by subclasses
+ throw new Error('createMarker must be implemented by subclass');
+ }
+
+ /**
+ * Refresh locations from the server
+ */
+ async refreshLocations() {
+ try {
+ const response = await fetch('/api/locations');
+ const locations = await response.json();
+
+ this.displayLocations(locations);
+ this.updateLocationCount(locations.length);
+
+ } catch (error) {
+ console.error('Error fetching locations:', error);
+ this.showMessage('Error loading locations', 'error');
+ }
+ }
+
+ /**
+ * Display locations on the map
+ */
+ displayLocations(locations) {
+ this.clearMarkers();
+
+ locations.forEach(location => {
+ if (location.latitude && location.longitude) {
+ const marker = this.createMarker(location);
+ if (marker) {
+ this.currentMarkers.push(marker);
+ }
+ }
+ });
+
+ // Update locations list if container exists
+ if (this.locationsContainer) {
+ this.updateLocationsList(locations);
+ }
+ }
+
+ /**
+ * Update the locations list (for table view)
+ */
+ updateLocationsList(locations) {
+ if (!this.locationsContainer) return;
+
+ if (locations.length === 0) {
+ this.locationsContainer.innerHTML = 'No ice reports in the last 48 hours
';
+ return;
+ }
+
+ this.locationsContainer.innerHTML = locations.map(location => `
+
+
${location.address}
+ ${location.description ? `
${location.description}
` : ''}
+
${window.getTimeAgo ? window.getTimeAgo(location.created_at) : ''}
+
+
Refactored Map Components Test
+
+
+
Map Display
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Location |
+ Details |
+ Reported |
+ Expires |
+
+
+
+ | Loading... |
+
+
+
+
+
+ Loading... |
+ Initializing... |
+ 0 reports
+
+
+
+
+
Location Submission Form
+
+
+
+
+