rozenrod/Sheep-Service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Перероблен генератор карточок територій APІ
This commit is contained in:
Rozenrod
2025-11-22 20:17:50 +02:00
parent 04f39da611
commit 4b96ef0806
50 changed files with 1486 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/lib/pages/home/index.html
View File

@@ -1,5 +1,19 @@
<div class="page-home">
<details id="details-personal-territory" open style="display: none;">
<div class="buttons-list" id="buttons-list">
<a href="/territory/map" data-route id="mapButton">
<?xml version="1.0"?><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>
<details id="details-personal-territory" open style="display: none">
<summary>
<span>Території для опрацювання</span>
</summary>
@@ -7,7 +21,7 @@
<div id="home-personal-territory-list"></div>
</details>
<details id="details-group-territory" open style="display: none;">
<details id="details-group-territory" open style="display: none">
<summary>
<span>Групові території</span>
</summary>

2
web/lib/pages/home/script.js
View File

@@ -128,7 +128,7 @@ const Home = {
card.className = "card";
card.innerHTML = `
<i style="background-image: url(https://sheep-service.com/cards/${type}/${type === "house" ? "T" : "H"}${el.id}.webp);"></i>
<i style="background-image: url(${CONFIG.web}cards/${type}/${type === "house" ? "T" : "H"}${el.id}.webp);"></i>
<div class="contents">
<div class="info">
<div><p>${el.title} ${el.number}</p></div>

45
web/lib/pages/home/style.css
View File

@@ -5,6 +5,47 @@
margin: 20px 20px 0 20px;
}
.page-home>.buttons-list {
padding: 10px;
margin-bottom: 40px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
border-radius: var(--border-radius);
overflow: auto;
display: flex;
}
.page-home>.buttons-list>button,
.page-home>.buttons-list>a {
cursor: pointer;
border-radius: calc(var(--border-radius) - 5px);
padding: 0 10px;
margin-right: 20px;
min-width: fit-content;
min-height: 40px;
background: var(--PrimaryColor);
display: flex;
align-items: center;
justify-content: center;
}
.page-home>.buttons-list>button>span,
.page-home>.buttons-list>a>span {
color: var(--PrimaryColorText);
font-size: var(--FontSize3);
font-weight: normal;
}
.page-home>.buttons-list>button>svg,
.page-home>.buttons-list>a>svg {
width: 20px;
height: 20px;
fill: var(--PrimaryColorText);
margin-right: 10px;
}
.page-home details {
border-radius: var(--border-radius);
width: 100%;
@@ -71,7 +112,7 @@
margin: 10px;
overflow: hidden;
cursor: pointer;
border-radius: 10px;
border-radius: calc(var(--border-radius) - 5px);
}
@media (max-width: 2300px) {
@@ -121,6 +162,7 @@
background-size: cover;
background-position: center;
background-color: var(--PrimaryColor);
border-radius: calc(var(--border-radius) - 5px);
}
.page-home .card>a {
@@ -143,6 +185,7 @@
flex-direction: column;
align-items: stretch;
justify-content: space-between;
border-radius: calc(var(--border-radius) - 5px);
}
.page-home .info {

0
web/lib/pages/schedule/index.html
View File

384
web/lib/pages/schedule/list/index.html Normal file
View File

@@ -0,0 +1,384 @@
<div class="page-schedule-list">
<div class="buttons-list" id="buttons-list"></div>
<div>
<span>Тиждень від 03.10.2025</span>
<div id="list">
<details class="card">
<summary>
<span>Життя і служіння</span>
</summary>
<div>
<div class="column">
<div class="row">
<div class="block_info">
<p class="c0">Ведучий</p>
<h2><span title="Сервісна інформація">1.1</span>Тест</h2>
</div>
<div class="block_info">
<p class="c0">Молитва</p>
<h2><span title="Сервісна інформація">1.2</span>Тест</h2>
</div>
</div>
</div>
<hr>
<div class="column">
<span class="c1">Скарби з Божого слова</span>
<div class="block_info">
<p class="c1">Промова</p>
<h2><span title="Сервісна інформація">2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c1">Перлини</p>
<h2><span title="Сервісна інформація">3</span>Тест</h2>
</div>
</div>
<hr>
<div class="column">
<div class="block_separator">
<p class="c5">Головний зал</p>
<h2><span title="Сервісна інформація">4</span>Тест</h2>
</div>
<div class="block_info">
<p class="c1">Читання Біблії</p>
<h2><span title="Сервісна інформація">5</span>Тест</h2>
</div>
<span class="c2">Вдосконалюймо своє служіння</span>
<div class="block_info">
<p class="c2">Починаємо розмову</p>
<h2><span title="Сервісна інформація">6.1</span>Тест</h2>
<h2><span title="Сервісна інформація">6.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Розвиваємо інтерес</p>
<h2><span title="Сервісна інформація">7.1</span>Тест</h2>
<h2><span title="Сервісна інформація">7.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Підготовка учнів</p>
<h2><span title="Сервісна інформація">8.1</span>Тест</h2>
<h2><span title="Сервісна інформація">8.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Пояснюємо свої переконання</p>
<h2><span title="Сервісна інформація">9.1</span>Тест</h2>
<h2><span title="Сервісна інформація">9.2</span>Тест</h2>
</div>
</div>
<hr>
<div class="column">
<div class="block_separator">
<p class="c5">Додатковий клас</p>
<h2><span title="Сервісна інформація">10</span>Тест</h2>
</div>
<div class="block_info">
<p class="c1">Читання Біблії</p>
<h2><span title="Сервісна інформація">11</span>Тест</h2>
</div>
<span class="c2">Вдосконалюймо своє служіння</span>
<div class="block_info">
<p class="c2">Починаємо розмову</p>
<h2><span title="Сервісна інформація">12.1</span>Тест</h2>
<h2><span title="Сервісна інформація">12.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Розвиваємо інтерес</p>
<h2><span title="Сервісна інформація">13.1</span>Тест</h2>
<h2><span title="Сервісна інформація">13.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Підготовка учнів</p>
<h2><span title="Сервісна інформація">14.1</span>Тест</h2>
<h2><span title="Сервісна інформація">14.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Пояснюємо свої переконання</p>
<h2><span title="Сервісна інформація">15.1</span>Тест</h2>
<h2><span title="Сервісна інформація">15.2</span>Тест</h2>
</div>
</div>
<hr>
<div class="column">
<div class="block_separator">
<p class="c5">Додатковий клас 2</p>
<h2><span title="Сервісна інформація">16</span>Тест</h2>
</div>
<div class="block_info">
<p class="c1">Читання Біблії</p>
<h2><span title="Сервісна інформація">17</span>Тест</h2>
</div>
<span class="c2">Вдосконалюймо своє служіння</span>
<div class="block_info">
<p class="c2">Починаємо розмову</p>
<h2><span title="Сервісна інформація">18.1</span>Тест</h2>
<h2><span title="Сервісна інформація">18.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Розвиваємо інтерес</p>
<h2><span title="Сервісна інформація">19.1</span>Тест</h2>
<h2><span title="Сервісна інформація">19.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Підготовка учнів</p>
<h2><span title="Сервісна інформація">20.1</span>Тест</h2>
<h2><span title="Сервісна інформація">20.2</span>Тест</h2>
</div>
<div class="block_info">
<p class="c2">Пояснюємо свої переконання</p>
<h2><span title="Сервісна інформація">21.1</span>Тест</h2>
<h2><span title="Сервісна інформація">21.2</span>Тест</h2>
</div>
</div>
<hr>
<div class="column">
<span class="c3">Християнське життя</span>
<div class="block_info">
<p class="c3">Пункт 1</p>
<h2><span title="Сервісна інформація">22</span>Тест</h2>
</div>
<div class="block_info">
<p class="c3">Пункт 2</p>
<h2><span title="Сервісна інформація">23</span>Тест</h2>
</div>
<div class="block_info">
<p class="c3">Пункт 3</p>
<h2><span title="Сервісна інформація">24</span>Тест</h2>
</div>
<div class="row">
<div class="block_info">
<p class="c3">Вивчення</p>
<h2><span title="Сервісна інформація">25.1</span>Тест</h2>
</div>
<div class="block_info">
<p class="c3">Читець</p>
<h2><span title="Сервісна інформація">25.2</span>Тест</h2>
</div>
</div>
<div class="block_info">
<p class="c3">Молитва</p>
<h2><span title="Сервісна інформація">26</span>Тест</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c5">Прибирання</span>
<div class="block_info">
<p class="c5">Група</p>
<h2>1</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c6">Озвучення</span>
<div class="block_info">
<p class="c6">Сцена</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Відео</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Аудіо</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Мікрофон 1</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Мікрофон 2</p>
<h2>Тест</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c7">Обслуговування</span>
<div class="block_info">
<p class="c7">Головний вхід</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c7">Запасний вхід</p>
<h2>Тест</h2>
</div>
</div>
</div>
</details>
<details class="card">
<summary>
<span>Вивчення «Вартової башти»</span>
</summary>
<div>
<div class="column">
<div class="row">
<div class="block_info">
<p class="c4">Ведучий</p>
<h2><span title="Сервісна інформація">30.1</span>Тест</h2>
</div>
<div class="block_info">
<p class="c4">Пісня</p>
<h2><span title="Сервісна інформація">30.2</span>10</h2>
</div>
</div>
<div class="row">
<div class="block_info">
<p class="c4">Молитва</p>
<h2><span title="Сервісна інформація">31</span>Тест</h2>
</div>
</div>
</div>
<hr>
<div class="column">
<div class="block_info">
<p class="c4">Промовець</p>
<h2><span title="Сервісна інформація">32.1</span>Тест</h2>
</div>
<div class="block_info">
<p class="c4">Тема</p>
<h2><span title="Сервісна інформація">32.2</span>Тест</h2>
</div>
</div>
<hr>
<div class="column">
<div class="row">
<div class="block_info">
<p class="c4">Вивчення</p>
<h2><span title="Сервісна інформація">33.1</span>Тест</h2>
</div>
<div class="block_info">
<p class="c4">Читець</p>
<h2><span title="Сервісна інформація">33.2</span>Тест</h2>
</div>
</div>
<div class="block_info">
<p class="c4">Молитва</p>
<h2><span title="Сервісна інформація">34</span>Тест</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c5">Прибирання</span>
<div class="block_info">
<p class="c5">Група</p>
<h2>1</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c6">Озвучення</span>
<div class="block_info">
<p class="c6">Сцена</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Відео</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Аудіо</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Мікрофон 1</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c6">Мікрофон 2</p>
<h2>Тест</h2>
</div>
</div>
</div>
<div>
<div class="column">
<span class="c7">Обслуговування</span>
<div class="block_info">
<p class="c7">Головний вхід</p>
<h2>Тест</h2>
</div>
<div class="block_info">
<p class="c7">Запасний вхід</p>
<h2>Тест</h2>
</div>
</div>
</div>
</details>
</div>
</div>
</div>

8
web/lib/pages/schedule/list/script.js Normal file
View File

@@ -0,0 +1,8 @@
const Schedule_list = {
init: async () => {
let html = await fetch('/lib/pages/schedule/list/index.html').then((response) => response.text());
app.innerHTML = html;
}
}

361
web/lib/pages/schedule/list/style.css Normal file
View File

@@ -0,0 +1,361 @@
.c0 {
background: var(--C0) !important;
color: #ffffff !important;
}
.c1 {
background: var(--C1) !important;
color: #ffffff !important;
}
.c2 {
background: var(--C2) !important;
color: #ffffff !important;
}
.c3 {
background: var(--C3) !important;
color: #ffffff !important;
}
.c4 {
background: var(--C4) !important;
color: #ffffff !important;
}
.c5 {
background: var(--C5) !important;
color: #ffffff !important;
}
.c6 {
background: var(--C6) !important;
color: #ffffff !important;
}
.c7 {
background: var(--C7) !important;
color: #ffffff !important;
}
.c8 {
background: var(--C8) !important;
color: #ffffff !important;
}
.page-schedule-list {
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: stretch;
margin: 20px 20px 0 20px;
}
.page-schedule-list>.buttons-list {
padding: 10px;
margin-bottom: 40px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
border-radius: var(--border-radius);
overflow: auto;
display: none;
}
.page-schedule-list>.buttons-list>button,
.page-schedule-list>.buttons-list>a {
cursor: pointer;
border-radius: calc(var(--border-radius) - 5px);
padding: 0 10px;
margin-right: 20px;
min-width: fit-content;
min-height: 40px;
background: var(--PrimaryColor);
display: flex;
align-items: center;
justify-content: center;
}
.page-schedule-list>.buttons-list>button>span,
.page-schedule-list>.buttons-list>a>span {
color: var(--PrimaryColorText);
font-size: var(--FontSize3);
font-weight: normal;
}
.page-schedule-list>.buttons-list>button>svg,
.page-schedule-list>.buttons-list>a>svg {
width: 20px;
height: 20px;
fill: var(--PrimaryColorText);
margin-right: 10px;
}
.page-schedule-list>.list-controls {
padding: 10px;
margin: 0px 0 10px 0;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
border-radius: var(--border-radius);
overflow: auto;
display: flex;
}
.page-schedule-list>.list-controls>select {
min-width: 140px;
height: 30px;
background-color: var(--ColorThemes2);
border: 1px solid var(--ColorThemes0);
box-shadow: var(--shadow-l1);
color: var(--ColorThemes3);
font-size: var(--FontSize1);
cursor: pointer;
padding: 0 5px;
margin-right: 10px;
border-radius: calc(var(--border-radius) - 5px - 2px);
}
.page-schedule-list>div {
border-radius: var(--border-radius);
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 10px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
}
.page-schedule-list>div>span {
width: calc(100% - 40px);
color: var(--ColorThemes3);
border-radius: var(--border-radius);
font-size: var(--FontSize5);
padding: 20px 20px 10px 20px;
position: relative;
font-weight: 500;
}
.page-schedule-list>div>#list {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
justify-content: center;
overflow-y: auto;
align-items: flex-start;
transition: .3s ease;
}
.page-schedule-list>div>#list>.mess-list {
height: 200px;
display: none;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.page-schedule-list>div>#list>.mess-list[data-visible="true"] {
display: flex;
}
.page-schedule-list>div>#list>.mess-list>svg {
width: 100px;
height: 100px;
fill: var(--ColorThemes3);
opacity: 0.7;
}
.page-schedule-list>div>#list>.mess-list>h3 {
font-size: var(--FontSize5);
color: var(--ColorThemes3);
opacity: 0.7;
}
.page-schedule-list>div>#list>.card {
position: relative;
width: 100%;
height: fit-content;
background-color: var(--ColorThemes2);
margin: 10px;
overflow: auto;
border-radius: calc(var(--border-radius) - 5px);
}
.page-schedule-list>div>#list>.card>summary {
width: calc(100% - 40px);
cursor: pointer;
color: var(--ColorThemes3);
border-radius: var(--border-radius);
font-size: var(--FontSize5);
padding: 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-schedule-list>div>#list>.card>summary>span {
font-weight: 500;
width: 100%;
}
.page-schedule-list>div>#list>.card>div {
border: 2px solid var(--ColorThemes3);
margin: 10px;
border-radius: calc(var(--border-radius) - 5px);
width: calc(100% - 24px);
min-width: fit-content;
}
.page-schedule-list .column {
background: var(--ColorThemes1);
border-radius: calc(var(--border-radius) - 5px - 2px);
margin: 10px;
text-align: left;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.page-schedule-list hr {
margin: 10px;
}
.page-schedule-list .column>span {
font-size: var(--FontSize5);
color: var(--ColorThemes3);
background: var(--ColorThemes0);
width: calc(100% - 10px);
padding: 5px 0;
text-align: center;
margin: 5px;
border-radius: calc(var(--border-radius) - 5px - 5px);
}
.page-schedule-list .block_info {
display: flex;
flex-direction: row;
width: 100%;
}
.page-schedule-list .column .block_info>p {
font-size: var(--FontSize4);
color: var(--ColorThemes3);
background: var(--C0);
padding: 5px 10px;
min-width: 110px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
border-radius: calc(var(--border-radius) - 5px - 5px);
text-align: center;
}
.page-schedule-list .column .block_info>h2 {
font-size: var(--FontSize3);
color: var(--ColorThemes3);
background: var(--ColorThemes0);
width: 100%;
min-width: 150px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
border-radius: calc(var(--border-radius) - 5px - 5px);
position: relative;
}
.page-schedule-list .column .block_info>h2>span{
position: absolute;
left: 5px;
min-width: 10px;
padding: 5px;
height: calc(100% - 20px);
background: var(--PrimaryColor);
color: var(--PrimaryColorText);
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--border-radius) - 12px);
font-size: var(--FontSize1);
cursor: help;
}
.page-schedule-list .column .block_separator {
display: flex;
flex-direction: row;
width: 100%;
}
.page-schedule-list .column .block_separator>p {
font-size: var(--FontSize5);
color: var(--ColorThemes3);
background: var(--C1);
width: 100%;
padding: 5px 10px;
min-width: 110px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
border-radius: calc(var(--border-radius) - 5px - 2px);
text-align: center;
}
.page-schedule-list .column .block_separator>h2 {
font-size: var(--FontSize3);
color: var(--ColorThemes3);
background: var(--ColorThemes0);
width: 100%;
padding: 5px 10px;
min-width: 200px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
border-radius: calc(var(--border-radius) - 5px - 2px);
text-align: center;
position: relative;
}
.page-schedule-list .column .block_separator>h2>span{
position: absolute;
left: 5px;
min-width: 10px;
padding: 5px;
height: calc(100% - 20px);
background: var(--PrimaryColor);
color: var(--PrimaryColorText);
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--border-radius) - 12px);
font-size: var(--FontSize1);
cursor: help;
}
@media (min-width: 800px) {
.page-schedule-list .column>.row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.page-schedule-list .column>.row>.block_info:nth-child(2n) {
margin-left: 10px;
}
}

8
web/lib/pages/schedule/script.js
View File

@@ -1,8 +0,0 @@
const Schedule = {
init: async () => {
let html = await fetch('/lib/pages/schedule/index.html').then((response) => response.text());
app.innerHTML = html;
}
}

0
web/lib/pages/schedule/style.css
View File

2
web/lib/pages/stand/card/script.js
View File

@@ -321,7 +321,7 @@ const Stand_card = {
textContent: `${formattedDate(timestamp)} • ${formattedDayName(timestamp)}`
}));
const step = day[1]?.[0]?.hour - day[0]?.[0]?.hour || 0.5; // крок між інтервалами
const step = day[1]?.[0]?.hour - day[0]?.[0]?.hour || Stand_card.info.list.processing_time; // крок між інтервалами
day.forEach((hour, hourIndex) => {
const hourDiv = Object.assign(document.createElement("div"), {

20
web/lib/pages/stand/list/script.js
View File

@@ -1,9 +1,13 @@
const Stand_list = {
list: [],
renderIndex: 0,
init: async () => {
let html = await fetch('/lib/pages/stand/list/index.html').then((response) => response.text());
app.innerHTML = html;
Stand_list.renderIndex = 0;
Stand_list.setHTML();
if (USER.possibilities.can_add_stand) {
@@ -11,6 +15,7 @@ const Stand_list = {
document.getElementById("constructorButton").style.display = "";
}
},
loadAPI: async function (url) {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
@@ -23,6 +28,7 @@ const Stand_list = {
Stand_list.list = await response.json();
return Stand_list.list;
},
setHTML: async function () {
const block = document.getElementById('list');
const null_list = document.getElementById('null-list');
@@ -52,12 +58,12 @@ const Stand_list = {
block.innerHTML = html;
}
},
renderCard: ({ element, pack=0 }) => {
const images = [
['stand_1.png', 'stand_2.png', 'stand_3.png'],
['stand_4.png', 'stand_5.png']
];
const randomImage = images[pack][Math.floor(Math.random() * images[pack].length)];
renderCard: ({ element }) => {
const imagesList = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
// const randomImage = images[Math.floor(Math.random() * images.length)];
const image = imagesList[Stand_list.renderIndex % imagesList.length];
Stand_list.renderIndex++;
const editor = USER.possibilities.can_add_stand
? `<a id="editor_button" class="button-edit" data-route title="Змінити графік" href="/stand/editor/${element.id}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path></svg></a>`
@@ -67,7 +73,7 @@ const Stand_list = {
<div class="card">
<div class="contents">
<div class="image">
<img src="/img/${randomImage}">
<img src="/img/stand/${image}">
</div>
<div class="info">
<div>

66
web/lib/pages/stand/list/style.css
View File

@@ -59,7 +59,7 @@
display: flex;
}
.page-stand-list>.list-controls select {
.page-stand-list>.list-controls>select {
min-width: 140px;
height: 30px;
background-color: var(--ColorThemes2);
@@ -73,7 +73,7 @@
border-radius: calc(var(--border-radius) - 5px - 2px);
}
.page-stand-list details {
.page-stand-list>details {
border-radius: var(--border-radius);
width: 100%;
display: flex;
@@ -86,19 +86,19 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list>details[disabled] summary,
.page-stand-list>details.disabled summary {
.page-stand-list>details[disabled]>summary,
.page-stand-list>details.disabled>summary {
pointer-events: none;
user-select: none;
}
.page-stand-list>details summary::-webkit-details-marker,
.page-stand-list>details summary::marker {
.page-stand-list>details>summary::-webkit-details-marker,
.page-stand-list>details>summary::marker {
display: none;
content: "";
}
.page-stand-list summary {
.page-stand-list>details>summary {
width: calc(100% - 40px);
cursor: pointer;
color: var(--ColorThemes3);
@@ -111,12 +111,12 @@
align-items: center;
}
.page-stand-list summary span {
.page-stand-list>details>summary>span {
font-weight: 500;
width: 100%;
}
.page-stand-list #list {
.page-stand-list>details>#list {
width: 100%;
margin: 0;
display: flex;
@@ -129,7 +129,7 @@
transition: .3s ease;
}
.page-stand-list #list>.mess-list {
.page-stand-list>details>#list>.mess-list {
height: 200px;
display: none;
flex-direction: column;
@@ -137,24 +137,24 @@
justify-content: space-evenly;
}
.page-stand-list #list>.mess-list[data-visible="true"] {
.page-stand-list>details>#list>.mess-list[data-visible="true"] {
display: flex;
}
.page-stand-list #list>.mess-list>svg {
.page-stand-list>details>#list>.mess-list>svg {
width: 100px;
height: 100px;
fill: var(--ColorThemes3);
opacity: 0.7;
}
.page-stand-list #list>.mess-list>h3 {
.page-stand-list>details>#list>.mess-list>h3 {
font-size: var(--FontSize5);
color: var(--ColorThemes3);
opacity: 0.7;
}
.page-stand-list .card {
.page-stand-list>details>#list>.card {
position: relative;
width: 300px;
height: 200px;
@@ -166,42 +166,42 @@
}
@media (max-width: 2300px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 5) - 40px);
}
}
@media (max-width: 1960px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 4) - 40px);
}
}
@media (max-width: 1640px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 3) - 40px);
}
}
@media (max-width: 1280px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: calc((100% / 2) - 40px);
}
}
@media (max-width: 650px) {
.page-stand-list .card {
.page-stand-list>details>#list>.card {
width: 100%;
}
}
@media(hover: hover) {
.page-stand-list .card:hover {
.page-stand-list>details>#list>.card:hover {
opacity: 0.8;
}
}
.page-stand-list .card>i {
.page-stand-list>details>#list>.card>i {
position: absolute;
width: 100%;
height: 100%;
@@ -214,7 +214,7 @@
background-color: var(--PrimaryColor);
}
.page-stand-list .card>a {
.page-stand-list>details>#list>.card>a {
position: absolute;
width: 100%;
height: 100%;
@@ -222,7 +222,7 @@
}
.page-stand-list .card>.contents {
.page-stand-list>details>#list>.card>.contents {
position: absolute;
background: rgb(64 64 64 / 0.7);
width: 100%;
@@ -236,25 +236,27 @@
justify-content: space-between;
}
.page-stand-list .card>.contents>.image {
.page-stand-list>details>#list>.card>.contents>.image {
position: absolute;
width: 100%;
border-radius: calc(var(--border-radius) - 5px);
}
.page-stand-list .card>.contents>.image>img {
.page-stand-list>details>#list>.card>.contents>.image>img {
width: 100%;
height: 200px;
object-fit: cover;
filter: brightness(0.9) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
border-radius: calc(var(--border-radius) - 5px);
}
@media (prefers-color-scheme: dark) {
.page-stand-list .card>.contents>.image>img {
.page-stand-list>details>#list>.card>.contents>.image>img {
filter: brightness(0.6) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
}
.page-stand-list .card>.contents>.info {
.page-stand-list>details>#list>.card>.contents>.info {
width: calc(100% - 20px);
position: absolute;
bottom: 0;
@@ -262,7 +264,7 @@
display: flex;
}
.page-stand-list .card>.contents>.info>div {
.page-stand-list>details>#list>.card>.contents>.info>div {
width: 100%;
height: 35px;
display: flex;
@@ -277,14 +279,14 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list .card>.contents>.info>div>span {
.page-stand-list>details>#list>.card>.contents>.info>div>span {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 300;
z-index: 2;
}
.page-stand-list .card>.contents>.info>div>p {
.page-stand-list>details>#list>.card>.contents>.info>div>p {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 400;
@@ -292,7 +294,7 @@
z-index: 2;
}
.page-stand-list .card>.contents>.info>.button-edit {
.page-stand-list>details>#list>.card>.contents>.info>.button-edit {
min-width: 35px;
height: 35px;
border-radius: calc(var(--border-radius) - 5px - 4px);
@@ -306,7 +308,7 @@
box-shadow: var(--shadow-l1);
}
.page-stand-list .card>.contents>.info>.button-edit>svg {
.page-stand-list>details>#list>.card>.contents>.info>.button-edit>svg {
width: 20px;
height: 20px;
fill: var(--PrimaryColorText);

4
web/lib/pages/territory/constructor/script.js
View File

@@ -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(() => {

4
web/lib/pages/territory/history/style.css
View File

@@ -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);
}

15
web/lib/pages/territory/list/index.html
View File

@@ -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"

15
web/lib/pages/territory/list/script.js
View File

@@ -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>

4
web/lib/pages/territory/list/style.css
View File

@@ -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);
}

37
web/lib/pages/territory/manager/script.js
View File

@@ -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 = "";

5
web/lib/pages/territory/map/index.html Normal file
View File

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

183
web/lib/pages/territory/map/script.js Normal file
View File

@@ -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);
});
}
}
}
}

11
web/lib/pages/territory/map/style.css Normal file
View File

@@ -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);
}