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

Переработаны роутеры приложения

Browse Source 
Переписано APi WebSocket для работы с новыми роутерами
This commit is contained in:
Rozenrod
2025-10-03 17:11:31 +03:00
parent d75fb7ec3d
commit 6ec6523d71
54 changed files with 2593 additions and 3749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
web/lib/pages/territory/manager/index.html Normal file
View File

@@ -0,0 +1,117 @@
<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">
<a
id="menu-picture-error"
class="menu-picture-"
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"
class="menu-picture"
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>
<a
id="editor_button"
class="menu-edit"
style="display: none"
data-route
title="Змінити територію"
>
<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>
</a>
</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="Примітка"
onchange="Territory_Manager.info.update()"
></textarea>
</div>
</div>
<div id="territory-entrance"></div>
</div>
<div id="territory-new" style="display: none; opacity: 0">
<div class="mess">
<select id="new-worker-group" name="new-worker-name">
<option value="" selected="" disabled="">Оберіть...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input
id="new-worker-name"
type="text"
name="new-worker-name"
list="list_sheeps"
/>
<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>
<datalist id="list_sheeps"></datalist>

489
web/lib/pages/territory/manager/script.js Normal file
View File

@@ -0,0 +1,489 @@
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.possibilities.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];
document.getElementById('list_sheeps').innerHTML += `
<option value="${element.name}">${element.name}</option>
`;
}
const card = document.getElementById('territory-new');
const mess = card.querySelector('.mess');
if (!card.dataset.listenerAdded) {
card.addEventListener('click', function (event) {
if (!mess.contains(event.target)) {
Territory_Manager.mess.close();
}
});
card.dataset.listenerAdded = 'true';
}
},
info: {
list: {},
loadAPI: async (url) => {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
});
Territory_Manager.info.list = await response.json();
return Territory_Manager.info.list;
},
setHTML: async (type, id) => {
const url = `${CONFIG.api}${type}/${id}`;
const data = await Territory_Manager.info.loadAPI(url);
Territory_Manager.map(type, data);
const info_picture = document.getElementById('info-picture');
const info_title = document.getElementById('info-title');
const info_number = document.getElementById('info-number');
const info_settlement = document.getElementById('info-settlement');
const info_description = document.getElementById('info-description');
if (!info_picture.dataset.listener) {
info_picture.addEventListener("click", () => {
const state = info_picture.getAttribute('data-state');
info_picture.setAttribute('data-state', state === 'active' ? '' : 'active');
});
info_picture.dataset.listener = "true";
}
info_picture.setAttribute("src", "");
info_title.textContent = data.title;
info_number.textContent = data.number;
info_settlement.textContent = data.settlement;
info_description.value = data.description;
const urlImage = `https://sheep-service.com/cards/${type}/${type === "house" ? "T" : "H"}${id}.webp`;
try {
const checkImage = await fetch(urlImage, { method: 'GET' });
const showOk = checkImage.ok;
document.getElementById('menu-picture-ok').style.display = showOk ? '' : 'none';
document.getElementById('menu-picture-error').style.display = showOk ? 'none' : '';
if (showOk) {
document.getElementById('menu-picture-ok').setAttribute("href", urlImage);
}
} catch (err) {
document.getElementById('menu-picture-error').style.display = '';
document.getElementById('menu-picture-ok').style.display = 'none';
}
},
update: async () => {
const uuid = localStorage.getItem('uuid');
const data = Territory_Manager.info.list;
data.description = document.getElementById('info-description').value;
const url = `${CONFIG.api}${type_territory}/${data.id}`;
try {
const response = await fetch(url, {
method: 'PUT',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
},
body: JSON.stringify(data)
});
if (response.ok) {
console.log('ok');
await response.json();
} else {
console.log('err');
}
} catch (e) {
console.log('update error', e);
}
}
},
entrances: {
list: [],
loadAPI: async (url) => {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
});
Territory_Manager.entrances.list = await response.json();
return Territory_Manager.entrances.list;
},
setHTML: async (type, id) => {
const container = document.getElementById('territory-entrance');
container.innerHTML = "";
const sheeps_list = Sheeps.sheeps_list.list;
const renderName = (history) => {
if (history.name === "Групова") return `<p>${history.name} ${history.group_id}</p>`;
const sheep = sheeps_list.find(item => item.name === history.name);
return sheep ? `<a href="/sheeps/${sheep.id}" data-route>${history.name}</a>` : `<a>${history.name}</a>`;
};
const renderWorking = (element, i = 0) => `
<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>${renderName(element.history)}</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})" style="color: #121214;background: #c14d4d;">Забрати</button>
<button onclick="Territory_Manager.share('${type}'${type === "house" ? `, ${i}` : ""})">Відправити посилання</button>
</div>
</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>
</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 = "";
if (type === "house") {
const url = `${CONFIG.api}house/${id}/entrances`;
const list = await Territory_Manager.entrances.loadAPI(url);
for (let i = 0; i < list.length; i++) {
const el = list[i];
html += el.working ? renderWorking(el, i) : renderFree(el, i);
}
} else if (type === "homestead") {
const url = `${CONFIG.api}homestead/${id}`;
const el = await Territory_Manager.entrances.loadAPI(url);
html += el.working ? renderWorking(el) : renderFree(el);
}
container.innerHTML = html;
}
},
map: (type, data) => {
let lat = data.geo?.lat ?? data.points?.[0]?.[0]?.[0]?.lat ?? 49.5629016;
let lng = data.geo?.lng ?? data.points?.[0]?.[0]?.[0]?.lng ?? 25.6145625;
if (map_territory && map_territory.remove) map_territory.remove();
const mapElement = document.getElementById('map_territory_manager');
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_territory = L.map(mapElement, {
renderer: L.canvas(),
center: [lat, lng],
zoom: 0,
zoomControl: false,
layers: [
googleHybrid,
osm,
mytile
]
});
map_territory.setZoom((data.zoom - 1));
let baseMaps = {
"Google Hybrid": googleHybrid,
"OpenStreetMap": osm,
"Sheep Service Map": mytile,
};
let layerControl = L.control.layers(baseMaps, [], { position: 'bottomright' }).addTo(map_territory);
map_territory.pm.setLang("ua");
const polygonOptions = type === "homestead" ? {
color: "#f2bd53",
radius: 500,
fillOpacity: 0.3,
dashArray: '20,15',
dashOffset: '20',
} : {
color: "#585858",
fillColor: "#f2bd53",
fillOpacity: 0.8
};
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 }) => {
const block = document.getElementById('territory-new');
const groupInput = document.getElementById('new-worker-group');
const nameInput = document.getElementById('new-worker-name');
const button = document.getElementById('new-worker-button');
// Показуємо блок
block.style.display = "";
requestAnimationFrame(() => block.style.opacity = "1");
groupInput.style.display = mode ? 'none' : 'flex';
nameInput.style.display = mode ? 'flex' : 'none';
button.onclick = () => Territory_Manager.newWorker({ type, id, number, mode });
},
close: () => {
// Робимо плавне зникнення
const block = document.getElementById('territory-new');
block.style.opacity = "0";
const onTransitionEnd = () => {
block.style.display = "none";
block.removeEventListener("transitionend", onTransitionEnd);
};
block.addEventListener("transitionend", onTransitionEnd);
}
},
newWorker: async ({ type, id, number, mode }) => {
const uuid = localStorage.getItem('uuid');
const sheepName = document.getElementById('new-worker-name').value;
const groupId = Number(document.getElementById('new-worker-group').value);
const newButton = document.getElementById('new-worker-button');
const groupButton = document.getElementById('group-working-button');
let territory_id;
let URL;
const sheep = Sheeps.sheeps_list.list.find(e => e.name === sheepName);
if (type === "house") {
territory_id = Territory_Manager.entrances.list[number]?.id;
URL = `${CONFIG.api}history/entrance/${territory_id}`;
} else if (type === "homestead") {
territory_id = Territory_Manager.info.list.id;
URL = `${CONFIG.api}history/homestead/${territory_id}`;
}
if (!territory_id || !URL) {
console.warn("Невірні дані для призначення.");
return;
}
const data = {
name: mode ? sheepName : "Групова",
group_id: mode ? sheep?.group_id : groupId,
sheep_id: mode ? sheep?.id : null
};
try {
const response = await fetch(URL, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
},
body: JSON.stringify(data)
});
if (!response.ok) throw new Error("Failed to assign");
Territory_Manager.mess.close();
Territory_Manager.entrances.list = [];
await Territory_Manager.entrances.setHTML(type, id);
} catch (err) {
console.error('❌ Error:', err);
const errorText = "Помилка";
if (newButton) newButton.innerText = errorText;
if (groupButton) groupButton.innerText = errorText;
}
},
endWorker: async (type, id, territory_id) => {
const button = document.getElementById('end-working-button');
const uuid = localStorage.getItem('uuid');
const URL = type === "house"
? `${CONFIG.api}history/entrance/${territory_id}`
: `${CONFIG.api}history/homestead/${territory_id}`;
try {
const response = await fetch(URL, {
method: 'PUT',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
},
body: JSON.stringify({})
});
if (!response.ok) throw new Error("Запит не успішний");
Territory_Manager.entrances.list = [];
await Territory_Manager.entrances.setHTML(type, id);
} catch (error) {
console.error("❌ Помилка зняття призначення:", error);
if (button) button.innerText = "Помилка";
}
},
share: async (type, number) => {
const isHouse = type === "house";
const territory = isHouse ? Territory_Manager.entrances.list[number] : Territory_Manager.info.list;
const id = territory.id;
const pos = Sheeps.sheeps_list.list.map(e => e.id).indexOf(territory.history.sheep_id);
let sheep = Sheeps.sheeps_list.list[pos];
console.log(pos);
const shareUrl = pos > 0
? `\n\nПосилання на програму:\n • https://sheep-service.com/?uuid=${sheep.uuid}`
: '';
const description = Territory_Manager.info.list.description?.length > 0
? `\n\nДодатково:\n${Territory_Manager.info.list.description}`
: '';
if (!navigator.share) {
console.log("Sorry! Your browser does not support Web Share API");
return;
}
try {
const baseUrl = "https://sheep-service.com/cards";
const url = isHouse
? `${baseUrl}/house/T${Territory_Manager.info.list.id}.webp`
: `${baseUrl}/homestead/H${Territory_Manager.info.list.id}.webp`;
const response = await fetch(url);
if (!response.ok) throw new Error('Image not found');
const blob = await response.blob();
const fileName = `${isHouse ? "E" + id : "H" + id}.webp`;
const file = new File([blob], fileName, { type: blob.type });
const shareText = `Територія:\n • ${isHouse ? "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} (${territory.title})${description}\n\nПризначення:\n • З ${formattedDate(territory.history.date.start)}\n • До ${formattedDate(territory.history.date.end) ?? formattedDate(territory.history.date.start + (1000 * 2629743 * 4))}${shareUrl}`;
console.log(shareText);
await navigator.share({
text: shareText,
files: [file]
});
console.log('Успешно отправлено!');
} catch (error) {
console.error('Ошибка при отправке:', error);
}
},
getScreen: async () => {
const center = map_territory.getCenter();
const zoom = (map_territory.getZoom() + 2) || 17;
const info = Territory_Manager.info.list;
const params = new URLSearchParams({
lat: center.lat,
lng: center.lng,
type: type_territory,
wayId: info.osm_id,
zoom,
address: info.title,
number: info.number,
id: info.id
});
const url = `https://sheep-service.com/api/generator/cards?${params.toString()}`;
const uuid = localStorage.getItem("uuid");
try {
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
});
const result = await response.json();
const urlImage = `https://sheep-service.com/cards/${type_territory}/${type_territory === "house" ? "T" : "H"}${info.id}.webp`;
const errorElem = document.getElementById('menu-picture-error');
const okElem = document.getElementById('menu-picture-ok');
if (result) {
errorElem.style.display = 'none';
okElem.style.display = '';
okElem.setAttribute("href", urlImage);
} else {
errorElem.style.display = '';
okElem.style.display = 'none';
}
} catch (err) {
console.error('Ошибка при получении скрина:', err);
}
}
}

