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);