v1.0.0
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
const Editor = {
|
||||
init: async (type, id) => {
|
||||
async init(type, id) {
|
||||
let html = await fetch('/lib/pages/editor/index.html').then((response) => response.text());
|
||||
app.innerHTML = html;
|
||||
|
||||
@@ -12,14 +12,9 @@ const Editor = {
|
||||
numApartments = 1;
|
||||
|
||||
Editor.info.setHTML(type, id);
|
||||
|
||||
// document.getElementById("area-form").addEventListener("submit", async function (event) {
|
||||
// event.preventDefault();
|
||||
|
||||
// await Editor.api.setPack();
|
||||
// })
|
||||
},
|
||||
loadAPI: async function (URL) {
|
||||
|
||||
async loadAPI(URL) {
|
||||
let uuid = localStorage.getItem("uuid");
|
||||
return await fetch(URL, {
|
||||
method: 'GET',
|
||||
@@ -29,71 +24,66 @@ const Editor = {
|
||||
}
|
||||
}).then((response) => response.json());
|
||||
},
|
||||
|
||||
info: {
|
||||
list: {
|
||||
type: null,
|
||||
group_id: null,
|
||||
title: null,
|
||||
number: null,
|
||||
points: [],
|
||||
points_number: [],
|
||||
point_icons: [],
|
||||
geo: [],
|
||||
osm_id: [],
|
||||
settlement: [],
|
||||
description: null,
|
||||
entrance: [],
|
||||
apartments: {}
|
||||
type: null, title: null, number: null,
|
||||
points: [], points_number: [], point_icons: [],
|
||||
geo: [], osm_id: [], settlement: [], description: null,
|
||||
entrance: [], apartments: {}
|
||||
},
|
||||
setHTML: async (type, id) => {
|
||||
let detailsInfo_address_title = document.getElementById('info-address-title');
|
||||
let detailsInfo_number_title = document.getElementById('info-number-title');
|
||||
let detailsInfo_settlement_title = document.getElementById('info-settlement-title');
|
||||
let detailsInfo_group_title = document.getElementById('info-group-title');
|
||||
let detailsInfo_osm_title = document.getElementById('info-osm-title');
|
||||
|
||||
Editor.info.list = await Editor.loadAPI(`${CONFIG.api}${type}/${id}`);
|
||||
async setHTML(type, id) {
|
||||
const els = {
|
||||
title: document.getElementById('info-address-title'),
|
||||
number: document.getElementById('info-number-title'),
|
||||
settlement: document.getElementById('info-settlement-title')
|
||||
};
|
||||
|
||||
this.list = await Editor.loadAPI(`${CONFIG.api}${type}/${id}`);
|
||||
Editor.info.list.type = type;
|
||||
Editor.info.list.entrance = [];
|
||||
Editor.info.list.apartments = {};
|
||||
|
||||
console.log(Editor.info.list);
|
||||
detailsInfo_address_title.value = Editor.info.list.title;
|
||||
detailsInfo_number_title.value = Editor.info.list.number;
|
||||
detailsInfo_settlement_title.value = Editor.info.list.settlement;
|
||||
detailsInfo_group_title.value = Editor.info.list.group_id;
|
||||
detailsInfo_osm_title.value = Editor.info.list.osm_id.join(", ");
|
||||
|
||||
els.title.value = this.list.title;
|
||||
els.number.value = this.list.number;
|
||||
els.settlement.value = this.list.settlement;
|
||||
|
||||
Editor.osm.init();
|
||||
Editor.info.setMap();
|
||||
|
||||
this.setMap();
|
||||
|
||||
if (type == "house") {
|
||||
Editor.entrances.setHTML(id);
|
||||
document.getElementById('details-area').style.display = "";
|
||||
} else if (type == "homestead") {
|
||||
Editor.homestead.init(id);
|
||||
}
|
||||
},
|
||||
setMap: async () => {
|
||||
|
||||
setMap() {
|
||||
houseGroup.clearLayers();
|
||||
|
||||
for (let i = 0; i < Editor.info.list.points.length; i++) {
|
||||
const element = Editor.info.list.points[i];
|
||||
|
||||
if (Editor.info.list.type == "homestead") {
|
||||
map.setView([Editor.info.list.geo.lat, Editor.info.list.geo.lng], 17);
|
||||
map.setView([this.list.geo.lat, this.list.geo.lng], this.list.zoom);
|
||||
|
||||
L.polygon(element, {
|
||||
color: colorGroup(Editor.info.list.group_id),
|
||||
color: "#f2bd53",
|
||||
radius: 500,
|
||||
fillOpacity: 0.3,
|
||||
dashArray: '20, 15',
|
||||
dashArray: '20,15',
|
||||
dashOffset: '20',
|
||||
}).addTo(houseGroup);
|
||||
} else if (Editor.info.list.type == "house") {
|
||||
map.setView([Editor.info.list.geo.lat, Editor.info.list.geo.lng], 18);
|
||||
map.setView([this.list.geo.lat, this.list.geo.lng], this.list.zoom);
|
||||
|
||||
L.polygon(element, {
|
||||
color: "#585858",
|
||||
fillColor: colorGroup(Editor.info.list.group_id),
|
||||
fillColor: "#f2bd53",
|
||||
fillOpacity: 0.8,
|
||||
tm_id: `house_${i}`
|
||||
}).addTo(houseGroup);
|
||||
@@ -101,290 +91,18 @@ const Editor = {
|
||||
}
|
||||
}
|
||||
},
|
||||
entrances: {
|
||||
list: [],
|
||||
setHTML: async (id) => {
|
||||
Editor.entrances.list = await Editor.loadAPI(`${CONFIG.api}house/${id}/entrances`);
|
||||
|
||||
console.log(Editor.entrances.list);
|
||||
Editor.entrances.setMap()
|
||||
},
|
||||
setMap: async () => {
|
||||
entransePolygonsGroup.clearLayers();
|
||||
entranseNumPolygonsGroup.clearLayers();
|
||||
|
||||
for (let i = 0; i < Editor.entrances.list.length; i++) {
|
||||
const element = Editor.entrances.list[i];
|
||||
console.log(element);
|
||||
|
||||
let listEntranse = document.getElementById('list-entranse');
|
||||
listEntranse.style.display = "";
|
||||
listEntranse.innerHTML += `
|
||||
<div class="house" style="align-items: center;" id="Entranse_${element.id}">
|
||||
<p>${element.entrance_number + 1}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let listArea = document.getElementById('list-area');
|
||||
listArea.innerHTML += `
|
||||
<div class="block-area" id="block-area-${element.id}">
|
||||
<h3>${element.title}</h3>
|
||||
<button class="addFloors" title="Додати поверх" type="button" onclick="Editor.apartments.addFloors('${element.id}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||||
|
||||
<div id="area-${element.id}"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Editor.apartments.setHTML(element.id);
|
||||
|
||||
L.polygon(element.points, { color: 'red' }).addTo(entransePolygonsGroup);
|
||||
|
||||
let myIcon = L.divIcon({ className: 'entranse_number', html: `<div class="markerEntranse">${element.entrance_number + 1}</div>` });
|
||||
L.marker(element.points_number, { icon: myIcon }).addTo(entranseNumPolygonsGroup);
|
||||
}
|
||||
}
|
||||
},
|
||||
apartments: {
|
||||
list: [],
|
||||
setHTML: async (id) => {
|
||||
Editor.apartments.list[`${id}`] = await Editor.loadAPI(`${CONFIG.api}apartments/${id}`);
|
||||
|
||||
const uniqueFloors = [...new Set(Editor.apartments.list[`${id}`].map(item => item.floors_number))];
|
||||
for (let i = 0; i < uniqueFloors.length; i++) {
|
||||
let num = uniqueFloors[i];
|
||||
|
||||
let area = document.getElementById(`area-${id}`);
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = "block-apartments-floors";
|
||||
div.id = `floors-${id}-${num}`
|
||||
div.innerHTML = `
|
||||
<h2>Поверх ${num}</h2>
|
||||
<button class="addApartment" id="buttonApartment-${id}-${num}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${id}', '${num}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||||
`;
|
||||
|
||||
area.prepend(div);
|
||||
}
|
||||
|
||||
Editor.apartments.list[`${id}`].sort((a, b) => b.title - a.title);
|
||||
|
||||
for (let i = 0; i < Editor.apartments.list[`${id}`].length; i++) {
|
||||
const apartment = Editor.apartments.list[`${id}`][i];
|
||||
let num = apartment.floors_number;
|
||||
|
||||
let floorsBlock = document.getElementById(`floors-${id}-${num}`);
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = "block-apartments-number";
|
||||
div.id = `block-apartments-${id}-${apartment.id}`
|
||||
div.innerHTML = `
|
||||
<input type="text" value="${apartment.title}" id="apartament-${id}-${apartment.id}" onchange="Editor.apartments.editApartment('${id}','${apartment.id}')">
|
||||
<button type="button" onclick="Editor.apartments.deleteApartment('${id}','${apartment.id}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||||
</button>
|
||||
`;
|
||||
floorsBlock.prepend(div);
|
||||
|
||||
numApartments++;
|
||||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||||
next_apartment_title.value = numApartments;
|
||||
}
|
||||
},
|
||||
editNum: (element) => {
|
||||
numApartments = Number(element.value);
|
||||
},
|
||||
addFloors: async (area) => {
|
||||
let areaBlock = document.getElementById(`area-${area}`);
|
||||
let uniqueFloors = [...new Set(Editor.apartments.list[area].map(obj => obj.floors_number))];
|
||||
let new_floors = uniqueFloors.length + 1;
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
apartment_number: Editor.apartments.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(new_floors)
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = "block-apartments-floors";
|
||||
div.id = `floors-${area}-${new_floors}`
|
||||
div.innerHTML = `
|
||||
<h2>Поверх ${new_floors}</h2>
|
||||
<div class="block-apartments-number" id="block-apartments-${area}-${data.id}">
|
||||
<input type="text" value="${numApartments}" id="apartament-${area}-${data.id}" onchange="Editor.apartments.editApartment('${area}', '${data.id}')">
|
||||
<button type="button" onclick="Editor.apartments.deleteApartment('${area}', '${data.id}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="addApartment" id="buttonApartment-${area}-${new_floors}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${area}', '${new_floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>
|
||||
`
|
||||
|
||||
areaBlock.prepend(div);
|
||||
|
||||
console.log(Editor.apartments.list[area]);
|
||||
|
||||
|
||||
Editor.apartments.list[area].push({
|
||||
id: data.id,
|
||||
entrance_id: Number(area),
|
||||
apartment_number: Editor.apartments.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(new_floors)
|
||||
});
|
||||
|
||||
numApartments++;
|
||||
|
||||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||||
next_apartment_title.value = numApartments;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
addApartment: async (area, floors) => {
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
apartment_number: Editor.apartments.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(floors)
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
Editor.apartments.list[area].push({
|
||||
id: data.id,
|
||||
entrance_id: Number(area),
|
||||
apartment_number: Editor.apartments.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(floors)
|
||||
});
|
||||
|
||||
let floorsBlock = document.getElementById(`floors-${area}-${floors}`);
|
||||
document.getElementById(`buttonApartment-${area}-${floors}`).remove();
|
||||
|
||||
floorsBlock.innerHTML += `
|
||||
<div class="block-apartments-number" id="block-apartments-${area}-${data.id}">
|
||||
<input type="text" value="${numApartments}" id="apartament-${area}-${data.id}" onchange="Editor.apartments.editApartment('${area}', '${data.id}')">
|
||||
<button type="button" onclick="Editor.apartments.deleteApartment('${area}', '${data.id}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
floorsBlock.innerHTML += `<button class="addApartment" id="buttonApartment-${area}-${floors}" title="Додати квартиру" type="button" onclick="Editor.apartments.addApartment('${area}', '${floors}')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg></button>`
|
||||
|
||||
numApartments++;
|
||||
|
||||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||||
next_apartment_title.value = numApartments;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
editApartment: async (area, apartament) => {
|
||||
let input = document.getElementById(`apartament-${area}-${apartament}`);
|
||||
input.setAttribute("value", input.value);
|
||||
|
||||
const pos = Editor.apartments.list[area].map(e => e.id).indexOf(Number(apartament));
|
||||
Editor.apartments.list[area][pos].title = input.value;
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
await fetch(URL, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: Editor.apartments.list[area][pos].title,
|
||||
status: Editor.apartments.list[area][pos].status,
|
||||
description: Editor.apartments.list[area][pos].description,
|
||||
id: Editor.apartments.list[area][pos].id
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
},
|
||||
deleteApartment: async (area, apartament) => {
|
||||
const pos = Editor.apartments.list[area].map(e => e.id).indexOf(Number(apartament));
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
await fetch(URL, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: Editor.apartments.list[area][pos].id
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
document.getElementById(`block-apartments-${area}-${apartament}`).remove();
|
||||
Editor.apartments.list[area].splice(pos, 1);
|
||||
|
||||
numApartments--;
|
||||
let next_apartment_title = document.getElementById('next-apartment-title');
|
||||
next_apartment_title.value = numApartments;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
},
|
||||
osm: {
|
||||
init: () => {
|
||||
let center = { lat: 49.5629016, lng: 25.6145625 };
|
||||
let zoom = 19;
|
||||
|
||||
let googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
init() {
|
||||
const googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
|
||||
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
||||
});
|
||||
|
||||
let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
minZoom: 15
|
||||
});
|
||||
|
||||
let mytile = L.tileLayer('https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp', {
|
||||
maxZoom: 20,
|
||||
minZoom: 15,
|
||||
tms: true
|
||||
const osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
|
||||
const mytile = L.tileLayer('https://sheep-service.com/map/{z}/{x}/{y}.webp', {
|
||||
maxZoom: 20, minZoom: 15, tms: true
|
||||
});
|
||||
|
||||
if (!map) {
|
||||
|
||||
houseGroup = new L.FeatureGroup();
|
||||
splitPolygonsGroup = new L.FeatureGroup();
|
||||
RectangleGroup = new L.FeatureGroup();
|
||||
@@ -392,40 +110,26 @@ const Editor = {
|
||||
entranseNumPolygonsGroup = new L.FeatureGroup();
|
||||
|
||||
map = L.map('map', {
|
||||
renderer: L.canvas(),
|
||||
center,
|
||||
zoom,
|
||||
layers: [
|
||||
googleHybrid,
|
||||
osm,
|
||||
mytile,
|
||||
houseGroup,
|
||||
entransePolygonsGroup,
|
||||
entranseNumPolygonsGroup,
|
||||
splitPolygonsGroup,
|
||||
RectangleGroup,
|
||||
],
|
||||
renderer: L.canvas(), zoom: 17,
|
||||
layers: [googleHybrid, osm, mytile, houseGroup,
|
||||
entransePolygonsGroup, entranseNumPolygonsGroup,
|
||||
splitPolygonsGroup, RectangleGroup],
|
||||
zoomControl: false
|
||||
});
|
||||
|
||||
|
||||
let baseMaps = {
|
||||
"Google Hybrid": googleHybrid,
|
||||
"OpenStreetMap": osm,
|
||||
"Territory Map": mytile
|
||||
};
|
||||
let overlayMaps = {
|
||||
"Будинки": houseGroup,
|
||||
"Під'їзди": entransePolygonsGroup,
|
||||
"Номера під'їздів": entranseNumPolygonsGroup,
|
||||
"Слой редактирования": splitPolygonsGroup,
|
||||
"Слой линейки": RectangleGroup,
|
||||
};
|
||||
|
||||
L.control.layers(baseMaps, overlayMaps, { position: 'bottomright' }).addTo(map);
|
||||
L.control.layers(
|
||||
{ "Google Hybrid": googleHybrid, "OpenStreetMap": osm, "Territory Map": mytile },
|
||||
{
|
||||
"Будинки": houseGroup,
|
||||
"Під'їзди": entransePolygonsGroup,
|
||||
"Номера під'їздів": entranseNumPolygonsGroup,
|
||||
"Слой редагування": splitPolygonsGroup,
|
||||
"Слой лінійки": RectangleGroup
|
||||
},
|
||||
{ position: 'bottomright' }
|
||||
).addTo(map);
|
||||
|
||||
map.pm.setLang("ua");
|
||||
|
||||
map.pm.addControls({
|
||||
position: 'bottomright',
|
||||
drawCircleMarker: false,
|
||||
@@ -438,12 +142,495 @@ const Editor = {
|
||||
cutPolygon: false,
|
||||
tooltips: false
|
||||
});
|
||||
map.pm.toggleControls()
|
||||
|
||||
map.pm.setGlobalOptions({
|
||||
layerGroup: splitPolygonsGroup
|
||||
})
|
||||
map.pm.toggleControls();
|
||||
map.pm.setGlobalOptions({ layerGroup: splitPolygonsGroup });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
entrances: {
|
||||
list: [],
|
||||
|
||||
async setHTML(id) {
|
||||
this.list = await Editor.loadAPI(`${CONFIG.api}house/${id}/entrances`);
|
||||
|
||||
entransePolygonsGroup.clearLayers();
|
||||
entranseNumPolygonsGroup.clearLayers();
|
||||
|
||||
const listArea = document.getElementById('list-area');
|
||||
if (!listArea) return;
|
||||
|
||||
listArea.innerHTML = "";
|
||||
|
||||
for (const element of this.list) {
|
||||
// Блок area
|
||||
const divArea = document.createElement('div');
|
||||
divArea.className = "block-area";
|
||||
divArea.id = `block-area-${element.id}`;
|
||||
|
||||
const h3 = document.createElement('h3');
|
||||
h3.textContent = element.title;
|
||||
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = "addFloors";
|
||||
addBtn.type = "button";
|
||||
addBtn.title = "Додати поверх";
|
||||
addBtn.dataset.entranceId = element.id;
|
||||
addBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
addBtn.setAttribute(`onclick`, `Editor.apartments.addFloors("${element.id}")`);
|
||||
|
||||
const innerArea = document.createElement('div');
|
||||
innerArea.id = `area-${element.id}`;
|
||||
|
||||
divArea.append(h3, addBtn, innerArea);
|
||||
listArea.appendChild(divArea);
|
||||
|
||||
// Завантажуємо квартири для ентрансів
|
||||
Editor.apartments.setHTML(element.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
apartments: {
|
||||
list: {},
|
||||
|
||||
async setHTML(id) {
|
||||
this.list[id] = await Editor.loadAPI(`${CONFIG.api}apartments/${id}`);
|
||||
const area = document.getElementById(`area-${id}`);
|
||||
if (!area) return;
|
||||
|
||||
// Унікальні поверхи
|
||||
const uniqueFloors = [...new Set(this.list[id].map(a => a.floors_number))].sort((a, b) => a - b);
|
||||
|
||||
// Створюємо блоки поверхів
|
||||
for (const num of uniqueFloors) {
|
||||
const div = document.createElement('div');
|
||||
div.className = "block-apartments-floors";
|
||||
div.id = `floors-${id}-${num}`;
|
||||
|
||||
const h2 = document.createElement('h2');
|
||||
h2.textContent = `Поверх ${num}`;
|
||||
div.appendChild(h2);
|
||||
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = "addApartment";
|
||||
addBtn.id = `buttonApartment-${id}-${num}`;
|
||||
addBtn.type = "button";
|
||||
addBtn.title = "Додати квартиру";
|
||||
addBtn.dataset.area = id;
|
||||
addBtn.dataset.floors = num;
|
||||
addBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
addBtn.setAttribute(`onclick`, `Editor.apartments.addApartment("${id}", "${num}")`);
|
||||
|
||||
|
||||
div.appendChild(addBtn);
|
||||
area.prepend(div);
|
||||
}
|
||||
|
||||
// Сортуємо квартири за назвою
|
||||
this.list[id].sort((a, b) => b.title - a.title);
|
||||
|
||||
// Створюємо блоки квартир
|
||||
for (const apartment of this.list[id]) {
|
||||
const floorsBlock = document.getElementById(`floors-${id}-${apartment.floors_number}`);
|
||||
if (!floorsBlock) continue;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = "block-apartments-number";
|
||||
div.id = `block-apartments-${id}-${apartment.id}`;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = "text";
|
||||
input.value = apartment.title;
|
||||
input.id = `apartament-${id}-${apartment.id}`;
|
||||
input.dataset.area = id;
|
||||
input.dataset.apartment = apartment.id;
|
||||
input.setAttribute(`onclick`, `Editor.apartments.editApartment("${id}", "${apartment.id}")`);
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.type = "button";
|
||||
delBtn.dataset.area = id;
|
||||
delBtn.dataset.apartment = apartment.id;
|
||||
delBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
delBtn.setAttribute(`onclick`, `Editor.apartments.deleteApartment("${id}", "${apartment.id}")`);
|
||||
|
||||
div.append(input, delBtn);
|
||||
floorsBlock.prepend(div);
|
||||
|
||||
numApartments++;
|
||||
}
|
||||
|
||||
const nextApartmentTitle = document.getElementById('next-apartment-title');
|
||||
if (nextApartmentTitle) nextApartmentTitle.value = numApartments;
|
||||
},
|
||||
|
||||
async addFloors(area) {
|
||||
const areaBlock = document.getElementById(`area-${area}`);
|
||||
const uniqueFloors = [...new Set(this.list[area].map(obj => obj.floors_number))];
|
||||
const newFloors = uniqueFloors.length + 1;
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
apartment_number: this.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: newFloors
|
||||
})
|
||||
});
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
// Створюємо блок поверху
|
||||
const div = document.createElement('div');
|
||||
div.className = "block-apartments-floors";
|
||||
div.id = `floors-${area}-${newFloors}`;
|
||||
|
||||
// Заголовок поверху
|
||||
const h2 = document.createElement('h2');
|
||||
h2.textContent = `Поверх ${newFloors}`;
|
||||
div.appendChild(h2);
|
||||
|
||||
// Блок квартири
|
||||
const apartmentBlock = document.createElement('div');
|
||||
apartmentBlock.className = "block-apartments-number";
|
||||
apartmentBlock.id = `block-apartments-${area}-${data.id}`;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = "text";
|
||||
input.value = numApartments;
|
||||
input.id = `apartament-${area}-${data.id}`;
|
||||
input.onchange = () => Editor.apartments.editApartment(area, data.id);
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.type = "button";
|
||||
delBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
delBtn.onclick = () => Editor.apartments.deleteApartment(area, data.id);
|
||||
|
||||
apartmentBlock.append(input, delBtn);
|
||||
div.appendChild(apartmentBlock);
|
||||
|
||||
// Кнопка додати квартиру
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = "addApartment";
|
||||
addBtn.id = `buttonApartment-${area}-${newFloors}`;
|
||||
addBtn.title = "Додати квартиру";
|
||||
addBtn.type = "button";
|
||||
addBtn.onclick = () => Editor.apartments.addApartment(area, newFloors);
|
||||
addBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
div.appendChild(addBtn);
|
||||
|
||||
areaBlock.prepend(div);
|
||||
|
||||
// Оновлюємо список квартир
|
||||
this.list[area].push({
|
||||
id: data.id,
|
||||
entrance_id: Number(area),
|
||||
apartment_number: this.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: newFloors
|
||||
});
|
||||
|
||||
numApartments++;
|
||||
const nextApartmentTitle = document.getElementById('next-apartment-title');
|
||||
if (nextApartmentTitle) nextApartmentTitle.value = numApartments;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при додаванні поверху:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async addApartment(area, floors) {
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
apartment_number: this.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(floors)
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
// Оновлюємо список квартир
|
||||
this.list[area].push({
|
||||
id: data.id,
|
||||
entrance_id: Number(area),
|
||||
apartment_number: this.list[area].length,
|
||||
title: numApartments.toString(),
|
||||
floors_number: Number(floors)
|
||||
});
|
||||
|
||||
const floorsBlock = document.getElementById(`floors-${area}-${floors}`);
|
||||
|
||||
// Видаляємо стару кнопку додати квартиру
|
||||
const oldButton = document.getElementById(`buttonApartment-${area}-${floors}`);
|
||||
if (oldButton) oldButton.remove();
|
||||
|
||||
// Створюємо блок нової квартири
|
||||
const apartmentDiv = document.createElement('div');
|
||||
apartmentDiv.className = "block-apartments-number";
|
||||
apartmentDiv.id = `block-apartments-${area}-${data.id}`;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = "text";
|
||||
input.value = numApartments;
|
||||
input.id = `apartament-${area}-${data.id}`;
|
||||
input.onchange = () => Editor.apartments.editApartment(area, data.id);
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.type = "button";
|
||||
delBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
delBtn.onclick = () => Editor.apartments.deleteApartment(area, data.id);
|
||||
|
||||
apartmentDiv.append(input, delBtn);
|
||||
floorsBlock.appendChild(apartmentDiv);
|
||||
|
||||
// Додаємо кнопку "додати квартиру" знову
|
||||
const addBtn = document.createElement('button');
|
||||
addBtn.className = "addApartment";
|
||||
addBtn.id = `buttonApartment-${area}-${floors}`;
|
||||
addBtn.title = "Додати квартиру";
|
||||
addBtn.type = "button";
|
||||
addBtn.onclick = () => Editor.apartments.addApartment(area, floors);
|
||||
addBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z"></path></svg>`;
|
||||
floorsBlock.appendChild(addBtn);
|
||||
|
||||
numApartments++;
|
||||
const nextApartmentTitle = document.getElementById('next-apartment-title');
|
||||
if (nextApartmentTitle) nextApartmentTitle.value = numApartments;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при додаванні квартири:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async editApartment(area, apartment) {
|
||||
const input = document.getElementById(`apartament-${area}-${apartment}`);
|
||||
if (!input) return;
|
||||
|
||||
const newTitle = input.value;
|
||||
|
||||
// Оновлюємо локальний список квартир
|
||||
const pos = this.list[area].findIndex(e => e.id === Number(apartment));
|
||||
if (pos === -1) return;
|
||||
|
||||
this.list[area][pos].title = newTitle;
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: this.list[area][pos].id,
|
||||
title: this.list[area][pos].title,
|
||||
status: this.list[area][pos].status,
|
||||
description: this.list[area][pos].description
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при редагуванні квартири:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async deleteApartment(area, apartment) {
|
||||
const pos = this.list[area].findIndex(e => e.id === Number(apartment));
|
||||
if (pos === -1) return;
|
||||
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}/apartments/${area}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({ id: this.list[area][pos].id })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
// Видаляємо елемент з DOM
|
||||
const apartmentBlock = document.getElementById(`block-apartments-${area}-${apartment}`);
|
||||
if (apartmentBlock) apartmentBlock.remove();
|
||||
|
||||
// Оновлюємо локальний список
|
||||
this.list[area].splice(pos, 1);
|
||||
|
||||
// Оновлюємо номер наступної квартири
|
||||
numApartments = Math.max(0, numApartments - 1);
|
||||
const nextApartmentTitle = document.getElementById('next-apartment-title');
|
||||
if (nextApartmentTitle) nextApartmentTitle.value = numApartments;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при видаленні квартири:", err);
|
||||
}
|
||||
},
|
||||
|
||||
editNum(el) { numApartments = Number(el.value) },
|
||||
},
|
||||
|
||||
homestead: {
|
||||
id: null, list: [], editing: false,
|
||||
|
||||
async init(id) {
|
||||
this.editing = false;
|
||||
this.id = id;
|
||||
setLeafletCursor('pointer');
|
||||
|
||||
document.getElementById('homestead-editing').style.display = "";
|
||||
|
||||
// Завантаження даних будівлі
|
||||
this.list = await Editor.loadAPI(`${CONFIG.api}building/${id}`);
|
||||
|
||||
// Обробник кліку на карту
|
||||
houseGroup.on('click', e => {
|
||||
if (e.layer instanceof L.Marker || !this.editing) return;
|
||||
|
||||
const { lat, lng } = e.latlng;
|
||||
console.log(`Координати: ${lat.toFixed(5)}, ${lng.toFixed(5)}`);
|
||||
|
||||
setLeafletCursor('progress');
|
||||
this.editing.editing = false;
|
||||
|
||||
this.addBuilding({ geo: e.latlng, title: this.list.length + 1 });
|
||||
this.list.push({});
|
||||
});
|
||||
|
||||
// Встановлюємо вид карти
|
||||
const viewLatLng = Editor.info.list.geo?.lat
|
||||
? [Editor.info.list.geo.lat, Editor.info.list.geo.lng]
|
||||
: [Editor.info.list.points[0][0][0].lat, Editor.info.list.points[0][0][0].lng];
|
||||
map.setView(viewLatLng, Editor.info.list.zoom);
|
||||
|
||||
|
||||
for (const element of this.list) {
|
||||
// Додаємо маркер на карту
|
||||
const redDot = L.divIcon({
|
||||
className: "leaflet_drop",
|
||||
html: `<div id="redDot_${element.id}"></div>`,
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8]
|
||||
});
|
||||
|
||||
L.marker(element.geo, { icon: redDot })
|
||||
.addTo(houseGroup)
|
||||
.bindPopup(`
|
||||
Точка: ${element.id}<br>
|
||||
Координати: ${element.geo.lat.toFixed(5)}, ${element.geo.lng.toFixed(5)}<br>
|
||||
<button class="map_dell" onclick="Editor.homestead.delleteBuilding({id: ${element.id}})" type="button">Видалити</button>
|
||||
`);
|
||||
}
|
||||
},
|
||||
|
||||
async addBuilding({ geo, title }) {
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}building/${this.id}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
},
|
||||
body: JSON.stringify({ title, geo })
|
||||
});
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
// Додаємо маркер на карту
|
||||
const redDot = L.divIcon({
|
||||
className: "leaflet_drop",
|
||||
html: `<div id="redDot_${data.id}"></div>`,
|
||||
iconSize: [16, 16],
|
||||
iconAnchor: [8, 8]
|
||||
});
|
||||
|
||||
const marker = L.marker(geo, { icon: redDot }).addTo(houseGroup);
|
||||
marker.bindPopup(`
|
||||
Точка: ${data.id}<br>
|
||||
Координати: ${geo.lat.toFixed(5)}, ${geo.lng.toFixed(5)}<br>
|
||||
<button class="map_dell" onclick="Editor.homestead.delleteBuilding({id: ${data.id}})" type="button">Видалити</button>
|
||||
`);
|
||||
|
||||
setLeafletCursor('crosshair');
|
||||
this.editing = true;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при додаванні будівлі:", err);
|
||||
}
|
||||
},
|
||||
|
||||
async delleteBuilding({ id }) {
|
||||
const uuid = localStorage.getItem('uuid');
|
||||
const URL = `${CONFIG.api}building/${id}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(URL, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": uuid
|
||||
}
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Видаляємо елемент списку та маркер
|
||||
const el = document.getElementById(`redDot_${id}`);
|
||||
if (el) el.remove();
|
||||
|
||||
const block = document.getElementById(`Building_${id}`);
|
||||
if (block) block.remove();
|
||||
|
||||
houseGroup.eachLayer(layer => {
|
||||
if (layer instanceof L.Marker && layer.getPopup()?.getContent().includes(`Точка: ${id}`)) {
|
||||
houseGroup.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Помилка при видаленні будівлі:", err);
|
||||
}
|
||||
},
|
||||
|
||||
editing_mode() {
|
||||
const btn = document.getElementById('homestead-editing');
|
||||
this.editing = !this.editing;
|
||||
setLeafletCursor(this.editing ? 'crosshair' : 'pointer');
|
||||
btn.innerHTML = this.editing
|
||||
? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"> <path d="M 6.65625 4 C 6.367188 4 6.105469 4.113281 5.90625 4.3125 L 4.3125 5.90625 C 3.914063 6.304688 3.914063 7 4.3125 7.5 L 9.8125 13 L 4.3125 18.5 C 3.914063 19 3.914063 19.695313 4.3125 20.09375 L 5.90625 21.6875 C 6.40625 22.085938 7.101563 22.085938 7.5 21.6875 L 13 16.1875 L 18.5 21.6875 C 19 22.085938 19.695313 22.085938 20.09375 21.6875 L 21.6875 20.09375 C 22.085938 19.59375 22.085938 18.898438 21.6875 18.5 L 16.1875 13 L 21.6875 7.5 C 22.085938 7 22.085938 6.304688 21.6875 5.90625 L 20.09375 4.3125 C 19.59375 3.914063 18.898438 3.914063 18.5 4.3125 L 13 9.8125 L 7.5 4.3125 C 7.25 4.113281 6.945313 4 6.65625 4 Z" ></path> </svg>`
|
||||
: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"> <path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z" ></path> </svg>`;
|
||||
if (this.editing) alert("Натискаючи на карту будуть створюватись нові точки (будинки)");
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user