nigga

Author: xrenvtomate

src/App.tsx

@@ -1,6 +1,11 @@
 import { useState, useCallback, useMemo, useEffect } from "react"
 import { MapContainer } from "./components/Map/MapContainer"
 import { useMapData } from "./hooks/useMapData"
+import {
+  FreeSpotsFilter,
+  ZoneSelector,
+  type FreeSpotFilterValue,
+} from "./components/Filters"
 import type { MapState } from "./types"
 import type { Zone } from "./types/api"
 import "./App.css"
@@ -11,33 +16,54 @@ function App() {
     zoom: 12,
   })
 
+  const [freeSpotFilter, setFreeSpotFilter] =
+    useState<FreeSpotFilterValue>("all")
+  const [selectedZoneId, setSelectedZoneId] = useState<number | null>(null)
+
   const { zones, loading, error, total, refetch } = useMapData({
     autoFetch: true,
   })
 
+  const filteredZones = useMemo(() => {
+    return zones.filter((zone) => {
+      const freeSpots =
+        zone.occupied !== undefined ? zone.capacity - zone.occupied : 0
+
+      switch (freeSpotFilter) {
+        case "one":
+          return freeSpots === 1
+        case "twoOrMore":
+          return freeSpots >= 2
+        case "all":
+        default:
+          return true
+      }
+    })
+  }, [zones, freeSpotFilter])
+
   const totalFreeSpots = useMemo(
     () =>
-      zones.reduce((acc, zone) => {
+      filteredZones.reduce((acc, zone) => {
         const occupied = zone.occupied
         const capacity = zone.capacity
         if (occupied !== undefined) {
           return acc + (capacity - occupied)
         }
         return acc
       }, 0),
-    [zones]
+    [filteredZones]
   )
 
   const totalCapacity = useMemo(
     () =>
-      zones.reduce((acc, zone) => {
+      filteredZones.reduce((acc, zone) => {
         const capacity = zone.capacity
         return acc + capacity
       }, 0),
-    [zones]
+    [filteredZones]
   )
 
-  const handleZoneClick = useCallback((zone: Zone) => {
+  const focusOnZone = useCallback((zone: Zone) => {
     const points = zone.points
     if (points && points.length > 0) {
       const centerLat =
@@ -46,12 +72,31 @@ function App() {
         points.reduce((sum, p) => sum + p.longitude, 0) / points.length
 
       setMapState((prev) => ({
-        ...prev,
         center: [centerLat, centerLng],
+        zoom: Math.max(prev.zoom, 18),
       }))
     }
   }, [])
 
+  const handleZoneClick = useCallback(
+    (zone: Zone) => {
+      focusOnZone(zone)
+    },
+    [focusOnZone]
+  )
+
+  const handleZoneSelect = useCallback(
+    (zone: Zone | null) => {
+      if (zone) {
+        setSelectedZoneId(zone.zone_id)
+        focusOnZone(zone)
+      } else {
+        setSelectedZoneId(null)
+      }
+    },
+    [focusOnZone]
+  )
+
   const handleMapStateChange = useCallback((newState: MapState) => {
     setMapState(newState)
   }, [])
@@ -70,19 +115,40 @@ function App() {
       <main className="mx-auto">
         <div className="relative h-[calc(100vh)] w-full">
           <MapContainer
-            zones={zones}
+            zones={filteredZones}
             mapState={mapState}
             onMapStateChange={handleMapStateChange}
             onZoneClick={handleZoneClick}
             className="w-full h-full"
           />
 
+          <div className="absolute top-2 left-16 right-2 sm:top-4 sm:left-16 sm:right-auto sm:max-w-md z-[1000] bg-white/90 backdrop-blur-sm rounded-lg shadow-lg border border-gray-200">
+            <div className="p-3 sm:p-4">
+              <div className="flex flex-col gap-3">
+                <div>
+                  <h3 className="text-xs sm:text-sm font-semibold text-gray-700 mb-2">
+                    Фильтр по свободным местам
+                  </h3>
+                  <FreeSpotsFilter
+                    value={freeSpotFilter}
+                    onChange={setFreeSpotFilter}
+                  />
+                </div>
+                <ZoneSelector
+                  zones={zones}
+                  selectedZoneId={selectedZoneId}
+                  onZoneSelect={handleZoneSelect}
+                />
+              </div>
+            </div>
+          </div>
+
           <div className="absolute bottom-2 left-2 right-2 sm:bottom-4 sm:left-4 sm:right-4 z-[1000] bg-white/70 backdrop-blur-sm rounded-lg shadow-lg border border-gray-200 map-overlay">
             <div className="flex items-center justify-between p-1 sm:p-2 min-w-0">
               <div className="flex items-center space-x-2 sm:space-x-3 min-w-0 flex-1 flex-wrap gap-1">
                 {total > 0 && (
                   <span className="text-xs sm:text-sm text-gray-700">
-                    Зон: {total}
+                    Зон: {filteredZones.length}/{total}
                   </span>
                 )}
                 {totalCapacity > 0 && (

src/components/Filters/FreeSpotsFilter.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+export type FreeSpotFilterValue = "all" | "one" | "twoOrMore"
+
+interface FreeSpotsFilterProps {
+  value: FreeSpotFilterValue
+  onChange: (value: FreeSpotFilterValue) => void
+}
+
+export const FreeSpotsFilter: React.FC<FreeSpotsFilterProps> = ({
+  value,
+  onChange,
+}) => {
+  const filters: { value: FreeSpotFilterValue; label: string }[] = [
+    { value: "all", label: "Все" },
+    { value: "one", label: "1 свободное место" },
+    { value: "twoOrMore", label: "2 и более свободных мест" },
+  ]
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {filters.map((filter) => (
+        <button
+          key={filter.value}
+          onClick={() => onChange(filter.value)}
+          className={`px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors ${
+            value === filter.value
+              ? "bg-blue-600 text-white"
+              : "bg-white text-gray-700 hover:bg-gray-100 border border-gray-300"
+          }`}
+        >
+          {filter.label}
+        </button>
+      ))}
+    </div>
+  )
+}

src/components/Filters/ZoneSelector.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import type { Zone } from "../../types/api"
+
+interface ZoneSelectorProps {
+  zones: Zone[]
+  selectedZoneId: number | null
+  onZoneSelect: (zone: Zone | null) => void
+}
+
+export const ZoneSelector: React.FC<ZoneSelectorProps> = ({
+  zones,
+  selectedZoneId,
+  onZoneSelect,
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value
+    if (value === "") {
+      onZoneSelect(null)
+    } else {
+      const zone = zones.find((z) => z.zone_id === Number(value))
+      if (zone) {
+        onZoneSelect(zone)
+      }
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <label
+        htmlFor="zone-selector"
+        className="text-xs sm:text-sm font-medium text-gray-700 whitespace-nowrap"
+      >
+        Перейти к зоне:
+      </label>
+      <select
+        id="zone-selector"
+        value={selectedZoneId ?? ""}
+        onChange={handleChange}
+        className="px-2 py-1.5 text-xs sm:text-sm border border-gray-300 rounded-lg bg-white text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+      >
+        <option value="">Выберите зону</option>
+        {zones.map((zone) => (
+          <option key={zone.zone_id} value={zone.zone_id}>
+            Зона {zone.zone_id}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

src/components/Filters/index.ts

@@ -0,0 +1,3 @@
+export { FreeSpotsFilter } from "./FreeSpotsFilter"
+export type { FreeSpotFilterValue } from "./FreeSpotsFilter"
+export { ZoneSelector } from "./ZoneSelector"

src/components/Map/MapContainer.tsx

@@ -47,6 +47,27 @@ const MapEventHandler: React.FC<{
   return null
 }
 
+const MapViewController: React.FC<{ mapState: MapState }> = ({ mapState }) => {
+  const map = useMap()
+
+  useEffect(() => {
+    const currentCenter = map.getCenter()
+    const currentZoom = map.getZoom()
+
+    const [newLat, newLng] = mapState.center
+    const centerChanged =
+      Math.abs(currentCenter.lat - newLat) > 0.000001 ||
+      Math.abs(currentCenter.lng - newLng) > 0.000001
+    const zoomChanged = currentZoom !== mapState.zoom
+
+    if (centerChanged || zoomChanged) {
+      map.setView(mapState.center, mapState.zoom)
+    }
+  }, [map, mapState])
+
+  return null
+}
+
 export const MapContainer: React.FC<MapContainerProps> = ({
   zones,
   mapState,
@@ -70,6 +91,7 @@ export const MapContainer: React.FC<MapContainerProps> = ({
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
 
+        <MapViewController mapState={mapState} />
         <MapEventHandler onMapStateChange={onMapStateChange} />
 
         <MapPoints zones={zones} onZoneClick={onZoneClick} />

src/components/Map/MapPoints.tsx

@@ -37,9 +37,9 @@ const createZoneIcon = (freeSpots: number | undefined) => {
 const calculateCenterLine = (points: Point[]): [number, number][] => {
   if (!points || points.length !== 4) return []
 
-  const [p0, p1, p2] = points
+  const [p0, p1, p2, p3] = points
 
-  if (!p0 || !p1 || !p2) return []
+  if (!p0 || !p1 || !p2 || !p3) return []
 
   const dist1 = Math.sqrt(
     Math.pow(p1.latitude - p0.latitude, 2) +
@@ -50,15 +50,23 @@ const calculateCenterLine = (points: Point[]): [number, number][] => {
       Math.pow(p2.longitude - p1.longitude, 2)
   )
 
-  if (dist1 > dist2) {
+  if (dist1 < dist2) {
+    const midShort1Lat = (p0.latitude + p1.latitude) / 2
+    const midShort1Lng = (p0.longitude + p1.longitude) / 2
+    const midShort2Lat = (p2.latitude + p3.latitude) / 2
+    const midShort2Lng = (p2.longitude + p3.longitude) / 2
     return [
-      [p0.latitude, p0.longitude],
-      [p1.latitude, p1.longitude],
+      [midShort1Lat, midShort1Lng],
+      [midShort2Lat, midShort2Lng],
     ]
   } else {
+    const midShort1Lat = (p1.latitude + p2.latitude) / 2
+    const midShort1Lng = (p1.longitude + p2.longitude) / 2
+    const midShort2Lat = (p3.latitude + p0.latitude) / 2
+    const midShort2Lng = (p3.longitude + p0.longitude) / 2
     return [
-      [p1.latitude, p1.longitude],
-      [p2.latitude, p2.longitude],
+      [midShort1Lat, midShort1Lng],
+      [midShort2Lat, midShort2Lng],
     ]
   }
 }