Merge pull request #3 from ParkTrack-Project/fix/corrections-from-nawinds-1

Fix/design, Zone and stage logic

Author: Shparkus

public/sample.png

@@ -1,4 +1,4 @@
-import { ParkingZone, GeoPoint, PxPoint, ParkingLot, Id } from '@/types';
+import { ParkingZone, GeoPoint, PxPoint, Id } from '@/types';
 import { useRequestLog } from './requestLog';
 
 type Config = { baseUrl: string; token?: string };
@@ -34,29 +34,13 @@ async function request<T>(method: 'GET'|'POST'|'PUT'|'DELETE', path: string, bod
 }
 
 // --- helpers & mappers ---
-const gp = (x:number, y:number, long:number|null=null, lat:number|null=null): GeoPoint => ({ x,y,long,lat });
+const gp = (x:number, y:number, longitude:number|null=null, latitude:number|null=null): GeoPoint => ({ x,y,longitude,latitude });
 const px = (p: GeoPoint): PxPoint => ({ x: p.x, y: p.y });
 
-function mapLotFromAPI(l: any): ParkingLot {
-  const pts = (l.points || []).map((p: any) => gp(+p.x, +p.y, p.long ?? null, p.lat ?? null)) as GeoPoint[];
-  return {
-    lot_id: l.lot_id as Id,
-    long: l.long ?? null,
-    lat:  l.lat  ?? null,
-    points: pts,
-    image_polygon: pts.map(px)
-  };
-}
-
 function mapZoneFromAPI(z: any): ParkingZone {
-  const pts = (z.points || []).map((p: any) => gp(+p.x, +p.y, p.long ?? null, p.lat ?? null)) as GeoPoint[];
+  const pts = (z.points || []).map((p: any) => gp(+p.x, +p.y, p.longitude ?? null, p.latitude ?? null)) as GeoPoint[];
   const quad = pts.slice(0,4).map(px) as [PxPoint, PxPoint, PxPoint, PxPoint];
 
-  // если сервер вернёт lots внутри зоны — распарсим
-  const lotsArr: ParkingLot[] = Array.isArray(z.lots)
-    ? z.lots.map(mapLotFromAPI)
-    : [];
-
   return {
     id: z.zone_id as Id,
     camera_id: +z.camera_id,
@@ -65,34 +49,20 @@ function mapZoneFromAPI(z: any): ParkingZone {
     pay: +z.pay,
     image_quad: quad,
     points: pts.slice(0,4) as any,
-    lots: lotsArr,
-    lots_count: z.lots_count,
     created_at: z.created_at,
     updated_at: z.updated_at
   };
 }
 
-// ——— ТЕПЕРЬ ЗОНЫ ОТПРАВЛЯЕМ С L O T S В ТЕЛЕ ———
-function buildLotsForBody(lots: ParkingLot[]) {
-  return lots.map(l => ({
-    lot_id: l.lot_id,
-    long: l.long ?? null,
-    lat:  l.lat  ?? null,
-    // формируем points из image_polygon; geo пока null
-    points: (l.image_polygon?.length ? l.image_polygon : l.points)?.map(p => ({
-      x: p.x, y: p.y, long: null, lat: null
-    }))
-  }));
-}
-
 function buildCreateZoneBody(z: ParkingZone) {
   return {
     camera_id: z.camera_id,
     zone_type: z.zone_type,
     capacity: z.capacity,
     pay: z.pay,
-    points: z.points.map(p => ({ x: p.x, y: p.y, long: p.long, lat: p.lat })),
-    lots: buildLotsForBody(z.lots || [])
+    points: z.points.map(p => ({
+      x: p.x, y: p.y, longitude: p.longitude, latitude: p.latitude
+    }))
   };
 }
 
@@ -101,23 +71,22 @@ function buildUpdateZoneBody(z: ParkingZone) {
     zone_type: z.zone_type,
     capacity: z.capacity,
     pay: z.pay,
-    points: z.points.map(p => ({ x: p.x, y: p.y, long: p.long, lat: p.lat })),
-    lots: buildLotsForBody(z.lots || [])
+    points: z.points.map(p => ({
+      x: p.x, y: p.y, longitude: p.longitude, latitude: p.latitude
+    }))
   };
 }
 
 // --- public API ---
 export const api = {
-  // ZONES
   async listZones(cameraId?: number) {
     const q = cameraId ? `?camera_id=${encodeURIComponent(cameraId)}` : '';
     const arr = await request<any[]>('GET', `/zones${q}`);
     return arr.map(mapZoneFromAPI);
   },
   async createZone(z: ParkingZone) {
-    // Сервер может вернуть { zone_id } или целую зону — поддержим оба
     const resp = await request<any>('POST', `/zones/new`, buildCreateZoneBody(z));
-    return resp;
+    return resp; // { zone_id } или полная зона — поддерживаем оба
   },
   async updateZone(zoneId: Id, z: ParkingZone) {
     const updated = await request<any>('PUT', `/zones/${encodeURIComponent(String(zoneId))}`, buildUpdateZoneBody(z));
@@ -127,14 +96,6 @@ export const api = {
     await request<void>('DELETE', `/zones/${encodeURIComponent(String(zoneId))}`);
   },
 
-  // При чтении lots по активной зоне можно оставить вспомогательные маршруты,
-  // если на сервере они есть; фронт больше их НЕ вызывает при сохранении.
-  async getLots(zoneId: Id) {
-    const arr = await request<any[]>('GET', `/zones/${encodeURIComponent(String(zoneId))}/lots`);
-    return arr.map(mapLotFromAPI);
-  },
-
-  // Snapshot JSON
   async getSnapshot(cameraId: number) {
     return request<{ image_url: string; captured_at?: string; width?: number; height?: number }>(
       'GET',

src/api/client.ts

@@ -3,11 +3,10 @@ import useImage from 'use-image';
 import { useEffect, useRef, useState } from 'react';
 import { useStore } from '@/store/useStore';
 import ZoneLayer from './ZoneLayer';
-import LotLayer from './LotLayer';
 import type { KonvaEventObject } from 'konva/lib/Node';
 
 export default function ImageViewport() {
-  const { image, scale, offsetX, offsetY, setView } = useStore();
+  const { image, scale, offsetX, offsetY, setView, tool } = useStore();
   const [img] = useImage(image?.url ?? '');
   const stageRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -48,8 +47,10 @@ export default function ImageViewport() {
     setView(newScale, newPos.x, newPos.y);
   };
 
-  const onDragEnd = (e: KonvaEventObject<DragEvent>) => {
-    const st = e.target; // Stage
+  const onDragEnd = (_e: KonvaEventObject<DragEvent>) => {
+    // Stage draggable только в select — значит, просто фиксируем позицию
+    const st = stageRef.current;
+    if (!st) return;
     setView(scale, st.x(), st.y());
   };
 
@@ -62,7 +63,7 @@ export default function ImageViewport() {
       ) : (
         <>
           <div className="toolbar">
-            <div className="badge">scale: {scale.toFixed(2)}</div>
+            <div className="badge">scale: {scale.toFixed(2)} • tool: {tool}</div>
           </div>
           <Stage
             ref={stageRef}
@@ -73,7 +74,7 @@ export default function ImageViewport() {
             x={offsetX}
             y={offsetY}
             onWheel={onWheel}
-            draggable
+            draggable={tool === 'select'}
             onDragEnd={onDragEnd}
           >
             <Layer>
@@ -85,7 +86,6 @@ export default function ImageViewport() {
                 />
               )}
               <ZoneLayer />
-              <LotLayer />
             </Layer>
           </Stage>
         </>

src/components/ImageViewport.tsx

@@ -4,20 +4,12 @@ import { Button, Field, Input, Select } from './UiKit';
 export default function Sidebar() {
   const s = useStore();
   const zone = s.zones.find(z => String(z.id) === String(s.activeZoneId));
-  const lot  = zone?.lots.find(l => String(l.lot_id) === String(s.activeLotId));
 
-  function startNewZone() {
-    const z = s.addZone();
-    s.selectZone(z.id);
-  }
-  function startDrawLot() {
-    if (!zone) return;
-    s.lotDraftClear();
-    s.setTool('drawLot');
+  function startDrawZone() {
+    s.addZone(); // теперь это включает drawZone и очищает черновик
   }
   function finishEditing() {
     s.setTool('select');
-    s.lotDraftClear();
   }
 
   return (
@@ -30,7 +22,10 @@ export default function Sidebar() {
       <hr/>
 
       <div className="col">
-        <Button onClick={startNewZone}>+ Добавить зону</Button>
+        <Button onClick={startDrawZone}>+ Добавить зону</Button>
+        {s.tool === 'drawZone' && s.zoneDraft && s.zoneDraft.length > 0 && (
+          <Button className="danger" onClick={()=>s.zoneDraftClear()}>Отменить рисование</Button>
+        )}
         <Button className="ghost" onClick={()=>s.loadZones()}>Загрузить зоны (GET)</Button>
       </div>
 
@@ -43,9 +38,7 @@ export default function Sidebar() {
               <span className="badge">{z.zone_type}</span>
             </div>
             <div className="small">
-              capacity: {z.capacity}
-              {' • '}lots_count: {z.lots_count ?? 0}
-              {' • '}pay: {z.pay}
+              capacity: {z.capacity} • pay: {z.pay}
             </div>
           </div>
         ))}
@@ -62,7 +55,7 @@ export default function Sidebar() {
               <option value="disabled">disabled</option>
             </Select>
           </Field>
-          <Field label="Capacity (lots)">
+          <Field label="Capacity">
             <Input type="number" min={0} value={zone.capacity}
               onChange={e=>s.updateZone(zone.id,{capacity: parseInt(e.target.value||'0',10)})}/>
           </Field>
@@ -76,48 +69,18 @@ export default function Sidebar() {
             <Button className="ghost" onClick={finishEditing}>Готово</Button>
           </div>
           <div className="row" style={{gap:8}}>
-            <Button onClick={()=>s.saveZone(zone.id)}>Сохранить зону (PUT/POST с lots)</Button>
+            <Button onClick={()=>s.saveZone(zone.id)}>Сохранить зону (PUT/POST)</Button>
             <Button className="danger" onClick={()=>s.removeZone(zone.id)}>Удалить зону (DELETE)</Button>
           </div>
-          <hr/>
-          <div className="row" style={{justifyContent:'space-between', alignItems:'baseline'}}>
-            <h4>Места (Lots)</h4>
-            <div className="row" style={{gap:6}}>
-              <Button className="ghost" onClick={startDrawLot}>+ Добавить лот</Button>
-              {s.tool==='drawLot' && s.lotDraft && s.lotDraft.length>=3 && (
-                <Button onClick={()=>s.lotDraftComplete()}>Завершить лот</Button>
-              )}
-              {s.tool==='drawLot' && s.lotDraft && s.lotDraft.length>0 && (
-                <Button className="danger" onClick={()=>s.lotDraftClear()}>Отменить</Button>
-              )}
-            </div>
-          </div>
+        </>
+      )}
 
-          <div className="list">
-            {zone.lots.map(l => (
-              <div key={String(l.lot_id)}
-                   className={`item ${String(s.activeLotId)===String(l.lot_id) ? 'active':''}`}
-                   onClick={()=>s.selectLot(String(l.lot_id))}>
-                <div style={{display:'flex', justifyContent:'space-between'}}>
-                  <div>{String(l.lot_id)}</div>
-                  <span className="badge">{l.image_polygon.length} pts</span>
-                </div>
-              </div>
-            ))}
+      {s.tool === 'drawZone' && (
+        <>
+          <hr/>
+          <div className="small" style={{opacity:0.8}}>
+            Режим рисования зоны: кликните 4 точки на изображении, чтобы замкнуть четырёхугольник.
           </div>
-
-          {lot && (
-            <>
-              <hr/>
-              <h4>Свойства лота</h4>
-              {/* label удалён — оставляем только редактирование вершин */}
-              <div className="row" style={{gap:8}}>
-                <Button onClick={()=>s.setTool('editLot')}>Редактировать вершины</Button>
-                <Button className="ghost" onClick={finishEditing}>Готово</Button>
-                <Button className="danger" onClick={()=>s.removeLot(zone.id, String(lot.lot_id))}>Удалить лот</Button>
-              </div>
-            </>
-          )}
         </>
       )}
     </div>