Додані повідомлення та перепрацьована структура застосунку та api

2026-03-15 00:25:10 +02:00
parent 85483b85bb
commit 4bc9c11512
101 changed files with 5763 additions and 2546 deletions
--- a/web/lib/pages/territory/map/script.js
+++ b/web/lib/pages/territory/map/script.js
@@ -1,7 +1,7 @@
-let map_all;
+let map_all, free_entrance, free_homesteads;

 const Territory_Map = {
-    init: async () => {
+    async init() {
        let html = await fetch('/lib/pages/territory/map/index.html').then((response) => response.text());
        app.innerHTML = html;

@@ -9,7 +9,7 @@ const Territory_Map = {
        Territory_Map.info.setHTML();
    },
    info: {
-        loadAPI: async (url) => {
+        async loadAPI(url) {
            const uuid = localStorage.getItem("uuid");

            const response = await fetch(url, {
@@ -23,22 +23,22 @@ const Territory_Map = {
            return await response.json();
        },

-        setHTML: async () => {
+        async setHTML() {
            const houses = await Territory_Map.info.loadAPI(`${CONFIG.api}houses/list`);
            const homestead = await Territory_Map.info.loadAPI(`${CONFIG.api}homestead/list`);

-            Territory_Map.map.added({ type: "houses", data: houses });
+            Territory_Map.map.added({ type: "house", data: houses });
            Territory_Map.map.added({ type: "homestead", data: homestead });
        }
    },
    map: {
        polygons: [],

-        init: () => {
+        init() {
            if (map_all && map_all.remove) map_all.remove();
-
            const mapElement = document.getElementById('map');
            if (!mapElement) return;
+            let firstLocate = true;

            let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
                maxZoom: 20,
@@ -55,6 +55,9 @@ const Territory_Map = {
                tms: true
            });

+            free_entrance = new L.FeatureGroup();
+            free_homesteads = new L.FeatureGroup();
+
            map_all = L.map(mapElement, {
                renderer: L.canvas(),
                center: [49.5629016, 25.6145625],
@@ -63,22 +66,72 @@ const Territory_Map = {
                layers: [
                    googleHybrid,
                    osm,
-                    mytile
+                    mytile,
+                    free_entrance,
+                    free_homesteads
                ]
            });

+            map_all.locate({
+                setView: true,   // 🔥 сразу центрирует карту
+                maxZoom: 16
+            });
+
            let baseMaps = {
                "Google Hybrid": googleHybrid,
                "OpenStreetMap": osm,
                "Sheep Service Map": mytile,
            };

-            let layerControl = L.control.layers(baseMaps, [], { position: 'bottomright' }).addTo(map_all);
+            let baseLayer = {
+                "Вільні під'їзди": free_entrance,
+                "Вільні райони": free_homesteads
+            };
+
+
+            L.control.layers(baseMaps, baseLayer, { position: 'bottomright' }).addTo(map_all);

            map_all.pm.setLang("ua");
+
+            map_all.on('zoomend', () => {
+                const z = map_all.getZoom();
+
+                if (z <= 15) {
+                    map_all.removeLayer(free_homesteads);
+                } else {
+                    map_all.addLayer(free_homesteads);
+                }
+
+                if (z <= 16) {
+                    map_all.removeLayer(free_entrance);
+                } else {
+                    map_all.addLayer(free_entrance);
+                }
+            });
+
+            // слежение в реальном времени
+            map_all.locate({ setView: false, watch: true, enableHighAccuracy: true });
+            map_all.on('locationfound', (e) => {
+                if (firstLocate) map_all.setView(e.latlng, 16);
+
+                if (!map_all._userMarker) {
+                    map_all._userMarker = L.marker(e.latlng).addTo(map_all).bindPopup("");
+
+                    map_all._userMarker.on("popupopen", () => {
+                        const div = document.createElement("div");
+                        div.className = 'marker_popup'
+                        div.innerHTML = `<p>Ви тут!</p>`;
+                        map_all._userMarker.setPopupContent(div);
+                    });
+                } else {
+                    map_all._userMarker.setLatLng(e.latlng);
+                }
+
+                firstLocate = false;
+            });
        },

-        added: ({ type, data }) => {
+        added({ type, data }) {
            for (let index = 0; index < data.length; index++) {
                const element = data[index];
                let posPersonal, posGroup;
@@ -108,6 +161,13 @@ const Territory_Map = {
                        }
                    }

+                    this.marker({
+                        id: element.id,
+                        type: 'homestead',
+                        free: element.working ? 0 : 1,
+                        geo: element.geo
+                    })
+
                } else {
                    posPersonal = Home.personal.house.list.map(e => e.id).indexOf(element.id);
                    posGroup = Home.group.house.list.map(e => e.id).indexOf(element.id);
@@ -119,6 +179,13 @@ const Territory_Map = {
                            fillOpacity: 0.8
                        }
                    }
+
+                    this.marker({
+                        id: element.id,
+                        type: 'house',
+                        free: element.entrance.quantity - element.entrance.working,
+                        geo: element.geo
+                    })
                }

                const polygon = L.polygon(element.points, polygonOptions).addTo(map_all);
@@ -129,13 +196,14 @@ const Territory_Map = {
                polygon.on("popupopen", () => {
                    const div = document.createElement("div");
                    let text = () => {
-                        if (posPersonal != -1) return "<span>Моя територія</span>"
-                        else if (posGroup != -1) return "<span>Групова територія</span>"
-                        return ""
+                        if (posPersonal != -1) return `<span>Моя територія</span> <p>${element.title} ${element.number}</p> <a href="/territory/card/${type}/${element.id}" data-route>Перейти до території</a>`
+                        else if (posGroup != -1) return `<span>Групова територія</span> <p>${element.title} ${element.number}</p> <a href="/territory/card/${type}/${element.id}" data-route>Перейти до території</a>`
+                        return `<p>${element.title} ${element.number}</p> `
                    }

-                    div.innerHTML = `${text()} ${element.title} ${element.number}`;
-                    div.className = "leaflet_drop"
+                    div.className = 'marker_popup'
+                    div.innerHTML = `${text()}`;
+                    if (USER.possibilities.can_manager_territory || USER.mode == 2) div.innerHTML += `<a href="/territory/manager/${type}/${element.id}" data-route>Керування</a>`;

                    polygon.setPopupContent(div);
                });
@@ -144,40 +212,29 @@ const Territory_Map = {
            }
        },

-        marker: ({ data, personal = false, group = false }) => {
-            console.log(data);
+        marker({ id, type, free, geo }) {
+            if (!USER.possibilities.can_manager_territory || USER.mode != 2) return;
+            if (free <= 0) return;

-            for (let index = 0; index < data.length; index++) {
-                const element = data[index];
+            const redDot = L.divIcon({
+                className: "marker",
+                html: `${free}`,
+                iconSize: [30, 30],
+                iconAnchor: [15, 15]
+            });

+            // создаём маркер
+            const marker = L.marker([geo.lat, geo.lng], { icon: redDot }).addTo(type == 'homestead' ? free_homesteads : free_entrance);
+            marker.bindPopup("");

-                console.log(element);
+            // при открытии popup генерим div заново
+            marker.on("popupopen", () => {
+                const div = document.createElement("div");
+                div.className = 'marker_popup'
+                div.innerHTML = `<a href="/territory/manager/${type}/${id}" data-route>Перейти до території</a>`;

-                const redDot = L.divIcon({
-                    className: "leaflet_drop",
-                    html: `<div id="redDot_${element.id}"></div>`,
-                    iconSize: [16, 16],
-                    iconAnchor: [8, 8]
-                });
-
-                // создаём маркер
-                const marker = L.marker([element.geo.lat, element.geo.lng], { icon: redDot }).addTo(map_all);
-                marker.bindPopup("");
-
-                // при открытии popup генерим div заново
-                marker.on("popupopen", () => {
-                    const div = document.createElement("div");
-                    let text = () => {
-                        if (personal) return "Моя територія"
-                        else if (group) return "Групова територія"
-                        return ""
-                    }
-                    div.innerHTML = text();
-
-                    marker.setPopupContent(div);
-                });
-
-            }
+                marker.setPopupContent(div);
+            });
        }
    }
 }
--- a/web/lib/pages/territory/map/style.css
+++ b/web/lib/pages/territory/map/style.css
@@ -1,11 +1,53 @@
 .page-territory_map {
-        width: 100%;
+    width: 100%;
    display: flex;
    position: relative;
 }
+
 .page-territory_map>#map {
    margin: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border-radius: calc(var(--border-radius) - 5px);
+}
+
+.page-territory_map .marker {
+    background: var(--ColorThemes2);
+    color: var(--ColorThemes3);
+    font-size: var(--FontSize1);
+    border-radius: var(--border-radius);
+    border: 2px solid var(--ColorThemes3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.page-territory_map .marker_popup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin: 0 2px;
+}
+
+.page-territory_map .marker_popup>p {
+    margin: 0;
+}
+.page-territory_map .marker_popup>span {
+    margin: 0;
+}
+
+.page-territory_map .marker_popup>a {
+    color: var(--ColorThemes3);
+    cursor: pointer;
+    border-radius: calc(var(--border-radius) - 8px);
+    padding: 5px 10px;
+    min-width: fit-content;
+    background: var(--PrimaryColor);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    font-size: var(--FontSize1);
+    min-width: calc(100% - 15px);
 }