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

Перероблен генератор карточок територій APІ
2025-11-22 20:17:50 +02:00
parent 04f39da611
commit 4b96ef0806
50 changed files with 1486 additions and 494 deletions
--- a/web/lib/pages/territory/constructor/script.js
+++ b/web/lib/pages/territory/constructor/script.js
@@ -893,8 +893,8 @@ const Territory_constructor = {
            .then(data => {
                console.log(data);

-                Territory.house.list = [];
-                Territory.homestead.list = [];
+                Territory_list.house.list = [];
+                Territory_list.homestead.list = [];
                Router.navigate(`/territory/manager/${Territory_constructor.info.type}/${data.id}`);

                setTimeout(() => {
--- a/web/lib/pages/territory/history/style.css
+++ b/web/lib/pages/territory/history/style.css
@@ -72,4 +72,8 @@
    font-size: var(--FontSize2);
    padding: 10px;
    border-radius: 8px;
+}
+.page-territory_history>#list>.card>.description>p {
+    color: var(--ColorThemes3);
+    font-size: var(--FontSize2);
 }
--- a/web/lib/pages/territory/list/index.html
+++ b/web/lib/pages/territory/list/index.html
@@ -36,11 +36,24 @@
      </svg>
      <span>Історія служіння</span>
    </a>
+
+    <a href="/territory/map" data-route id="mapButton">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path
+          d="M 18 0 C 15.791 0 14 1.791 14 4 C 14 6.062 16.082187 8.7932969 17.242188 10.154297 C 17.641188 10.622297 18.358812 10.622297 18.757812 10.154297 C 19.916813 8.7932969 22 6.062 22 4 C 22 1.791 20.209 0 18 0 z M 18 2.5703125 C 18.789 2.5703125 19.429688 3.211 19.429688 4 C 19.429688 4.789 18.789 5.4296875 18 5.4296875 C 17.211 5.4296875 16.570312 4.789 16.570312 4 C 16.570312 3.211 17.211 2.5703125 18 2.5703125 z M 8.9726562 3.0644531 C 8.7399063 3.0713281 8.5085625 3.1195313 8.2890625 3.2070312 L 4.2578125 4.8203125 C 3.4988125 5.1243125 3 5.8597344 3 6.6777344 L 3 18.521484 C 3 19.936484 4.4281875 20.903906 5.7421875 20.378906 L 9.03125 19.064453 L 14.337891 20.832031 C 14.786891 20.982031 15.273891 20.967969 15.712891 20.792969 L 19.742188 19.179688 C 20.501188 18.876688 21 18.140266 21 17.322266 L 21 10.585938 C 20.308 11.465937 19.6965 12.122625 19.4375 12.390625 C 18.6515 13.204625 17.346547 13.204625 16.560547 12.390625 C 16.301547 12.122625 15.690047 11.465938 14.998047 10.585938 L 14.998047 17.541016 C 14.998047 18.222016 14.332547 18.703234 13.685547 18.490234 L 9.6855469 17.173828 C 9.2765469 17.037828 9 16.653656 9 16.222656 L 9 6.4550781 C 9 5.7750781 9.6645469 5.2948594 10.310547 5.5058594 L 12.427734 6.1972656 C 12.165734 5.4612656 12 4.718 12 4 C 12 3.982 12.003906 3.9652656 12.003906 3.9472656 L 9.6640625 3.1679688 C 9.4395625 3.0929687 9.2054062 3.0575781 8.9726562 3.0644531 z"
+        />
+      </svg>
+      <span>Карта території</span>
+    </a>
  </div>

  <div class="list-controls">
    <div id="page-territory-sort">
-      <button id="sort_1" onclick="Territory_list.sort('2')" data-state="active">
+      <button
+        id="sort_1"
+        onclick="Territory_list.sort('2')"
+        data-state="active"
+      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
          <path
            d="M 32.476562 5.9785156 A 1.50015 1.50015 0 0 0 31 7.5 L 31 37.878906 L 26.560547 33.439453 A 1.50015 1.50015 0 1 0 24.439453 35.560547 L 31.439453 42.560547 A 1.50015 1.50015 0 0 0 33.560547 42.560547 L 40.560547 35.560547 A 1.50015 1.50015 0 1 0 38.439453 33.439453 L 34 37.878906 L 34 7.5 A 1.50015 1.50015 0 0 0 32.476562 5.9785156 z M 14.375 8.0058594 C 14.257547 8.01575 14.139641 8.0379219 14.025391 8.0761719 L 11.025391 9.0761719 C 10.239391 9.3381719 9.8141719 10.188609 10.076172 10.974609 C 10.338172 11.760609 11.190609 12.188828 11.974609 11.923828 L 13 11.580078 L 13 20.5 C 13 21.329 13.671 22 14.5 22 C 15.329 22 16 21.329 16 20.5 L 16 9.5 C 16 9.018 15.767953 8.5652031 15.376953 8.2832031 C 15.082953 8.0717031 14.727359 7.9761875 14.375 8.0058594 z M 14 27 C 11.344 27 9.387625 28.682109 9.015625 31.287109 C 8.898625 32.107109 9.4671094 32.867375 10.287109 32.984375 C 11.106109 33.102375 11.867375 32.533891 11.984375 31.712891 C 12.096375 30.931891 12.537 30 14 30 C 15.103 30 16 30.897 16 32 C 16 33.103 15.103 34 14 34 C 11.592 34 9 35.721 9 39.5 C 9 40.329 9.672 41 10.5 41 L 17.5 41 C 18.329 41 19 40.329 19 39.5 C 19 38.671 18.329 38 17.5 38 L 12.308594 38 C 12.781594 37.093 13.664 37 14 37 C 16.757 37 19 34.757 19 32 C 19 29.243 16.757 27 14 27 z"
--- a/web/lib/pages/territory/list/script.js
+++ b/web/lib/pages/territory/list/script.js
@@ -8,11 +8,9 @@ const Territory_list = {
        selectStatus.value = territory_list_filter;

        if (USER.mode == 2) {
-            document.getElementById("buttons-list").style.display = "flex";
            document.getElementById("historyButton").style.display = "";
        }
        if (USER.possibilities.can_add_territory) {
-            document.getElementById("buttons-list").style.display = "flex";
            document.getElementById("constructorButton").style.display = "";
        }

@@ -64,11 +62,14 @@ const Territory_list = {
            const url = `${CONFIG.api}houses/list${territory_entrances ? '/entrances' : ''}`;
            let list = this.list.length > 0 ? this.list : await this.loadAPI(url);

+            const isEnd = territory_list_filter === "2";
+            const field = isEnd ? "end" : "start";
+
            const compare = {
                "1": (a, b) => this.compareAB(a, b, territory_entrances, 'asc'),
                "2": (a, b) => this.compareAB(a, b, territory_entrances, 'desc'),
-                "3": (a, b) => a.history?.date?.start - b.history?.date?.start,
-                "4": (a, b) => b.history?.date?.start - a.history?.date?.start,
+                "3": (a, b) => (a.history?.date?.[field] ?? 0) - (b.history?.date?.[field] ?? 0),
+                "4": (a, b) => (b.history?.date?.[field] ?? 0) - (a.history?.date?.[field] ?? 0),
            }[sort_mode] ?? ((a, b) => a.id - b.id);

            list.sort(compare);
@@ -120,7 +121,7 @@ const Territory_list = {

                return `
                    <div class="card">
-                        <i style="background-image: url(https://sheep-service.com/cards/house/T${element.house.id}.webp);"></i>
+                        <i style="background-image: url(${CONFIG.web}cards/house/T${element.house.id}.webp);"></i>
                        <div class="contents">
                            <div class="info">
                                <div>
@@ -140,7 +141,7 @@ const Territory_list = {
                const progress = ((work / qty) * 100).toFixed(1);
                return `
                    <div class="card">
-                        <i style="background-image: url(https://sheep-service.com/cards/house/T${element.id}.webp);"></i>
+                        <i style="background-image: url(${CONFIG.web}cards/house/T${element.id}.webp);"></i>
                        <div class="contents">
                            <div class="info">
                                <div>
@@ -225,7 +226,7 @@ const Territory_list = {

            return `
                <div class="card">
-                    <i style="background-image: url(https://sheep-service.com/cards/homestead/H${element.id}.webp);"></i>
+                    <i style="background-image: url(${CONFIG.web}cards/homestead/H${element.id}.webp);"></i>
                    <div class="contents">
                        <div class="info">
                            <div>
--- a/web/lib/pages/territory/list/style.css
+++ b/web/lib/pages/territory/list/style.css
@@ -15,7 +15,7 @@
    box-shadow: var(--shadow-l1);
    border-radius: var(--border-radius);
    overflow: auto;
-    display: none;
+    display: flex;
 }

 .page-territory>.buttons-list>button,
@@ -272,6 +272,7 @@
    background-size: cover;
    background-position: center;
    background-color: var(--PrimaryColor);
+    border-radius: calc(var(--border-radius) - 5px);
 }

 .page-territory .card>a {
@@ -294,6 +295,7 @@
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
+    border-radius: calc(var(--border-radius) - 5px);
 }


--- a/web/lib/pages/territory/manager/script.js
+++ b/web/lib/pages/territory/manager/script.js
@@ -175,22 +175,29 @@ const Territory_Manager = {
                </div>
            `;

-            const renderFree = (element, i = 0) => `
-                <div class="entrance">
-                    <div id="title">
-                        <h1>${element.title ?? ''}</h1>
-                        <a href="/territory/card/${type}/${id}" title="Редактор квартир" data-route>
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 12.5 6 C 8.9280619 6 6 8.9280619 6 12.5 L 6 35.5 C 6 39.071938 8.9280619 42 12.5 42 L 35.5 42 C 39.071938 42 42 39.071938 42 35.5 L 42 12.5 C 42 8.9280619 39.071938 6 35.5 6 L 12.5 6 z M 12.5 9 L 14 9 L 14 15 L 9 15 L 9 12.5 C 9 10.549938 10.549938 9 12.5 9 z M 17 9 L 35.5 9 C 37.450062 9 39 10.549938 39 12.5 L 39 15 L 17 15 L 17 9 z M 9 18 L 14 18 L 14 23 L 9 23 L 9 18 z M 17 18 L 39 18 L 39 23 L 17 23 L 17 18 z M 9 26 L 14 26 L 14 31 L 9 31 L 9 26 z M 17 26 L 39 26 L 39 31 L 17 31 L 17 26 z M 9 34 L 14 34 L 14 39 L 12.5 39 C 10.549938 39 9 37.450062 9 35.5 L 9 34 z M 17 34 L 39 34 L 39 35.5 C 39 37.450062 37.450062 39 35.5 39 L 17 39 L 17 34 z"/></svg>
-                        </a>
+            const renderFree = (element, i = 0) => {
+                let name = () => {
+                    if(element.history.name == "Групова") return `Групова №${element.history.group_id}`
+                    else return element.history.name ?? "..."
+                }
+
+                return `
+                    <div class="entrance">
+                        <div id="title">
+                            <h1>${element.title ?? ''}</h1>
+                            <a href="/territory/card/${type}/${id}" title="Редактор квартир" data-route>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 12.5 6 C 8.9280619 6 6 8.9280619 6 12.5 L 6 35.5 C 6 39.071938 8.9280619 42 12.5 42 L 35.5 42 C 39.071938 42 42 39.071938 42 35.5 L 42 12.5 C 42 8.9280619 39.071938 6 35.5 6 L 12.5 6 z M 12.5 9 L 14 9 L 14 15 L 9 15 L 9 12.5 C 9 10.549938 10.549938 9 12.5 9 z M 17 9 L 35.5 9 C 37.450062 9 39 10.549938 39 12.5 L 39 15 L 17 15 L 17 9 z M 9 18 L 14 18 L 14 23 L 9 23 L 9 18 z M 17 18 L 39 18 L 39 23 L 17 23 L 17 18 z M 9 26 L 14 26 L 14 31 L 9 31 L 9 26 z M 17 26 L 39 26 L 39 31 L 17 31 L 17 26 z M 9 34 L 14 34 L 14 39 L 12.5 39 C 10.549938 39 9 37.450062 9 35.5 L 9 34 z M 17 34 L 39 34 L 39 35.5 C 39 37.450062 37.450062 39 35.5 39 L 17 39 L 17 34 z"/></svg>
+                            </a>
+                        </div>
+                        <div><h1>Територія не опрацьовується</h1></div>
+                        <div><h1>Останнє опрацювання:</h1><h2>${formattedDate(element.history.date.end) ?? "..."} (${name()})</h2></div>
+                        <div class="edit">
+                            <button onclick="Territory_Manager.mess.open({type: '${type}', id: ${id}, number: ${i}, mode: false})" style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
+                            <button onclick="Territory_Manager.mess.open({type: '${type}', id: ${id}, number: ${i}, mode: true})">Призначити вісника</button>
+                        </div>
                    </div>
-                    <div><h1>Територія не опрацьовується</h1></div>
-                    <div><h1>Останнє опрацювання:</h1><h2>${formattedDate(element.history.date.end) ?? "..."}</h2></div>
-                    <div class="edit">
-                        <button onclick="Territory_Manager.mess.open({type: '${type}', id: ${id}, number: ${i}, mode: false})" style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
-                        <button onclick="Territory_Manager.mess.open({type: '${type}', id: ${id}, number: ${i}, mode: true})">Призначити вісника</button>
-                    </div>
-                </div>
-            `;
+                `
+            };

            let html = "";

--- a/web/lib/pages/territory/map/index.html
+++ b/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>
--- a/web/lib/pages/territory/map/script.js
+++ b/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);
+                });
+
+            }
+        }
+    }
+}
--- a/web/lib/pages/territory/map/style.css
+++ b/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);
+}