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

Додан моніторінг застосунку

Browse Source 
Додани веб компоненти карточок територій та повідомлень
This commit is contained in:
Rozenrod
2025-12-08 00:14:56 +02:00
parent e41590546c
commit 85483b85bb
206 changed files with 2370 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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