428
web/lib/pages/territory/manager/style.css Normal file
View File

@@ -0,0 +1,428 @@
.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 {
position: absolute;
right: 10px;
top: 10px;
z-index: 999;
background: var(--ColorThemes0);
border: 1px solid var(--ColorThemes2);
padding: 5px;
border-radius: 6px;
display: flex;
justify-content: space-between;
}
#territory-info>.territory-info-image>.menu>.menu-picture {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
#territory-info>.territory-info-image>.menu>.menu-picture>svg {
width: 22px;
height: 22px;
}
#territory-info>.territory-info-image>.menu>.menu-edit {
width: 30px;
height: 30px;
border-radius: 2px;
background: var(--PrimaryColor);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
#territory-info>.territory-info-image>.menu>.menu-edit>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: var(--FontSize3);
font-weight: 400;
color: var(--ColorThemes3);
}
#territory-info>.territory-info-text>h2 {
font-size: var(--FontSize3);
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: var(--FontSize3);
resize: vertical;
border-radius: 0;
}
#territory-info>#editor_button {
width: calc(100% - 20px);
font-size: var(--FontSize2);
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: var(--FontSize5);
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: var(--FontSize3);
font-weight: 400;
color: var(--ColorThemes3);
}
#territory-entrance>.entrance>div>h2,
#territory-entrance>.entrance>div>a,
#territory-entrance>.entrance>div>p {
font-size: var(--FontSize3);
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: var(--FontSize2);
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: var(--FontSize2);
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: 100px;
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: -50px;
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>input {
width: calc(100% - 10px);
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: var(--FontSize4);
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;
}
}