Додана сторінка "Розклад зібрань"

Перероблен генератор карточок територій APІ

web/lib/pages/territory/map/index.html

@@ -0,0 +1,5 @@
+<div class="page-territory_map">
+ <div id="map"></div>
+</div>
+
+<datalist id="list_sheeps"></datalist>

web/lib/pages/territory/map/script.js

@@ -0,0 +1,183 @@
+let map_all;
+
+const Territory_Map = {
+    init: async () => {
+        let html = await fetch('/lib/pages/territory/map/index.html').then((response) => response.text());
+        app.innerHTML = html;
+
+        Territory_Map.map.init();
+        Territory_Map.info.setHTML();
+    },
+    info: {
+        loadAPI: async (url) => {
+            const uuid = localStorage.getItem("uuid");
+
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": uuid
+                }
+            });
+
+            return await response.json();
+        },
+
+        setHTML: async () => {
+            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: "homestead", data: homestead });
+        }
+    },
+    map: {
+        polygons: [],
+
+        init: () => {
+            if (map_all && map_all.remove) map_all.remove();
+
+            const mapElement = document.getElementById('map');
+            if (!mapElement) return;
+
+            let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
+                maxZoom: 20,
+                minZoom: 15,
+                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
+            });
+
+            let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            });
+
+            let mytile = L.tileLayer('https://sheep-service.com/map/{z}/{x}/{y}.webp', {
+                maxZoom: 20,
+                minZoom: 15,
+                tms: true
+            });
+
+            map_all = L.map(mapElement, {
+                renderer: L.canvas(),
+                center: [49.5629016, 25.6145625],
+                zoom: 17,
+                zoomControl: false,
+                layers: [
+                    googleHybrid,
+                    osm,
+                    mytile
+                ]
+            });
+
+            let baseMaps = {
+                "Google Hybrid": googleHybrid,
+                "OpenStreetMap": osm,
+                "Sheep Service Map": mytile,
+            };
+
+            let layerControl = L.control.layers(baseMaps, [], { position: 'bottomright' }).addTo(map_all);
+
+            map_all.pm.setLang("ua");
+        },
+
+        added: ({ type, data }) => {
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+                let posPersonal, posGroup;
+                let polygonOptions = type === "homestead" ? {
+                    color: "#f2bd53",
+                    radius: 500,
+                    fillOpacity: 0.3,
+                    dashArray: '20,15',
+                    dashOffset: '20',
+                } : {
+                    color: "#585858",
+                    fillColor: "#f2bd53",
+                    fillOpacity: 0.8
+                };
+
+                if (type === "homestead") {
+                    posPersonal = Home.personal.homestead.list.map(e => e.id).indexOf(element.id);
+                    posGroup = Home.group.homestead.list.map(e => e.id).indexOf(element.id);
+
+                    if (posPersonal != -1 || posGroup != -1) {
+                        polygonOptions = {
+                            color: "#9a77c9",
+                            fradius: 500,
+                            fillOpacity: 0.3,
+                            dashArray: '20,15',
+                            dashOffset: '20',
+                        }
+                    }
+
+                } 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);
+
+                    if (posPersonal != -1 || posGroup != -1) {
+                        polygonOptions = {
+                            color: "#585858",
+                            fillColor: "#9a77c9",
+                            fillOpacity: 0.8
+                        }
+                    }
+                }
+
+                const polygon = L.polygon(element.points, polygonOptions).addTo(map_all);
+
+                polygon.bindPopup("");
+
+                // при открытии popup генерим div заново
+                polygon.on("popupopen", () => {
+                    const div = document.createElement("div");
+                    let text = () => {
+                        if (posPersonal != -1) return "<span>Моя територія</span>"
+                        else if (posGroup != -1) return "<span>Групова територія</span>"
+                        return ""
+                    }
+
+                    div.innerHTML = `${text()} ${element.title} ${element.number}`;
+                    div.className = "leaflet_drop"
+
+                    polygon.setPopupContent(div);
+                });
+
+                // Territory_Map.map.polygons[type][element.id] = polygon; // сохраним ссылку на маркер
+            }
+        },
+
+        marker: ({ data, personal = false, group = false }) => {
+            console.log(data);
+
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+
+
+                console.log(element);
+
+                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);
+                });
+
+            }
+        }
+    }
+}

web/lib/pages/territory/map/style.css

@@ -0,0 +1,11 @@
+.page-territory_map {
+        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);
+}