v0.0.1
This commit is contained in:
75
web/lib/pages/territory_manager/index.html
Normal file
75
web/lib/pages/territory_manager/index.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<div class="page-territory_manager">
|
||||
<div id="territory-info">
|
||||
<div class="territory-info-image" id="CardPicture">
|
||||
<img id="info-picture" src="" alt="" style="display: none" />
|
||||
|
||||
<div id="map_territory_manager"></div>
|
||||
|
||||
<div class="menu-picture">
|
||||
<a id="menu-picture-error" title="Зображення не знайдено!">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" style="fill: #c14d4d;">
|
||||
<path
|
||||
d="M 3.7070312 2.2929688 L 2.2929688 3.7070312 L 26.292969 27.707031 L 27.707031 26.292969 L 26.375 24.960938 C 27.299776 24.784872 28 23.976233 28 23 L 28 7 C 28 5.895 27.105 5 26 5 L 6.4140625 5 L 3.7070312 2.2929688 z M 2.1367188 6.2851562 C 2.0517188 6.5071563 2 6.747 2 7 L 2 23 C 2 24.105 2.895 25 4 25 L 20.851562 25 L 17.851562 22 L 5 22 L 5 15 L 7.2890625 12.710938 C 7.5140625 12.485938 7.7747812 12.317219 8.0507812 12.199219 L 2.1367188 6.2851562 z M 23 8 C 24.105 8 25 8.895 25 10 C 25 11.105 24.105 12 23 12 C 21.895 12 21 11.105 21 10 C 21 8.895 21.895 8 23 8 z M 19 14.001953 C 19.61925 14.001953 20.238437 14.238437 20.710938 14.710938 L 25 19 L 25 22 L 23.414062 22 L 16.707031 15.292969 L 17.289062 14.710938 C 17.761563 14.238437 18.38075 14.001953 19 14.001953 z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a id="menu-picture-ok" style="display: none;" title="Зображення знайдено" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" style="fill: #8BC34A;">
|
||||
<path
|
||||
d="M 4 5 C 2.895 5 2 5.895 2 7 L 2 23 C 2 24.105 2.895 25 4 25 L 26 25 C 27.105 25 28 24.105 28 23 L 28 7 C 28 5.895 27.105 5 26 5 L 4 5 z M 23 8 C 24.105 8 25 8.895 25 10 C 25 11.105 24.105 12 23 12 C 21.895 12 21 11.105 21 10 C 21 8.895 21.895 8 23 8 z M 9 13.001953 C 9.61925 13.001953 10.238437 13.238437 10.710938 13.710938 L 13.972656 16.972656 L 15 18 L 16.15625 19.15625 C 16.57825 19.57825 17.259641 19.574344 17.681641 19.152344 C 18.104641 18.730344 18.104641 18.044094 17.681641 17.621094 L 16.529297 16.470703 L 17.289062 15.710938 C 18.234063 14.765937 19.765937 14.765937 20.710938 15.710938 L 25 20 L 25 22 L 5 22 L 5 16 L 7.2890625 13.710938 C 7.7615625 13.238437 8.38075 13.001953 9 13.001953 z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button title="Створити нове зображення" onclick="Territory_Manager.getScreen()">
|
||||
<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"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="territory-info-text">
|
||||
<h1>Вулиця:</h1>
|
||||
<h2 id="info-title">--</h2>
|
||||
</div>
|
||||
|
||||
<div class="territory-info-text">
|
||||
<h1>Номер:</h1>
|
||||
<h2 id="info-number">--</h2>
|
||||
</div>
|
||||
|
||||
<div class="territory-info-text">
|
||||
<h1>Населений пункт:</h1>
|
||||
<h2 id="info-settlement">--</h2>
|
||||
</div>
|
||||
|
||||
<div class="territory-info-text">
|
||||
<textarea
|
||||
name="info-description"
|
||||
id="info-description"
|
||||
placeholder="Примітка"
|
||||
></textarea>
|
||||
</div>
|
||||
<a id="editor_button" style="display: none" data-route>Змінити територію</a>
|
||||
</div>
|
||||
|
||||
<div id="territory-entrance"></div>
|
||||
</div>
|
||||
|
||||
<div id="territory-new" style="display: none; opacity: 0">
|
||||
<div class="mess">
|
||||
<span>Налаштування</span>
|
||||
<select id="new-worker-name" name="new-worker-name" required="">
|
||||
<option value="" selected="" disabled="">Оберіть...</option>
|
||||
</select>
|
||||
<div>
|
||||
<button onclick="Territory_Manager.mess.close()">Закрити</button>
|
||||
<button
|
||||
id="new-worker-button"
|
||||
onclick="Territory_Manager.newWorker()"
|
||||
style="background: var(--PrimaryColor); color: var(--PrimaryColorText)"
|
||||
>
|
||||
Призначити
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
506
web/lib/pages/territory_manager/script.js
Normal file
506
web/lib/pages/territory_manager/script.js
Normal file
@@ -0,0 +1,506 @@
|
||||
let map_territory, type_territory;
|
||||
|
||||
const Territory_Manager = {
|
||||
init: async (type, id) => {
|
||||
let html = await fetch('/lib/pages/territory_manager/index.html').then((response) => response.text());
|
||||
app.innerHTML = html;
|
||||
|
||||
type_territory = type;
|
||||
|
||||
let sheeps_list = [];
|
||||
if (Sheeps.sheeps_list.list.length == 0) {
|
||||
sheeps_list = await Sheeps.sheeps_list.loadAPI();
|
||||
} else {
|
||||
sheeps_list = Sheeps.sheeps_list.list;
|
||||
}
|
||||
|
||||
let editor_button = document.getElementById('editor_button');
|
||||
if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_add_territory)){
|
||||
editor_button.style.display = "";
|
||||
editor_button.setAttribute("href", `/territory/editor/${type}/${id}`)
|
||||
}
|
||||
|
||||
await Territory_Manager.info.setHTML(type, id);
|
||||
Territory_Manager.entrances.setHTML(type, id);
|
||||
|
||||
for (let i = 0; i < sheeps_list.length; i++) {
|
||||
const element = sheeps_list[i];
|
||||
|
||||
if (Territory_Manager.info.list.group_id == element.group_id) {
|
||||
document.getElementById('new-worker-name').innerHTML += `
|
||||
<option value="${element.name}">${element.name}</option>
|
||||
`;
|
||||
}
|
||||
}
|
||||
},
|
||||
info: {
|
||||
list: {},
|
||||
loadAPI: async (url) => {
|
||||
let uuid = localStorage.getItem("uuid");
|
||||
Territory_Manager.info.list = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
}
|
||||
}).then((response) => response.json());
|
||||
return Territory_Manager.info.list;
|
||||
},
|
||||
setHTML: async (type, id) => {
|
||||
if (type == "house") {
|
||||
let url = `${CONFIG.api}house/${id}`;
|
||||
let data = await Territory_Manager.info.loadAPI(url);
|
||||
|
||||
Territory_Manager.map(type, data);
|
||||
|
||||
let info_picture = document.getElementById('info-picture');
|
||||
let info_title = document.getElementById('info-title');
|
||||
let info_number = document.getElementById('info-number');
|
||||
let info_settlement = document.getElementById('info-settlement');
|
||||
let info_description = document.getElementById('info-description');
|
||||
|
||||
info_picture.addEventListener("click", (event) => {
|
||||
let state = info_picture.getAttribute('data-state')
|
||||
if (state == 'active') info_picture.setAttribute('data-state', '')
|
||||
else info_picture.setAttribute('data-state', 'active')
|
||||
});
|
||||
|
||||
info_picture.setAttribute("src", ``);
|
||||
info_title.innerText = data.title;
|
||||
info_number.innerText = data.number;
|
||||
info_settlement.innerText = data.settlement;
|
||||
info_description.value = data.description;
|
||||
} else if (type == "homestead") {
|
||||
let url = `${CONFIG.api}homestead/${id}`;
|
||||
let data = await Territory_Manager.info.loadAPI(url);
|
||||
|
||||
Territory_Manager.map(type, data);
|
||||
|
||||
let info_picture = document.getElementById('info-picture');
|
||||
let info_title = document.getElementById('info-title');
|
||||
let info_number = document.getElementById('info-number');
|
||||
let info_settlement = document.getElementById('info-settlement');
|
||||
let info_description = document.getElementById('info-description');
|
||||
|
||||
info_picture.addEventListener("click", (event) => {
|
||||
let state = info_picture.getAttribute('data-state')
|
||||
if (state == 'active') info_picture.setAttribute('data-state', '')
|
||||
else info_picture.setAttribute('data-state', 'active')
|
||||
});
|
||||
|
||||
info_picture.setAttribute("src", ``);
|
||||
info_title.innerText = data.title;
|
||||
info_number.innerText = data.number;
|
||||
info_settlement.innerText = data.settlement;
|
||||
info_description.value = data.description;
|
||||
}
|
||||
|
||||
urlImage = `https://sheep-service.com/cards/${type}/${type == "house" ? "T" : "H"}${id}.webp`;
|
||||
const checkImage = await fetch(urlImage);
|
||||
|
||||
if(checkImage.ok) {
|
||||
document.getElementById('menu-picture-error').style.display = 'none';
|
||||
document.getElementById('menu-picture-ok').style.display = '';
|
||||
document.getElementById('menu-picture-ok').setAttribute("href", urlImage);
|
||||
} else {
|
||||
document.getElementById('menu-picture-error').style.display = '';
|
||||
document.getElementById('menu-picture-ok').style.display = 'none';
|
||||
}
|
||||
}
|
||||
},
|
||||
entrances: {
|
||||
list: [],
|
||||
loadAPI: async (url) => {
|
||||
let uuid = localStorage.getItem("uuid");
|
||||
Territory_Manager.entrances.list = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
}
|
||||
}).then((response) => response.json());
|
||||
return Territory_Manager.entrances.list;
|
||||
},
|
||||
setHTML: async (type, id) => {
|
||||
if (type == "house") {
|
||||
let url = `${CONFIG.api}house/${id}/entrances`;
|
||||
let listEntrances = await Territory_Manager.entrances.loadAPI(url);
|
||||
|
||||
document.getElementById('territory-entrance').innerHTML = "";
|
||||
|
||||
for (let i = 0; i < listEntrances.length; i++) {
|
||||
const element = listEntrances[i];
|
||||
|
||||
let name = () => {
|
||||
if (element.history.name == "Групова")
|
||||
return `<p>${element.history.name + " " + element.history.group_id}</p>`;
|
||||
else {
|
||||
let sheeps_list = Sheeps.sheeps_list.list;
|
||||
let filtered = sheeps_list.filter(item => item.group_id === Territory_Manager.info.list.group_id);
|
||||
let sheep = filtered.find(item => item.name === element.history.name);
|
||||
|
||||
return `<a href="/sheeps/${sheep.uuid}" data-route="">${element.history.name}</a>`;
|
||||
}
|
||||
}
|
||||
|
||||
if (element.working) {
|
||||
document.getElementById('territory-entrance').innerHTML += `
|
||||
<div class="entrance" data-state="working">
|
||||
<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>
|
||||
${name()}
|
||||
</div>
|
||||
<div>
|
||||
<h1>Територія видана: </h1>
|
||||
<h2>${formattedDate(element.history.date.start)}</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Варто забрати: </h1>
|
||||
<h2>${formattedDate(element.history.date.end) ?? formattedDate(element.history.date.start + (1000 * 2629743 * 4))}</h2>
|
||||
</div>
|
||||
<div class="edit_working">
|
||||
<button onclick="Territory_Manager.endWorker('${type}', ${id}, ${element.history.id})" id="end-working-button" style="color: #121214;background: #c14d4d;">Забрати</button>
|
||||
<button onclick="Territory_Manager.share('${type}', ${i})">Відправити посилання</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById('territory-entrance').innerHTML += `
|
||||
<div class="entrance">
|
||||
<div id="title">
|
||||
<h1>${element.title}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Територія не опрацьовується</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Останнє опрацювання: </h1>
|
||||
<h2>${formattedDate(element.history.date.end) ?? "..."}</h2>
|
||||
</div>
|
||||
|
||||
<div class="edit">
|
||||
<button onclick="Territory_Manager.newWorker('${type}',${id}, ${i}, 'Групова')" id="group-working-button" style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
|
||||
<button onclick="Territory_Manager.mess.open('${type}', ${id}, ${i})">Призначити вісника</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
console.log(element);
|
||||
|
||||
}
|
||||
} else if (type == "homestead") {
|
||||
let url = `${CONFIG.api}homestead/${id}`;
|
||||
let element = await Territory_Manager.entrances.loadAPI(url);
|
||||
|
||||
document.getElementById('territory-entrance').innerHTML = "";
|
||||
|
||||
let name = () => {
|
||||
if (element.history.name == "Групова")
|
||||
return `<p>${element.history.name + " " + element.history.group_id}</p>`;
|
||||
else
|
||||
return `<a href="/sheeps/${element.history.name}" data-route="">${element.history.name}</a>`;
|
||||
}
|
||||
|
||||
if (element.working) {
|
||||
document.getElementById('territory-entrance').innerHTML += `
|
||||
<div class="entrance" data-state="working">
|
||||
<div>
|
||||
<h1>Територію опрацьовує: </h1>
|
||||
${name()}
|
||||
</div>
|
||||
<div>
|
||||
<h1>Територія видана: </h1>
|
||||
<h2>${formattedDate(element.history.date.start)}</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Варто забрати: </h1>
|
||||
<h2>${formattedDate(element.history.date.end) ?? formattedDate(element.history.date.start + (1000 * 2629743 * 4))}</h2>
|
||||
</div>
|
||||
<div class="edit_working">
|
||||
<button onclick="Territory_Manager.endWorker('${type}', ${id}, ${element.history.id})" id="end-working-button" style="color: #121214;background: #c14d4d;">Забрати</button>
|
||||
<button onclick="Territory_Manager.share('${type}', ${i})">Відправити посилання</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById('territory-entrance').innerHTML += `
|
||||
<div class="entrance">
|
||||
<div>
|
||||
<h1>Територія не опрацьовується</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Останнє опрацювання: </h1>
|
||||
<h2>${formattedDate(element.history.date.end) ?? "..."}</h2>
|
||||
</div>
|
||||
|
||||
<div class="edit">
|
||||
<button onclick="Territory_Manager.newWorker('${type}',${id}, ${i}, 'Групова')" id="group-working-button" style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
|
||||
<button onclick="Territory_Manager.mess.open('${type}',${id}, ${i})">Призначити вісника</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
console.log(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
map: (type, data) => {
|
||||
map_territory = {};
|
||||
let center = { lat: 49.5629016, lng: 25.6145625 };
|
||||
let zoom = 19;
|
||||
|
||||
let mytile = L.tileLayer('https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp', {
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
tms: true
|
||||
});
|
||||
|
||||
map_territory = L.map('map_territory_manager', {
|
||||
renderer: L.canvas(),
|
||||
center,
|
||||
zoom,
|
||||
zoomControl: false,
|
||||
layers: [
|
||||
mytile
|
||||
],
|
||||
});
|
||||
|
||||
map_territory.pm.setLang("ua");
|
||||
|
||||
if (type == "homestead") {
|
||||
if (data.geo.lat) map_territory.setView([data.geo.lat, data.geo.lng], 15);
|
||||
else map_territory.setView([data.points[0][0][0].lat, data.points[0][0][0].lng], 15);
|
||||
|
||||
L.polygon(data.points, {
|
||||
color: colorGroup(data.group_id),
|
||||
radius: 500,
|
||||
fillOpacity: 0.3,
|
||||
dashArray: '20, 15',
|
||||
dashOffset: '20',
|
||||
}).on('click', function (e) {
|
||||
|
||||
}).addTo(map_territory);
|
||||
} else if (type == "house") {
|
||||
map_territory.setView([data.geo.lat, data.geo.lng], 17);
|
||||
|
||||
L.polygon(data.points, {
|
||||
color: "#585858",
|
||||
fillColor: colorGroup(data.group_id),
|
||||
fillOpacity: 0.8,
|
||||
tm_id: `house_${i}`
|
||||
}).on('click', function (e) {
|
||||
|
||||
}).addTo(map_territory);
|
||||
}
|
||||
},
|
||||
mess: {
|
||||
open: (type, id, number) => {
|
||||
const block = document.getElementById('territory-new');
|
||||
const new_worker_button = document.getElementById('new-worker-button');
|
||||
|
||||
block.style.display = "";
|
||||
setTimeout(() => {
|
||||
block.style.opacity = "1";
|
||||
}, 100)
|
||||
|
||||
new_worker_button.setAttribute("onclick", `Territory_Manager.newWorker('${type}', ${id}, ${number})`);
|
||||
},
|
||||
close: () => {
|
||||
const block = document.getElementById('territory-new');
|
||||
|
||||
block.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
block.style.display = "none";
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
newWorker: async (type, id, number, name) => {
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
|
||||
const new_worker_button = document.getElementById('new-worker-button');
|
||||
const group_worker_button = document.getElementById('group-working-button');
|
||||
|
||||
let URL, territory_id, data;
|
||||
|
||||
|
||||
const pos = Sheeps.sheeps_list.list.map(e => e.name).indexOf(name ?? document.getElementById("new-worker-name").value);
|
||||
let sheep = Sheeps.sheeps_list.list[pos];
|
||||
|
||||
if (type == "house") {
|
||||
territory_id = Territory_Manager.entrances.list[number].id;
|
||||
data = {
|
||||
name: name ?? document.getElementById("new-worker-name").value,
|
||||
group_id: Territory_Manager.info.list.group_id,
|
||||
sheep_id: sheep ? sheep.id : null
|
||||
}
|
||||
URL = `${CONFIG.api}history/entrance/${territory_id}`;
|
||||
}
|
||||
else if (type == "homestead") {
|
||||
territory_id = Territory_Manager.info.list.id;
|
||||
data = {
|
||||
name: name ?? document.getElementById("new-worker-name").value,
|
||||
group_id: Territory_Manager.info.list.group_id,
|
||||
sheep_id: sheep ? sheep.id : null
|
||||
}
|
||||
URL = `${CONFIG.api}history/homestead/${territory_id}`;
|
||||
}
|
||||
|
||||
console.log(territory_id, data);
|
||||
|
||||
await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.status == 200) {
|
||||
Territory_Manager.mess.close();
|
||||
Territory_Manager.entrances.list = [];
|
||||
Territory_Manager.entrances.setHTML(type, id);
|
||||
|
||||
return response.json()
|
||||
} else {
|
||||
console.log('err');
|
||||
new_worker_button.innerText = "Помилка";
|
||||
group_worker_button.innerText = "Помилка";
|
||||
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
endWorker: async (type, id, territory_id) => {
|
||||
const end_working_button = document.getElementById('end-working-button');
|
||||
let uuid = localStorage.getItem('uuid');
|
||||
let URL = "";
|
||||
|
||||
if (type == "house") {
|
||||
URL = `${CONFIG.api}history/entrance/${territory_id}`;
|
||||
}
|
||||
else if (type == "homestead") {
|
||||
URL = `${CONFIG.api}history/homestead/${territory_id}`;
|
||||
}
|
||||
|
||||
await fetch(URL, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
data: JSON.stringify({})
|
||||
})
|
||||
.then(response => {
|
||||
if (response.status == 200) {
|
||||
Territory_Manager.entrances.list = [];
|
||||
Territory_Manager.entrances.setHTML(type, id);
|
||||
|
||||
return response.json()
|
||||
} else {
|
||||
console.log('err');
|
||||
end_working_button.innerText = "Помилка";
|
||||
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
share: async (type, number) => {
|
||||
let territory, id;
|
||||
|
||||
if (type == "house") {
|
||||
territory = Territory_Manager.entrances.list[number];
|
||||
id = Territory_Manager.entrances.list[number].id;
|
||||
}
|
||||
else if (type == "homestead") {
|
||||
territory = Territory_Manager.info.list;
|
||||
id = Territory_Manager.info.list.id;
|
||||
}
|
||||
|
||||
|
||||
let description = () => {
|
||||
if (Territory_Manager.info.list.description && Territory_Manager.info.list.description.length > 0) {
|
||||
return `\n\nДодатково:\n• ${Territory_Manager.info.list.description}`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
let sheepUuid = () => {
|
||||
const pos = Sheeps.sheeps_list.list.map(e => e.name).indexOf(territory.history.name);
|
||||
let sheep = Sheeps.sheeps_list.list[pos];
|
||||
|
||||
if (sheep) {
|
||||
return `\n\nПосилання на Sheep-Service:\n• https://sheep-service.com/?uuid=${sheep.uuid}`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
if (navigator.share) {
|
||||
console.log("Congrats! Your browser supports Web Share API")
|
||||
try {
|
||||
let url;
|
||||
if(type == 'house') url = `https://sheep-service.com/cards/house/T${Territory_Manager.info.list.id}.webp`;
|
||||
if(type == 'homestead') url = `https://sheep-service.com/cards/homestead/H${Territory_Manager.info.list.id}.webp`;
|
||||
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], `${type == "house" ? "E" + id : "H" + id}.webp`, { type: blob.type });
|
||||
|
||||
await navigator.share({
|
||||
text: `Територія:\n• ${type == "house" ? "E" + id : "H" + id}\n\nНаселений пункт:\n• ${Territory_Manager.info.list.settlement}\n\nВулиця:\n• ${Territory_Manager.info.list.title + " " + Territory_Manager.info.list.number}${description()}\n\nПризначення:\n • З ${formattedDate(territory.history.date.start)}\n • До ${formattedDate(territory.history.date.end) ?? formattedDate(territory.history.date.start + (1000 * 2629743 * 4))}${sheepUuid()}`,
|
||||
files: [file]
|
||||
});
|
||||
|
||||
console.log('Успешно отправлено!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка при отправке:', error);
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
console.log("Sorry! Your browser does not support Web Share API")
|
||||
}
|
||||
},
|
||||
getScreen: async () => {
|
||||
const center = map_territory.getCenter();
|
||||
console.log(center.lat, center.lng);
|
||||
|
||||
let lat = center.lat;
|
||||
let lng = center.lng;
|
||||
let wayId = Territory_Manager.info.list.osm_id;
|
||||
let zoom = map_territory.getZoom() + 2 ?? 17;
|
||||
let address = Territory_Manager.info.list.title;
|
||||
let number = Territory_Manager.info.list.number;
|
||||
let id = Territory_Manager.info.list.id;
|
||||
|
||||
let url = `https://sheep-service.com/api/generator/cards?lat=${lat}&lng=${lng}&type=${type_territory}&wayId=${wayId}&zoom=${zoom}&address=${address}&number=${number}&id=${id}`;
|
||||
let uuid = localStorage.getItem("uuid");
|
||||
let result = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
}
|
||||
}).then((response) => response.json());
|
||||
|
||||
|
||||
urlImage = `https://sheep-service.com/cards/${type}/${type == "house" ? "T" : "H"}${id}.webp`;
|
||||
if(result) {
|
||||
document.getElementById('menu-picture-error').style.display = 'none';
|
||||
document.getElementById('menu-picture-ok').style.display = '';
|
||||
document.getElementById('menu-picture-ok').setAttribute("href", urlImage);
|
||||
} else {
|
||||
document.getElementById('menu-picture-error').style.display = '';
|
||||
document.getElementById('menu-picture-ok').style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
418
web/lib/pages/territory_manager/style.css
Normal file
418
web/lib/pages/territory_manager/style.css
Normal file
@@ -0,0 +1,418 @@
|
||||
.page-territory_manager {
|
||||
width: calc(100% - 18px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 20px 9px 0 9px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#territory-info,
|
||||
#territory-entrance {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 40px - 50px);
|
||||
height: fit-content;
|
||||
margin: 0 10px 15px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--ColorThemes1);
|
||||
color: var(--ColorThemes3);
|
||||
border: 1px solid var(--ColorThemes2);
|
||||
box-shadow: var(--shadow-l1);
|
||||
transition: all .2sease 0s;
|
||||
}
|
||||
|
||||
#territory-info {
|
||||
position: sticky;
|
||||
overflow: auto;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image {
|
||||
width: calc(100% - 20px);
|
||||
min-height: 200px;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
background: var(--ColorThemes0);
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1147 / 751;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>#map_territory_manager {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>img[data-state="active"] {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>.menu-picture {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
z-index: 999;
|
||||
background: var(--ColorThemes0);
|
||||
border: 1px solid var(--ColorThemes2);
|
||||
padding: 5px;
|
||||
border-radius: 6px;
|
||||
min-width: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>.menu-picture>a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>.menu-picture>a>svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>.menu-picture>button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
background: var(--PrimaryColor);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-image>.menu-picture>button>svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--PrimaryColorText);
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-text {
|
||||
width: calc(100% - 40px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
background: var(--ColorThemes0);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-text>h1 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--ColorThemes3);
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-text>h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--ColorThemes3);
|
||||
opacity: 0.8;
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
#territory-info>.territory-info-text>textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: var(--ColorThemes0);
|
||||
color: var(--ColorThemes3);
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#territory-info>#editor_button {
|
||||
width: calc(100% - 20px);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
background: var(--PrimaryColor);
|
||||
color: var(--PrimaryColorText);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 20px 10px 10px 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance {
|
||||
width: calc(100% - 40px);
|
||||
color: var(--ColorThemes3);
|
||||
background-color: var(--ColorThemes2);
|
||||
border: 1px solid var(--ColorThemes0);
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
min-height: 100px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance[data-state="working"] {
|
||||
border: 1px solid var(--PrimaryColor);
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>#title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>#title>h1 {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: var(--ColorThemes0);
|
||||
color: var(--ColorThemes3);
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>#title>a {
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 10px;
|
||||
background: var(--PrimaryColor);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>#title>a>svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
fill: var(--PrimaryColorText);
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>div {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>div>h1 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--ColorThemes3);
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>div>h2,
|
||||
#territory-entrance>.entrance>div>a,
|
||||
#territory-entrance>.entrance>div>p {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--ColorThemes3);
|
||||
opacity: 0.8;
|
||||
margin: 0 7px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>div>a,
|
||||
#territory-entrance>.entrance>div>p {
|
||||
color: var(--ColorThemes0);
|
||||
background: var(--ColorThemes3);
|
||||
border-radius: 6px;
|
||||
padding: 2px 5px;
|
||||
font-weight: 400;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.date_old {
|
||||
background: var(--ColorThemes1) !important;
|
||||
color: var(--ColorThemes3) !important;
|
||||
font-size: 18px !important;
|
||||
padding: 5px 10px !important;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>.edit_working,
|
||||
#territory-entrance>.entrance>.edit {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>.edit_working>button,
|
||||
#territory-entrance>.entrance>.edit>button {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
padding: 2px 10px;
|
||||
background: var(--PrimaryColor);
|
||||
color: var(--PrimaryColorText);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>.edit_working>button:nth-child(2n),
|
||||
#territory-entrance>.entrance>.edit>button:nth-child(2n) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>.edit_working>button:nth-child(2n-1),
|
||||
#territory-entrance>.entrance>.edit>button:nth-child(2n-1) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>button>span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>button>svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--PrimaryColorText);
|
||||
}
|
||||
|
||||
#territory-entrance>.entrance>.apartment_button {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
background: var(--PrimaryColor);
|
||||
color: var(--PrimaryColorText);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0 2px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#territory-new {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: rgb(31 31 33 / 41%);
|
||||
transition: all .2s ease 0s;
|
||||
}
|
||||
|
||||
#territory-new>.mess {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 1px solid var(--ColorThemes2);
|
||||
background: var(--ColorThemes0);
|
||||
box-shadow: 0px 2px 3px rgb(0 0 0 / 5%), 0px 5px 15px rgb(0 0 0 / 5%), 0px 4px 8px rgb(0 0 0 / 5%), 0px 0px 1px rgb(0 0 0 / 5%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -110px;
|
||||
margin-left: -160px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
#territory-new>.mess>span {
|
||||
color: var(--ColorThemes3);
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#territory-new>.mess>select {
|
||||
width: 100%;
|
||||
min-width: 140px;
|
||||
padding: 0 5px;
|
||||
border-radius: 6px;
|
||||
height: 30px;
|
||||
background-color: var(--ColorThemes2);
|
||||
color: var(--ColorThemes3);
|
||||
}
|
||||
|
||||
#territory-new>.mess>div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#territory-new>.mess>div>button {
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
height: 35px;
|
||||
color: var(--ColorThemes0);
|
||||
padding: 2px 10px;
|
||||
background: var(--ColorThemes3);
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 0;
|
||||
width: calc(50% - 5px);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px),
|
||||
(max-height: 540px) {
|
||||
.page-territory_manager {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#territory-info,
|
||||
#territory-entrance {
|
||||
width: calc(100% - 20px);
|
||||
height: fit-content;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
#territory-info {
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user