Refactor map tools and drop SocialParser runtime dependency.
Add filtered map API, creamy-caprice-style toolbar (dates, layers, search), Yandex ru tiles, and store Telegram session in MapMil/data instead of mounting SocialParser. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -10,9 +10,12 @@
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
|
||||
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1476
File diff suppressed because it is too large
Load Diff
@@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"chart.js": "^4.4.7",
|
||||
"flatpickr": "^4.6.13",
|
||||
"leaflet": "^1.9.4",
|
||||
"vue": "^3.5.13",
|
||||
"vue-chartjs": "^5.3.2",
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { request } from "./client";
|
||||
import type { MapFilters, MapObjectWithEvent, MapQueryParams } from "../types/map";
|
||||
|
||||
function buildQuery(params: MapQueryParams): string {
|
||||
const search = new URLSearchParams();
|
||||
for (const [key, value] of Object.entries(params)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
search.set(key, String(value));
|
||||
}
|
||||
}
|
||||
const qs = search.toString();
|
||||
return qs ? `?${qs}` : "";
|
||||
}
|
||||
|
||||
export function fetchMapObjects(params: MapQueryParams = {}): Promise<MapObjectWithEvent[]> {
|
||||
return request<MapObjectWithEvent[]>(`/map/objects${buildQuery(params)}`);
|
||||
}
|
||||
|
||||
export function fetchMapFilters(): Promise<MapFilters> {
|
||||
return request<MapFilters>("/map/filters");
|
||||
}
|
||||
@@ -4,6 +4,8 @@ defineProps<{
|
||||
y: number;
|
||||
target: "map" | "object";
|
||||
objectName?: string;
|
||||
canEdit?: boolean;
|
||||
canDelete?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -26,8 +28,9 @@ const emit = defineEmits<{
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<button type="button" @click="emit('edit')">Редактировать</button>
|
||||
<button type="button" class="danger" @click="emit('delete')">Удалить</button>
|
||||
<button v-if="canEdit !== false" type="button" @click="emit('edit')">Редактировать</button>
|
||||
<button v-if="canDelete !== false" type="button" class="danger" @click="emit('delete')">Удалить</button>
|
||||
<p v-if="canEdit === false" class="hint">Событие из ingest — только просмотр</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -78,4 +81,11 @@ button.danger {
|
||||
button.danger:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,116 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
import L from "leaflet";
|
||||
import { onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import type { MapObject } from "../types/object";
|
||||
import { onMounted, onUnmounted, watch } from "vue";
|
||||
import { useLeafletMap } from "../composables/useLeafletMap";
|
||||
import type { MapObjectWithEvent } from "../types/map";
|
||||
|
||||
const props = defineProps<{
|
||||
objects: MapObject[];
|
||||
objects: MapObjectWithEvent[];
|
||||
selectedId: number | null;
|
||||
openPopupId: number | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
select: [object: MapObject];
|
||||
select: [object: MapObjectWithEvent];
|
||||
contextmenu: [payload: {
|
||||
x: number;
|
||||
y: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
object: MapObject | null;
|
||||
object: MapObjectWithEvent | null;
|
||||
}];
|
||||
move: [payload: { object: MapObject; latitude: number; longitude: number }];
|
||||
move: [payload: { object: MapObjectWithEvent; latitude: number; longitude: number }];
|
||||
ready: [api: ReturnType<typeof useLeafletMap>["api"]];
|
||||
centerChange: [coords: { lat: number; lng: number }];
|
||||
}>();
|
||||
|
||||
const mapContainer = ref<HTMLElement | null>(null);
|
||||
const {
|
||||
mapContainer,
|
||||
map,
|
||||
centerCoords,
|
||||
initMap,
|
||||
destroyMap,
|
||||
flyTo,
|
||||
fitBounds,
|
||||
getMarkerIcons,
|
||||
getMarkersLayer,
|
||||
api,
|
||||
} = useLeafletMap();
|
||||
|
||||
let map: L.Map | null = null;
|
||||
let markersLayer: L.LayerGroup | null = null;
|
||||
const markerById = new Map<number, L.Marker>();
|
||||
|
||||
const defaultIcon = L.icon({
|
||||
iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
|
||||
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
const selectedIcon = L.icon({
|
||||
iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png",
|
||||
iconRetinaUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
function isDraggable(obj: MapObject): boolean {
|
||||
return obj.id === props.selectedId;
|
||||
function buildPopupHtml(obj: MapObjectWithEvent): string {
|
||||
const title = obj.title || obj.name;
|
||||
const date = obj.event_date
|
||||
? new Date(obj.event_date).toLocaleDateString("ru-RU")
|
||||
: "—";
|
||||
const locality = obj.locality || "—";
|
||||
const desc = (obj.description || "").slice(0, 200);
|
||||
const link = obj.source_url
|
||||
? `<a href="${obj.source_url}" target="_blank" rel="noopener">Источник</a>`
|
||||
: "";
|
||||
return `<div class="map-popup"><strong>${title}</strong><br>${locality}<br>${date}<br>${desc}${link ? `<br>${link}` : ""}</div>`;
|
||||
}
|
||||
|
||||
function getMarkerIcon(obj: MapObject): L.Icon {
|
||||
if (obj.id === props.selectedId) return selectedIcon;
|
||||
return defaultIcon;
|
||||
}
|
||||
|
||||
function bindMarker(marker: L.Marker, obj: MapObject) {
|
||||
marker.off("click");
|
||||
marker.off("contextmenu");
|
||||
marker.off("dragend");
|
||||
|
||||
marker.on("click", () => emit("select", obj));
|
||||
|
||||
marker.on("contextmenu", (event: L.LeafletMouseEvent) => {
|
||||
L.DomEvent.stopPropagation(event.originalEvent);
|
||||
L.DomEvent.preventDefault(event.originalEvent);
|
||||
|
||||
emit("contextmenu", {
|
||||
x: event.originalEvent.clientX,
|
||||
y: event.originalEvent.clientY,
|
||||
latitude: obj.latitude,
|
||||
longitude: obj.longitude,
|
||||
object: obj,
|
||||
});
|
||||
});
|
||||
|
||||
const draggable = isDraggable(obj);
|
||||
if (marker.dragging) {
|
||||
if (draggable) {
|
||||
marker.dragging.enable();
|
||||
} else {
|
||||
marker.dragging.disable();
|
||||
}
|
||||
}
|
||||
|
||||
if (draggable) {
|
||||
marker.on("dragend", () => {
|
||||
const latlng = marker.getLatLng();
|
||||
emit("move", {
|
||||
object: obj,
|
||||
latitude: latlng.lat,
|
||||
longitude: latlng.lng,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function panToObject(obj: MapObject) {
|
||||
if (!map) return;
|
||||
const zoom = Math.max(map.getZoom(), 12);
|
||||
map.flyTo([obj.latitude, obj.longitude], zoom, { duration: 0.6 });
|
||||
}
|
||||
|
||||
function panToSelected() {
|
||||
if (props.selectedId === null) return;
|
||||
const obj = props.objects.find((item) => item.id === props.selectedId);
|
||||
if (obj) panToObject(obj);
|
||||
function isDraggable(obj: MapObjectWithEvent): boolean {
|
||||
return obj.id === props.selectedId && !obj.event_id;
|
||||
}
|
||||
|
||||
function syncMarkers() {
|
||||
if (!map || !markersLayer) return;
|
||||
const markersLayer = getMarkersLayer();
|
||||
if (!markersLayer) return;
|
||||
|
||||
const { defaultIcon, selectedIcon } = getMarkerIcons();
|
||||
const currentIds = new Set(props.objects.map((obj) => obj.id));
|
||||
|
||||
for (const [id, marker] of markerById) {
|
||||
@@ -123,45 +73,67 @@ function syncMarkers() {
|
||||
for (const obj of props.objects) {
|
||||
const draggable = isDraggable(obj);
|
||||
let marker = markerById.get(obj.id);
|
||||
const icon = obj.id === props.selectedId ? selectedIcon : defaultIcon;
|
||||
|
||||
if (!marker) {
|
||||
marker = L.marker([obj.latitude, obj.longitude], {
|
||||
icon: getMarkerIcon(obj),
|
||||
draggable,
|
||||
});
|
||||
marker = L.marker([obj.latitude, obj.longitude], { icon, draggable });
|
||||
marker.bindPopup(buildPopupHtml(obj));
|
||||
marker.addTo(markersLayer);
|
||||
markerById.set(obj.id, marker);
|
||||
} else {
|
||||
const latlng = marker.getLatLng();
|
||||
const positionChanged =
|
||||
Math.abs(latlng.lat - obj.latitude) > 1e-8 ||
|
||||
Math.abs(latlng.lng - obj.longitude) > 1e-8;
|
||||
|
||||
if (positionChanged) {
|
||||
marker.setLatLng([obj.latitude, obj.longitude]);
|
||||
}
|
||||
|
||||
marker.setIcon(getMarkerIcon(obj));
|
||||
marker.setLatLng([obj.latitude, obj.longitude]);
|
||||
marker.setIcon(icon);
|
||||
marker.setPopupContent(buildPopupHtml(obj));
|
||||
if (marker.dragging) {
|
||||
if (draggable) {
|
||||
marker.dragging.enable();
|
||||
} else {
|
||||
marker.dragging.disable();
|
||||
}
|
||||
if (draggable) marker.dragging.enable();
|
||||
else marker.dragging.disable();
|
||||
}
|
||||
}
|
||||
|
||||
bindMarker(marker, obj);
|
||||
marker.off("click");
|
||||
marker.off("contextmenu");
|
||||
marker.off("dragend");
|
||||
|
||||
marker.on("click", () => emit("select", obj));
|
||||
|
||||
marker.on("contextmenu", (event: L.LeafletMouseEvent) => {
|
||||
L.DomEvent.stopPropagation(event.originalEvent);
|
||||
L.DomEvent.preventDefault(event.originalEvent);
|
||||
emit("contextmenu", {
|
||||
x: event.originalEvent.clientX,
|
||||
y: event.originalEvent.clientY,
|
||||
latitude: obj.latitude,
|
||||
longitude: obj.longitude,
|
||||
object: obj,
|
||||
});
|
||||
});
|
||||
|
||||
if (draggable) {
|
||||
marker.on("dragend", () => {
|
||||
const latlng = marker!.getLatLng();
|
||||
emit("move", { object: obj, latitude: latlng.lat, longitude: latlng.lng });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function panToSelected(openPopup = false) {
|
||||
if (props.selectedId === null) return;
|
||||
const obj = props.objects.find((item) => item.id === props.selectedId);
|
||||
if (!obj) return;
|
||||
flyTo(obj.latitude, obj.longitude);
|
||||
if (openPopup) {
|
||||
const marker = markerById.get(obj.id);
|
||||
marker?.openPopup();
|
||||
}
|
||||
}
|
||||
|
||||
function handleMapContextMenu(event: MouseEvent) {
|
||||
if (!map || !mapContainer.value) return;
|
||||
|
||||
if (!map.value || !mapContainer.value) return;
|
||||
event.preventDefault();
|
||||
|
||||
const rect = mapContainer.value.getBoundingClientRect();
|
||||
const point = map.containerPointToLatLng(
|
||||
const point = map.value.containerPointToLatLng(
|
||||
L.point(event.clientX - rect.left, event.clientY - rect.top),
|
||||
);
|
||||
|
||||
@@ -175,27 +147,25 @@ function handleMapContextMenu(event: MouseEvent) {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!mapContainer.value) return;
|
||||
|
||||
map = L.map(mapContainer.value).setView([55.7558, 37.6173], 11);
|
||||
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
|
||||
markersLayer = L.layerGroup().addTo(map);
|
||||
mapContainer.value.addEventListener("contextmenu", handleMapContextMenu);
|
||||
initMap(handleMapContextMenu);
|
||||
emit("ready", api);
|
||||
map.value?.on("moveend", () => {
|
||||
emit("centerChange", api.getCenter());
|
||||
});
|
||||
syncMarkers();
|
||||
panToSelected();
|
||||
setTimeout(() => map?.invalidateSize(), 0);
|
||||
|
||||
if (props.objects.length > 0) {
|
||||
const bounds = L.latLngBounds(props.objects.map((o) => [o.latitude, o.longitude]));
|
||||
fitBounds(bounds);
|
||||
}
|
||||
|
||||
if (props.selectedId !== null) {
|
||||
panToSelected(true);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
mapContainer.value?.removeEventListener("contextmenu", handleMapContextMenu);
|
||||
map?.remove();
|
||||
map = null;
|
||||
markersLayer = null;
|
||||
destroyMap(handleMapContextMenu);
|
||||
markerById.clear();
|
||||
});
|
||||
|
||||
@@ -203,10 +173,27 @@ watch(
|
||||
() => [props.objects, props.selectedId] as const,
|
||||
() => {
|
||||
syncMarkers();
|
||||
panToSelected();
|
||||
panToSelected(false);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.openPopupId,
|
||||
(id) => {
|
||||
if (id === null) return;
|
||||
const marker = markerById.get(id);
|
||||
if (marker) {
|
||||
flyTo(
|
||||
marker.getLatLng().lat,
|
||||
marker.getLatLng().lng,
|
||||
);
|
||||
marker.openPopup();
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({ api, centerCoords, flyTo, fitBounds, map });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -243,7 +230,24 @@ watch(
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.map.has-selection :deep(.leaflet-marker-draggable:active) {
|
||||
cursor: grabbing;
|
||||
.map-wrapper :deep(.map-popup) {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.map-wrapper :deep(.map-control-btn) {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.map-wrapper :deep(.map-control-btn.active) {
|
||||
background: #e6f2ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,13 +6,18 @@ import {
|
||||
formatFileSize,
|
||||
uploadObjectMedia,
|
||||
} from "../api/objects";
|
||||
import { MEDIA_ACCEPT, OBJECT_TYPE_LABELS, type MapObject, type ObjectMedia } from "../types/object";
|
||||
import { MEDIA_ACCEPT, OBJECT_TYPE_LABELS } from "../types/object";
|
||||
import type { MapObjectWithEvent } from "../types/map";
|
||||
|
||||
const props = defineProps<{
|
||||
object: MapObject | null;
|
||||
object: MapObjectWithEvent | null;
|
||||
}>();
|
||||
|
||||
const mediaItems = ref<ObjectMedia[]>([]);
|
||||
const emit = defineEmits<{
|
||||
openEvents: [];
|
||||
}>();
|
||||
|
||||
const mediaItems = ref<Awaited<ReturnType<typeof fetchObjectMedia>>>([]);
|
||||
const loadingMedia = ref(false);
|
||||
const mediaError = ref("");
|
||||
const uploading = ref(false);
|
||||
@@ -22,15 +27,18 @@ const typeLabel = computed(() =>
|
||||
);
|
||||
|
||||
const formattedDate = computed(() => {
|
||||
if (!props.object) return "";
|
||||
return new Date(props.object.created_at).toLocaleString("ru-RU");
|
||||
if (!props.object?.event_date && !props.object?.created_at) return "—";
|
||||
const raw = props.object.event_date ?? props.object.created_at;
|
||||
return new Date(raw).toLocaleString("ru-RU");
|
||||
});
|
||||
|
||||
function isImage(media: ObjectMedia): boolean {
|
||||
const isIngested = computed(() => Boolean(props.object?.event_id));
|
||||
|
||||
function isImage(media: { content_type: string }) {
|
||||
return media.content_type.startsWith("image/");
|
||||
}
|
||||
|
||||
function isVideo(media: ObjectMedia): boolean {
|
||||
function isVideo(media: { content_type: string }) {
|
||||
return media.content_type.startsWith("video/");
|
||||
}
|
||||
|
||||
@@ -42,7 +50,6 @@ async function loadMedia() {
|
||||
|
||||
loadingMedia.value = true;
|
||||
mediaError.value = "";
|
||||
|
||||
try {
|
||||
mediaItems.value = await fetchObjectMedia(props.object.id);
|
||||
} catch (err) {
|
||||
@@ -55,16 +62,13 @@ async function loadMedia() {
|
||||
|
||||
async function handleUpload(event: Event) {
|
||||
if (!props.object) return;
|
||||
|
||||
const input = event.target as HTMLInputElement;
|
||||
const files = input.files ? Array.from(input.files) : [];
|
||||
input.value = "";
|
||||
|
||||
if (files.length === 0) return;
|
||||
|
||||
uploading.value = true;
|
||||
mediaError.value = "";
|
||||
|
||||
try {
|
||||
for (const file of files) {
|
||||
const uploaded = await uploadObjectMedia(props.object.id, file);
|
||||
@@ -79,7 +83,6 @@ async function handleUpload(event: Event) {
|
||||
|
||||
async function handleDelete(mediaId: number) {
|
||||
mediaError.value = "";
|
||||
|
||||
try {
|
||||
await deleteObjectMedia(mediaId);
|
||||
mediaItems.value = mediaItems.value.filter((item) => item.id !== mediaId);
|
||||
@@ -88,11 +91,7 @@ async function handleDelete(mediaId: number) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.object?.id,
|
||||
() => loadMedia(),
|
||||
{ immediate: true },
|
||||
);
|
||||
watch(() => props.object?.id, () => loadMedia(), { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -104,26 +103,52 @@ watch(
|
||||
</div>
|
||||
|
||||
<div v-else class="content">
|
||||
<h3>{{ object.name }}</h3>
|
||||
<h3>{{ object.title || object.name }}</h3>
|
||||
|
||||
<dl>
|
||||
<dt>Тип</dt>
|
||||
<dd>{{ typeLabel }}</dd>
|
||||
|
||||
<template v-if="object.locality">
|
||||
<dt>Населённый пункт</dt>
|
||||
<dd>{{ object.locality }}</dd>
|
||||
</template>
|
||||
|
||||
<template v-if="object.region">
|
||||
<dt>Регион</dt>
|
||||
<dd>{{ object.region }}</dd>
|
||||
</template>
|
||||
|
||||
<dt>Описание</dt>
|
||||
<dd>{{ object.description || "—" }}</dd>
|
||||
|
||||
<dt>Координаты</dt>
|
||||
<dd>
|
||||
{{ object.latitude.toFixed(6) }}, {{ object.longitude.toFixed(6) }}
|
||||
<span class="drag-hint">Перетащите маркер на карте для перемещения</span>
|
||||
<span v-if="!isIngested" class="drag-hint">Перетащите маркер на карте для перемещения</span>
|
||||
</dd>
|
||||
|
||||
<dt>Создан</dt>
|
||||
<dt>Дата события</dt>
|
||||
<dd>{{ formattedDate }}</dd>
|
||||
|
||||
<template v-if="object.source_type">
|
||||
<dt>Источник</dt>
|
||||
<dd>
|
||||
{{ object.source_type }}
|
||||
<a v-if="object.source_url" :href="object.source_url" target="_blank" rel="noopener">ссылка</a>
|
||||
</dd>
|
||||
</template>
|
||||
|
||||
<template v-if="object.event_id">
|
||||
<dt>Событие</dt>
|
||||
<dd>
|
||||
#{{ object.event_id }}
|
||||
<button type="button" class="link-btn" @click="emit('openEvents')">Открыть в Событиях</button>
|
||||
</dd>
|
||||
</template>
|
||||
</dl>
|
||||
|
||||
<section class="media-section">
|
||||
<section v-if="!isIngested" class="media-section">
|
||||
<div class="media-header">
|
||||
<h4>Медиа</h4>
|
||||
<label class="upload-btn">
|
||||
@@ -156,15 +181,11 @@ watch(
|
||||
<a v-else :href="item.url" class="file-link" target="_blank" rel="noopener">
|
||||
{{ item.original_name }}
|
||||
</a>
|
||||
|
||||
<div class="media-meta">
|
||||
<span class="name" :title="item.original_name">{{ item.original_name }}</span>
|
||||
<span class="size">{{ formatFileSize(item.size) }}</span>
|
||||
</div>
|
||||
|
||||
<button type="button" class="delete-btn" @click="handleDelete(item.id)">
|
||||
Удалить
|
||||
</button>
|
||||
<button type="button" class="delete-btn" @click="handleDelete(item.id)">Удалить</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@@ -234,6 +255,21 @@ dd {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
display: inline;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #1565c0;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.media-section {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
@@ -263,12 +299,6 @@ dd {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-btn input:disabled + span,
|
||||
.upload-btn:has(input:disabled) {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.media-status {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
|
||||
@@ -1,199 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import type { MapObject } from "../types/object";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number;
|
||||
min: number;
|
||||
max: number;
|
||||
objects: MapObject[];
|
||||
visibleCount: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: number];
|
||||
}>();
|
||||
|
||||
const range = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit("update:modelValue", value),
|
||||
});
|
||||
|
||||
const formattedTime = computed(() =>
|
||||
new Date(props.modelValue).toLocaleString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}),
|
||||
);
|
||||
|
||||
const formattedMin = computed(() =>
|
||||
new Date(props.min).toLocaleDateString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}),
|
||||
);
|
||||
|
||||
const formattedMax = computed(() =>
|
||||
new Date(props.max).toLocaleDateString("ru-RU", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}),
|
||||
);
|
||||
|
||||
const markers = computed(() => {
|
||||
if (props.max <= props.min) return [];
|
||||
|
||||
const span = props.max - props.min;
|
||||
return props.objects.map((obj) => {
|
||||
const time = new Date(obj.created_at).getTime();
|
||||
const percent = ((time - props.min) / span) * 100;
|
||||
return {
|
||||
id: obj.id,
|
||||
name: obj.name,
|
||||
percent: Math.min(100, Math.max(0, percent)),
|
||||
visible: time <= props.modelValue,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const hasRange = computed(() => props.max > props.min);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="timeline">
|
||||
<div class="timeline-header">
|
||||
<span class="label">Таймлайн появления</span>
|
||||
<span class="current-time">{{ formattedTime }}</span>
|
||||
<span class="count">{{ visibleCount }} / {{ objects.length }} объектов</span>
|
||||
</div>
|
||||
|
||||
<div class="slider-wrap">
|
||||
<span class="edge-label">{{ formattedMin }}</span>
|
||||
|
||||
<div class="slider-track">
|
||||
<div
|
||||
v-for="marker in markers"
|
||||
:key="marker.id"
|
||||
class="object-marker"
|
||||
:class="{ visible: marker.visible }"
|
||||
:style="{ left: `${marker.percent}%` }"
|
||||
:title="marker.name"
|
||||
/>
|
||||
|
||||
<input
|
||||
v-model.number="range"
|
||||
class="slider"
|
||||
type="range"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="hasRange ? Math.max(1, Math.floor((max - min) / 500)) : 1"
|
||||
:disabled="!hasRange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="edge-label">{{ formattedMax }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.timeline {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 1.25rem 1rem;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.count {
|
||||
margin-left: auto;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.slider-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.edge-label {
|
||||
flex-shrink: 0;
|
||||
width: 5.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edge-label:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.edge-label:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.object-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
border-radius: 50%;
|
||||
background: #bbb;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: background 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.object-marker.visible {
|
||||
background: #2563eb;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
accent-color: #2563eb;
|
||||
}
|
||||
|
||||
.slider:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { CITY_PRESETS } from "../../config/cities";
|
||||
import type { LeafletMapApi } from "../../composables/useLeafletMap";
|
||||
import { parseCoordsInput } from "../../composables/usePlaceSearch";
|
||||
|
||||
const props = defineProps<{
|
||||
mapApi: LeafletMapApi | null;
|
||||
centerCoords: { lat: number; lng: number };
|
||||
}>();
|
||||
|
||||
const coordsInput = ref("");
|
||||
const selectedCity = ref("");
|
||||
|
||||
function formatCoords(lat: number, lng: number): string {
|
||||
return `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
|
||||
}
|
||||
|
||||
async function copyText(text: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
function centerOnInput() {
|
||||
const parsed = parseCoordsInput(coordsInput.value);
|
||||
if (!parsed || !props.mapApi) return;
|
||||
props.mapApi.flyTo(parsed.lat, parsed.lng, 13);
|
||||
}
|
||||
|
||||
function centerOnCity() {
|
||||
const city = CITY_PRESETS.find((c) => c.name === selectedCity.value);
|
||||
if (!city || !props.mapApi) return;
|
||||
props.mapApi.flyTo(city.latitude, city.longitude, city.zoom ?? 12);
|
||||
}
|
||||
|
||||
function copyCenter() {
|
||||
void copyText(formatCoords(props.centerCoords.lat, props.centerCoords.lng));
|
||||
}
|
||||
|
||||
function copyInput() {
|
||||
void copyText(coordsInput.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="coords-tools">
|
||||
<label class="coords-label">Центрировать на:</label>
|
||||
<input
|
||||
v-model="coordsInput"
|
||||
type="text"
|
||||
class="coord-input"
|
||||
placeholder="48.65, 37.67"
|
||||
@keydown.enter="centerOnInput"
|
||||
/>
|
||||
<button type="button" class="icon-btn" title="Перейти" @click="centerOnInput">➜</button>
|
||||
<button type="button" class="icon-btn" title="Копировать" @click="copyInput">⎘</button>
|
||||
|
||||
<select v-model="selectedCity" class="city-select" @change="centerOnCity">
|
||||
<option value="" disabled>🏘 Город</option>
|
||||
<option v-for="city in CITY_PRESETS" :key="city.name" :value="city.name">
|
||||
{{ city.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<span class="current-center-label">Текущий центр:</span>
|
||||
<span class="current-coords">{{ formatCoords(centerCoords.lat, centerCoords.lng) }}</span>
|
||||
<button type="button" class="icon-btn" title="Копировать центр" @click="copyCenter">⎘</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import flatpickr from "flatpickr";
|
||||
import { Russian } from "flatpickr/dist/l10n/ru.js";
|
||||
import type { DateRangePreset, MapFilters } from "../../types/map";
|
||||
|
||||
const RANGE_OPTIONS: { value: DateRangePreset; label: string }[] = [
|
||||
{ value: "week", label: "1 неделя" },
|
||||
{ value: "month", label: "1 месяц" },
|
||||
{ value: "3months", label: "3 месяца" },
|
||||
{ value: "6months", label: "6 месяцев" },
|
||||
{ value: "year", label: "1 год" },
|
||||
{ value: "all", label: "Все" },
|
||||
];
|
||||
|
||||
const props = defineProps<{
|
||||
filters: MapFilters | null;
|
||||
selectedDate: string | null;
|
||||
rangePreset: DateRangePreset;
|
||||
region: string;
|
||||
topic: string;
|
||||
sourceType: string;
|
||||
loading?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:selectedDate": [value: string | null];
|
||||
"update:rangePreset": [value: DateRangePreset];
|
||||
"update:region": [value: string];
|
||||
"update:topic": [value: string];
|
||||
"update:sourceType": [value: string];
|
||||
apply: [];
|
||||
}>();
|
||||
|
||||
const dateInput = ref<HTMLInputElement | null>(null);
|
||||
const rangeOpen = ref(false);
|
||||
const filtersOpen = ref(false);
|
||||
let picker: flatpickr.Instance | null = null;
|
||||
|
||||
const availableDates = computed(() => props.filters?.available_dates ?? []);
|
||||
|
||||
function isoToDisplay(iso: string): string {
|
||||
const [y, m, d] = iso.split("-");
|
||||
return `${d}.${m}.${y.slice(-2)}`;
|
||||
}
|
||||
|
||||
function displayToIso(display: string): string | null {
|
||||
const match = display.match(/^(\d{2})\.(\d{2})\.(\d{2,4})$/);
|
||||
if (!match) return null;
|
||||
const year = match[3].length === 2 ? `20${match[3]}` : match[3];
|
||||
return `${year}-${match[2]}-${match[1]}`;
|
||||
}
|
||||
|
||||
function navigateDate(direction: "first" | "prev" | "next" | "last") {
|
||||
const dates = availableDates.value;
|
||||
if (dates.length === 0) return;
|
||||
|
||||
const current = props.selectedDate ?? dates[dates.length - 1];
|
||||
const idx = dates.indexOf(current);
|
||||
|
||||
let next: string;
|
||||
if (direction === "first") next = dates[0];
|
||||
else if (direction === "last") next = dates[dates.length - 1];
|
||||
else if (direction === "prev") next = dates[Math.max(0, idx <= 0 ? 0 : idx - 1)];
|
||||
else next = dates[Math.min(dates.length - 1, idx < 0 ? dates.length - 1 : idx + 1)];
|
||||
|
||||
emit("update:selectedDate", next);
|
||||
emit("apply");
|
||||
}
|
||||
|
||||
function selectRange(preset: DateRangePreset) {
|
||||
emit("update:rangePreset", preset);
|
||||
rangeOpen.value = false;
|
||||
emit("apply");
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
emit("update:region", "");
|
||||
emit("update:topic", "");
|
||||
emit("update:sourceType", "");
|
||||
emit("apply");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!dateInput.value) return;
|
||||
picker = flatpickr(dateInput.value, {
|
||||
locale: Russian,
|
||||
dateFormat: "d.m.y",
|
||||
allowInput: true,
|
||||
disableMobile: true,
|
||||
defaultDate: props.selectedDate ? isoToDisplay(props.selectedDate) : undefined,
|
||||
onChange: (_dates, dateStr) => {
|
||||
const iso = displayToIso(dateStr);
|
||||
if (iso) {
|
||||
emit("update:selectedDate", iso);
|
||||
emit("update:rangePreset", "all");
|
||||
emit("apply");
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
picker?.destroy();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.selectedDate,
|
||||
(iso) => {
|
||||
if (!picker || !iso) return;
|
||||
picker.setDate(isoToDisplay(iso), false);
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map-toolbar">
|
||||
<div class="date-navigator">
|
||||
<button type="button" class="nav-btn" title="Первая дата" @click="navigateDate('first')">❮❮</button>
|
||||
<button type="button" class="nav-btn" title="Предыдущий" @click="navigateDate('prev')">❮</button>
|
||||
<div class="date-selector">
|
||||
<input ref="dateInput" type="text" class="date-picker-input" placeholder="DD.MM.YY" />
|
||||
</div>
|
||||
<button type="button" class="nav-btn" title="Следующий" @click="navigateDate('next')">❯</button>
|
||||
<button type="button" class="nav-btn" title="Последняя дата" @click="navigateDate('last')">❯❯</button>
|
||||
|
||||
<div class="filter-btn-container">
|
||||
<button
|
||||
type="button"
|
||||
class="filter-btn"
|
||||
title="Период"
|
||||
:class="{ active: rangePreset !== 'all' }"
|
||||
@click="rangeOpen = !rangeOpen"
|
||||
>⏳</button>
|
||||
<div v-if="rangeOpen" class="dropdown-content">
|
||||
<button
|
||||
v-for="opt in RANGE_OPTIONS"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="range-option"
|
||||
:class="{ active: rangePreset === opt.value }"
|
||||
@click="selectRange(opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<button type="button" class="filter-btn mobile-toggle" @click="filtersOpen = !filtersOpen">📁</button>
|
||||
|
||||
<div class="filter-controls" :class="{ open: filtersOpen }">
|
||||
<select
|
||||
:value="region"
|
||||
class="filter-select"
|
||||
@change="emit('update:region', ($event.target as HTMLSelectElement).value); emit('apply')"
|
||||
>
|
||||
<option value="">Все регионы</option>
|
||||
<option v-for="r in filters?.regions ?? []" :key="r" :value="r">{{ r }}</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
:value="topic"
|
||||
class="filter-select"
|
||||
@change="emit('update:topic', ($event.target as HTMLSelectElement).value); emit('apply')"
|
||||
>
|
||||
<option value="">Все темы</option>
|
||||
<option v-for="t in filters?.topics ?? []" :key="t" :value="t">{{ t }}</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
:value="sourceType"
|
||||
class="filter-select"
|
||||
@change="emit('update:sourceType', ($event.target as HTMLSelectElement).value); emit('apply')"
|
||||
>
|
||||
<option value="">Все источники</option>
|
||||
<option v-for="s in filters?.source_types ?? []" :key="s" :value="s">{{ s }}</option>
|
||||
</select>
|
||||
|
||||
<button type="button" class="btn btn-sm" @click="resetFilters">Сбросить</button>
|
||||
</div>
|
||||
|
||||
<span v-if="loading" class="toolbar-status">Загрузка...</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import type { LeafletMapApi } from "../../composables/useLeafletMap";
|
||||
import { searchPlaces, type PlaceSearchResult } from "../../composables/usePlaceSearch";
|
||||
|
||||
const props = defineProps<{
|
||||
mapApi: LeafletMapApi | null;
|
||||
}>();
|
||||
|
||||
const query = ref("");
|
||||
const results = ref<PlaceSearchResult[]>([]);
|
||||
const searching = ref(false);
|
||||
const open = ref(false);
|
||||
|
||||
async function runSearch() {
|
||||
if (!query.value.trim()) return;
|
||||
searching.value = true;
|
||||
try {
|
||||
results.value = await searchPlaces(query.value);
|
||||
open.value = results.value.length > 0;
|
||||
} finally {
|
||||
searching.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectPlace(place: PlaceSearchResult) {
|
||||
props.mapApi?.setSearchMarker(place.lat, place.lon, place.name);
|
||||
open.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="place-search">
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Поиск населённого пункта"
|
||||
@keydown.enter="runSearch"
|
||||
/>
|
||||
<button type="button" class="icon-btn" title="Найти" :disabled="searching" @click="runSearch">
|
||||
🔍
|
||||
</button>
|
||||
<ul v-if="open" class="search-results">
|
||||
<li v-for="(place, idx) in results" :key="idx">
|
||||
<button type="button" class="result-btn" @click="selectPlace(place)">
|
||||
{{ place.name }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,288 @@
|
||||
import L from "leaflet";
|
||||
import { onUnmounted, ref, shallowRef } from "vue";
|
||||
|
||||
const DEFAULT_CENTER: L.LatLngExpression = [48.257381, 37.134785];
|
||||
const DEFAULT_ZOOM = 10;
|
||||
|
||||
export interface LeafletMapApi {
|
||||
flyTo: (lat: number, lng: number, zoom?: number) => void;
|
||||
fitBounds: (bounds: L.LatLngBoundsExpression, options?: L.FitBoundsOptions) => void;
|
||||
getCenter: () => { lat: number; lng: number };
|
||||
getZoom: () => number;
|
||||
invalidateSize: () => void;
|
||||
setSearchMarker: (lat: number, lng: number, label?: string) => void;
|
||||
clearSearchMarker: () => void;
|
||||
}
|
||||
|
||||
export function useLeafletMap() {
|
||||
const mapContainer = ref<HTMLElement | null>(null);
|
||||
const map = shallowRef<L.Map | null>(null);
|
||||
const centerCoords = ref({ lat: DEFAULT_CENTER[0] as number, lng: DEFAULT_CENTER[1] as number });
|
||||
|
||||
let markersLayer: L.LayerGroup | null = null;
|
||||
let searchMarker: L.Marker | null = null;
|
||||
let measureControl: L.Control | null = null;
|
||||
let measureActive = false;
|
||||
|
||||
const defaultIcon = L.icon({
|
||||
iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
|
||||
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
const selectedIcon = L.icon({
|
||||
iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png",
|
||||
iconRetinaUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
const searchIcon = L.icon({
|
||||
iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
|
||||
iconRetinaUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
});
|
||||
|
||||
function createBaseLayers(): Record<string, L.TileLayer> {
|
||||
const yandexAttribution =
|
||||
'© <a href="https://yandex.ru/maps" target="_blank" rel="noopener">Яндекс</a>';
|
||||
|
||||
return {
|
||||
"Яндекс Карты": L.tileLayer(
|
||||
"https://core-renderer-tiles.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}&scale=1&lang=ru_RU",
|
||||
{
|
||||
attribution: yandexAttribution,
|
||||
noWrap: true,
|
||||
maxZoom: 19,
|
||||
},
|
||||
),
|
||||
"Яндекс Спутник": L.tileLayer(
|
||||
"https://core-renderer-tiles.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}&scale=1&lang=ru_RU",
|
||||
{
|
||||
attribution: yandexAttribution,
|
||||
noWrap: true,
|
||||
maxZoom: 19,
|
||||
},
|
||||
),
|
||||
OpenStreetMap: L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 19,
|
||||
}),
|
||||
OpenTopoMap: L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
|
||||
attribution:
|
||||
"Kartendaten: © OpenStreetMap, SRTM | © OpenTopoMap (CC-BY-SA)",
|
||||
maxZoom: 17,
|
||||
}),
|
||||
"ESRI Satellite": L.tileLayer(
|
||||
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
||||
{
|
||||
attribution: "Tiles © Esri",
|
||||
maxZoom: 19,
|
||||
},
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function addFullscreenControl(leafletMap: L.Map) {
|
||||
const control = L.control({ position: "topright" });
|
||||
control.onAdd = () => {
|
||||
const div = L.DomUtil.create("div", "leaflet-bar leaflet-control");
|
||||
const link = L.DomUtil.create("a", "map-control-btn", div);
|
||||
link.href = "#";
|
||||
link.title = "Полноэкранный режим";
|
||||
link.innerHTML = "⛶";
|
||||
L.DomEvent.disableClickPropagation(div);
|
||||
L.DomEvent.on(link, "click", (e) => {
|
||||
L.DomEvent.preventDefault(e);
|
||||
const el = mapContainer.value?.closest(".map-page") ?? mapContainer.value;
|
||||
if (!el) return;
|
||||
if (!document.fullscreenElement) {
|
||||
void el.requestFullscreen?.();
|
||||
} else {
|
||||
void document.exitFullscreen?.();
|
||||
}
|
||||
});
|
||||
return div;
|
||||
};
|
||||
control.addTo(leafletMap);
|
||||
}
|
||||
|
||||
function addMeasureControl(leafletMap: L.Map) {
|
||||
const control = L.control({ position: "topright" });
|
||||
control.onAdd = () => {
|
||||
const div = L.DomUtil.create("div", "leaflet-bar leaflet-control");
|
||||
const link = L.DomUtil.create("a", "map-control-btn", div);
|
||||
link.href = "#";
|
||||
link.title = "Линейка";
|
||||
link.innerHTML = "📏";
|
||||
L.DomEvent.disableClickPropagation(div);
|
||||
L.DomEvent.on(link, "click", (e) => {
|
||||
L.DomEvent.preventDefault(e);
|
||||
if (typeof L.control.polylineMeasure !== "function") return;
|
||||
if (!measureControl) {
|
||||
measureControl = L.control.polylineMeasure({
|
||||
position: "topright",
|
||||
unit: "kilometres",
|
||||
clearMeasurementsOnStop: true,
|
||||
showMeasurementsClearControl: true,
|
||||
});
|
||||
}
|
||||
if (!measureActive) {
|
||||
measureControl.addTo(leafletMap);
|
||||
measureActive = true;
|
||||
link.classList.add("active");
|
||||
} else {
|
||||
leafletMap.removeControl(measureControl);
|
||||
measureActive = false;
|
||||
link.classList.remove("active");
|
||||
}
|
||||
});
|
||||
return div;
|
||||
};
|
||||
control.addTo(leafletMap);
|
||||
}
|
||||
|
||||
function initMap(onContextMenu: (event: MouseEvent) => void): LeafletMapApi {
|
||||
if (!mapContainer.value || map.value) {
|
||||
return api;
|
||||
}
|
||||
|
||||
const leafletMap = L.map(mapContainer.value, { preferCanvas: true }).setView(
|
||||
DEFAULT_CENTER,
|
||||
DEFAULT_ZOOM,
|
||||
);
|
||||
|
||||
const baseLayers = createBaseLayers();
|
||||
baseLayers["Яндекс Карты"].addTo(leafletMap);
|
||||
L.control.layers(baseLayers, undefined, { collapsed: true, position: "topright" }).addTo(
|
||||
leafletMap,
|
||||
);
|
||||
|
||||
markersLayer = L.layerGroup().addTo(leafletMap);
|
||||
addFullscreenControl(leafletMap);
|
||||
addMeasureControl(leafletMap);
|
||||
|
||||
leafletMap.on("moveend", () => {
|
||||
const c = leafletMap.getCenter();
|
||||
centerCoords.value = { lat: c.lat, lng: c.lng };
|
||||
});
|
||||
|
||||
mapContainer.value.addEventListener("contextmenu", onContextMenu);
|
||||
map.value = leafletMap;
|
||||
|
||||
setTimeout(() => leafletMap.invalidateSize(), 0);
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
function destroyMap(onContextMenu: (event: MouseEvent) => void) {
|
||||
mapContainer.value?.removeEventListener("contextmenu", onContextMenu);
|
||||
if (measureControl && map.value && measureActive) {
|
||||
map.value.removeControl(measureControl);
|
||||
}
|
||||
map.value?.remove();
|
||||
map.value = null;
|
||||
markersLayer = null;
|
||||
searchMarker = null;
|
||||
measureControl = null;
|
||||
measureActive = false;
|
||||
}
|
||||
|
||||
function flyTo(lat: number, lng: number, zoom?: number) {
|
||||
if (!map.value) return;
|
||||
const z = zoom ?? Math.max(map.value.getZoom(), 12);
|
||||
map.value.flyTo([lat, lng], z, { duration: 0.6 });
|
||||
}
|
||||
|
||||
function fitBounds(bounds: L.LatLngBoundsExpression, options?: L.FitBoundsOptions) {
|
||||
map.value?.fitBounds(bounds, { padding: [40, 40], maxZoom: 14, ...options });
|
||||
}
|
||||
|
||||
function getCenter() {
|
||||
if (map.value) {
|
||||
const c = map.value.getCenter();
|
||||
return { lat: c.lat, lng: c.lng };
|
||||
}
|
||||
return { ...centerCoords.value };
|
||||
}
|
||||
|
||||
function getZoom() {
|
||||
return map.value?.getZoom() ?? DEFAULT_ZOOM;
|
||||
}
|
||||
|
||||
function invalidateSize() {
|
||||
map.value?.invalidateSize();
|
||||
}
|
||||
|
||||
function setSearchMarker(lat: number, lng: number, label?: string) {
|
||||
if (!map.value || !markersLayer) return;
|
||||
if (searchMarker) {
|
||||
markersLayer.removeLayer(searchMarker);
|
||||
}
|
||||
searchMarker = L.marker([lat, lng], { icon: searchIcon });
|
||||
if (label) {
|
||||
searchMarker.bindPopup(label);
|
||||
}
|
||||
searchMarker.addTo(markersLayer);
|
||||
flyTo(lat, lng, 13);
|
||||
searchMarker.openPopup();
|
||||
}
|
||||
|
||||
function clearSearchMarker() {
|
||||
if (searchMarker && markersLayer) {
|
||||
markersLayer.removeLayer(searchMarker);
|
||||
searchMarker = null;
|
||||
}
|
||||
}
|
||||
|
||||
function getMarkerIcons() {
|
||||
return { defaultIcon, selectedIcon };
|
||||
}
|
||||
|
||||
function getMarkersLayer() {
|
||||
return markersLayer;
|
||||
}
|
||||
|
||||
const api: LeafletMapApi = {
|
||||
flyTo,
|
||||
fitBounds,
|
||||
getCenter,
|
||||
getZoom,
|
||||
invalidateSize,
|
||||
setSearchMarker,
|
||||
clearSearchMarker,
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
destroyMap(() => undefined);
|
||||
});
|
||||
|
||||
return {
|
||||
mapContainer,
|
||||
map,
|
||||
centerCoords,
|
||||
initMap,
|
||||
destroyMap,
|
||||
flyTo,
|
||||
fitBounds,
|
||||
getCenter,
|
||||
getZoom,
|
||||
invalidateSize,
|
||||
setSearchMarker,
|
||||
clearSearchMarker,
|
||||
getMarkerIcons,
|
||||
getMarkersLayer,
|
||||
api,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
const NOMINATIM_ENDPOINT = "https://nominatim.openstreetmap.org/search";
|
||||
const REQUEST_DELAY_MS = 1000;
|
||||
|
||||
const ALLOWED_PLACE_TYPES = new Set([
|
||||
"city", "town", "village", "suburb", "hamlet",
|
||||
"neighbourhood", "neighborhood", "locality",
|
||||
"isolated_dwelling", "allotments", "quarter",
|
||||
]);
|
||||
|
||||
const ALLOWED_ADDRESS_TYPES = new Set([
|
||||
"city", "town", "village", "hamlet", "municipality",
|
||||
"locality", "suburb", "neighbourhood", "administrative",
|
||||
]);
|
||||
|
||||
export interface PlaceSearchResult {
|
||||
name: string;
|
||||
lat: number;
|
||||
lon: number;
|
||||
}
|
||||
|
||||
let lastRequestTs = 0;
|
||||
|
||||
async function throttledFetch(url: string): Promise<Response> {
|
||||
const now = Date.now();
|
||||
const elapsed = now - lastRequestTs;
|
||||
if (elapsed < REQUEST_DELAY_MS) {
|
||||
await new Promise((resolve) => setTimeout(resolve, REQUEST_DELAY_MS - elapsed));
|
||||
}
|
||||
lastRequestTs = Date.now();
|
||||
return fetch(url, {
|
||||
headers: {
|
||||
"Accept-Language": "ru,uk",
|
||||
"User-Agent": "MapMil/1.0",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function searchPlaces(query: string): Promise<PlaceSearchResult[]> {
|
||||
if (!query.trim()) return [];
|
||||
|
||||
const params = new URLSearchParams({
|
||||
format: "json",
|
||||
limit: "20",
|
||||
addressdetails: "1",
|
||||
"accept-language": "ru,uk",
|
||||
countrycodes: "ua",
|
||||
q: query.trim(),
|
||||
bounded: "1",
|
||||
viewbox: "22.128,44.386,40.080,52.379",
|
||||
});
|
||||
|
||||
const response = await throttledFetch(`${NOMINATIM_ENDPOINT}?${params.toString()}`);
|
||||
if (!response.ok) return [];
|
||||
|
||||
const data = (await response.json()) as Array<{
|
||||
lat: string;
|
||||
lon: string;
|
||||
display_name: string;
|
||||
class?: string;
|
||||
type?: string;
|
||||
addresstype?: string;
|
||||
}>;
|
||||
|
||||
return data
|
||||
.filter((item) => {
|
||||
const placeClass = item.class ?? "";
|
||||
const placeType = item.type ?? "";
|
||||
const addressType = item.addresstype ?? "";
|
||||
return (
|
||||
(placeClass === "place" && ALLOWED_PLACE_TYPES.has(placeType)) ||
|
||||
(placeClass === "boundary" && ALLOWED_ADDRESS_TYPES.has(addressType))
|
||||
);
|
||||
})
|
||||
.map((item) => ({
|
||||
name: item.display_name,
|
||||
lat: Number(item.lat),
|
||||
lon: Number(item.lon),
|
||||
}));
|
||||
}
|
||||
|
||||
export function parseCoordsInput(raw: string): { lat: number; lng: number } | null {
|
||||
const parts = raw.split(/[,\s]+/).map((p) => p.trim()).filter(Boolean);
|
||||
if (parts.length < 2) return null;
|
||||
const lat = Number(parts[0]);
|
||||
const lng = Number(parts[1]);
|
||||
if (Number.isNaN(lat) || Number.isNaN(lng)) return null;
|
||||
if (lat < -90 || lat > 90 || lng < -180 || lng > 180) return null;
|
||||
return { lat, lng };
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export interface CityPreset {
|
||||
name: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
zoom?: number;
|
||||
}
|
||||
|
||||
export const CITY_PRESETS: CityPreset[] = [
|
||||
{ name: "Сумы", latitude: 50.919052, longitude: 34.82872, zoom: 11 },
|
||||
{ name: "Гуляйполе", latitude: 47.6517, longitude: 36.2569, zoom: 12 },
|
||||
{ name: "Краматорск", latitude: 48.7233, longitude: 37.5564, zoom: 11 },
|
||||
{ name: "Бахмут", latitude: 48.5959, longitude: 38.0002, zoom: 12 },
|
||||
{ name: "Харьков", latitude: 49.9935, longitude: 36.2304, zoom: 10 },
|
||||
{ name: "Донецк", latitude: 48.0159, longitude: 37.8028, zoom: 10 },
|
||||
{ name: "Запорожье", latitude: 47.8388, longitude: 35.1396, zoom: 10 },
|
||||
{ name: "Киев", latitude: 50.4501, longitude: 30.5234, zoom: 10 },
|
||||
];
|
||||
@@ -112,4 +112,8 @@ const pageTitle = computed(() => {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.admin-main:has(.map-page) {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import "leaflet";
|
||||
|
||||
declare module "leaflet" {
|
||||
namespace control {
|
||||
function polylineMeasure(options?: Record<string, unknown>): Control;
|
||||
}
|
||||
}
|
||||
@@ -2,5 +2,6 @@ import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import "./style.css";
|
||||
import "./styles/map-toolbar.css";
|
||||
|
||||
createApp(App).use(router).mount("#app");
|
||||
|
||||
@@ -0,0 +1,274 @@
|
||||
.map-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.date-navigator {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-btn,
|
||||
.filter-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-btn:hover,
|
||||
.filter-btn:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.date-selector {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.date-picker-input {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-btn-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
border-color: #007bff;
|
||||
background: #e6f2ff;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 4px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.range-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.range-option:hover {
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.range-option.active {
|
||||
background: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.toolbar-status {
|
||||
margin-left: auto;
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.coords-tools {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.coords-label,
|
||||
.current-center-label {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.coord-input,
|
||||
.search-input {
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.city-select {
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.current-coords {
|
||||
font-family: ui-monospace, monospace;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.place-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
list-style: none;
|
||||
margin: 4px 0 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.result-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.result-btn:hover {
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.map-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.map-page:fullscreen {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.map-tools-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.map-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-status {
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.map-status.error {
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-controls {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-controls.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.mobile-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import type { MapObject, ObjectType } from "./object";
|
||||
|
||||
export interface MapObjectWithEvent extends MapObject {
|
||||
event_date: string | null;
|
||||
locality: string | null;
|
||||
region: string | null;
|
||||
topic: string | null;
|
||||
source_type: string | null;
|
||||
source_url: string | null;
|
||||
title: string | null;
|
||||
}
|
||||
|
||||
export interface MapDateBounds {
|
||||
min: string | null;
|
||||
max: string | null;
|
||||
}
|
||||
|
||||
export interface MapFilters {
|
||||
regions: string[];
|
||||
topics: string[];
|
||||
source_types: string[];
|
||||
available_dates: string[];
|
||||
date_bounds: MapDateBounds;
|
||||
}
|
||||
|
||||
export type DateRangePreset = "week" | "month" | "3months" | "6months" | "year" | "all";
|
||||
|
||||
export interface MapQueryParams {
|
||||
on_date?: string;
|
||||
date_from?: string;
|
||||
date_to?: string;
|
||||
region?: string;
|
||||
topic?: string;
|
||||
source_type?: string;
|
||||
search?: string;
|
||||
event_id?: number;
|
||||
}
|
||||
|
||||
export type { ObjectType };
|
||||
@@ -1,91 +1,127 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { fetchMapFilters, fetchMapObjects } from "../api/map";
|
||||
import {
|
||||
createObject,
|
||||
deleteObject,
|
||||
fetchObjects,
|
||||
updateObject,
|
||||
uploadObjectMedia,
|
||||
} from "../api/objects";
|
||||
import { fetchEvents } from "../api/admin";
|
||||
import ContextMenu from "../components/ContextMenu.vue";
|
||||
import CreateObjectModal from "../components/CreateObjectModal.vue";
|
||||
import EditObjectModal from "../components/EditObjectModal.vue";
|
||||
import MapView from "../components/MapView.vue";
|
||||
import CoordsTools from "../components/map/CoordsTools.vue";
|
||||
import MapToolbar from "../components/map/MapToolbar.vue";
|
||||
import PlaceSearch from "../components/map/PlaceSearch.vue";
|
||||
import ObjectPanel from "../components/ObjectPanel.vue";
|
||||
import TimelineBar from "../components/TimelineBar.vue";
|
||||
import type { MapObject, MapObjectCreate, ObjectType } from "../types/object";
|
||||
import type { LeafletMapApi } from "../composables/useLeafletMap";
|
||||
import type { DateRangePreset, MapFilters, MapObjectWithEvent, MapQueryParams } from "../types/map";
|
||||
import type { MapObjectCreate, ObjectType } from "../types/object";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const objects = ref<MapObject[]>([]);
|
||||
const selectedObject = ref<MapObject | null>(null);
|
||||
const objects = ref<MapObjectWithEvent[]>([]);
|
||||
const mapFilters = ref<MapFilters | null>(null);
|
||||
const selectedObject = ref<MapObjectWithEvent | null>(null);
|
||||
const loading = ref(true);
|
||||
const error = ref("");
|
||||
const timelinePosition = ref(Date.now());
|
||||
const mapApi = ref<LeafletMapApi | null>(null);
|
||||
const centerCoords = ref({ lat: 48.257381, lng: 37.134785 });
|
||||
const openPopupId = ref<number | null>(null);
|
||||
|
||||
const contextMenu = ref<{
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
target: "map" | "object";
|
||||
object: MapObject | null;
|
||||
}>({
|
||||
const selectedDate = ref<string | null>(null);
|
||||
const rangePreset = ref<DateRangePreset>("all");
|
||||
const region = ref("");
|
||||
const topic = ref("");
|
||||
const sourceType = ref("");
|
||||
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let mapViewRef = ref<InstanceType<typeof MapView> | null>(null);
|
||||
|
||||
const contextMenu = ref({
|
||||
visible: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
target: "map",
|
||||
object: null,
|
||||
target: "map" as "map" | "object",
|
||||
object: null as MapObjectWithEvent | null,
|
||||
});
|
||||
|
||||
const createModal = ref({
|
||||
visible: false,
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
});
|
||||
|
||||
const editModal = ref({
|
||||
visible: false,
|
||||
object: null as MapObject | null,
|
||||
});
|
||||
const createModal = ref({ visible: false, latitude: 0, longitude: 0 });
|
||||
const editModal = ref({ visible: false, object: null as MapObjectWithEvent | null });
|
||||
|
||||
const selectedId = computed(() => selectedObject.value?.id ?? null);
|
||||
|
||||
function objectTime(obj: MapObject): number {
|
||||
return new Date(obj.created_at).getTime();
|
||||
function subtractDays(isoDate: string, days: number): string {
|
||||
const d = new Date(isoDate);
|
||||
d.setUTCDate(d.getUTCDate() - days);
|
||||
return d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function replaceObject(updated: MapObject) {
|
||||
objects.value = objects.value.map((obj) => (obj.id === updated.id ? updated : obj));
|
||||
if (selectedObject.value?.id === updated.id) {
|
||||
selectedObject.value = updated;
|
||||
}
|
||||
function endOfDayIso(isoDate: string): string {
|
||||
return `${isoDate}T23:59:59.999Z`;
|
||||
}
|
||||
|
||||
const timelineBounds = computed(() => {
|
||||
if (objects.value.length === 0) {
|
||||
const now = Date.now();
|
||||
return { min: now, max: now };
|
||||
function startOfDayIso(isoDate: string): string {
|
||||
return `${isoDate}T00:00:00.000Z`;
|
||||
}
|
||||
|
||||
function buildQueryParams(): MapQueryParams {
|
||||
const params: MapQueryParams = {};
|
||||
if (region.value) params.region = region.value;
|
||||
if (topic.value) params.topic = topic.value;
|
||||
if (sourceType.value) params.source_type = sourceType.value;
|
||||
|
||||
const eventId = route.query.eventId;
|
||||
if (eventId) {
|
||||
params.event_id = Number(eventId);
|
||||
return params;
|
||||
}
|
||||
|
||||
const times = objects.value.map(objectTime);
|
||||
return {
|
||||
min: Math.min(...times),
|
||||
max: Math.max(...times),
|
||||
if (!selectedDate.value) return params;
|
||||
|
||||
if (rangePreset.value === "all") {
|
||||
params.on_date = selectedDate.value;
|
||||
return params;
|
||||
}
|
||||
|
||||
const end = selectedDate.value;
|
||||
const ranges: Record<DateRangePreset, number> = {
|
||||
week: 7,
|
||||
month: 30,
|
||||
"3months": 90,
|
||||
"6months": 180,
|
||||
year: 365,
|
||||
all: 0,
|
||||
};
|
||||
});
|
||||
const days = ranges[rangePreset.value];
|
||||
params.date_from = startOfDayIso(subtractDays(end, days));
|
||||
params.date_to = endOfDayIso(end);
|
||||
return params;
|
||||
}
|
||||
|
||||
const visibleObjects = computed(() =>
|
||||
objects.value.filter((obj) => objectTime(obj) <= timelinePosition.value),
|
||||
);
|
||||
async function loadFilters() {
|
||||
mapFilters.value = await fetchMapFilters();
|
||||
if (!selectedDate.value && mapFilters.value.available_dates.length > 0) {
|
||||
selectedDate.value = mapFilters.value.available_dates.at(-1) ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
function syncTimelineToMax() {
|
||||
timelinePosition.value = timelineBounds.value.max;
|
||||
async function loadObjects() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
objects.value = await fetchMapObjects(buildQueryParams());
|
||||
selectByEventId(route.query.eventId as string | undefined);
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : "Не удалось загрузить объекты";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectByEventId(eventId: string | undefined) {
|
||||
@@ -96,51 +132,27 @@ function selectByEventId(eventId: string | undefined) {
|
||||
const match = objects.value.find((obj) => obj.event_id === id);
|
||||
if (match) {
|
||||
selectedObject.value = match;
|
||||
timelinePosition.value = Math.max(timelinePosition.value, objectTime(match));
|
||||
return;
|
||||
}
|
||||
|
||||
void fetchEvents({ limit: 500 }).then((response) => {
|
||||
const event = response.items.find((item) => item.id === id);
|
||||
if (!event || event.latitude == null || event.longitude == null) {
|
||||
error.value = "Событие не найдено на карте";
|
||||
return;
|
||||
openPopupId.value = match.id;
|
||||
if (match.event_date) {
|
||||
selectedDate.value = match.event_date.slice(0, 10);
|
||||
}
|
||||
|
||||
const eventTime = event.event_date
|
||||
? new Date(event.event_date).getTime()
|
||||
: Date.now();
|
||||
timelinePosition.value = Math.max(timelinePosition.value, eventTime);
|
||||
|
||||
const byCoords = objects.value.find(
|
||||
(obj) =>
|
||||
Math.abs(obj.latitude - event.latitude!) < 1e-4 &&
|
||||
Math.abs(obj.longitude - event.longitude!) < 1e-4,
|
||||
);
|
||||
if (byCoords) {
|
||||
selectedObject.value = byCoords;
|
||||
} else {
|
||||
error.value = "Объект карты для события ещё не создан";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function loadObjects() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
objects.value = await fetchObjects();
|
||||
syncTimelineToMax();
|
||||
selectByEventId(route.query.eventId as string | undefined);
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : "Не удалось загрузить объекты";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
} else {
|
||||
error.value = "Событие не найдено на карте";
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelectObject(obj: MapObject) {
|
||||
function onMapReady(api: LeafletMapApi) {
|
||||
mapApi.value = api;
|
||||
centerCoords.value = api.getCenter();
|
||||
}
|
||||
|
||||
function onCenterChange(coords: { lat: number; lng: number }) {
|
||||
centerCoords.value = coords;
|
||||
}
|
||||
|
||||
function handleSelectObject(obj: MapObjectWithEvent) {
|
||||
selectedObject.value = obj;
|
||||
openPopupId.value = obj.id;
|
||||
}
|
||||
|
||||
function handleMapContextMenu(payload: {
|
||||
@@ -148,7 +160,7 @@ function handleMapContextMenu(payload: {
|
||||
y: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
object: MapObject | null;
|
||||
object: MapObjectWithEvent | null;
|
||||
}) {
|
||||
contextMenu.value = {
|
||||
visible: true,
|
||||
@@ -159,10 +171,7 @@ function handleMapContextMenu(payload: {
|
||||
target: payload.object ? "object" : "map",
|
||||
object: payload.object,
|
||||
};
|
||||
|
||||
if (payload.object) {
|
||||
selectedObject.value = payload.object;
|
||||
}
|
||||
if (payload.object) selectedObject.value = payload.object;
|
||||
}
|
||||
|
||||
function closeContextMenu() {
|
||||
@@ -183,18 +192,13 @@ function closeCreateModal() {
|
||||
}
|
||||
|
||||
function openEditModal() {
|
||||
if (!contextMenu.value.object) return;
|
||||
|
||||
editModal.value = {
|
||||
visible: true,
|
||||
object: contextMenu.value.object,
|
||||
};
|
||||
if (!contextMenu.value.object || contextMenu.value.object.event_id) return;
|
||||
editModal.value = { visible: true, object: contextMenu.value.object };
|
||||
closeContextMenu();
|
||||
}
|
||||
|
||||
function closeEditModal() {
|
||||
editModal.value.visible = false;
|
||||
editModal.value.object = null;
|
||||
editModal.value = { visible: false, object: null };
|
||||
}
|
||||
|
||||
async function handleCreateObject(payload: {
|
||||
@@ -212,16 +216,13 @@ async function handleCreateObject(payload: {
|
||||
longitude: createModal.value.longitude,
|
||||
created_at: payload.created_at,
|
||||
};
|
||||
|
||||
const created = await createObject(data);
|
||||
|
||||
for (const file of payload.files) {
|
||||
await uploadObjectMedia(created.id, file);
|
||||
}
|
||||
|
||||
objects.value = [...objects.value, created];
|
||||
selectedObject.value = created;
|
||||
timelinePosition.value = objectTime(created);
|
||||
await loadObjects();
|
||||
const match = objects.value.find((o) => o.id === created.id);
|
||||
if (match) selectedObject.value = match;
|
||||
closeCreateModal();
|
||||
}
|
||||
|
||||
@@ -232,103 +233,116 @@ async function handleEditObject(payload: {
|
||||
created_at: string;
|
||||
}) {
|
||||
if (!editModal.value.object) return;
|
||||
|
||||
const updated = await updateObject(editModal.value.object.id, payload);
|
||||
replaceObject(updated);
|
||||
timelinePosition.value = objectTime(updated);
|
||||
await updateObject(editModal.value.object.id, payload);
|
||||
await loadObjects();
|
||||
closeEditModal();
|
||||
}
|
||||
|
||||
async function handleDeleteObject() {
|
||||
const object = contextMenu.value.object;
|
||||
if (!object) return;
|
||||
|
||||
const confirmed = window.confirm(`Удалить объект «${object.name}»?`);
|
||||
if (!confirmed) return;
|
||||
|
||||
if (!object || object.event_id) return;
|
||||
if (!window.confirm(`Удалить объект «${object.name}»?`)) return;
|
||||
closeContextMenu();
|
||||
|
||||
try {
|
||||
await deleteObject(object.id);
|
||||
objects.value = objects.value.filter((item) => item.id !== object.id);
|
||||
|
||||
if (selectedObject.value?.id === object.id) {
|
||||
selectedObject.value = null;
|
||||
}
|
||||
if (selectedObject.value?.id === object.id) selectedObject.value = null;
|
||||
await loadObjects();
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : "Не удалось удалить объект";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMoveObject(payload: {
|
||||
object: MapObject;
|
||||
object: MapObjectWithEvent;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
}) {
|
||||
if (payload.object.event_id) return;
|
||||
try {
|
||||
const updated = await updateObject(payload.object.id, {
|
||||
await updateObject(payload.object.id, {
|
||||
latitude: payload.latitude,
|
||||
longitude: payload.longitude,
|
||||
});
|
||||
replaceObject(updated);
|
||||
await loadObjects();
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : "Не удалось переместить объект";
|
||||
}
|
||||
}
|
||||
|
||||
watch(visibleObjects, (visible) => {
|
||||
if (
|
||||
selectedObject.value &&
|
||||
!visible.some((obj) => obj.id === selectedObject.value?.id)
|
||||
) {
|
||||
selectedObject.value = null;
|
||||
}
|
||||
});
|
||||
function openInEvents() {
|
||||
if (!selectedObject.value?.event_id) return;
|
||||
void router.push({ path: "/events", query: { highlight: String(selectedObject.value.event_id) } });
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.query.eventId,
|
||||
(eventId) => selectByEventId(eventId as string | undefined),
|
||||
(eventId) => {
|
||||
if (eventId) void loadObjects();
|
||||
else selectByEventId(undefined);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(loadObjects);
|
||||
watch(mapViewRef, (view) => {
|
||||
if (view?.centerCoords) {
|
||||
centerCoords.value = view.centerCoords;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await loadFilters();
|
||||
await loadObjects();
|
||||
pollTimer = setInterval(() => void loadObjects(), 30000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) clearInterval(pollTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map-page" @click="closeContextMenu">
|
||||
<div class="map-status">
|
||||
<span v-if="loading" class="status">Загрузка...</span>
|
||||
<span v-else-if="error" class="status error">{{ error }}</span>
|
||||
<span v-else class="status">
|
||||
{{ visibleObjects.length }} / {{ objects.length }} объектов на карте
|
||||
</span>
|
||||
<MapToolbar
|
||||
v-model:selected-date="selectedDate"
|
||||
v-model:range-preset="rangePreset"
|
||||
v-model:region="region"
|
||||
v-model:topic="topic"
|
||||
v-model:source-type="sourceType"
|
||||
:filters="mapFilters"
|
||||
:loading="loading"
|
||||
@apply="loadObjects"
|
||||
/>
|
||||
|
||||
<div class="map-tools-row">
|
||||
<CoordsTools :map-api="mapApi" :center-coords="centerCoords" />
|
||||
<PlaceSearch :map-api="mapApi" />
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="map-status error">{{ error }}</div>
|
||||
<div v-else class="map-status">{{ objects.length }} объектов на карте</div>
|
||||
|
||||
<div class="map-content">
|
||||
<MapView
|
||||
:objects="visibleObjects"
|
||||
ref="mapViewRef"
|
||||
:objects="objects"
|
||||
:selected-id="selectedId"
|
||||
:open-popup-id="openPopupId"
|
||||
@ready="onMapReady"
|
||||
@center-change="onCenterChange"
|
||||
@select="handleSelectObject"
|
||||
@contextmenu="handleMapContextMenu"
|
||||
@move="handleMoveObject"
|
||||
/>
|
||||
<ObjectPanel :object="selectedObject" />
|
||||
<ObjectPanel :object="selectedObject" @open-events="openInEvents" />
|
||||
</div>
|
||||
|
||||
<TimelineBar
|
||||
v-if="!loading && objects.length > 0"
|
||||
v-model="timelinePosition"
|
||||
:min="timelineBounds.min"
|
||||
:max="timelineBounds.max"
|
||||
:objects="objects"
|
||||
:visible-count="visibleObjects.length"
|
||||
/>
|
||||
|
||||
<ContextMenu
|
||||
v-if="contextMenu.visible"
|
||||
:x="contextMenu.x"
|
||||
:y="contextMenu.y"
|
||||
:target="contextMenu.target"
|
||||
:object-name="contextMenu.object?.name"
|
||||
:can-edit="!contextMenu.object?.event_id"
|
||||
:can-delete="!contextMenu.object?.event_id"
|
||||
@create="openCreateModal"
|
||||
@edit="openEditModal"
|
||||
@delete="handleDeleteObject"
|
||||
@@ -350,34 +364,3 @@ onMounted(loadObjects);
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.map-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-status {
|
||||
padding: 0.4rem 1.25rem;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.map-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user