Merge pull request #30 from moevm/db_refactoring

Db refactoring
moevm · Nov 26, 2023 · fd84ab1 · fd84ab1
2 parents e177c88 + 48923a7
commit fd84ab1
Show file tree

Hide file tree

Showing 30 changed files with 352 additions and 392 deletions.
diff --git a/client/src/components/common/map/MapDisplay.vue b/client/src/components/common/map/MapDisplay.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { onMounted, onBeforeUnmount } from "vue";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -11,20 +12,15 @@ import iconUrl from "leaflet/dist/images/marker-icon.png";
 import shadowUrl from "leaflet/dist/images/marker-shadow.png";
 
 import {
-  getMaps,
-  getObjects,
   initMap,
-  addMaps,
-  addObjects,
   updateViewMapsAnsObjects,
-  getMapSide
 } from "@/components/common/map/api";
-import { ObjectsMapData } from "@/types/objects";
+import { ObjectInfo } from "@/types/objects";
 import { MapInfo } from "@/types/maps";
 
 
 let mapAndControl: { map: L.Map; controlLayer: L.Control.Layers, osmLayer: L.Layer };
-defineExpose({ addMarker, removeMarker, flyToCoordinates });
+defineExpose({ addMarker, removeMarker, flyToCoordinates, getObjects });
 
 const props = defineProps<{ y?: number; x?: number }>();
 let x = 30.308611;
@@ -35,7 +31,7 @@ if (props.x && props.y) {
 }
 
 let imagesList: MapInfo[];
