Add LIFECYCLE filtering, street exceptions UI, address matching improvements, map viewer fixes

2026-04-09 09:36:14 -07:00
parent 449a182fa4
commit e8267b1eee
10 changed files with 544 additions and 33 deletions
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Street Exceptions — OSM Import Tools</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        html, body {
+            height: 100%;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #eef0f3;
+            color: #222;
+        }
+
+        .page { display: flex; flex-direction: column; height: 100%; }
+
+        /* ── Top bar (matches index.html) ── */
+        .topbar {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 16px;
+            background: #1a1a2e;
+            flex-shrink: 0;
+        }
+
+        .topbar h1 { font-size: 16px; font-weight: 700; color: #fff; }
+
+        .topbar-sep { width: 1px; height: 20px; background: #ffffff30; }
+
+        .btn-topbar {
+            padding: 5px 12px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            background: #ffffff18;
+            color: #ddd;
+            text-decoration: none;
+        }
+
+        .btn-topbar:hover { background: #ffffff30; }
+        .btn-topbar.active { background: #ffffff30; color: #fff; }
+
+        .btn-topbar.purple { background: #6f42c1; color: white; }
+        .btn-topbar.purple:hover { background: #5a32a3; }
+
+        /* ── Main content ── */
+        .content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+        }
+
+        .card {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            max-width: 860px;
+            overflow: hidden;
+        }
+
+        .card-header {
+            padding: 14px 20px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .card-header h2 {
+            font-size: 15px;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .card-header p {
+            font-size: 12px;
+            color: #888;
+            margin-top: 2px;
+        }
+
+        /* ── Status bar ── */
+        #status {
+            padding: 9px 20px;
+            font-size: 13px;
+            display: none;
+            border-bottom: 1px solid #eee;
+        }
+
+        #status.success { background: #d4edda; color: #155724; }
+        #status.error   { background: #f8d7da; color: #721c24; }
+        #status.info    { background: #d1ecf1; color: #0c5460; }
+
+        /* ── Table ── */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        thead tr {
+            background: #f8f9fa;
+            border-bottom: 2px solid #eee;
+        }
+
+        th {
+            padding: 9px 14px;
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #888;
+            text-align: left;
+        }
+
+        th:last-child { width: 48px; text-align: center; }
+
+        tbody tr { border-bottom: 1px solid #f3f3f3; }
+        tbody tr:last-child { border-bottom: none; }
+        tbody tr:hover { background: #fafafa; }
+
+        td { padding: 6px 14px; }
+
+        td input {
+            width: 100%;
+            border: none;
+            background: transparent;
+            font-size: 13px;
+            color: #333;
+            padding: 3px 0;
+            outline: none;
+            font-family: inherit;
+        }
+
+        td input:focus {
+            border-bottom: 2px solid #17a2b8;
+            margin-bottom: -2px;
+        }
+
+        td input::placeholder { color: #ccc; }
+
+        td:last-child { text-align: center; padding: 6px 8px; }
+
+        .btn-delete {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: #ccc;
+            font-size: 16px;
+            line-height: 1;
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+
+        .btn-delete:hover { color: #dc3545; background: #fdecea; }
+
+        /* ── Footer actions ── */
+        .card-footer {
+            padding: 12px 20px;
+            border-top: 1px solid #eee;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 7px 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 600;
+        }
+
+        .btn-add  { background: #e8f5e9; color: #2e7d32; }
+        .btn-add:hover { background: #c8e6c9; }
+
+        .btn-save { background: #17a2b8; color: white; }
+        .btn-save:hover { filter: brightness(0.9); }
+    </style>
+</head>
+<body>
+<div class="page">
+
+    <div class="topbar">
+        <h1>OSM Import Tools</h1>
+        <div class="topbar-sep"></div>
+        <a href="/" class="btn-topbar">&#8592; Back</a>
+        <div style="flex:1"></div>
+        <a href="/exceptions" class="btn-topbar active">Street Exceptions</a>
+        <a href="/map" class="btn-topbar purple">Open Map Viewer</a>
+    </div>
+
+    <div class="content">
+        <div class="card">
+            <div class="card-header">
+                <div>
+                    <h2>Street Name Exceptions</h2>
+                    <p>Applied to county address data after formatting, before comparison and import. Match is exact (case-sensitive).</p>
+                </div>
+            </div>
+
+            <div id="status"></div>
+
+            <table id="exceptionsTable">
+                <thead>
+                    <tr>
+                        <th>County data (from)</th>
+                        <th>Corrected name (to)</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody id="tableBody">
+                    <tr><td colspan="3" style="padding:20px;text-align:center;color:#aaa;font-size:13px">Loading...</td></tr>
+                </tbody>
+            </table>
+
+            <div class="card-footer">
+                <button class="btn btn-add" onclick="addRow()">+ Add row</button>
+                <button class="btn btn-save" onclick="save()">Save</button>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<script>
+    let corrections = [];
+
+    function showStatus(msg, type) {
+        const el = document.getElementById('status');
+        el.textContent = msg;
+        el.className = type;
+        el.style.display = 'block';
+        if (type === 'success') setTimeout(() => el.style.display = 'none', 3000);
+    }
+
+    function renderTable() {
+        const tbody = document.getElementById('tableBody');
+        if (corrections.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" style="padding:20px;text-align:center;color:#aaa;font-size:13px">No exceptions yet. Add a row to get started.</td></tr>';
+            return;
+        }
+        tbody.innerHTML = corrections.map((c, i) => `
+            <tr data-index="${i}">
+                <td><input type="text" value="${esc(c.from)}" placeholder="County street name"
+                           oninput="corrections[${i}].from = this.value"></td>
+                <td><input type="text" value="${esc(c.to)}" placeholder="Corrected street name"
+                           oninput="corrections[${i}].to = this.value"></td>
+                <td><button class="btn-delete" onclick="deleteRow(${i})" title="Delete">&#x2715;</button></td>
+            </tr>
+        `).join('');
+    }
+
+    function esc(s) {
+        return (s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
+    }
+
+    function addRow() {
+        corrections.push({ from: '', to: '' });
+        renderTable();
+        // Focus the new "from" input
+        const rows = document.getElementById('tableBody').querySelectorAll('tr');
+        const lastRow = rows[rows.length - 1];
+        if (lastRow) lastRow.querySelector('input').focus();
+    }
+
+    function deleteRow(i) {
+        corrections.splice(i, 1);
+        renderTable();
+    }
+
+    function save() {
+        // Collect current input values (in case user typed without triggering oninput)
+        const rows = document.getElementById('tableBody').querySelectorAll('tr[data-index]');
+        rows.forEach(row => {
+            const i = parseInt(row.dataset.index);
+            const inputs = row.querySelectorAll('input');
+            corrections[i].from = inputs[0].value;
+            corrections[i].to = inputs[1].value;
+        });
+
+        // Validate
+        for (const c of corrections) {
+            if (!c.from.trim() || !c.to.trim()) {
+                showStatus('All rows must have both "from" and "to" values filled in.', 'error');
+                return;
+            }
+        }
+
+        fetch('/api/exceptions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ corrections })
+        })
+        .then(r => r.json())
+        .then(data => {
+            if (data.error) {
+                showStatus(`Error: ${data.error}`, 'error');
+            } else {
+                showStatus('Saved successfully.', 'success');
+            }
+        })
+        .catch(err => showStatus(`Error: ${err.message}`, 'error'));
+    }
+
+    // Load on page open
+    fetch('/api/exceptions')
+        .then(r => r.json())
+        .then(data => {
+            corrections = data.corrections || [];
+            renderTable();
+        })
+        .catch(err => {
+            document.getElementById('tableBody').innerHTML =
+                `<tr><td colspan="3" style="padding:20px;text-align:center;color:#c00">Failed to load: ${err.message}</td></tr>`;
+        });
+</script>
+</body>
+</html>
@@ -330,6 +330,7 @@
        <button class="btn-topbar" onclick="runScript('make-new-latest', '')">New Latest</button>
        <button class="btn-topbar" onclick="runScript('ls', '')">List Files</button>
        <div style="flex:1"></div>
+        <a href="/exceptions" class="btn-topbar">Street Exceptions</a>
        <a href="/map" class="btn-topbar purple">Open Map Viewer</a>
    </div>

@@ -294,7 +294,7 @@
            </div>
            <div class="layer-item" draggable="true" data-layer="osm">
                <input type="checkbox" id="osmToggle" checked>
-                <span>OSM Roads (Gray)</span>
+                <span>OSM Layer (Gray)</span>
            </div>
            <div class="layer-item" draggable="true" data-layer="county">
                <input type="checkbox" id="countyToggle">
@@ -313,7 +313,11 @@
        </label>
        <label>
            <input type="checkbox" id="hideService">
-            Hide highway=service
+            Hide service &amp; track
+        </label>
+        <label>
+            <input type="checkbox" id="hideUnclassified">
+            Hide unclassified
        </label>

        <h3 style="margin-top: 15px;">Selection Mode</h3>