Add Symfony payload mapping, fixtures, and QA tooling
This commit is contained in:
Bernard Ngandu
+30
-62
@@ -1,75 +1,43 @@
|
||||
# React + TypeScript + Vite
|
||||
# SignalMap client
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
A collaborative danger zone explorer built with React, Vite, and Leaflet. Crowd members can drop signals on an OpenStreetMap base layer; the UI highlights the hottest areas as a heatmap and keeps track of active contributors without any authentication.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
## Getting started
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
1. Install dependencies (Node.js 20+ recommended):
|
||||
|
||||
## React Compiler
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
||||
2. Start the Vite dev server:
|
||||
|
||||
Note: This will impact Vite dev & build performances.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
The app assumes the API is available at `http://localhost:8000/api.php`. You can override this by setting `VITE_API_BASE` in an `.env` file.
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
3. Start the lightweight PHP backend (from the repository root):
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
```bash
|
||||
php -S 0.0.0.0:8000 -t server/public
|
||||
```
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
The backend stores data in `server/var/points.sqlite` (ignored by git). It identifies users by IP address and provides aggregated heatmap cells plus contributor statistics.
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
## Features
|
||||
|
||||
- Leaflet + OpenStreetMap map canvas with a live heat layer (via `leaflet.heat`).
|
||||
- Click-to-report interaction that drops a signal at the clicked coordinates.
|
||||
- Heatmap aggregation and "danger zone" overlays that spotlight the busiest cells.
|
||||
- Live contributor feed showing the most recent pings and top spotters.
|
||||
- Accessible, shadcn-inspired UI components without any authentication requirement.
|
||||
|
||||
## Production build
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
The output will be placed in `dist/`. Serve it with your favourite static host while keeping the PHP API reachable at `/api.php`.
|
||||
|
||||
+17
-1
@@ -4,10 +4,26 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>client</title>
|
||||
<title>SignalMap | Collaborative Hotspot Tracker</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha512-sA+e2u1j7mG2mZHg1F9n3u1kVpWwfvX2gYdEx+kt1/3uzMdGII4XESyqSeX5p1+t0NenE2no0LYh3R1n8z+Gxw=="
|
||||
crossorigin=""
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script
|
||||
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha512-vPO0bXiC7hlHLLANkRb114F8CbnMD4HzyBbs6k8ZZr68Su2Ce279b9EcRWSavwgJeayQMZT6BdS8wP3r3MJ5iw=="
|
||||
crossorigin=""
|
||||
></script>
|
||||
<script
|
||||
src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"
|
||||
integrity="sha384-24E8AI6UK4SlHe/BUOMwfc9yqD0nV9vsxjMSb7ElJ+PmTWk1FLaeL7XggVzfl8z9"
|
||||
crossorigin=""
|
||||
></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Generated
+1131
-3
File diff suppressed because it is too large
Load Diff
+9
-1
@@ -10,8 +10,12 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1"
|
||||
"react-dom": "^19.1.1",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
@@ -19,11 +23,15 @@
|
||||
"@types/react": "^19.1.16",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"babel-plugin-react-compiler": "^19.1.0-rc.3",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.22",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.45.0",
|
||||
"vite": "npm:rolldown-vite@7.1.14"
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
+737
-31
@@ -1,35 +1,741 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Badge } from '@ui/badge'
|
||||
import { Button } from '@ui/button'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@ui/card'
|
||||
import { Separator } from '@ui/separator'
|
||||
import { cn, distanceInKm, formatCoordinate, formatRelativeTime } from '@lib/utils'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const API_BASE = import.meta.env.VITE_API_BASE ?? 'http://localhost:8000/api/signals'
|
||||
const VISIBLE_RADIUS_KM = 5
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
type Status = 'loading' | 'idle' | 'error' | 'posting' | 'refreshing'
|
||||
|
||||
type ApiPoint = {
|
||||
id: number
|
||||
lat: number
|
||||
lng: number
|
||||
createdAt: string
|
||||
userKey: string
|
||||
}
|
||||
|
||||
export default App
|
||||
type ApiDensity = {
|
||||
lat: number
|
||||
lng: number
|
||||
intensity: number
|
||||
}
|
||||
|
||||
type ApiResponse = {
|
||||
clientKey?: string
|
||||
points?: ApiPoint[]
|
||||
density?: ApiDensity[]
|
||||
latestByUser?: ApiPoint[]
|
||||
totals?: {
|
||||
points: number
|
||||
contributors: number
|
||||
}
|
||||
updatedAt?: string
|
||||
}
|
||||
|
||||
interface LatLng {
|
||||
lat: number
|
||||
lng: number
|
||||
}
|
||||
|
||||
function getStatusLabel(status: Status): string {
|
||||
switch (status) {
|
||||
case 'loading':
|
||||
return 'Syncing map'
|
||||
case 'posting':
|
||||
return 'Sending your signal'
|
||||
case 'refreshing':
|
||||
return 'Updating hotspots'
|
||||
case 'error':
|
||||
return 'Offline'
|
||||
default:
|
||||
return 'Live feed'
|
||||
}
|
||||
}
|
||||
|
||||
function geolocationErrorMessage(error: GeolocationPositionError): string {
|
||||
switch (error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
return 'Location access denied. Enable it to view nearby pings.'
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
return 'Unable to determine your position. Try again.'
|
||||
case error.TIMEOUT:
|
||||
return 'Timed out while fetching your location.'
|
||||
default:
|
||||
return 'Failed to retrieve your location.'
|
||||
}
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const mapRef = useRef<any>(null)
|
||||
const mapContainerRef = useRef<HTMLDivElement | null>(null)
|
||||
const heatLayerRef = useRef<any>(null)
|
||||
const markersLayerRef = useRef<any>(null)
|
||||
const zonesLayerRef = useRef<any>(null)
|
||||
const userLayerRef = useRef<any>(null)
|
||||
const locationWatchIdRef = useRef<number | null>(null)
|
||||
const statusRef = useRef<Status>('loading')
|
||||
const initialLoadRef = useRef(true)
|
||||
const hasCenteredOnUserRef = useRef(false)
|
||||
|
||||
const [status, setStatus] = useState<Status>('loading')
|
||||
const [rawPoints, setRawPoints] = useState<ApiPoint[]>([])
|
||||
const [rawDensity, setRawDensity] = useState<ApiDensity[]>([])
|
||||
const [rawLatestByUser, setRawLatestByUser] = useState<ApiPoint[]>([])
|
||||
const [clientKey, setClientKey] = useState<string | null>(null)
|
||||
const [lastUpdated, setLastUpdated] = useState<string | null>(null)
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||
const [userLocation, setUserLocation] = useState<LatLng | null>(null)
|
||||
const [locationError, setLocationError] = useState<string | null>(null)
|
||||
const [isRequestingLocation, setIsRequestingLocation] = useState<boolean>(false)
|
||||
|
||||
const setStatusSafe = useCallback((next: Status) => {
|
||||
statusRef.current = next
|
||||
setStatus(next)
|
||||
}, [])
|
||||
|
||||
const startLocationWatch = useCallback(() => {
|
||||
if (typeof navigator === 'undefined' || !navigator.geolocation) {
|
||||
setLocationError('Geolocation is not supported in this browser.')
|
||||
setIsRequestingLocation(false)
|
||||
return
|
||||
}
|
||||
|
||||
setIsRequestingLocation(true)
|
||||
setLocationError(null)
|
||||
|
||||
if (locationWatchIdRef.current !== null) {
|
||||
navigator.geolocation.clearWatch(locationWatchIdRef.current)
|
||||
locationWatchIdRef.current = null
|
||||
}
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
setUserLocation({ lat: position.coords.latitude, lng: position.coords.longitude })
|
||||
setIsRequestingLocation(false)
|
||||
},
|
||||
(error) => {
|
||||
setLocationError(geolocationErrorMessage(error))
|
||||
setIsRequestingLocation(false)
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 10000 },
|
||||
)
|
||||
|
||||
const watchId = navigator.geolocation.watchPosition(
|
||||
(position) => {
|
||||
setUserLocation({ lat: position.coords.latitude, lng: position.coords.longitude })
|
||||
setLocationError(null)
|
||||
setIsRequestingLocation(false)
|
||||
},
|
||||
(error) => {
|
||||
setLocationError(geolocationErrorMessage(error))
|
||||
setIsRequestingLocation(false)
|
||||
},
|
||||
{ enableHighAccuracy: true, maximumAge: 15000, timeout: 10000 },
|
||||
)
|
||||
|
||||
locationWatchIdRef.current = watchId
|
||||
}, [])
|
||||
|
||||
const fetchSnapshot = useCallback(
|
||||
async (options?: { silent?: boolean }) => {
|
||||
const silent = options?.silent ?? false
|
||||
const previousStatus = statusRef.current
|
||||
const isInitial = initialLoadRef.current
|
||||
|
||||
if (previousStatus !== 'posting') {
|
||||
if (isInitial) {
|
||||
setStatusSafe('loading')
|
||||
} else if (!silent) {
|
||||
setStatusSafe('refreshing')
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}?limit=750`, {
|
||||
cache: 'no-store',
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Unable to reach the hotspot feed.')
|
||||
}
|
||||
|
||||
const data: ApiResponse = await response.json()
|
||||
setRawPoints(data.points ?? [])
|
||||
setRawDensity(data.density ?? [])
|
||||
setRawLatestByUser(data.latestByUser ?? [])
|
||||
setClientKey(data.clientKey ?? null)
|
||||
setLastUpdated(data.updatedAt ?? new Date().toISOString())
|
||||
setErrorMessage(null)
|
||||
initialLoadRef.current = false
|
||||
|
||||
const nextStatus = previousStatus === 'posting' ? 'posting' : 'idle'
|
||||
setStatusSafe(nextStatus)
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Unknown error while loading hotspots.'
|
||||
setErrorMessage(message)
|
||||
if (initialLoadRef.current) {
|
||||
setStatusSafe('error')
|
||||
} else if (previousStatus !== 'posting') {
|
||||
setStatusSafe('idle')
|
||||
}
|
||||
}
|
||||
},
|
||||
[setStatusSafe],
|
||||
)
|
||||
|
||||
const submitPoint = useCallback(
|
||||
async (lat: number, lng: number) => {
|
||||
setStatusSafe('posting')
|
||||
try {
|
||||
const response = await fetch(API_BASE, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ lat, lng }),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const payload = await response.json().catch(() => null)
|
||||
const message = payload?.message ?? 'Unable to store your signal.'
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
await fetchSnapshot({ silent: true })
|
||||
setStatusSafe('idle')
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Something went wrong while saving your signal.'
|
||||
setErrorMessage(message)
|
||||
setStatusSafe('error')
|
||||
throw error
|
||||
}
|
||||
},
|
||||
[fetchSnapshot, setStatusSafe],
|
||||
)
|
||||
|
||||
const handleMapClick = useCallback(
|
||||
({ lat, lng }: LatLng) => {
|
||||
submitPoint(lat, lng).catch(() => {})
|
||||
},
|
||||
[submitPoint],
|
||||
)
|
||||
|
||||
const initialiseMap = useCallback(() => {
|
||||
if (mapRef.current || !mapContainerRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const leaflet = (window as any).L
|
||||
if (!leaflet) {
|
||||
setErrorMessage('Leaflet failed to load. Refresh the page to try again.')
|
||||
setStatusSafe('error')
|
||||
return
|
||||
}
|
||||
|
||||
const map = leaflet
|
||||
.map(mapContainerRef.current, {
|
||||
worldCopyJump: true,
|
||||
minZoom: 2,
|
||||
zoomControl: true,
|
||||
})
|
||||
.setView([20, 0], 2)
|
||||
|
||||
leaflet
|
||||
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
crossOrigin: true,
|
||||
maxZoom: 19,
|
||||
})
|
||||
.addTo(map)
|
||||
|
||||
const heatLayer = typeof leaflet.heatLayer === 'function'
|
||||
? leaflet.heatLayer([], {
|
||||
radius: 32,
|
||||
blur: 24,
|
||||
maxZoom: 12,
|
||||
gradient: {
|
||||
0.2: '#38bdf8',
|
||||
0.4: '#0ea5e9',
|
||||
0.6: '#fbbf24',
|
||||
0.8: '#f97316',
|
||||
1.0: '#ef4444',
|
||||
},
|
||||
})
|
||||
: null
|
||||
|
||||
const markersLayer = leaflet.layerGroup().addTo(map)
|
||||
const zonesLayer = leaflet.layerGroup().addTo(map)
|
||||
const userLayer = leaflet.layerGroup().addTo(map)
|
||||
|
||||
if (heatLayer) {
|
||||
heatLayer.addTo(map)
|
||||
}
|
||||
|
||||
const onClick = (event: any) => {
|
||||
const { lat, lng } = event.latlng ?? {}
|
||||
if (typeof lat === 'number' && typeof lng === 'number') {
|
||||
handleMapClick({ lat, lng })
|
||||
}
|
||||
}
|
||||
|
||||
map.on('click', onClick)
|
||||
|
||||
map.whenReady(() => {
|
||||
requestAnimationFrame(() => {
|
||||
map.invalidateSize()
|
||||
})
|
||||
})
|
||||
|
||||
const onResize = () => {
|
||||
requestAnimationFrame(() => {
|
||||
map.invalidateSize()
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('resize', onResize)
|
||||
|
||||
mapRef.current = map
|
||||
heatLayerRef.current = heatLayer
|
||||
markersLayerRef.current = markersLayer
|
||||
zonesLayerRef.current = zonesLayer
|
||||
userLayerRef.current = userLayer
|
||||
|
||||
return () => {
|
||||
map.off('click', onClick)
|
||||
window.removeEventListener('resize', onResize)
|
||||
map.remove()
|
||||
mapRef.current = null
|
||||
heatLayerRef.current = null
|
||||
markersLayerRef.current = null
|
||||
zonesLayerRef.current = null
|
||||
userLayerRef.current = null
|
||||
}
|
||||
}, [handleMapClick, setStatusSafe])
|
||||
|
||||
useEffect(() => {
|
||||
const cleanup = initialiseMap()
|
||||
const sizeTimer = window.setTimeout(() => {
|
||||
if (mapRef.current) {
|
||||
mapRef.current.invalidateSize()
|
||||
}
|
||||
}, 150)
|
||||
fetchSnapshot().catch(() => {})
|
||||
const interval = window.setInterval(() => {
|
||||
fetchSnapshot({ silent: true }).catch(() => {})
|
||||
}, 7000)
|
||||
|
||||
startLocationWatch()
|
||||
|
||||
return () => {
|
||||
if (typeof cleanup === 'function') {
|
||||
cleanup()
|
||||
}
|
||||
window.clearTimeout(sizeTimer)
|
||||
window.clearInterval(interval)
|
||||
if (typeof navigator !== 'undefined' && navigator.geolocation && locationWatchIdRef.current !== null) {
|
||||
navigator.geolocation.clearWatch(locationWatchIdRef.current)
|
||||
}
|
||||
}
|
||||
}, [fetchSnapshot, initialiseMap, startLocationWatch])
|
||||
|
||||
const visibleDensity = useMemo(() => {
|
||||
if (!userLocation) {
|
||||
return []
|
||||
}
|
||||
return rawDensity.filter((entry) => distanceInKm(userLocation, entry) <= VISIBLE_RADIUS_KM)
|
||||
}, [rawDensity, userLocation])
|
||||
|
||||
const visibleDangerZones = useMemo(() => {
|
||||
if (!visibleDensity.length) {
|
||||
return []
|
||||
}
|
||||
return visibleDensity.slice(0, 3)
|
||||
}, [visibleDensity])
|
||||
|
||||
const visiblePoints = useMemo(() => {
|
||||
if (!userLocation) {
|
||||
return []
|
||||
}
|
||||
return rawPoints.filter((point) => distanceInKm(userLocation, point) <= VISIBLE_RADIUS_KM)
|
||||
}, [rawPoints, userLocation])
|
||||
|
||||
const visibleLatestByUser = useMemo(() => {
|
||||
if (!userLocation) {
|
||||
return []
|
||||
}
|
||||
return rawLatestByUser.filter((point) => distanceInKm(userLocation, point) <= VISIBLE_RADIUS_KM)
|
||||
}, [rawLatestByUser, userLocation])
|
||||
|
||||
const localTotals = useMemo(() => {
|
||||
const uniqueUsers = new Set<string>()
|
||||
visibleLatestByUser.forEach((point) => uniqueUsers.add(point.userKey))
|
||||
|
||||
return {
|
||||
points: visiblePoints.length,
|
||||
contributors: uniqueUsers.size,
|
||||
}
|
||||
}, [visibleLatestByUser, visiblePoints])
|
||||
|
||||
useEffect(() => {
|
||||
const heatLayer = heatLayerRef.current
|
||||
const leaflet = (window as any).L
|
||||
if (!heatLayer || !leaflet) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!visibleDensity.length) {
|
||||
heatLayer.setLatLngs([])
|
||||
return
|
||||
}
|
||||
|
||||
const maxIntensity = Math.max(...visibleDensity.map((entry) => entry.intensity)) || 1
|
||||
const heatPoints = visibleDensity.map((entry) => [entry.lat, entry.lng, Math.max(0.25, entry.intensity / maxIntensity)])
|
||||
heatLayer.setLatLngs(heatPoints)
|
||||
}, [visibleDensity])
|
||||
|
||||
useEffect(() => {
|
||||
const layer = zonesLayerRef.current
|
||||
const leaflet = (window as any).L
|
||||
if (!layer || !leaflet) {
|
||||
return
|
||||
}
|
||||
|
||||
layer.clearLayers()
|
||||
|
||||
if (!visibleDangerZones.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const maxIntensity = visibleDangerZones[0]?.intensity ?? 0
|
||||
|
||||
visibleDangerZones.forEach((zone, index) => {
|
||||
const intensityRatio = maxIntensity ? zone.intensity / maxIntensity : 0.5
|
||||
const radius = 400 + intensityRatio * 1600
|
||||
const circle = leaflet.circle([zone.lat, zone.lng], {
|
||||
radius,
|
||||
color: index === 0 ? '#ef4444' : '#f97316',
|
||||
weight: 2,
|
||||
fillColor: '#ef4444',
|
||||
fillOpacity: Math.max(0.12, 0.22 - index * 0.04),
|
||||
})
|
||||
|
||||
circle.addTo(layer).bindTooltip(`Hotspot #${index + 1}\nIntensity: ${zone.intensity}`, {
|
||||
direction: 'top',
|
||||
offset: [0, -12],
|
||||
})
|
||||
})
|
||||
}, [visibleDangerZones])
|
||||
|
||||
useEffect(() => {
|
||||
const layer = markersLayerRef.current
|
||||
const leaflet = (window as any).L
|
||||
if (!layer || !leaflet) {
|
||||
return
|
||||
}
|
||||
|
||||
layer.clearLayers()
|
||||
|
||||
const latestMap = new Map<string, ApiPoint>()
|
||||
visibleLatestByUser.forEach((point) => {
|
||||
const existing = latestMap.get(point.userKey)
|
||||
if (!existing || existing.createdAt < point.createdAt) {
|
||||
latestMap.set(point.userKey, point)
|
||||
}
|
||||
})
|
||||
|
||||
latestMap.forEach((point) => {
|
||||
const isSelf = clientKey && point.userKey === clientKey
|
||||
const marker = leaflet.circleMarker([point.lat, point.lng], {
|
||||
radius: isSelf ? 10 : 6,
|
||||
color: isSelf ? '#38bdf8' : '#94a3b8',
|
||||
weight: isSelf ? 3 : 1.5,
|
||||
opacity: 0.9,
|
||||
fillOpacity: isSelf ? 0.45 : 0.28,
|
||||
fillColor: isSelf ? '#38bdf8' : '#cbd5f5',
|
||||
})
|
||||
|
||||
marker.addTo(layer).bindTooltip(
|
||||
`User ${point.userKey}\n${formatCoordinate(point.lat)}, ${formatCoordinate(point.lng)}`,
|
||||
{
|
||||
direction: 'top',
|
||||
offset: [0, -8],
|
||||
},
|
||||
)
|
||||
})
|
||||
}, [visibleLatestByUser, clientKey])
|
||||
|
||||
useEffect(() => {
|
||||
const layer = userLayerRef.current
|
||||
const leaflet = (window as any).L
|
||||
if (!layer || !leaflet) {
|
||||
return
|
||||
}
|
||||
|
||||
layer.clearLayers()
|
||||
|
||||
if (!userLocation) {
|
||||
return
|
||||
}
|
||||
|
||||
leaflet
|
||||
.circle([userLocation.lat, userLocation.lng], {
|
||||
radius: VISIBLE_RADIUS_KM * 1000,
|
||||
color: '#38bdf8',
|
||||
weight: 1.5,
|
||||
opacity: 0.6,
|
||||
dashArray: '6 6',
|
||||
fillColor: '#38bdf8',
|
||||
fillOpacity: 0.05,
|
||||
})
|
||||
.addTo(layer)
|
||||
|
||||
leaflet
|
||||
.circleMarker([userLocation.lat, userLocation.lng], {
|
||||
radius: 7,
|
||||
color: '#38bdf8',
|
||||
weight: 2,
|
||||
opacity: 0.9,
|
||||
fillColor: '#38bdf8',
|
||||
fillOpacity: 0.5,
|
||||
})
|
||||
.addTo(layer)
|
||||
}, [userLocation])
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef.current || !userLocation || hasCenteredOnUserRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
mapRef.current.setView([userLocation.lat, userLocation.lng], 12, {
|
||||
animate: true,
|
||||
})
|
||||
hasCenteredOnUserRef.current = true
|
||||
}, [userLocation])
|
||||
|
||||
const recentActivity = useMemo(() => visiblePoints.slice(0, 8), [visiblePoints])
|
||||
const statusLabel = getStatusLabel(status)
|
||||
const statusBadgeClass = cn(
|
||||
'inline-flex items-center gap-2 rounded-full border border-border/60 bg-secondary/50 px-3 py-1 text-xs font-medium tracking-wide text-muted-foreground backdrop-blur',
|
||||
status === 'error' && 'border-destructive/40 bg-destructive/15 text-destructive',
|
||||
)
|
||||
const statusAccentClass = status === 'error' ? 'text-destructive' : 'text-primary'
|
||||
const lastUpdatedLabel = lastUpdated ? formatRelativeTime(lastUpdated) : 'never'
|
||||
const isLoading = status === 'loading'
|
||||
const isPosting = status === 'posting'
|
||||
const heatMax = visibleDangerZones[0]?.intensity ?? 0
|
||||
const hasLocation = Boolean(userLocation)
|
||||
const myLatestPoint = useMemo(() => {
|
||||
if (!clientKey) {
|
||||
return null
|
||||
}
|
||||
const candidate = rawLatestByUser.find((point) => point.userKey === clientKey)
|
||||
if (!candidate) {
|
||||
return null
|
||||
}
|
||||
if (userLocation && distanceInKm(userLocation, candidate) > VISIBLE_RADIUS_KM) {
|
||||
return null
|
||||
}
|
||||
return candidate
|
||||
}, [rawLatestByUser, clientKey, userLocation])
|
||||
|
||||
const focusDangerZone = useCallback(() => {
|
||||
if (!mapRef.current || !visibleDangerZones.length) {
|
||||
return
|
||||
}
|
||||
|
||||
const zone = visibleDangerZones[0]
|
||||
mapRef.current.setView([zone.lat, zone.lng], 13, {
|
||||
animate: true,
|
||||
})
|
||||
}, [visibleDangerZones])
|
||||
|
||||
const focusMySignal = useCallback(() => {
|
||||
if (!mapRef.current || !myLatestPoint) {
|
||||
return
|
||||
}
|
||||
|
||||
mapRef.current.setView([myLatestPoint.lat, myLatestPoint.lng], 14, {
|
||||
animate: true,
|
||||
})
|
||||
}, [myLatestPoint])
|
||||
|
||||
const refreshNow = useCallback(() => {
|
||||
fetchSnapshot().catch(() => {})
|
||||
}, [fetchSnapshot])
|
||||
|
||||
const locationHint = locationError
|
||||
? locationError
|
||||
: hasLocation
|
||||
? `Showing reports within ${VISIBLE_RADIUS_KM}km of you.`
|
||||
: isRequestingLocation
|
||||
? 'Fetching your location...'
|
||||
: 'Allow location access to view nearby danger pings.'
|
||||
|
||||
const showLocationCta = !hasLocation || Boolean(locationError)
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-background text-foreground">
|
||||
<header className="sticky top-0 z-10 border-b border-border/60 bg-background/70 backdrop-blur">
|
||||
<div className="mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-6 py-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-xl font-semibold sm:text-2xl">SignalMap</h1>
|
||||
<p className="text-sm text-muted-foreground sm:text-base">
|
||||
Crowd-powered danger zones layered on Leaflet + OpenStreetMap.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={statusBadgeClass} aria-live="polite">
|
||||
<span className={cn('flex items-center gap-2', statusAccentClass)}>
|
||||
<span className="status-dot relative block h-2.5 w-2.5 rounded-full bg-[currentColor]" aria-hidden />
|
||||
{statusLabel}
|
||||
</span>
|
||||
</span>
|
||||
<Button variant="ghost" onClick={refreshNow} disabled={isLoading || status === 'refreshing' || isPosting}>
|
||||
Refresh
|
||||
</Button>
|
||||
<Button onClick={focusDangerZone} disabled={!visibleDangerZones.length}>
|
||||
Focus danger zone
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={focusMySignal} disabled={!myLatestPoint}>
|
||||
Locate me
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-6 px-6 py-6 lg:flex-row">
|
||||
<section className="flex w-full flex-col gap-4 lg:max-w-sm">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Danger zone intel</CardTitle>
|
||||
<CardDescription>Highest intensity cells near you right now.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!hasLocation && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
We need your location to reveal community alerts around you.
|
||||
</p>
|
||||
)}
|
||||
{hasLocation && visibleDangerZones.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No hotspots within {VISIBLE_RADIUS_KM}km yet. Tap anywhere on the map to raise the first signal.
|
||||
</p>
|
||||
)}
|
||||
{visibleDangerZones.map((zone, index) => (
|
||||
<div
|
||||
className="flex items-center justify-between rounded-lg border border-border/60 bg-muted/20 px-3 py-2"
|
||||
key={`${zone.lat}-${zone.lng}`}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-semibold text-foreground">Hotspot #{index + 1}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatCoordinate(zone.lat)}, {formatCoordinate(zone.lng)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-orange-400">×{zone.intensity}</span>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
{hasLocation ? (
|
||||
<span>
|
||||
Heatmap max intensity: {heatMax || '—'} • Last sync {lastUpdatedLabel}
|
||||
</span>
|
||||
) : (
|
||||
<span>Totals unavailable until we can access your position.</span>
|
||||
)}
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Community feed</CardTitle>
|
||||
<CardDescription>
|
||||
Local reports: {localTotals.points} · Unique spotters: {localTotals.contributors}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!hasLocation && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Allow location access to tune the feed to your area.
|
||||
</p>
|
||||
)}
|
||||
{hasLocation && recentActivity.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Waiting for the first signals nearby. Click the map to broadcast a hazard ping.
|
||||
</p>
|
||||
)}
|
||||
{recentActivity.map((item) => (
|
||||
<div
|
||||
className="flex flex-col gap-1 rounded-lg border border-border/60 bg-card/40 px-3 py-2"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
{formatCoordinate(item.lat)}, {formatCoordinate(item.lng)}
|
||||
</span>
|
||||
<Badge variant={item.userKey === clientKey ? 'success' : 'muted'}>
|
||||
{item.userKey === clientKey ? 'You' : `User ${item.userKey}`}
|
||||
</Badge>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{formatRelativeTime(item.createdAt)}</span>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</section>
|
||||
|
||||
<section className="flex w-full flex-1 flex-col gap-4">
|
||||
{status === 'error' && errorMessage && (
|
||||
<div className="flex items-center justify-between rounded-xl border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive shadow-lg shadow-destructive/20">
|
||||
<span>{errorMessage}</span>
|
||||
<Button variant="ghost" onClick={refreshNow} className="text-destructive hover:text-destructive">
|
||||
Try again
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative flex min-h-[480px] flex-1 overflow-hidden rounded-2xl border border-border/60 bg-card/70 shadow-2xl shadow-black/40">
|
||||
<div
|
||||
ref={mapContainerRef}
|
||||
className="h-full min-h-[480px] w-full"
|
||||
aria-label="Collaborative danger zone map"
|
||||
/>
|
||||
<div className="pointer-events-none absolute bottom-4 left-4 right-4 mx-auto flex max-w-md flex-col gap-3 rounded-2xl border border-border/60 bg-background/90 p-4 text-xs text-muted-foreground shadow-xl shadow-black/50 backdrop-blur">
|
||||
<div className="flex items-center justify-between text-[0.8rem] text-foreground">
|
||||
<span className="font-semibold">Collaborative heatmap</span>
|
||||
<Badge variant="destructive">LIVE</Badge>
|
||||
</div>
|
||||
<p className="text-[0.8rem] leading-relaxed text-muted-foreground">
|
||||
Click anywhere to drop a signal. We blend every report into a shared danger zone heatmap focused on your
|
||||
surroundings.
|
||||
</p>
|
||||
<Separator className="bg-border/40" />
|
||||
<div className="flex flex-col gap-1 text-[0.75rem] text-muted-foreground">
|
||||
<span>Local signals: {localTotals.points} • Last sync {lastUpdatedLabel}</span>
|
||||
<span>{locationHint}</span>
|
||||
</div>
|
||||
{showLocationCta && (
|
||||
<div className="pointer-events-auto flex items-center justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => startLocationWatch()}
|
||||
disabled={isRequestingLocation}
|
||||
>
|
||||
{isRequestingLocation ? 'Requesting location…' : 'Enable location'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from '@lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary/15 text-primary',
|
||||
secondary: 'border-transparent bg-secondary text-secondary-foreground',
|
||||
destructive: 'border-transparent bg-destructive/15 text-destructive',
|
||||
outline: 'text-foreground',
|
||||
success: 'border-transparent bg-emerald-500/15 text-emerald-300',
|
||||
muted: 'border-transparent bg-muted/60 text-muted-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
|
||||
({ className, variant, ...props }, ref) => (
|
||||
<div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
),
|
||||
)
|
||||
Badge.displayName = 'Badge'
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,50 @@
|
||||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from '@lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-offset-background',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm',
|
||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
outline:
|
||||
'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground shadow-sm',
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
|
||||
},
|
||||
size: {
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-5 text-base',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
return (
|
||||
<Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props} />
|
||||
)
|
||||
},
|
||||
)
|
||||
Button.displayName = 'Button'
|
||||
|
||||
export { buttonVariants }
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@lib/utils'
|
||||
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'rounded-xl border border-border/60 bg-card/80 text-card-foreground shadow-xl shadow-black/30 backdrop-blur',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
Card.displayName = 'Card'
|
||||
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardHeader.displayName = 'CardHeader'
|
||||
|
||||
const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h3 ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardTitle.displayName = 'CardTitle'
|
||||
|
||||
const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardDescription.displayName = 'CardDescription'
|
||||
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardContent.displayName = 'CardContent'
|
||||
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('flex items-center p-6 pt-0 text-sm text-muted-foreground', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardFooter.displayName = 'CardFooter'
|
||||
|
||||
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
|
||||
@@ -0,0 +1,22 @@
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@lib/utils'
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & { orientation?: 'horizontal' | 'vertical' }
|
||||
>(({ className, orientation = 'horizontal', ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'shrink-0 bg-border/60',
|
||||
orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
|
||||
className,
|
||||
)}
|
||||
role="none"
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Separator.displayName = 'Separator'
|
||||
|
||||
export { Separator }
|
||||
+77
-60
@@ -1,68 +1,85 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@layer base {
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
color-scheme: dark;
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 6.5%;
|
||||
--card-foreground: 210 40% 96%;
|
||||
--popover: 222.2 84% 6.5%;
|
||||
--popover-foreground: 210 40% 96%;
|
||||
--primary: 199 89% 62%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 96%;
|
||||
--muted: 223 50% 12%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 199 89% 62%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 221.6 30% 23%;
|
||||
--input: 221.6 30% 23%;
|
||||
--ring: 199 89% 62%;
|
||||
--radius: 0.8rem;
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
body {
|
||||
@apply min-h-screen bg-background bg-radial-signal text-foreground antialiased;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.leaflet-tooltip {
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
color: #e2e8f0;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 15px 35px rgba(2, 6, 23, 0.45);
|
||||
padding: 0.65rem 0.75rem;
|
||||
}
|
||||
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
border-top-color: rgba(15, 23, 42, 0.9);
|
||||
border-bottom-color: rgba(15, 23, 42, 0.9);
|
||||
border-left-color: rgba(15, 23, 42, 0.9);
|
||||
border-right-color: rgba(15, 23, 42, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.status-dot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -0.35rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid currentColor;
|
||||
opacity: 0.35;
|
||||
animation: status-pulse 2.4s ease-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export type Coordinates = {
|
||||
lat: number
|
||||
lng: number
|
||||
}
|
||||
|
||||
export function cn(...inputs: ClassValue[]): string {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
export function formatCoordinate(value: number): string {
|
||||
const formatter = new Intl.NumberFormat('en-US', {
|
||||
minimumFractionDigits: 3,
|
||||
maximumFractionDigits: 3,
|
||||
})
|
||||
return formatter.format(value)
|
||||
}
|
||||
|
||||
export function formatRelativeTime(dateIso: string): string {
|
||||
const date = new Date(dateIso)
|
||||
const now = new Date()
|
||||
const diff = Math.max(0, now.getTime() - date.getTime())
|
||||
|
||||
const seconds = Math.floor(diff / 1000)
|
||||
if (seconds < 60) {
|
||||
return `${seconds}s ago`
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
if (minutes < 60) {
|
||||
return `${minutes}m ago`
|
||||
}
|
||||
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) {
|
||||
return `${hours}h ago`
|
||||
}
|
||||
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days < 7) {
|
||||
return `${days}d ago`
|
||||
}
|
||||
|
||||
const weeks = Math.floor(days / 7)
|
||||
return `${weeks}w ago`
|
||||
}
|
||||
|
||||
export function formatTimestamp(dateIso: string): string {
|
||||
const date = new Date(dateIso)
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
const EARTH_RADIUS_KM = 6371
|
||||
|
||||
export function distanceInKm(a: Coordinates, b: Coordinates): number {
|
||||
const lat1 = toRadians(a.lat)
|
||||
const lat2 = toRadians(b.lat)
|
||||
const deltaLat = toRadians(b.lat - a.lat)
|
||||
const deltaLng = toRadians(b.lng - a.lng)
|
||||
|
||||
const haversine =
|
||||
Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
|
||||
Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2)
|
||||
|
||||
const c = 2 * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine))
|
||||
return EARTH_RADIUS_KM * c
|
||||
}
|
||||
|
||||
function toRadians(value: number): number {
|
||||
return (value * Math.PI) / 180
|
||||
}
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import '@/index.css'
|
||||
import App from '@/App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: ['class'],
|
||||
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'radial-signal': 'radial-gradient(circle at top, rgba(56,189,248,0.15), transparent 45%), radial-gradient(circle at bottom, rgba(248,113,113,0.12), transparent 55%)',
|
||||
},
|
||||
colors: {
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: 'hsl(var(--secondary))',
|
||||
foreground: 'hsl(var(--secondary-foreground))',
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: 'hsl(var(--destructive))',
|
||||
foreground: 'hsl(var(--destructive-foreground))',
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: 'hsl(var(--muted))',
|
||||
foreground: 'hsl(var(--muted-foreground))',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
},
|
||||
keyframes: {
|
||||
'status-pulse': {
|
||||
'0%': { transform: 'scale(0.7)', opacity: '0.6' },
|
||||
'70%': { transform: 'scale(1.4)', opacity: '0' },
|
||||
'100%': { transform: 'scale(0.7)', opacity: '0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'status-pulse': 'status-pulse 2.4s ease-out infinite',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
}
|
||||
@@ -7,6 +7,12 @@
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
"@ui/*": ["src/components/ui/*"],
|
||||
"@lib/*": ["src/lib/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
@@ -10,4 +11,11 @@ export default defineConfig({
|
||||
},
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@ui': fileURLToPath(new URL('./src/components/ui', import.meta.url)),
|
||||
'@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
+11
@@ -24,3 +24,14 @@ APP_SECRET=
|
||||
# See https://symfony.com/doc/current/routing.html#generating-urls-in-commands
|
||||
DEFAULT_URI=http://localhost
|
||||
###< symfony/routing ###
|
||||
|
||||
###> doctrine/doctrine-bundle ###
|
||||
# Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
|
||||
# IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
|
||||
#
|
||||
DATABASE_URL="sqlite:///%kernel.project_dir%/var/points.sqlite"
|
||||
###< doctrine/doctrine-bundle ###
|
||||
|
||||
###> nelmio/cors-bundle ###
|
||||
CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
|
||||
###< nelmio/cors-bundle ###
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
# define your env variables for the test env here
|
||||
KERNEL_CLASS='App\Kernel'
|
||||
APP_SECRET='$ecretf0rt3st'
|
||||
CORS_ALLOW_ORIGIN='^https?://(?:localhost|127\\.0\\.0\\.1)(?::[0-9]+)?$'
|
||||
@@ -8,3 +8,12 @@
|
||||
/var/
|
||||
/vendor/
|
||||
###< symfony/framework-bundle ###
|
||||
|
||||
###> phpunit/phpunit ###
|
||||
/phpunit.xml
|
||||
/.phpunit.cache/
|
||||
###< phpunit/phpunit ###
|
||||
|
||||
###> phpstan/phpstan ###
|
||||
phpstan.neon
|
||||
###< phpstan/phpstan ###
|
||||
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
#!/usr/bin/env php
|
||||
<?php
|
||||
|
||||
if (!ini_get('date.timezone')) {
|
||||
ini_set('date.timezone', 'UTC');
|
||||
}
|
||||
|
||||
if (is_file(dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit')) {
|
||||
if (PHP_VERSION_ID >= 80000) {
|
||||
require dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit';
|
||||
} else {
|
||||
define('PHPUNIT_COMPOSER_INSTALL', dirname(__DIR__).'/vendor/autoload.php');
|
||||
require PHPUNIT_COMPOSER_INSTALL;
|
||||
PHPUnit\TextUI\Command::main();
|
||||
}
|
||||
} else {
|
||||
if (!is_file(dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php')) {
|
||||
echo "Unable to find the `simple-phpunit.php` script in `vendor/symfony/phpunit-bridge/bin/`.\n";
|
||||
exit(1);
|
||||
}
|
||||
|
||||
require dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php';
|
||||
}
|
||||
+17
-2
@@ -7,15 +7,22 @@
|
||||
"php": ">=8.2",
|
||||
"ext-ctype": "*",
|
||||
"ext-iconv": "*",
|
||||
"doctrine/dbal": "^3",
|
||||
"doctrine/doctrine-bundle": "^2.17",
|
||||
"doctrine/doctrine-fixtures-bundle": "^4.1",
|
||||
"doctrine/doctrine-migrations-bundle": "^3.4",
|
||||
"doctrine/orm": "^3.5",
|
||||
"nelmio/cors-bundle": "^2.5",
|
||||
"symfony/console": "7.3.*",
|
||||
"symfony/dotenv": "7.3.*",
|
||||
"symfony/flex": "^2",
|
||||
"symfony/framework-bundle": "7.3.*",
|
||||
"symfony/property-access": "7.3.*",
|
||||
"symfony/property-info": "7.3.*",
|
||||
"symfony/runtime": "7.3.*",
|
||||
"symfony/serializer": "^7.3",
|
||||
"symfony/yaml": "7.3.*"
|
||||
},
|
||||
"require-dev": {
|
||||
},
|
||||
"config": {
|
||||
"allow-plugins": {
|
||||
"php-http/discovery": true,
|
||||
@@ -65,5 +72,13 @@
|
||||
"allow-contrib": false,
|
||||
"require": "7.3.*"
|
||||
}
|
||||
},
|
||||
"require-dev": {
|
||||
"phpstan/phpstan-symfony": "^2.0",
|
||||
"phpunit/phpunit": "^12.4",
|
||||
"rector/rector": "^2.2",
|
||||
"symfony/browser-kit": "7.3.*",
|
||||
"symfony/css-selector": "7.3.*",
|
||||
"symplify/easy-coding-standard": "^12.6"
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+4164
-4
File diff suppressed because it is too large
Load Diff
@@ -2,4 +2,8 @@
|
||||
|
||||
return [
|
||||
Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
|
||||
Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
|
||||
Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
|
||||
Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
|
||||
Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
|
||||
];
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
doctrine:
|
||||
dbal:
|
||||
url: '%env(resolve:DATABASE_URL)%'
|
||||
|
||||
# IMPORTANT: You MUST configure your server version,
|
||||
# either here or in the DATABASE_URL env var (see .env file)
|
||||
#server_version: '16'
|
||||
|
||||
profiling_collect_backtrace: '%kernel.debug%'
|
||||
use_savepoints: true
|
||||
orm:
|
||||
auto_generate_proxy_classes: true
|
||||
enable_lazy_ghost_objects: true
|
||||
report_fields_where_declared: true
|
||||
validate_xml_mapping: true
|
||||
naming_strategy: doctrine.orm.naming_strategy.underscore_number_aware
|
||||
identity_generation_preferences:
|
||||
Doctrine\DBAL\Platforms\PostgreSQLPlatform: identity
|
||||
auto_mapping: true
|
||||
mappings:
|
||||
App:
|
||||
type: attribute
|
||||
is_bundle: false
|
||||
dir: '%kernel.project_dir%/src/Entity'
|
||||
prefix: 'App\Entity'
|
||||
alias: App
|
||||
controller_resolver:
|
||||
auto_mapping: false
|
||||
|
||||
when@test:
|
||||
doctrine:
|
||||
dbal:
|
||||
# "TEST_TOKEN" is typically set by ParaTest
|
||||
dbname_suffix: '_test%env(default::TEST_TOKEN)%'
|
||||
|
||||
when@prod:
|
||||
doctrine:
|
||||
orm:
|
||||
auto_generate_proxy_classes: false
|
||||
proxy_dir: '%kernel.build_dir%/doctrine/orm/Proxies'
|
||||
query_cache_driver:
|
||||
type: pool
|
||||
pool: doctrine.system_cache_pool
|
||||
result_cache_driver:
|
||||
type: pool
|
||||
pool: doctrine.result_cache_pool
|
||||
|
||||
framework:
|
||||
cache:
|
||||
pools:
|
||||
doctrine.result_cache_pool:
|
||||
adapter: cache.app
|
||||
doctrine.system_cache_pool:
|
||||
adapter: cache.system
|
||||
@@ -0,0 +1,6 @@
|
||||
doctrine_migrations:
|
||||
migrations_paths:
|
||||
# namespace is arbitrary but should be different from App\Migrations
|
||||
# as migrations classes should NOT be autoloaded
|
||||
'DoctrineMigrations': '%kernel.project_dir%/migrations'
|
||||
enable_profiler: false
|
||||
@@ -0,0 +1,10 @@
|
||||
nelmio_cors:
|
||||
defaults:
|
||||
origin_regex: true
|
||||
allow_origin: ['%env(CORS_ALLOW_ORIGIN)%']
|
||||
allow_methods: ['GET', 'OPTIONS', 'POST', 'PUT', 'PATCH', 'DELETE']
|
||||
allow_headers: ['Content-Type', 'Authorization']
|
||||
expose_headers: ['Link']
|
||||
max_age: 3600
|
||||
paths:
|
||||
'^/': null
|
||||
@@ -0,0 +1,3 @@
|
||||
framework:
|
||||
property_info:
|
||||
with_constructor_extractor: true
|
||||
@@ -0,0 +1,7 @@
|
||||
imports:
|
||||
- { resource: ../doctrine.yaml }
|
||||
|
||||
doctrine:
|
||||
dbal:
|
||||
url: 'sqlite:///%kernel.project_dir%/var/test.sqlite'
|
||||
use_savepoints: true
|
||||
@@ -15,6 +15,11 @@ services:
|
||||
# this creates a service per class whose id is the fully-qualified class name
|
||||
App\:
|
||||
resource: '../src/'
|
||||
exclude: '../src/Kernel.php'
|
||||
|
||||
App\Controller\:
|
||||
resource: '../src/Controller/'
|
||||
tags: ['controller.service_arguments']
|
||||
|
||||
# add more service definitions when explicit configuration is needed
|
||||
# please note that last definitions always *replace* previous ones
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use PhpCsFixer\Fixer\FunctionNotation\MethodArgumentSpaceFixer;
|
||||
use PhpCsFixer\Fixer\Import\NoUnusedImportsFixer;
|
||||
use PhpCsFixer\Fixer\Operator\ConcatSpaceFixer;
|
||||
use Symplify\EasyCodingStandard\Config\ECSConfig;
|
||||
|
||||
return ECSConfig::configure()
|
||||
->withPaths([
|
||||
__DIR__ . '/src',
|
||||
__DIR__ . '/tests',
|
||||
])
|
||||
->withRules([
|
||||
NoUnusedImportsFixer::class,
|
||||
])
|
||||
->withConfiguredRule(MethodArgumentSpaceFixer::class, [
|
||||
'on_multiline' => 'ensure_fully_multiline',
|
||||
'attribute_placement' => 'same_line'
|
||||
])
|
||||
->withSkip([
|
||||
ConcatSpaceFixer::class
|
||||
])
|
||||
->withPreparedSets(
|
||||
psr12: true,
|
||||
common: true,
|
||||
cleanCode: true,
|
||||
);
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace DoctrineMigrations;
|
||||
|
||||
use Doctrine\DBAL\Schema\Schema;
|
||||
use Doctrine\Migrations\AbstractMigration;
|
||||
|
||||
final class Version20240919000000 extends AbstractMigration
|
||||
{
|
||||
public function getDescription(): string
|
||||
{
|
||||
return 'Create signals table';
|
||||
}
|
||||
|
||||
public function up(Schema $schema): void
|
||||
{
|
||||
$this->addSql('CREATE TABLE signals (id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, user_key VARCHAR(64) NOT NULL, lat DOUBLE PRECISION NOT NULL, lng DOUBLE PRECISION NOT NULL, created_at DATETIME NOT NULL)');
|
||||
$this->addSql('CREATE INDEX idx_signals_created_at ON signals (created_at)');
|
||||
$this->addSql('CREATE INDEX idx_signals_user_key ON signals (user_key)');
|
||||
}
|
||||
|
||||
public function down(Schema $schema): void
|
||||
{
|
||||
$this->addSql('DROP TABLE signals');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
includes:
|
||||
- vendor/phpstan/phpstan-symfony/extension.neon
|
||||
- vendor/phpstan/phpstan-symfony/rules.neon
|
||||
# - vendor/phpstan/phpstan-doctrine/extension.neon
|
||||
# - vendor/phpstan/phpstan-doctrine/rules.neon
|
||||
|
||||
parameters:
|
||||
level: 8
|
||||
paths:
|
||||
- bin/
|
||||
- config/
|
||||
- public/
|
||||
- src/
|
||||
- tests/
|
||||
reportUnmatchedIgnoredErrors: false
|
||||
ignoreErrors:
|
||||
- identifier: missingType.iterableValue
|
||||
# doctrine:
|
||||
# objectManagerLoader: tests/object-manager.php
|
||||
# allowNullablePropertyForRequiredField: true
|
||||
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<!-- https://phpunit.readthedocs.io/en/latest/configuration.html -->
|
||||
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:noNamespaceSchemaLocation="vendor/phpunit/phpunit/phpunit.xsd"
|
||||
colors="true"
|
||||
failOnDeprecation="true"
|
||||
failOnNotice="true"
|
||||
failOnWarning="true"
|
||||
bootstrap="tests/bootstrap.php"
|
||||
cacheDirectory=".phpunit.cache"
|
||||
>
|
||||
<php>
|
||||
<ini name="display_errors" value="1" />
|
||||
<ini name="error_reporting" value="-1" />
|
||||
<server name="APP_ENV" value="test" force="true" />
|
||||
<server name="SHELL_VERBOSITY" value="-1" />
|
||||
</php>
|
||||
|
||||
<testsuites>
|
||||
<testsuite name="Project Test Suite">
|
||||
<directory>tests</directory>
|
||||
</testsuite>
|
||||
</testsuites>
|
||||
|
||||
<source ignoreSuppressionOfDeprecations="true"
|
||||
ignoreIndirectDeprecations="true"
|
||||
restrictNotices="true"
|
||||
restrictWarnings="true"
|
||||
>
|
||||
<include>
|
||||
<directory>src</directory>
|
||||
</include>
|
||||
|
||||
<deprecationTrigger>
|
||||
<method>Doctrine\Deprecations\Deprecation::trigger</method>
|
||||
<method>Doctrine\Deprecations\Deprecation::delegateTriggerToBackend</method>
|
||||
<function>trigger_deprecation</function>
|
||||
</deprecationTrigger>
|
||||
</source>
|
||||
|
||||
<extensions>
|
||||
</extensions>
|
||||
</phpunit>
|
||||
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
use Rector\CodingStyle\Rector\Catch_\CatchExceptionNameMatchingTypeRector;
|
||||
use Rector\Config\RectorConfig;
|
||||
use Rector\Exception\Configuration\InvalidConfigurationException;
|
||||
use Rector\ValueObject\PhpVersion;
|
||||
|
||||
try {
|
||||
return RectorConfig::configure()
|
||||
->withPaths([
|
||||
__DIR__ . '/src',
|
||||
__DIR__ . '/tests',
|
||||
])
|
||||
->withImportNames(
|
||||
importDocBlockNames: false,
|
||||
importShortClasses: false,
|
||||
removeUnusedImports: true
|
||||
)
|
||||
->withPhpVersion(PhpVersion::PHP_84)
|
||||
->withPhpSets(php84: true)
|
||||
->withPreparedSets(
|
||||
deadCode: true,
|
||||
codeQuality: true,
|
||||
codingStyle: true,
|
||||
typeDeclarations: true,
|
||||
privatization: true,
|
||||
instanceOf: true,
|
||||
earlyReturn: true,
|
||||
doctrineCodeQuality: true
|
||||
)
|
||||
->withSkip([
|
||||
CatchExceptionNameMatchingTypeRector::class
|
||||
]);
|
||||
} catch (InvalidConfigurationException $e) {
|
||||
echo $e->getMessage();
|
||||
exit(1);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use App\Dto\SignalPayload;
|
||||
use App\Entity\Signal;
|
||||
use App\Repository\SignalRepository;
|
||||
use App\Service\SignalSnapshotBuilder;
|
||||
use DateTimeImmutable;
|
||||
use DateTimeZone;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
use Symfony\Component\HttpFoundation\Request;
|
||||
use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
|
||||
use Symfony\Component\HttpKernel\Attribute\MapRequestPayload;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
#[Route(path: '/api/signals')]
|
||||
class SignalController
|
||||
{
|
||||
public function __construct(
|
||||
private readonly SignalRepository $signals,
|
||||
private readonly SignalSnapshotBuilder $snapshotBuilder,
|
||||
) {
|
||||
}
|
||||
|
||||
#[Route(path: '', name: 'api_signals_index', methods: ['GET'])]
|
||||
public function index(Request $request, #[MapQueryParameter('limit', flags: FILTER_NULL_ON_FAILURE)] ?int $limit = null): JsonResponse
|
||||
{
|
||||
$limit = $this->normalizeLimit($limit);
|
||||
|
||||
$clientKey = $this->hashIp($this->extractClientIp($request));
|
||||
|
||||
$signals = $this->signals->findRecent($limit);
|
||||
$snapshot = $this->snapshotBuilder->build($signals);
|
||||
|
||||
$payload = [
|
||||
'clientKey' => $clientKey,
|
||||
'points' => $snapshot['points'],
|
||||
'density' => $snapshot['density'],
|
||||
'latestByUser' => $snapshot['latestByUser'],
|
||||
'totals' => $snapshot['totals'],
|
||||
'updatedAt' => new DateTimeImmutable('now', new DateTimeZone('UTC'))->format(DATE_ATOM),
|
||||
];
|
||||
|
||||
return new JsonResponse($payload);
|
||||
}
|
||||
|
||||
#[Route(path: '', name: 'api_signals_store', methods: ['POST'])]
|
||||
public function store(#[MapRequestPayload(validationFailedStatusCode: JsonResponse::HTTP_UNPROCESSABLE_ENTITY)] SignalPayload $payload, Request $request): JsonResponse
|
||||
{
|
||||
$lat = $payload->lat;
|
||||
$lng = $payload->lng;
|
||||
|
||||
if (! is_finite($lat) || ! is_finite($lng)) {
|
||||
return $this->errorResponse('invalid_coordinates', 'Latitude and longitude must be numbers.', JsonResponse::HTTP_UNPROCESSABLE_ENTITY);
|
||||
}
|
||||
|
||||
if ($lat < -90 || $lat > 90 || $lng < -180 || $lng > 180) {
|
||||
return $this->errorResponse('out_of_bounds', 'Latitude or longitude out of range.', JsonResponse::HTTP_UNPROCESSABLE_ENTITY);
|
||||
}
|
||||
|
||||
$clientIp = $this->extractClientIp($request);
|
||||
$clientKey = $this->hashIp($clientIp);
|
||||
|
||||
$signal = new Signal()
|
||||
->setUserKey($clientKey)
|
||||
->setLat($lat)
|
||||
->setLng($lng)
|
||||
->setCreatedAt(new DateTimeImmutable('now', new DateTimeZone('UTC')));
|
||||
|
||||
$this->signals->save($signal);
|
||||
|
||||
return new JsonResponse([
|
||||
'status' => 'stored',
|
||||
'clientKey' => $clientKey,
|
||||
'point' => [
|
||||
'id' => $signal->getId(),
|
||||
'lat' => $signal->getLat(),
|
||||
'lng' => $signal->getLng(),
|
||||
'createdAt' => $signal->getCreatedAt()->format(DATE_ATOM),
|
||||
'userKey' => $signal->getUserKey(),
|
||||
],
|
||||
], JsonResponse::HTTP_CREATED);
|
||||
}
|
||||
|
||||
private function errorResponse(string $error, string $message, int $statusCode): JsonResponse
|
||||
{
|
||||
return new JsonResponse([
|
||||
'error' => $error,
|
||||
'message' => $message,
|
||||
], $statusCode);
|
||||
}
|
||||
|
||||
private function normalizeLimit(?int $limit): int
|
||||
{
|
||||
$limit ??= 750;
|
||||
if ($limit < 1 || $limit > 5000) {
|
||||
return 750;
|
||||
}
|
||||
|
||||
return $limit;
|
||||
}
|
||||
|
||||
private function extractClientIp(Request $request): string
|
||||
{
|
||||
$forwarded = $request->headers->get('X-Forwarded-For');
|
||||
if ($forwarded !== null && $forwarded !== '') {
|
||||
$parts = array_filter(array_map('trim', explode(',', $forwarded)));
|
||||
if ($parts !== []) {
|
||||
return $parts[0];
|
||||
}
|
||||
}
|
||||
|
||||
return $request->getClientIp() ?? '0.0.0.0';
|
||||
}
|
||||
|
||||
private function hashIp(string $ip): string
|
||||
{
|
||||
return substr(hash('sha256', $ip), 0, 12);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
namespace App\DataFixtures;
|
||||
|
||||
use Doctrine\Bundle\FixturesBundle\Fixture;
|
||||
use Doctrine\Persistence\ObjectManager;
|
||||
|
||||
class AppFixtures extends Fixture
|
||||
{
|
||||
public function load(ObjectManager $manager): void
|
||||
{
|
||||
// $product = new Product();
|
||||
// $manager->persist($product);
|
||||
|
||||
$manager->flush();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\DataFixtures;
|
||||
|
||||
use App\Entity\Signal;
|
||||
use DateInterval;
|
||||
use DateTimeImmutable;
|
||||
use DateTimeZone;
|
||||
use Doctrine\Bundle\FixturesBundle\Fixture;
|
||||
use Doctrine\Persistence\ObjectManager;
|
||||
|
||||
class SignalFixtures extends Fixture
|
||||
{
|
||||
public function load(ObjectManager $manager): void
|
||||
{
|
||||
$baseTime = new DateTimeImmutable('2024-08-01 12:00:00', new DateTimeZone('UTC'));
|
||||
$coordinates = [
|
||||
[
|
||||
'user' => 'user-alpha',
|
||||
'lat' => -11.6877,
|
||||
'lng' => 27.5026,
|
||||
'offset' => 0,
|
||||
],
|
||||
[
|
||||
'user' => 'user-beta',
|
||||
'lat' => -11.6895,
|
||||
'lng' => 27.5081,
|
||||
'offset' => 3,
|
||||
],
|
||||
[
|
||||
'user' => 'user-alpha',
|
||||
'lat' => -11.6852,
|
||||
'lng' => 27.4974,
|
||||
'offset' => 6,
|
||||
],
|
||||
];
|
||||
|
||||
foreach ($coordinates as $config) {
|
||||
$signal = new Signal()
|
||||
->setUserKey($config['user'])
|
||||
->setLat($config['lat'])
|
||||
->setLng($config['lng'])
|
||||
->setCreatedAt($baseTime->add(new DateInterval(sprintf('PT%dM', $config['offset']))));
|
||||
|
||||
$manager->persist($signal);
|
||||
}
|
||||
|
||||
$manager->flush();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Dto;
|
||||
|
||||
final readonly class SignalPayload
|
||||
{
|
||||
public function __construct(
|
||||
public float $lat,
|
||||
public float $lng,
|
||||
) {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Entity;
|
||||
|
||||
use App\Repository\SignalRepository;
|
||||
use DateTimeImmutable;
|
||||
use Doctrine\DBAL\Types\Types;
|
||||
use Doctrine\ORM\Mapping as ORM;
|
||||
|
||||
#[ORM\Entity(repositoryClass: SignalRepository::class)]
|
||||
#[ORM\Table(name: 'signals')]
|
||||
#[ORM\Index(columns: ['created_at'], name: 'idx_signals_created_at')]
|
||||
#[ORM\Index(columns: ['user_key'], name: 'idx_signals_user_key')]
|
||||
class Signal
|
||||
{
|
||||
#[ORM\Id]
|
||||
#[ORM\GeneratedValue]
|
||||
#[ORM\Column(type: Types::INTEGER)]
|
||||
private ?int $id = null; // @phpstan-ignore property.unusedType
|
||||
|
||||
#[ORM\Column(type: Types::STRING, length: 64)]
|
||||
private string $userKey;
|
||||
|
||||
#[ORM\Column(type: Types::FLOAT)]
|
||||
private float $lat;
|
||||
|
||||
#[ORM\Column(type: Types::FLOAT)]
|
||||
private float $lng;
|
||||
|
||||
#[ORM\Column(type: Types::DATETIME_IMMUTABLE, name: 'created_at')]
|
||||
private DateTimeImmutable $createdAt;
|
||||
|
||||
public function getId(): ?int
|
||||
{
|
||||
return $this->id;
|
||||
}
|
||||
|
||||
public function getUserKey(): string
|
||||
{
|
||||
return $this->userKey;
|
||||
}
|
||||
|
||||
public function setUserKey(string $userKey): self
|
||||
{
|
||||
$this->userKey = $userKey;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getLat(): float
|
||||
{
|
||||
return $this->lat;
|
||||
}
|
||||
|
||||
public function setLat(float $lat): self
|
||||
{
|
||||
$this->lat = $lat;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getLng(): float
|
||||
{
|
||||
return $this->lng;
|
||||
}
|
||||
|
||||
public function setLng(float $lng): self
|
||||
{
|
||||
$this->lng = $lng;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getCreatedAt(): DateTimeImmutable
|
||||
{
|
||||
return $this->createdAt;
|
||||
}
|
||||
|
||||
public function setCreatedAt(DateTimeImmutable $createdAt): self
|
||||
{
|
||||
$this->createdAt = $createdAt;
|
||||
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Repository;
|
||||
|
||||
use App\Entity\Signal;
|
||||
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
|
||||
use Doctrine\Persistence\ManagerRegistry;
|
||||
|
||||
/**
|
||||
* @extends ServiceEntityRepository<Signal>
|
||||
*/
|
||||
class SignalRepository extends ServiceEntityRepository
|
||||
{
|
||||
public function __construct(ManagerRegistry $registry)
|
||||
{
|
||||
parent::__construct($registry, Signal::class);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<Signal>
|
||||
*/
|
||||
public function findRecent(int $limit): array
|
||||
{
|
||||
return $this->createQueryBuilder('signal')
|
||||
->orderBy('signal.createdAt', 'DESC')
|
||||
->setMaxResults($limit)
|
||||
->getQuery()
|
||||
->getResult();
|
||||
}
|
||||
|
||||
public function save(Signal $signal): void
|
||||
{
|
||||
$entityManager = $this->getEntityManager();
|
||||
$entityManager->persist($signal);
|
||||
$entityManager->flush();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Service;
|
||||
|
||||
use App\Entity\Signal;
|
||||
|
||||
class SignalSnapshotBuilder
|
||||
{
|
||||
/**
|
||||
* @param list<Signal> $signals
|
||||
*
|
||||
* @return array{
|
||||
* points: list<array{id: int, lat: float, lng: float, createdAt: string, userKey: string}>,
|
||||
* density: list<array{lat: float, lng: float, intensity: int}>,
|
||||
* latestByUser: list<array{id: int, lat: float, lng: float, createdAt: string, userKey: string}>,
|
||||
* totals: array{points: int, contributors: int}
|
||||
* }
|
||||
*/
|
||||
public function build(array $signals): array
|
||||
{
|
||||
$points = [];
|
||||
$densityBuckets = [];
|
||||
$latestByUser = [];
|
||||
|
||||
foreach ($signals as $signal) {
|
||||
$point = [
|
||||
'id' => (int) $signal->getId(),
|
||||
'lat' => $signal->getLat(),
|
||||
'lng' => $signal->getLng(),
|
||||
'createdAt' => $signal->getCreatedAt()->format(DATE_ATOM),
|
||||
'userKey' => $signal->getUserKey(),
|
||||
];
|
||||
|
||||
$points[] = $point;
|
||||
|
||||
$bucketLat = round($signal->getLat(), 3);
|
||||
$bucketLng = round($signal->getLng(), 3);
|
||||
$bucketKey = $bucketLat . ':' . $bucketLng;
|
||||
|
||||
if (! isset($densityBuckets[$bucketKey])) {
|
||||
$densityBuckets[$bucketKey] = [
|
||||
'lat' => $bucketLat,
|
||||
'lng' => $bucketLng,
|
||||
'intensity' => 0,
|
||||
'latestPoint' => $point,
|
||||
];
|
||||
}
|
||||
|
||||
$densityBuckets[$bucketKey]['intensity']++;
|
||||
if ($point['createdAt'] > $densityBuckets[$bucketKey]['latestPoint']['createdAt']) {
|
||||
$densityBuckets[$bucketKey]['latestPoint'] = $point;
|
||||
}
|
||||
|
||||
$existingLatest = $latestByUser[$point['userKey']] ?? null;
|
||||
if ($existingLatest === null || $point['createdAt'] > $existingLatest['createdAt']) {
|
||||
$latestByUser[$point['userKey']] = $point;
|
||||
}
|
||||
}
|
||||
|
||||
usort($points, static fn (array $a, array $b): int => strcmp($b['createdAt'], $a['createdAt']));
|
||||
|
||||
$density = array_values(array_map(
|
||||
static fn (array $bucket): array => [
|
||||
'lat' => $bucket['lat'],
|
||||
'lng' => $bucket['lng'],
|
||||
'intensity' => $bucket['intensity'],
|
||||
],
|
||||
$densityBuckets,
|
||||
));
|
||||
|
||||
usort($density, static fn (array $a, array $b): int => $b['intensity'] <=> $a['intensity']);
|
||||
|
||||
$latest = array_values($latestByUser);
|
||||
usort($latest, static fn (array $a, array $b): int => strcmp($b['createdAt'], $a['createdAt']));
|
||||
|
||||
return [
|
||||
'points' => $points,
|
||||
'density' => $density,
|
||||
'latestByUser' => $latest,
|
||||
'totals' => [
|
||||
'points' => count($points),
|
||||
'contributors' => count($latestByUser),
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,91 @@
|
||||
{
|
||||
"doctrine/deprecations": {
|
||||
"version": "1.1",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "1.0",
|
||||
"ref": "87424683adc81d7dc305eefec1fced883084aab9"
|
||||
}
|
||||
},
|
||||
"doctrine/doctrine-bundle": {
|
||||
"version": "2.17",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "2.13",
|
||||
"ref": "620b57f496f2e599a6015a9fa222c2ee0a32adcb"
|
||||
},
|
||||
"files": [
|
||||
"config/packages/doctrine.yaml",
|
||||
"src/Entity/.gitignore",
|
||||
"src/Repository/.gitignore"
|
||||
]
|
||||
},
|
||||
"doctrine/doctrine-fixtures-bundle": {
|
||||
"version": "4.1",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "3.0",
|
||||
"ref": "1f5514cfa15b947298df4d771e694e578d4c204d"
|
||||
},
|
||||
"files": [
|
||||
"src/DataFixtures/AppFixtures.php"
|
||||
]
|
||||
},
|
||||
"doctrine/doctrine-migrations-bundle": {
|
||||
"version": "3.4",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "3.1",
|
||||
"ref": "1d01ec03c6ecbd67c3375c5478c9a423ae5d6a33"
|
||||
},
|
||||
"files": [
|
||||
"config/packages/doctrine_migrations.yaml",
|
||||
"migrations/.gitignore"
|
||||
]
|
||||
},
|
||||
"nelmio/cors-bundle": {
|
||||
"version": "2.5",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "1.5",
|
||||
"ref": "6bea22e6c564fba3a1391615cada1437d0bde39c"
|
||||
},
|
||||
"files": [
|
||||
"config/packages/nelmio_cors.yaml"
|
||||
]
|
||||
},
|
||||
"phpstan/phpstan": {
|
||||
"version": "2.1",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes-contrib",
|
||||
"branch": "main",
|
||||
"version": "1.0",
|
||||
"ref": "5e490cc197fb6bb1ae22e5abbc531ddc633b6767"
|
||||
},
|
||||
"files": [
|
||||
"phpstan.dist.neon"
|
||||
]
|
||||
},
|
||||
"phpunit/phpunit": {
|
||||
"version": "12.4",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "11.1",
|
||||
"ref": "c6658a60fc9d594805370eacdf542c3d6b5c0869"
|
||||
},
|
||||
"files": [
|
||||
".env.test",
|
||||
"phpunit.dist.xml",
|
||||
"tests/bootstrap.php",
|
||||
"bin/phpunit"
|
||||
]
|
||||
},
|
||||
"symfony/console": {
|
||||
"version": "7.3",
|
||||
"recipe": {
|
||||
@@ -44,6 +131,18 @@
|
||||
".editorconfig"
|
||||
]
|
||||
},
|
||||
"symfony/property-info": {
|
||||
"version": "7.3",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "7.3",
|
||||
"ref": "dae70df71978ae9226ae915ffd5fad817f5ca1f7"
|
||||
},
|
||||
"files": [
|
||||
"config/packages/property_info.yaml"
|
||||
]
|
||||
},
|
||||
"symfony/routing": {
|
||||
"version": "7.3",
|
||||
"recipe": {
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace App\Tests\Functional;
|
||||
|
||||
use App\DataFixtures\SignalFixtures;
|
||||
use App\Entity\Signal;
|
||||
use Doctrine\ORM\EntityManagerInterface;
|
||||
use Doctrine\ORM\Tools\SchemaTool;
|
||||
use Symfony\Bundle\FrameworkBundle\KernelBrowser;
|
||||
use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
|
||||
class SignalControllerTest extends WebTestCase
|
||||
{
|
||||
private KernelBrowser $client;
|
||||
|
||||
private EntityManagerInterface $entityManager;
|
||||
|
||||
protected function setUp(): void
|
||||
{
|
||||
$this->client = static::createClient();
|
||||
$entityManager = $this->client->getContainer()->get(EntityManagerInterface::class);
|
||||
self::assertInstanceOf(EntityManagerInterface::class, $entityManager);
|
||||
$this->entityManager = $entityManager;
|
||||
|
||||
$metadata = $this->entityManager->getMetadataFactory()->getAllMetadata();
|
||||
$schemaTool = new SchemaTool($this->entityManager);
|
||||
$schemaTool->dropDatabase();
|
||||
if ($metadata !== []) {
|
||||
$schemaTool->createSchema($metadata);
|
||||
}
|
||||
|
||||
new SignalFixtures()->load($this->entityManager);
|
||||
}
|
||||
|
||||
#[\Override]
|
||||
protected function tearDown(): void
|
||||
{
|
||||
parent::tearDown();
|
||||
|
||||
if (isset($this->entityManager)) {
|
||||
$this->entityManager->close();
|
||||
unset($this->entityManager);
|
||||
}
|
||||
}
|
||||
|
||||
public function testIndexReturnsRecentSignals(): void
|
||||
{
|
||||
$this->client->request('GET', '/api/signals');
|
||||
|
||||
self::assertResponseIsSuccessful();
|
||||
|
||||
$content = $this->client->getResponse()->getContent();
|
||||
self::assertIsString($content);
|
||||
$payload = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
|
||||
|
||||
self::assertSame(substr(hash('sha256', '127.0.0.1'), 0, 12), $payload['clientKey']);
|
||||
self::assertCount(3, $payload['points']);
|
||||
self::assertSame(3, $payload['totals']['points']);
|
||||
self::assertSame(2, $payload['totals']['contributors']);
|
||||
self::assertSame(-11.6852, $payload['points'][0]['lat']);
|
||||
}
|
||||
|
||||
public function testIndexRespectsLimitQueryParameter(): void
|
||||
{
|
||||
$this->client->request('GET', '/api/signals?limit=1');
|
||||
|
||||
self::assertResponseIsSuccessful();
|
||||
|
||||
$content = $this->client->getResponse()->getContent();
|
||||
self::assertIsString($content);
|
||||
$payload = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
|
||||
|
||||
self::assertCount(1, $payload['points']);
|
||||
self::assertSame(1, $payload['totals']['points']);
|
||||
}
|
||||
|
||||
public function testStorePersistsNewSignal(): void
|
||||
{
|
||||
$body = [
|
||||
'lat' => -11.6901,
|
||||
'lng' => 27.4959,
|
||||
];
|
||||
|
||||
$this->client->request('POST', '/api/signals', [], [], [
|
||||
'CONTENT_TYPE' => 'application/json',
|
||||
], json_encode($body, JSON_THROW_ON_ERROR));
|
||||
|
||||
self::assertResponseStatusCodeSame(Response::HTTP_CREATED);
|
||||
|
||||
$content = $this->client->getResponse()->getContent();
|
||||
self::assertIsString($content);
|
||||
$payload = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
|
||||
self::assertSame('stored', $payload['status']);
|
||||
self::assertSame($body['lat'], $payload['point']['lat']);
|
||||
self::assertSame($body['lng'], $payload['point']['lng']);
|
||||
|
||||
$repository = $this->entityManager->getRepository(Signal::class);
|
||||
$signals = $repository->findAll();
|
||||
self::assertCount(4, $signals);
|
||||
}
|
||||
|
||||
public function testStoreRejectsInvalidCoordinates(): void
|
||||
{
|
||||
$body = [
|
||||
'lat' => 181,
|
||||
'lng' => 10,
|
||||
];
|
||||
|
||||
$this->client->request('POST', '/api/signals', [], [], [
|
||||
'CONTENT_TYPE' => 'application/json',
|
||||
], json_encode($body, JSON_THROW_ON_ERROR));
|
||||
|
||||
self::assertResponseStatusCodeSame(Response::HTTP_UNPROCESSABLE_ENTITY);
|
||||
|
||||
$content = $this->client->getResponse()->getContent();
|
||||
self::assertIsString($content);
|
||||
$payload = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
|
||||
self::assertSame('out_of_bounds', $payload['error']);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
|
||||
use Symfony\Component\Dotenv\Dotenv;
|
||||
|
||||
require dirname(__DIR__).'/vendor/autoload.php';
|
||||
|
||||
new Dotenv()->bootEnv(dirname(__DIR__).'/.env');
|
||||
|
||||
if ($_SERVER['APP_DEBUG']) {
|
||||
umask(0000);
|
||||
}
|
||||
Reference in New Issue
Block a user