Додан моніторінг застосунку
Додани веб компоненти карточок територій та повідомлень
This commit is contained in:
@@ -27,8 +27,8 @@ const Home = {
|
||||
return Home.personal.house.list;
|
||||
},
|
||||
setHTML: async () => {
|
||||
const list = Home.personal.house.list.length > 0
|
||||
? Home.personal.house.list
|
||||
const list = Home.personal.house.list.length > 0
|
||||
? Home.personal.house.list
|
||||
: await Home.personal.house.loadAPI();
|
||||
|
||||
if (USER.possibilities.can_view_territory && list.length)
|
||||
@@ -53,8 +53,8 @@ const Home = {
|
||||
return Home.personal.homestead.list;
|
||||
},
|
||||
setHTML: async () => {
|
||||
const list = Home.personal.homestead.list.length > 0
|
||||
? Home.personal.homestead.list
|
||||
const list = Home.personal.homestead.list.length > 0
|
||||
? Home.personal.homestead.list
|
||||
: await Home.personal.homestead.loadAPI();
|
||||
|
||||
if (USER.possibilities.can_view_territory && list.length)
|
||||
@@ -81,8 +81,8 @@ const Home = {
|
||||
return Home.group.house.list;
|
||||
},
|
||||
setHTML: async () => {
|
||||
const list = Home.group.house.list.length > 0
|
||||
? Home.group.house.list
|
||||
const list = Home.group.house.list.length > 0
|
||||
? Home.group.house.list
|
||||
: await Home.group.house.loadAPI();
|
||||
|
||||
if (USER.possibilities.can_view_territory && list.length)
|
||||
@@ -107,8 +107,8 @@ const Home = {
|
||||
return Home.group.homestead.list;
|
||||
},
|
||||
setHTML: async () => {
|
||||
const list = Home.group.homestead.list.length > 0
|
||||
? Home.group.homestead.list
|
||||
const list = Home.group.homestead.list.length > 0
|
||||
? Home.group.homestead.list
|
||||
: await Home.group.homestead.loadAPI();
|
||||
|
||||
if (USER.possibilities.can_view_territory && list.length)
|
||||
@@ -124,18 +124,10 @@ const Home = {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
for (const el of list) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
|
||||
card.innerHTML = `
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/territory/card/${type}/${el.id}" data-route></a>
|
||||
`;
|
||||
const card = document.createElement('app-territory-card');
|
||||
card.image = `${CONFIG.web}cards/${type}/${type === "house" ? "T" : "H"}${el.id}.webp`;
|
||||
card.address = `${el.title} ${el.number})`;
|
||||
card.link = `/territory/card/${type}/${el.id}`;
|
||||
fragment.appendChild(card);
|
||||
}
|
||||
|
||||
|
||||
@@ -102,123 +102,6 @@
|
||||
overflow-y: auto;
|
||||
align-items: flex-start;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
.page-home .card {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: var(--ColorThemes2);
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
@media (max-width: 2300px) {
|
||||
.page-home .card {
|
||||
width: calc((100% / 5) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1960px) {
|
||||
.page-home .card {
|
||||
width: calc((100% / 4) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1640px) {
|
||||
.page-home .card {
|
||||
width: calc((100% / 3) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.page-home .card {
|
||||
width: calc((100% / 2) - 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.page-home .card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(hover: hover) {
|
||||
.page-home .card:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.page-home .card>i {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
filter: blur(2px);
|
||||
/* background-repeat: round; */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--PrimaryColor);
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
.page-home .card>a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.page-home .contents {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: rgb(64 64 64 / 0.7);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
.page-home .info {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.page-home .info>div {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
background: var(--ColorThemes0);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--FontSize1);
|
||||
color: var(--ColorThemes3);
|
||||
border-radius: calc(var(--border-radius) - 5px - 4px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-home .info>div>span {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 300;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page-home .info>div>p {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 400;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
3
web/lib/pages/schedule/constructor/index.html
Normal file
3
web/lib/pages/schedule/constructor/index.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="page-schedule-constructor">
|
||||
|
||||
</div>
|
||||
8
web/lib/pages/schedule/constructor/script.js
Normal file
8
web/lib/pages/schedule/constructor/script.js
Normal file
@@ -0,0 +1,8 @@
|
||||
const Schedule_constructor = {
|
||||
init: async () => {
|
||||
let html = await fetch('/lib/pages/schedule/constructor/index.html').then((response) => response.text());
|
||||
app.innerHTML = html;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
6
web/lib/pages/schedule/constructor/style.css
Normal file
6
web/lib/pages/schedule/constructor/style.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.page-schedule-constructor {
|
||||
width: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px 20px 0 20px;
|
||||
}
|
||||
@@ -86,6 +86,7 @@
|
||||
<option value="5">Група 5</option>
|
||||
<option value="6">Група 6</option>
|
||||
<option value="7">Група 7</option>
|
||||
<option value="8">Група 8</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="editor-blocks-inputs">
|
||||
@@ -335,6 +336,7 @@
|
||||
<option value="5">Група 5</option>
|
||||
<option value="6">Група 6</option>
|
||||
<option value="7">Група 7</option>
|
||||
<option value="8">Група 8</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -285,7 +285,6 @@ const Sheeps = {
|
||||
},
|
||||
setHTML: async (id, randomNumber) => {
|
||||
let sheep = await Sheeps.editor.loadAPI(id);
|
||||
console.log(sheep);
|
||||
|
||||
Router.navigate(`sheeps/${id}`, true, false);
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<span>Розташування:</span>
|
||||
<p id="stand-info-title">--</p>
|
||||
</div>
|
||||
<div>
|
||||
<div id="stand-info-block-geo" >
|
||||
<span>Геолокація:</span>
|
||||
<a id="stand-info-geo" target="_blank">--</a>
|
||||
</div>
|
||||
|
||||
@@ -23,14 +23,23 @@ const Stand_card = {
|
||||
|
||||
info: {
|
||||
list: [],
|
||||
sheeps: [],
|
||||
|
||||
async setHTML() {
|
||||
const url = `${CONFIG.api}stand/${Stand_card.id}`;
|
||||
this.list = await Stand_card.loadAPI(url);
|
||||
this.list = await Stand_card.loadAPI(`${CONFIG.api}stand/${Stand_card.id}`);
|
||||
this.sheeps = await Stand_card.loadAPI(`${CONFIG.api}sheeps/list/stand`);
|
||||
|
||||
|
||||
document.getElementById('stand-info-title').innerText = this.list.title;
|
||||
document.getElementById('stand-info-geo').innerHTML = 'Відкрити Google Maps';
|
||||
document.getElementById('stand-info-geo').href = `https://www.google.com/maps?q=${this.list.geo[0]},${this.list.geo[1]}`;
|
||||
|
||||
if(this.list.geo[0]>0){
|
||||
document.getElementById('stand-info-geo').innerHTML = 'Відкрити Google Maps';
|
||||
document.getElementById('stand-info-geo').href = `https://www.google.com/maps?q=${this.list.geo[0]},${this.list.geo[1]}`;
|
||||
document.getElementById('stand-info-block-geo').style.display = "";
|
||||
} else {
|
||||
document.getElementById('stand-info-block-geo').style.display = "none";
|
||||
}
|
||||
|
||||
document.getElementById('stand-info-image').setAttribute('src', '');
|
||||
|
||||
Stand_card.schedule.setHTML();
|
||||
@@ -42,7 +51,7 @@ const Stand_card = {
|
||||
update(msg) {
|
||||
const { type, data, user } = msg;
|
||||
const el = document.getElementById(`name-${data?.id}`);
|
||||
if (!el) return; // если элемент не найден — выходим
|
||||
if (!el) return; // якщо елемент не знайдено - виходимо
|
||||
|
||||
const isSelf = user.id == USER.id;
|
||||
|
||||
@@ -56,7 +65,7 @@ const Stand_card = {
|
||||
break;
|
||||
|
||||
case "stand_unlocking":
|
||||
// Разблокируем только если событие от другого пользователя
|
||||
// Розблокуємо лише якщо подія від іншого користувача
|
||||
if (!isSelf) {
|
||||
el.style.border = "";
|
||||
el.style.backgroundColor = "";
|
||||
@@ -70,18 +79,18 @@ const Stand_card = {
|
||||
const sid = data.sheep_id;
|
||||
const sname = data.sheep_name ?? "";
|
||||
|
||||
// Менеджеру показываем весь список
|
||||
// Менеджеру показуємо весь перелік
|
||||
if (USER.possibilities.can_manager_stand && Array.isArray(Sheeps?.sheeps_list?.list)) {
|
||||
el.innerHTML = "";
|
||||
|
||||
// пустой вариант
|
||||
// порожній варіант
|
||||
el.appendChild(Object.assign(document.createElement("option"), {
|
||||
value: "",
|
||||
textContent: " "
|
||||
}));
|
||||
|
||||
// заполняем всех овечек
|
||||
Sheeps.sheeps_list.list.forEach(s => {
|
||||
// заповнюємо всіх овечок
|
||||
Stand_card.info.sheeps.forEach(s => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = s.id;
|
||||
opt.textContent = s.name;
|
||||
@@ -91,7 +100,7 @@ const Stand_card = {
|
||||
|
||||
el.removeAttribute("disabled");
|
||||
} else {
|
||||
// Обычное поведение для обычных пользователей
|
||||
// Звичайна поведінка для звичайних користувачів
|
||||
if (sid == USER.id) {
|
||||
el.innerHTML = `<option value=""></option><option selected value="${USER.id}">${USER.name}</option>`;
|
||||
el.removeAttribute("disabled");
|
||||
@@ -130,7 +139,7 @@ const Stand_card = {
|
||||
}
|
||||
};
|
||||
|
||||
if (Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
Cloud.socket.send(JSON.stringify(message));
|
||||
} else {
|
||||
if (confirm("З'єднання розірвано! Перепідключитись?")) {
|
||||
@@ -152,7 +161,7 @@ const Stand_card = {
|
||||
}
|
||||
};
|
||||
|
||||
if (Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
Cloud.socket.send(JSON.stringify(message));
|
||||
} else {
|
||||
if (confirm("З'єднання розірвано! Перепідключитись?")) {
|
||||
@@ -177,14 +186,14 @@ const Stand_card = {
|
||||
};
|
||||
|
||||
if (USER.possibilities.can_manager_stand) {
|
||||
const pos = Sheeps.sheeps_list.list.map(e => e.id).indexOf(Number(sheep_id));
|
||||
const pos = Stand_card.info.sheeps.map(e => e.id).indexOf(Number(sheep_id));
|
||||
if (pos != -1) {
|
||||
let name = Sheeps.sheeps_list.list[pos].name;
|
||||
let name = Stand_card.info.sheeps[pos].name;
|
||||
message.data.sheep_name = name;
|
||||
}
|
||||
}
|
||||
|
||||
if (Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
Cloud.socket.send(JSON.stringify(message));
|
||||
} else {
|
||||
if (confirm("З'єднання розірвано! Перепідключитись?")) {
|
||||
@@ -272,10 +281,10 @@ const Stand_card = {
|
||||
textContent: " "
|
||||
}));
|
||||
|
||||
// если есть права менеджера — добавляем всех пользователей
|
||||
if (USER.possibilities.can_manager_stand && Array.isArray(Sheeps?.sheeps_list?.list)) {
|
||||
Sheeps.sheeps_list.list.sort((a, b) => a.name.localeCompare(b.name, 'uk'));
|
||||
Sheeps.sheeps_list.list.forEach(s => {
|
||||
// якщо є права менеджера - додаємо всіх користувачів
|
||||
if (USER.possibilities.can_manager_stand && Array.isArray(Stand_card.info.sheeps)) {
|
||||
Stand_card.info.sheeps.sort((a, b) => a.name.localeCompare(b.name, 'uk'));
|
||||
Stand_card.info.sheeps.forEach(s => {
|
||||
const option = document.createElement("option");
|
||||
option.value = s.id;
|
||||
option.textContent = s.name;
|
||||
@@ -283,7 +292,7 @@ const Stand_card = {
|
||||
select.appendChild(option);
|
||||
});
|
||||
} else {
|
||||
// если есть владелец — показываем его
|
||||
// якщо є власник - показуємо його
|
||||
const opt = document.createElement("option");
|
||||
if (sheep.sheep_id) {
|
||||
opt.value = sheep.sheep_id;
|
||||
@@ -296,13 +305,13 @@ const Stand_card = {
|
||||
select.appendChild(opt);
|
||||
}
|
||||
|
||||
// если занят другим пользователем — блокируем
|
||||
// якщо зайнятий іншим користувачем - блокуємо
|
||||
if (sheep.sheep_id && sheep.sheep_id !== USER.id && !USER.possibilities.can_manager_stand) {
|
||||
select.disabled = true;
|
||||
select.value = sheep.sheep_id;
|
||||
}
|
||||
|
||||
// --- обработчики ---
|
||||
// --- обробники ---
|
||||
select.addEventListener("mousedown", () => Stand_card.cloud.mess.locking({ id: sheep.id }));
|
||||
select.addEventListener("change", () => Stand_card.cloud.mess.update({ sheep_id: select.value, id: sheep.id }));
|
||||
select.addEventListener("blur", () => Stand_card.cloud.mess.unlocking({ id: sheep.id }));
|
||||
@@ -347,7 +356,7 @@ const Stand_card = {
|
||||
if (USER.possibilities.can_add_stand) {
|
||||
const btn = Object.assign(document.createElement("button"), {
|
||||
id: "stand-new-button",
|
||||
textContent: "Додати стенд(и)",
|
||||
textContent: "Додати день",
|
||||
onclick: () => Stand_card.addStand()
|
||||
});
|
||||
fragment.appendChild(btn);
|
||||
@@ -407,12 +416,14 @@ const Stand_card = {
|
||||
.then(response => {
|
||||
if (response.status == 200) {
|
||||
console.log({ 'setPack': 'ok' });
|
||||
button.innerText = "Стенд(и) додано";
|
||||
button.innerText = "День додано";
|
||||
Notifier.success('День додано');
|
||||
|
||||
return response.json()
|
||||
} else {
|
||||
console.log('err');
|
||||
button.innerText = "Помилка запису";
|
||||
Notifier.error('Помилка додавання');
|
||||
|
||||
return
|
||||
}
|
||||
@@ -423,16 +434,12 @@ const Stand_card = {
|
||||
Stand_card.schedule.setHTML();
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerText = "Додати стенд(и)";
|
||||
button.innerText = "Додати день";
|
||||
}, 3000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
button.innerText = "Помилка запису";
|
||||
})
|
||||
},
|
||||
|
||||
edit({ sheep_id, stand_id }) {
|
||||
|
||||
}
|
||||
}
|
||||
@@ -51,14 +51,12 @@
|
||||
type="text"
|
||||
id="info-geo_lat"
|
||||
name="geo_lat"
|
||||
required
|
||||
placeholder="49.5601856455014"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="info-geo_lng"
|
||||
name="geo_lng"
|
||||
required
|
||||
placeholder="25.625626212730406"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -50,11 +50,13 @@ const Stand_constructor = {
|
||||
if (response.status == 200) {
|
||||
console.log({ 'setPack': 'ok' });
|
||||
button.innerText = "Стенд додано";
|
||||
Notifier.success('Стенд створено');
|
||||
|
||||
return response.json()
|
||||
} else {
|
||||
console.log('err');
|
||||
button.innerText = "Помилка запису";
|
||||
Notifier.error('Помилка створення');
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
@@ -51,14 +51,12 @@
|
||||
type="text"
|
||||
id="info-geo_lat"
|
||||
name="geo_lat"
|
||||
required
|
||||
placeholder="49.5601856455014"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="info-geo_lng"
|
||||
name="geo_lng"
|
||||
required
|
||||
placeholder="25.625626212730406"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -83,11 +83,13 @@ const Stand_editor = {
|
||||
if (response.status == 200) {
|
||||
console.log({ 'setPack': 'ok' });
|
||||
button.innerText = "Стенд відредаговано";
|
||||
Notifier.success('Стенд відредаговано');
|
||||
|
||||
return response.json()
|
||||
} else {
|
||||
console.log('err');
|
||||
button.innerText = "Помилка при редагуванні";
|
||||
Notifier.error('Помилка при редагуванні');
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ const Stand_list = {
|
||||
},
|
||||
|
||||
renderCard: ({ element }) => {
|
||||
const imagesList = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png'];
|
||||
const imagesList = ['1.png', '5.png', '8.png', '7.png', '2.png', '3.png', '4.png', '6.png'];
|
||||
// const randomImage = images[Math.floor(Math.random() * images.length)];
|
||||
const image = imagesList[Stand_list.renderIndex % imagesList.length];
|
||||
Stand_list.renderIndex++;
|
||||
@@ -85,5 +85,5 @@ const Stand_list = {
|
||||
<a href="/stand/card/${element.id}" data-route></a>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -246,7 +246,8 @@
|
||||
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));
|
||||
/* filter: brightness(0.9) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); */
|
||||
filter: blur(1px) brightness(0.7) contrast(80%) saturate(110%) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
@@ -266,7 +267,7 @@
|
||||
|
||||
.page-stand-list>details>#list>.card>.contents>.info>div {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
background: var(--ColorThemes0);
|
||||
align-items: center;
|
||||
@@ -288,15 +289,15 @@
|
||||
|
||||
.page-stand-list>details>#list>.card>.contents>.info>div>p {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 400;
|
||||
font-size: var(--FontSize4);
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page-stand-list>details>#list>.card>.contents>.info>.button-edit {
|
||||
min-width: 35px;
|
||||
height: 35px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
border-radius: calc(var(--border-radius) - 5px - 4px);
|
||||
background: var(--PrimaryColor);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
let map_card;
|
||||
let map_card, Territory_reconnecting;
|
||||
|
||||
const Territory_card = {
|
||||
// Глобальні змінні стану
|
||||
@@ -131,12 +131,12 @@ const Territory_card = {
|
||||
data: apt
|
||||
};
|
||||
|
||||
if (Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
Cloud.socket.send(JSON.stringify(message));
|
||||
} else {
|
||||
if (confirm("З'єднання розірвано! Перепідключитись?")) {
|
||||
Territory_card.getEntrances({ update: true });
|
||||
Cloud.start();
|
||||
Territory_card.getEntrances({ update: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -178,11 +178,10 @@ const Territory_card = {
|
||||
data: apt
|
||||
};
|
||||
|
||||
if (Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
|
||||
Cloud.socket.send(JSON.stringify(message));
|
||||
} else {
|
||||
if (confirm("З'єднання розірвано! Перепідключитись?")) {
|
||||
Territory_card.getEntrances({ update: true });
|
||||
Territory_card.cloud.start();
|
||||
}
|
||||
}
|
||||
@@ -230,9 +229,9 @@ const Territory_card = {
|
||||
const details = document.createElement('details');
|
||||
if (show === "open") details.setAttribute('open', '');
|
||||
details.innerHTML = `
|
||||
<summary><p>${title}</p>${icon}</summary>
|
||||
<div id="apartments_${id}" class="apartments_list"></div>
|
||||
`;
|
||||
<summary><p>${title}</p>${icon}</summary>
|
||||
<div id="apartments_${id}" class="apartments_list"></div>
|
||||
`;
|
||||
fragment.appendChild(details);
|
||||
|
||||
this.getApartment({ id, number: entrance_number, update: false });
|
||||
@@ -487,6 +486,10 @@ const Territory_card = {
|
||||
},
|
||||
},
|
||||
|
||||
async reload(){
|
||||
Territory_card.getEntrances({ update: true });
|
||||
},
|
||||
|
||||
// Сортування
|
||||
sort(mode, load) {
|
||||
const idx = Math.max(1, Math.min(4, Number(mode) || 1));
|
||||
|
||||
@@ -54,7 +54,7 @@ const Territory_list = {
|
||||
return Territory_list.house.list;
|
||||
},
|
||||
setHTML: async function () {
|
||||
const block_house = document.getElementById('list-house');
|
||||
const block = document.getElementById('list-house');
|
||||
const territory_entrances = localStorage.getItem('territory_list_entrances') === 'true';
|
||||
const sort_mode = localStorage.getItem('territory_list_sort') ?? "1";
|
||||
const territory_list_filter = Number(localStorage.getItem("territory_list_filter") ?? 0);
|
||||
@@ -74,7 +74,7 @@ const Territory_list = {
|
||||
|
||||
list.sort(compare);
|
||||
|
||||
let html = "";
|
||||
block.innerHTML = '';
|
||||
for (const element of list) {
|
||||
const qty = element.entrance?.quantity ?? 0;
|
||||
const work = element.entrance?.working ?? 0;
|
||||
@@ -87,11 +87,33 @@ const Territory_list = {
|
||||
(territory_list_filter === 2 && element.working === false);
|
||||
|
||||
if (statusMatch) {
|
||||
html += this.renderCard({ element, territory_entrances });
|
||||
const card = document.createElement('app-territory-card');
|
||||
|
||||
if (territory_entrances) {
|
||||
const working = element.working;
|
||||
const person = working
|
||||
? `${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}`
|
||||
: ``;
|
||||
|
||||
card.image = `${CONFIG.web}cards/house/T${element.house.id}.webp`;
|
||||
card.address = `${element.house.title} ${element.house.number} (${element.title})`;
|
||||
card.link = `/territory/manager/house/${element.house.id}`;
|
||||
card.sheep = person;
|
||||
block.appendChild(card);
|
||||
} else {
|
||||
const qty = element.entrance.quantity;
|
||||
const work = element.entrance.working;
|
||||
|
||||
card.image = `${CONFIG.web}cards/house/T${element.id}.webp`;
|
||||
card.address = `${element.title} ${element.number}`;
|
||||
card.link = `/territory/manager/house/${element.id}`;
|
||||
card.atWork = work;
|
||||
card.quantity = qty;
|
||||
}
|
||||
|
||||
block.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
block_house.innerHTML = html;
|
||||
},
|
||||
compareAB: (a, b, entrances, order = 'asc') => {
|
||||
const dir = order === 'asc' ? 1 : -1;
|
||||
@@ -110,57 +132,6 @@ const Territory_list = {
|
||||
|
||||
return 0;
|
||||
},
|
||||
renderCard: ({ element, territory_entrances }) => {
|
||||
if (territory_entrances) {
|
||||
const working = element.working;
|
||||
const bg = working ? `background: ${colorGroup(element.history.group_id)} color: #fff;` : "";
|
||||
|
||||
const person = working
|
||||
? `<span>Територію опрацьовує:</span> <p>${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}</p>`
|
||||
: `<span>Територія не опрацьовується</span>`;
|
||||
|
||||
return `
|
||||
<div class="card">
|
||||
<i style="background-image: url(${CONFIG.web}cards/house/T${element.house.id}.webp);"></i>
|
||||
<div class="contents">
|
||||
<div class="info">
|
||||
<div>
|
||||
<p>${element.house.title} ${element.house.number} (${element.title})</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheep" style="${bg}">
|
||||
${person}
|
||||
</div>
|
||||
</div>
|
||||
<a href="/territory/manager/house/${element.house.id}" data-route></a>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const qty = element.entrance.quantity;
|
||||
const work = element.entrance.working;
|
||||
const progress = ((work / qty) * 100).toFixed(1);
|
||||
return `
|
||||
<div class="card">
|
||||
<i style="background-image: url(${CONFIG.web}cards/house/T${element.id}.webp);"></i>
|
||||
<div class="contents">
|
||||
<div class="info">
|
||||
<div>
|
||||
<p>${element.title} ${element.number}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div>
|
||||
<div class="progress" style="width: ${progress}%"></div>
|
||||
<span>Вільні під'їзди:</span>
|
||||
<p>${qty - work} / ${qty}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/territory/manager/house/${element.id}" data-route></a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
territoryType: (type) => {
|
||||
localStorage.setItem('territory_list_entrances', type);
|
||||
document.getElementById('territory_entrances_true').setAttribute('data-state', type === 'false' ? 'active' : '');
|
||||
@@ -202,8 +173,7 @@ const Territory_list = {
|
||||
|
||||
list.sort(compare);
|
||||
|
||||
let html = "";
|
||||
|
||||
block.innerHTML = '';
|
||||
for (const element of list) {
|
||||
const statusMatch =
|
||||
territory_list_filter === 0 ||
|
||||
@@ -211,35 +181,20 @@ const Territory_list = {
|
||||
(territory_list_filter === 2 && !element.working);
|
||||
|
||||
if (statusMatch) {
|
||||
html += this.renderCard(element);
|
||||
const working = element.working;
|
||||
|
||||
const person = working
|
||||
? `${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}`
|
||||
: ``;
|
||||
|
||||
const card = document.createElement('app-territory-card');
|
||||
card.image = `${CONFIG.web}cards/homestead/H${element.id}.webp`;
|
||||
card.address = `${element.title} ${element.number}`;
|
||||
card.link = `/territory/manager/homestead/${element.id}`;
|
||||
card.sheep = person;
|
||||
block.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
block.innerHTML = html;
|
||||
},
|
||||
renderCard: (element) => {
|
||||
const working = element.working;
|
||||
const bg = working ? `background: ${colorGroup(element.history.group_id)} color: #fff;` : "";
|
||||
const person = working
|
||||
? `<span>Територію опрацьовує:</span> <p>${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}</p>`
|
||||
: `<span>Територія не опрацьовується</span>`;
|
||||
|
||||
return `
|
||||
<div class="card">
|
||||
<i style="background-image: url(${CONFIG.web}cards/homestead/H${element.id}.webp);"></i>
|
||||
<div class="contents">
|
||||
<div class="info">
|
||||
<div>
|
||||
<p>${element.title} ${element.number}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheep" style="${bg}">
|
||||
${person}
|
||||
</div>
|
||||
</div>
|
||||
<a href="/territory/manager/homestead/${element.id}" data-route></a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
filter: () => {
|
||||
@@ -252,6 +207,8 @@ const Territory_list = {
|
||||
Territory_list.homestead.setHTML();
|
||||
},
|
||||
report: async () => {
|
||||
Notifier.info('Запит на генерацію звіту опрацювання відправлено');
|
||||
|
||||
const uuid = localStorage.getItem("uuid");
|
||||
const url = `${CONFIG.api}generator/report/territories`;
|
||||
await fetch(url, {
|
||||
|
||||
@@ -202,7 +202,7 @@
|
||||
|
||||
.page-territory #list-house,
|
||||
.page-territory #list-homestead {
|
||||
width: 100%;
|
||||
width: calc(100% - 20px);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -212,157 +212,6 @@
|
||||
overflow-y: auto;
|
||||
align-items: flex-start;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
.page-territory .card {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: var(--ColorThemes2);
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
@media (max-width: 2300px) {
|
||||
.page-territory .card {
|
||||
width: calc((100% / 5) - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1960px) {
|
||||
.page-territory .card {
|
||||
width: calc((100% / 4) - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1640px) {
|
||||
.page-territory .card {
|
||||
width: calc((100% / 3) - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.page-territory .card {
|
||||
width: calc((100% / 2) - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.page-territory .card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(hover: hover) {
|
||||
.page-territory .card:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.page-territory .card>i {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
filter: blur(2px);
|
||||
/* background-repeat: round; */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: var(--PrimaryColor);
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
.page-territory .card>a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.page-territory .contents {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: rgb(64 64 64 / 0.7);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
border-radius: calc(var(--border-radius) - 5px);
|
||||
}
|
||||
|
||||
|
||||
.page-territory .info {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.page-territory .info>div {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
background: var(--ColorThemes0);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--FontSize1);
|
||||
color: var(--ColorThemes3);
|
||||
border-radius: calc(var(--border-radius) - 5px - 4px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-territory .progress {
|
||||
background: var(--PrimaryColor);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.page-territory .info>div>span {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 300;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page-territory .info>div>p {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 400;
|
||||
gap: 20px;
|
||||
padding: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.page-territory .sheep {
|
||||
margin: 10px;
|
||||
max-height: 50px;
|
||||
border-radius: calc(var(--border-radius) - 5px - 4px);
|
||||
padding: 10px 0;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
background: var(--PrimaryColor);
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.page-territory .sheep>span {
|
||||
color: var(--PrimaryColorText);
|
||||
font-size: var(--FontSize3);
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.page-territory .sheep>p {
|
||||
color: var(--PrimaryColorText);
|
||||
font-size: var(--FontSize4);
|
||||
font-weight: 400;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@@ -279,12 +279,6 @@ const Territory_Manager = {
|
||||
};
|
||||
|
||||
L.polygon(data.points, polygonOptions).addTo(map_territory);
|
||||
|
||||
console.log(data.zoom);
|
||||
|
||||
// setTimeout(() => {
|
||||
// map_territory.setZoom(data.zoom);
|
||||
// }, 200)
|
||||
},
|
||||
mess: {
|
||||
open: ({ type, id, number, mode }) => {
|
||||
@@ -359,11 +353,14 @@ const Territory_Manager = {
|
||||
|
||||
if (!response.ok) throw new Error("Failed to assign");
|
||||
|
||||
Notifier.success('Територія призначина успішно');
|
||||
|
||||
Territory_Manager.mess.close();
|
||||
Territory_Manager.entrances.list = [];
|
||||
await Territory_Manager.entrances.setHTML(type, id);
|
||||
} catch (err) {
|
||||
console.error('❌ Error:', err);
|
||||
Notifier.error('Помилка призначення території');
|
||||
const errorText = "Помилка";
|
||||
if (newButton) newButton.innerText = errorText;
|
||||
if (groupButton) groupButton.innerText = errorText;
|
||||
@@ -391,8 +388,11 @@ const Territory_Manager = {
|
||||
|
||||
Territory_Manager.entrances.list = [];
|
||||
await Territory_Manager.entrances.setHTML(type, id);
|
||||
|
||||
Notifier.success('Територія забрана успішно');
|
||||
} catch (error) {
|
||||
console.error("❌ Помилка зняття призначення:", error);
|
||||
Notifier.error('Помилка зняття призначення');
|
||||
if (button) button.innerText = "Помилка";
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user