-let objectsList: ObjectsMapData[];
+let objectsList = ref<ObjectInfo[]>([]);
 
 let timer: number;
 let oldPos = {
@@ -44,7 +40,7 @@ let oldPos = {
   layersDeleted: true
 };
 
-const emit = defineEmits<{ (e: "map-ready"): void }>();
+const emit = defineEmits<{ (e: "map-ready"): void, (e: "objects-updated"): void }>();
 
 onMounted(() => {
   // Загружаем картинки и параметры маркера в leaflet
@@ -65,7 +61,7 @@ onMounted(() => {
 
   // Задаем интервал на обновление отображаемых объектов.
   timer = setInterval(() => {
-    updateViewMapsAnsObjects(mapAndControl, imagesList, objectsList, oldPos);
+    updateViewMapsAnsObjects(mapAndControl, imagesList, objectsList, oldPos, emit);
   }, 1000);
 
   emit("map-ready");
@@ -87,7 +83,14 @@ function removeMarker(marker: L.Marker) {
 }
 
 function flyToCoordinates(coordinates: [number, number]) {
-  if (mapAndControl) mapAndControl.map.panTo(coordinates);
+  if (mapAndControl) {
+    mapAndControl.map.setZoom(14);
+    mapAndControl.map.panTo(coordinates);
+  }
+}
+
+function getObjects() {
+  return objectsList.value;
 }
 </script>
 

diff --git a/client/src/components/common/map/api.ts b/client/src/components/common/map/api.ts
@@ -1,9 +1,10 @@
 import axios from "axios";
+import { Ref } from "vue";
 import L, { LatLngBounds, LatLngExpression, Polygon } from "leaflet";
 
 import { baseURL, map_zoom } from "@/api";
 import { MapInfo } from "@/types/maps";
-import { ObjectsMapData } from "@/types/objects";
+import { ObjectInfo } from "@/types/objects";
 
 
 export async function getMaps(
@@ -21,9 +22,9 @@ export async function getObjects(
   y: number,
   x: number,
   r: number
-): Promise<ObjectsMapData[] | void> {
+): Promise<ObjectInfo[]> {
   return (
-    await axios.get<ObjectsMapData[]>(baseURL + "/objects/near/" + y + "/" + x + "/" + r)
+    await axios.get<ObjectInfo[]>(baseURL + "/objects/near/" + y + "/" + x + "/" + r)
   ).data;
 }
 
@@ -62,7 +63,7 @@ export function addMaps(
   for (let i = 0; i < imagesList.length; i++) {
     // Overlay layers (TMS).
     const lyr: L.Layer = L.tileLayer(
-      baseURL + "/images/tile/" + imagesList[i].id + "/{z}/{x}/{y}",
+      baseURL + "/tiles/tile/" + imagesList[i].id + "/{z}/{x}/{y}",
       { tms: true, opacity: 1, attribution: "" }
     );
 
@@ -75,12 +76,12 @@ export function addMaps(
 
 export function addObjects(
   mapAndControl: { map: L.Map; controlLayer: L.Control.Layers, osmLayer: L.Layer },
-  objectsList: ObjectsMapData[]
+  objectsList: ObjectInfo[]
 ) {
   for (let i = 0; i < objectsList.length; i++) {
     // Object Polygon Layer.
     const objectPolygon: Polygon = L.polygon(
-      objectsList[i].polygons as LatLngExpression[],
+      objectsList[i].coordinates as LatLngExpression[],
       { color: objectsList[i].color, fillOpacity: 0.4 }
     );
     const objectPolygonLayer: L.LayerGroup = L.layerGroup([objectPolygon]);
@@ -102,15 +103,16 @@ export function addObjects(
 export async function updateViewMapsAnsObjects(
   mapAndControl: { map: L.Map; controlLayer: L.Control.Layers, osmLayer: L.Layer },
   imagesList: MapInfo[] | void,
-  objectsList: ObjectsMapData[] | void,
-  oldPos: {center: L.LatLng, zoom: number, layersDeleted: boolean}
+  objectsList: Ref<ObjectInfo[]>,
+  oldPos: {center: L.LatLng, zoom: number, layersDeleted: boolean},
+  emit: any
 ) {
   let newCenterCoords = mapAndControl.map.getBounds().getCenter();
   let newZoom = mapAndControl.map.getZoom();
 
   if (oldPos.layersDeleted || (oldPos.zoom > newZoom) ||
-      ((Math.abs(oldPos.center["lng"] - newCenterCoords["lng"]) >= getMapSide(mapAndControl.map)) ||
-      (Math.abs(oldPos.center["lat"] - newCenterCoords["lat"]) >= getMapSide(mapAndControl.map)))) {
+      ((oldPos.center.distanceTo(newCenterCoords) >= getMapSide(mapAndControl.map)) ||
+      (oldPos.center.distanceTo(newCenterCoords) >= getMapSide(mapAndControl.map)))) {
 
     oldPos.center = newCenterCoords;
     oldPos.zoom = newZoom;
@@ -129,14 +131,15 @@ export async function updateViewMapsAnsObjects(
       mapAndControl.map.getBounds().getCenter()["lng"], 
       getMapSide(mapAndControl.map)
     );
-    objectsList = await getObjects(
+    objectsList.value = await getObjects(
       mapAndControl.map.getBounds().getCenter()["lat"],
       mapAndControl.map.getBounds().getCenter()["lng"], 
       getMapSide(mapAndControl.map)
     );
+    emit("objects-updated");
     // Добавляем объекты и карты в пределах видимости.
     if (objectsList) {
-      addObjects(mapAndControl, objectsList);
+      addObjects(mapAndControl, objectsList.value);
       oldPos.layersDeleted = false;
     }
     if (imagesList) {
@@ -148,6 +151,8 @@ export async function updateViewMapsAnsObjects(
 
 
 export function getMapSide(map: L.Map) {
-  let mapSide = Math.abs(map.getBounds().getCenter()["lng"] - map.getBounds().getEast());
-  return mapSide > 2.5 ? mapSide : 2.5;
+  let center = map.getBounds().getCenter();
+  let centerEast = L.latLng(center["lat"], map.getBounds().getEast());
+  let meters = center.distanceTo(centerEast);
+  return meters > 12000 ? meters : 12000;
 }
diff --git a/client/src/components/routes/home/HomeComponent.vue b/client/src/components/routes/home/HomeComponent.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="container">
-    <h4 class="text-center mt-3">MSE 12 Ecology</h4>
-    <h5 class="text-center">
+    <h4 class="text-center">
       Сервис обработки спутниковых карт и поиска объектов
-    </h5>
+    </h4>
 
     <div id="accordion" class="accordion mt-2">
       <div class="accordion-item">
@@ -79,12 +78,13 @@
             data-bs-toggle="collapse"
             data-bs-target="#map-view"
           >
-            Просмотр карты
+            Глобальная карта
           </button>
         </h2>
         <div id="map-view" class="accordion-collapse collapse">
           <div class="accordion-body">
-            В режиме просмотра карты можно выбирать слои для отображения: слой
+            В режиме глобальной карты отображаются все карты, загруженные в систему
+             можно выбирать слои для отображения: слой
             изображения самого снимка, и слой найденных объектов. Данные слои
             накладываются поверх стандартной карты OpenStreetMap.
           </div>
@@ -127,8 +127,7 @@
           <div class="accordion-body">
             В режиме просмотра объекта можно посмотреть все параметры найденного
             объекта, отметить его на карте с помощью клавиши "Показать на
-            карте", а так же открыть отчет изображения, на котором был найден
-            объект.
+            карте".
           </div>
         </div>
       </div>

diff --git a/client/src/components/routes/map/MapComponent.vue b/client/src/components/routes/map/MapComponent.vue
@@ -1,29 +1,26 @@
 <template>
   <div class="container-lg">
-    <!-- TO DO: Нужно будет вернуть, но с данными по оббъектам не одной карты, а выделенным объектам. -->
-    <!-- <div v-if="mapData && mapData.length" class="row justify-content-between">
+    <div class="row justify-content-between">
       <h3 class="col">Объекты</h3>
     </div>
     <AgGridVue
-      v-if="mapData && mapData.length"
       class="ag-theme-alpine mt-3"
-      :row-data="mapData"
+      :row-data="objectsInfo"
       :column-defs="columnDefs"
       :grid-options="options"
       @grid-ready="fitActionsColumn"
-    /> -->
+    />
     <div class="d-flex justify-content-center mt-3">
-      <MapDisplay :x="x" :y="y" ref="mapDisplay"/>
+      <MapDisplay :x="x" :y="y" ref="mapDisplay" @objects-updated="objectsShow"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { getMapData } from "@/components/routes/map/api";
 import { AgGridVue } from "ag-grid-vue3";
 import { ColDef, GridOptions } from "ag-grid-community";
-import { ObjectData } from "@/types/objects";
+import { ObjectInfo } from "@/types/objects";
 import {
   fitActionsColumn,
   getActionsColDef,
@@ -44,10 +41,34 @@ const props = defineProps<{
 const mapDisplay = ref<InstanceType<typeof MapDisplay>>();
 let lastMarker: L.Marker | undefined = undefined;
 
-const columnDefs: ColDef<ObjectData>[] = [
+// Надеюсь, никто не заметит этот костыль, чтобы прогружались action-ы сразу :)
+const objectsInfo = ref<ObjectInfo[]>([{
+  id: "-",
+  type: "-",
+  name: "-",
+  color: "-",
+  updateUserId: "-",
+  updateDatetime: "-",
+  center: [0, 0],
+  coordinates: [[0, 0]]
+}]);
+
+const columnDefs: ColDef<ObjectInfo>[] = [
   { headerName: "Id", field: "id", flex: 2, minWidth: 120 },
-  { headerName: "Название", field: "name", flex: 4, minWidth: 180 },
-  { headerName: "Площадь", field: "area", flex: 4, minWidth: 180 },
+  { headerName: "Тип", field: "type", flex: 4, minWidth: 80 },
+  { headerName: "Название", field: "name", flex: 4, minWidth: 80 },
+  {
+    headerName: "Дата загрузки",
+    field: "updateDatetime",
+    flex: 5,
+    minWidth: 180,
+  },
+  {
+    headerName: "Id загрузившего пользователя",
+    field: "updateUserId",
+    flex: 5,
+    minWidth: 200,
+  },
   {
     ...getActionsColDef([
       {
@@ -59,8 +80,6 @@ const columnDefs: ColDef<ObjectData>[] = [
             name: routeNames.Object,
             params: {
               id: data.id,
-              name: data.name,
-              objectIndex: data.objectIndex,
             },
           }),
       },
@@ -72,44 +91,26 @@ const columnDefs: ColDef<ObjectData>[] = [
           if (lastMarker) {
             mapDisplay.value?.removeMarker?.(lastMarker);
           }
-          lastMarker = mapDisplay.value?.addMarker?.(data.coordinates);
-          mapDisplay.value?.flyToCoordinates?.(data.coordinates);
+          lastMarker = mapDisplay.value?.addMarker?.(data.center);
+          mapDisplay.value?.flyToCoordinates?.(data.center);
         },
       },
     ]),
-  },
+  }
 ];
 
-const options: GridOptions<ObjectData> = {
+const options: GridOptions<ObjectInfo> = {
   ...getDefaultGridOptions(),
   pagination: true,
   paginationPageSize: 4,
   domLayout: "autoHeight",
 };
 
-// function onMapReady() {
-//   if (props.name && props.objectIndex) {
-//     let coordinates: [number, number] = [0, 0];
-//     for (let i = 0; i < mapData.length; i++) {
-//       if (
-//         mapData[i].name === props.name &&
-//         mapData[i].objectIndex == props.objectIndex
-//       ) {
-//         coordinates = mapData[i].coordinates;
-//         break;
-//       }
-//     }
-//     if (lastMarker) {
-//       mapDisplay.value?.removeMarker?.(lastMarker);
-//     }
-//     lastMarker = mapDisplay.value?.addMarker?.(coordinates);
-//   }
-// }
+function objectsShow() {
+  let objects = mapDisplay.value?.getObjects?.();
+  objectsInfo.value = objects ? objects : []
+}
 
-// let mapData: ObjectData[];
-// if (props.id) {
-//   mapData = await getMapData(props.id);
-// }
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/client/src/components/routes/map/api.ts b/client/src/components/routes/map/api.ts
diff --git a/client/src/components/routes/maps/MapsListComponent.vue b/client/src/components/routes/maps/MapsListComponent.vue
@@ -56,18 +56,16 @@ const columnDefs: ColDef<MapInfo>[] = [
   { headerName: "Имя", field: "name", flex: 3, minWidth: 180 },
   {
     headerName: "Дата загрузки",
-    field: "date",
+    field: "updateDatetime",
     flex: 5,
     minWidth: 180,
     valueFormatter: dateFormatter,
   },
   {
-    headerName: "Размер",
-    field: "size",
+    headerName: "Id загрузившего пользователя",
+    field: "updateUserId",
     flex: 5,
-    minWidth: 180,
-    valueFormatter: ({ value }: { value: number }) =>
-      `${Math.round(value / 1048576)} Мб`,
+    minWidth: 100,
   },
   {
     headerName: "Обработано",
@@ -91,8 +89,8 @@ const columnDefs: ColDef<MapInfo>[] = [
         button: "btn-secondary",
         hide: (data) => !(data.ready && data.sliced),
         onClicked: (action, data) => {
-          router.push({ name: routeNames.Map, params: { y: data.location.coordinates[0][0], 
-                                                        x: data.location.coordinates[0][1] } })
+          router.push({ name: routeNames.Map, params: { y: data.center[0], 
+                                                        x: data.center[1] } })
         }
       },
       {

diff --git a/client/src/components/routes/maps/api.ts b/client/src/components/routes/maps/api.ts
@@ -7,5 +7,5 @@ export async function getMapsInfo(): Promise<MapInfo[]> {
 }
 
 export function deleteMap(id: string) {
-  return axios.delete(baseURL + "/images/delete_image/" + id);
+  return axios.delete(baseURL + "/images/image/" + id);
 }