location search beta 1

frontend/app.js

@@ -17,6 +17,11 @@ const state = {
     metrics: null,  // Cached metric definitions
     pagination: { page: 1, pageSize: 50, total: 0, totalPages: 0 },
     isShowingFeatured: true,  // Whether showing featured schools vs search results
+    locationSearch: {
+        active: false,
+        postcode: null,
+        radius: 5,
+    },
     loading: {
         schools: false,
         filters: false,
@@ -50,6 +55,10 @@ const elements = {
     schoolSearch: document.getElementById('school-search'),
     localAuthorityFilter: document.getElementById('local-authority-filter'),
     typeFilter: document.getElementById('type-filter'),
+    postcodeSearch: document.getElementById('postcode-search'),
+    radiusSelect: document.getElementById('radius-select'),
+    locationSearchBtn: document.getElementById('location-search-btn'),
+    clearLocationBtn: document.getElementById('clear-location-btn'),
     schoolsGrid: document.getElementById('schools-grid'),
     compareSearch: document.getElementById('compare-search'),
     compareResults: document.getElementById('compare-results'),
@@ -60,6 +69,7 @@ const elements = {
     comparisonTable: document.getElementById('comparison-table'),
     tableHeader: document.getElementById('table-header'),
     tableBody: document.getElementById('table-body'),
+    rankingArea: document.getElementById('ranking-area'),
     rankingMetric: document.getElementById('ranking-metric'),
     rankingYear: document.getElementById('ranking-year'),
     rankingsList: document.getElementById('rankings-list'),
@@ -163,6 +173,39 @@ function renderLoadingSkeleton(count, type = 'card') {
     `).join('');
 }
 
+// =============================================================================
+// ROUTING
+// =============================================================================
+
+const routes = {
+    '/': 'dashboard',
+    '/compare': 'compare',
+    '/rankings': 'rankings',
+};
+
+function navigateTo(path) {
+    // Update URL without reload
+    window.history.pushState({}, '', path);
+    handleRoute();
+}
+
+function handleRoute() {
+    const path = window.location.pathname;
+    const view = routes[path] || 'dashboard';
+    
+    // Update navigation
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.classList.toggle('active', link.dataset.view === view);
+    });
+    
+    // Update view
+    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+    const viewElement = document.getElementById(`${view}-view`);
+    if (viewElement) {
+        viewElement.classList.add('active');
+    }
+}
+
 // =============================================================================
 // INITIALIZATION
 // =============================================================================
@@ -192,10 +235,16 @@ async function init() {
     await loadRankings();
     
     setupEventListeners();
+    
+    // Handle initial route
+    handleRoute();
+    
+    // Handle browser back/forward
+    window.addEventListener('popstate', handleRoute);
 }
 
 function populateFilters(data) {
-    // Populate local authority filter
+    // Populate local authority filter (dashboard)
     data.local_authorities.forEach(la => {
         const option = document.createElement('option');
         option.value = la;
@@ -211,6 +260,14 @@ function populateFilters(data) {
         elements.typeFilter.appendChild(option);
     });
     
+    // Populate ranking area dropdown
+    data.local_authorities.forEach(la => {
+        const option = document.createElement('option');
+        option.value = la;
+        option.textContent = la;
+        elements.rankingArea.appendChild(option);
+    });
+    
     // Populate ranking year dropdown
     elements.rankingYear.innerHTML = '';
     data.years.sort((a, b) => b - a).forEach(year => {
@@ -229,9 +286,10 @@ async function loadSchools() {
     const search = elements.schoolSearch.value.trim();
     const localAuthority = elements.localAuthorityFilter.value;
     const type = elements.typeFilter.value;
+    const { active: locationActive, postcode, radius } = state.locationSearch;
     
-    // If no search query (or less than 2 chars) and no filters, show featured schools
-    if (search.length < 2 && !localAuthority && !type) {
+    // If no search query (or less than 2 chars) and no filters and no location search, show featured schools
+    if (search.length < 2 && !localAuthority && !type && !locationActive) {
         await loadFeaturedSchools();
         return;
     }
@@ -242,6 +300,12 @@ async function loadSchools() {
     if (localAuthority) params.append('local_authority', localAuthority);
     if (type) params.append('school_type', type);
     
+    // Add location search params
+    if (locationActive && postcode) {
+        params.append('postcode', postcode);
+        params.append('radius', radius);
+    }
+    
     params.append('page', state.pagination.page);
     params.append('page_size', state.pagination.pageSize);
     
@@ -261,10 +325,16 @@ async function loadSchools() {
     state.pagination.totalPages = data.total_pages;
     state.isShowingFeatured = false;
     
+    // Show location info banner if location search is active
+    updateLocationInfoBanner(data.search_location);
+    
     renderSchools(state.schools);
 }
 
 async function loadFeaturedSchools() {
+    // Clear location info when showing featured
+    updateLocationInfoBanner(null);
+    
     // Load a sample of schools and pick 3 random ones
     const data = await fetchAPI('/api/schools?page_size=100', { showLoading: 'schools' });
     
@@ -281,6 +351,82 @@ async function loadFeaturedSchools() {
     renderFeaturedSchools(state.schools);
 }
 
+function updateLocationInfoBanner(searchLocation) {
+    // Remove existing banner if any
+    const existingBanner = document.querySelector('.location-info');
+    if (existingBanner) {
+        existingBanner.remove();
+    }
+    
+    if (!searchLocation) {
+        return;
+    }
+    
+    // Create location info banner
+    const banner = document.createElement('div');
+    banner.className = 'location-info';
+    banner.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+            <circle cx="12" cy="10" r="3"/>
+        </svg>
+        <span>Showing schools within ${searchLocation.radius} miles of <strong>${searchLocation.postcode.toUpperCase()}</strong></span>
+    `;
+    
+    // Insert banner before the schools grid
+    elements.schoolsGrid.parentNode.insertBefore(banner, elements.schoolsGrid);
+}
+
+async function searchByLocation() {
+    const postcode = elements.postcodeSearch.value.trim();
+    const radius = parseFloat(elements.radiusSelect.value);
+    
+    if (!postcode) {
+        alert('Please enter a postcode');
+        return;
+    }
+    
+    // Validate UK postcode format (basic check)
+    const postcodeRegex = /^[A-Z]{1,2}[0-9][A-Z0-9]?\s*[0-9][A-Z]{2}$/i;
+    if (!postcodeRegex.test(postcode)) {
+        alert('Please enter a valid UK postcode (e.g. SW18 4TF)');
+        return;
+    }
+    
+    // Update state
+    state.locationSearch = {
+        active: true,
+        postcode: postcode,
+        radius: radius,
+    };
+    state.pagination.page = 1;
+    
+    // Show clear button
+    elements.clearLocationBtn.style.display = 'inline-flex';
+    
+    // Load schools with location filter
+    await loadSchools();
+}
+
+function clearLocationSearch() {
+    state.locationSearch = {
+        active: false,
+        postcode: null,
+        radius: 5,
+    };
+    state.pagination.page = 1;
+    
+    // Clear input
+    elements.postcodeSearch.value = '';
+    elements.radiusSelect.value = '5';
+    
+    // Hide clear button
+    elements.clearLocationBtn.style.display = 'none';
+    
+    // Reload schools (will show featured if no other filters)
+    loadSchools();
+}
+
 function renderFeaturedSchools(schools) {
     elements.schoolsGrid.innerHTML = `
         <div class="featured-header">
@@ -332,13 +478,15 @@ async function loadComparison() {
 }
 
 async function loadRankings() {
+    const area = elements.rankingArea.value;
     const metric = elements.rankingMetric.value;
     const year = elements.rankingYear.value;
     
     let endpoint = `/api/rankings?metric=${metric}&limit=20`;
     if (year) endpoint += `&year=${year}`;
+    if (area) endpoint += `&local_authority=${encodeURIComponent(area)}`;
     
-    const data = await fetchAPI(endpoint, { showLoading: 'rankings' });
+    const data = await fetchAPI(endpoint, { useCache: false, showLoading: 'rankings' });
     
     if (!data) {
         showEmptyState(elements.rankingsList, 'Unable to load rankings');
@@ -384,30 +532,39 @@ function formatMetricValue(value, metric) {
 
 function renderSchools(schools) {
     if (schools.length === 0) {
-        showEmptyState(elements.schoolsGrid, 'No primary schools found matching your criteria');
+        const message = state.locationSearch.active 
+            ? `No schools found within ${state.locationSearch.radius} miles of ${state.locationSearch.postcode}`
+            : 'No primary schools found matching your criteria';
+        showEmptyState(elements.schoolsGrid, message);
         return;
     }
     
-    let html = schools.map(school => `
-        <div class="school-card" data-urn="${school.urn}">
-            <h3 class="school-name">${escapeHtml(school.school_name)}</h3>
-            <div class="school-meta">
-                <span class="school-tag">${escapeHtml(school.local_authority || '')}</span>
-                <span class="school-tag type">${escapeHtml(school.school_type || '')}</span>
-            </div>
-            <div class="school-address">${escapeHtml(school.address || '')}</div>
-            <div class="school-stats">
-                <div class="stat">
-                    <div class="stat-value">Primary</div>
-                    <div class="stat-label">Phase</div>
+    let html = schools.map(school => {
+        const distanceBadge = school.distance !== undefined && school.distance !== null
+            ? `<span class="distance-badge">${school.distance.toFixed(1)} mi</span>`
+            : '';
+        
+        return `
+            <div class="school-card" data-urn="${school.urn}">
+                <h3 class="school-name">${escapeHtml(school.school_name)}${distanceBadge}</h3>
+                <div class="school-meta">
+                    <span class="school-tag">${escapeHtml(school.local_authority || '')}</span>
+                    <span class="school-tag type">${escapeHtml(school.school_type || '')}</span>
                 </div>
-                <div class="stat">
-                    <div class="stat-value">KS2</div>
-                    <div class="stat-label">Data</div>
+                <div class="school-address">${escapeHtml(school.address || '')}</div>
+                <div class="school-stats">
+                    <div class="stat">
+                        <div class="stat-value">Primary</div>
+                        <div class="stat-label">Phase</div>
+                    </div>
+                    <div class="stat">
+                        <div class="stat-value">KS2</div>
+                        <div class="stat-label">Data</div>
+                    </div>
                 </div>
             </div>
-        </div>
-    `).join('');
+        `;
+    }).join('');
     
     // Add pagination info
     if (state.pagination.totalPages > 1) {
@@ -919,12 +1076,8 @@ function setupEventListeners() {
         link.addEventListener('click', (e) => {
             e.preventDefault();
             const view = link.dataset.view;
-            
-            document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
-            link.classList.add('active');
-            
-            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-            document.getElementById(`${view}-view`).classList.add('active');
+            const path = view === 'dashboard' ? '/' : `/${view}`;
+            navigateTo(path);
         });
     });
     
@@ -945,6 +1098,22 @@ function setupEventListeners() {
         loadSchools();
     });
     
+    // Location search
+    if (elements.locationSearchBtn) {
+        elements.locationSearchBtn.addEventListener('click', searchByLocation);
+    }
+    if (elements.clearLocationBtn) {
+        elements.clearLocationBtn.addEventListener('click', clearLocationSearch);
+    }
+    if (elements.postcodeSearch) {
+        elements.postcodeSearch.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                searchByLocation();
+            }
+        });
+    }
+    
     // Compare search
     let compareSearchTimeout;
     let lastCompareSearchData = null;
@@ -1027,6 +1196,7 @@ function setupEventListeners() {
     elements.metricSelect.addEventListener('change', updateComparisonChart);
     
     // Rankings
+    elements.rankingArea.addEventListener('change', loadRankings);
     elements.rankingMetric.addEventListener('change', loadRankings);
     elements.rankingYear.addEventListener('change', loadRankings);
     

frontend/index.html

@@ -29,9 +29,9 @@
                 </div>
             </div>
             <nav class="nav">
-                <a href="#" class="nav-link active" data-view="dashboard">Dashboard</a>
-                <a href="#" class="nav-link" data-view="compare">Compare</a>
-                <a href="#" class="nav-link" data-view="rankings">Rankings</a>
+                <a href="/" class="nav-link active" data-view="dashboard">Dashboard</a>
+                <a href="/compare" class="nav-link" data-view="compare">Compare</a>
+                <a href="/rankings" class="nav-link" data-view="rankings">Rankings</a>
             </nav>
         </div>
     </header>
@@ -54,6 +54,20 @@
                         </svg>
                     </div>
                 </div>
+                <div class="location-search">
+                    <div class="location-input-group">
+                        <input type="text" id="postcode-search" class="search-input postcode-input" placeholder="Enter postcode (e.g. SW18 4TF)">
+                        <select id="radius-select" class="filter-select radius-select">
+                            <option value="1">1 mile</option>
+                            <option value="2">2 miles</option>
+                            <option value="5" selected>5 miles</option>
+                            <option value="10">10 miles</option>
+                            <option value="20">20 miles</option>
+                        </select>
+                        <button id="location-search-btn" class="btn btn-primary location-btn">Find Nearby</button>
+                        <button id="clear-location-btn" class="btn location-clear-btn" style="display: none;">Clear</button>
+                    </div>
+                </div>
                 <div class="filter-row">
                     <select id="local-authority-filter" class="filter-select">
                         <option value="">All Areas</option>
@@ -172,6 +186,10 @@
             </div>
 
             <div class="rankings-controls">
+                <select id="ranking-area" class="filter-select">
+                    <option value="">All Areas</option>
+                    <!-- Populated by JS -->
+                </select>
                 <select id="ranking-metric" class="filter-select">
                     <optgroup label="Expected Standard">
                         <option value="rwm_expected_pct">Reading, Writing & Maths Combined %</option>

frontend/styles.css

@@ -257,6 +257,86 @@ body {
     transition: var(--transition);
 }
 
+/* Location Search */
+.location-search {
+    margin-bottom: 1rem;
+}
+
+.location-input-group {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.postcode-input {
+    width: auto;
+    max-width: 180px;
+    padding: 0.6rem 1rem;
+    font-size: 0.95rem;
+    text-transform: uppercase;
+}
+
+.radius-select {
+    width: auto;
+    min-width: 100px;
+}
+
+.location-btn {
+    padding: 0.6rem 1.25rem;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.location-clear-btn {
+    padding: 0.6rem 1rem;
+    font-size: 0.9rem;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.location-clear-btn:hover {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+
+.location-info {
+    text-align: center;
+    margin-bottom: 1rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--accent-teal);
+    color: var(--text-inverse);
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.location-info svg {
+    width: 16px;
+    height: 16px;
+}
+
+.distance-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    background: var(--accent-teal);
+    color: var(--text-inverse);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 0.5rem;
+}
+
 .filter-select:focus {
     outline: none;
     border-color: var(--accent-teal);
@@ -1056,6 +1136,26 @@ body {
         flex-direction: column;
     }
     
+    .location-input-group {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .postcode-input {
+        max-width: 100%;
+        width: 100%;
+    }
+    
+    .radius-select {
+        width: 100%;
+    }
+    
+    .location-btn,
+    .location-clear-btn {
+        width: 100%;
+        justify-content: center;
+    }
+    
     .schools-grid {
         grid-template-columns: 1fr;
     }