tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add map view for location search results
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m13s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
Implemented split-view map layout for postcode searches:
- List/Map toggle appears when doing location search
- Map view shows interactive map with school markers on left
- Compact school list on right with distance badges, stats, actions
- Mobile responsive: stacks vertically with map on top
- Updated School type to include distance and total_pupils fields

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-02-04 10:05:31 +00:00
parent ea6820f1c4
commit 1b0d6edb98
4 changed files with 389 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
nextjs-app/components/HomeView.tsx
View File

@@ -5,13 +5,15 @@
'use client';
import { useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { FilterBar } from './FilterBar';
import { SchoolCard } from './SchoolCard';
import { SchoolMap } from './SchoolMap';
import { Pagination } from './Pagination';
import { EmptyState } from './EmptyState';
import { useComparisonContext } from '@/context/ComparisonContext';
import type { SchoolsResponse, Filters } from '@/lib/types';
import type { SchoolsResponse, Filters, School } from '@/lib/types';
import styles from './HomeView.module.css';
interface HomeViewProps {
@@ -21,7 +23,8 @@ interface HomeViewProps {
export function HomeView({ initialSchools, filters }: HomeViewProps) {
const searchParams = useSearchParams();
const { addSchool } = useComparisonContext();
const { addSchool, selectedSchools } = useComparisonContext();
const [resultsView, setResultsView] = useState<'list' | 'map'>('list');
const hasSearch = searchParams.get('search') || searchParams.get('postcode');
const isLocationSearch = !!searchParams.get('postcode');
@@ -36,18 +39,48 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
heroDescription="Search and compare KS2 results for thousands of schools across England"
/>
{/* Location Info Banner */}
{/* Location Info Banner with View Toggle */}
{isLocationSearch && initialSchools.location_info && (
<div className={styles.locationBanner}>
<span>
Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '}
<strong>{initialSchools.location_info.postcode}</strong>
</span>
<div className={styles.locationBannerWrapper}>
<div className={styles.locationBanner}>
<span>
Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '}
<strong>{initialSchools.location_info.postcode}</strong>
</span>
</div>
{initialSchools.schools.length > 0 && (
<div className={styles.viewToggle}>
<button
className={`${styles.viewToggleBtn} ${resultsView === 'list' ? styles.active : ''}`}
onClick={() => setResultsView('list')}
>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
<line x1="8" y1="6" x2="21" y2="6"/>
<line x1="8" y1="12" x2="21" y2="12"/>
<line x1="8" y1="18" x2="21" y2="18"/>
<line x1="3" y1="6" x2="3.01" y2="6"/>
<line x1="3" y1="12" x2="3.01" y2="12"/>
<line x1="3" y1="18" x2="3.01" y2="18"/>
</svg>
List
</button>
<button
className={`${styles.viewToggleBtn} ${resultsView === 'map' ? styles.active : ''}`}
onClick={() => setResultsView('map')}
>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
<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>
Map
</button>
</div>
)}
</div>
)}
{/* Results Section */}
<section className={styles.results}>
<section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
{!hasSearch && initialSchools.schools.length > 0 && (
<div className={styles.sectionHeader}>
<h2>Featured Schools</h2>
@@ -57,7 +90,7 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
</div>
)}
{hasSearch && (
{hasSearch && resultsView === 'list' && (
<div className={styles.resultsHeader}>
<h2>
{initialSchools.total.toLocaleString()} school
@@ -85,7 +118,28 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
: undefined
}
/>
) : resultsView === 'map' && isLocationSearch ? (
/* Map View Layout */
<div className={styles.mapViewContainer}>
<div className={styles.mapContainer}>
<SchoolMap
schools={initialSchools.schools}
center={initialSchools.location_info?.coordinates}
/>
</div>
<div className={styles.compactList}>
{initialSchools.schools.map((school) => (
<CompactSchoolItem
key={school.urn}
school={school}
onAddToCompare={addSchool}
isInCompare={selectedSchools.some(s => s.urn === school.urn)}
/>
))}
</div>
</div>
) : (
/* List View Layout */
<>
<div className={styles.grid}>
{initialSchools.schools.map((school) => (
@@ -110,3 +164,52 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
</div>
);
}
/* Compact School Item for Map View */
interface CompactSchoolItemProps {
school: School;
onAddToCompare: (school: School) => void;
isInCompare: boolean;
}
function CompactSchoolItem({ school, onAddToCompare, isInCompare }: CompactSchoolItemProps) {
return (
<div className={styles.compactItem}>
<div className={styles.compactItemContent}>
<div className={styles.compactItemHeader}>
<a href={`/school/${school.urn}`} className={styles.compactItemName}>
{school.school_name}
</a>
{school.distance !== undefined && school.distance !== null && (
<span className={styles.distanceBadge}>
{school.distance.toFixed(1)} mi
</span>
)}
</div>
<div className={styles.compactItemMeta}>
{school.school_type && <span>{school.school_type}</span>}
{school.local_authority && <span>{school.local_authority}</span>}
</div>
<div className={styles.compactItemStats}>
<span className={styles.compactStat}>
<strong>{school.rwm_expected_pct !== null ? `${school.rwm_expected_pct}%` : '-'}</strong> RWM
</span>
<span className={styles.compactStat}>
<strong>{school.total_pupils || '-'}</strong> pupils
</span>
</div>
</div>
<div className={styles.compactItemActions}>
<button
className={`${styles.compactBtn} ${isInCompare ? styles.compactBtnActive : ''}`}
onClick={() => onAddToCompare(school)}
>
{isInCompare ? 'Remove' : 'Compare'}
</button>
<a href={`/school/${school.urn}`} className={styles.compactBtnSecondary}>
Details
</a>
</div>
</div>
);
}