geralt/dbstorage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Доделал страницу со всеми объектами

Browse Source
This commit is contained in:
Кошкин Сергей
2025-11-01 16:39:06 +03:00
parent c8a951eac6
commit 439ca6407f
2089 changed files with 13968 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
dbapp/mainapp/templates/mainapp/objitem_form.html
View File

@@ -381,6 +381,7 @@
<!-- Подключаем Leaflet и его плагины -->
{% leaflet_js %}
{% leaflet_css %}
<script src="{% static 'leaflet-markers/js/leaflet-color-markers.js' %}"></script>
<script>
@@ -428,13 +429,94 @@ document.addEventListener('DOMContentLoaded', function() {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Маркеры для разных типов координат
const markers = {
geo: L.marker([55.75, 37.62], { draggable: true, color: 'blue' }).addTo(map),
kupsat: L.marker([55.75, 37.61], { draggable: true, color: 'red' }).addTo(map),
valid: L.marker([55.75, 37.63], { draggable: true, color: 'green' }).addTo(map)
// Определяем цвета для маркеров
const colors = {
geo: 'blue',
kupsat: 'red',
valid: 'green'
};
// Функция для создания иконки маркера
function createMarkerIcon(color) {
return L.icon({
iconUrl: '{% static "leaflet-markers/img/marker-icon-" %}' + color + '.png',
shadowUrl: `{% static 'leaflet-markers/img/marker-shadow.png' %}`,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
}
const editableLayerGroup = new L.FeatureGroup();
map.addLayer(editableLayerGroup);
// Маркеры
const markers = {};
function createMarker(latFieldId, lngFieldId, position, color, name) {
const marker = L.marker(position, {
draggable: false,
icon: createMarkerIcon(color),
title: name
}).addTo(editableLayerGroup);
marker.bindPopup(name);
// Синхронизация при изменении формы
function syncFromForm() {
const lat = parseFloat(document.getElementById(latFieldId).value);
const lng = parseFloat(document.getElementById(lngFieldId).value);
if (!isNaN(lat) && !isNaN(lng)) {
marker.setLatLng([lat, lng]);
}
}
// Синхронизация при перетаскивании (только если активировано)
marker.on('dragend', function(event) {
const latLng = event.target.getLatLng();
document.getElementById(latFieldId).value = latLng.lat.toFixed(6);
document.getElementById(lngFieldId).value = latLng.lng.toFixed(6);
});
// Добавляем методы для управления
marker.enableEditing = function() {
this.dragging.enable();
this.openPopup();
};
marker.disableEditing = function() {
this.dragging.disable();
this.closePopup();
};
marker.syncFromForm = syncFromForm;
return marker;
}
// Создаем маркеры
markers.geo = createMarker(
'id_geo_latitude',
'id_geo_longitude',
[55.75, 37.62],
colors.geo,
'Геолокация'
);
markers.kupsat = createMarker(
'id_kupsat_latitude',
'id_kupsat_longitude',
[55.75, 37.61],
colors.kupsat,
'Кубсат'
);
markers.valid = createMarker(
'id_valid_latitude',
'id_valid_longitude',
[55.75, 37.63],
colors.valid,
'Оперативник'
);
// Устанавливаем начальные координаты из полей формы
function initMarkersFromForm() {
const geoLat = parseFloat(document.getElementById('id_geo_latitude').value) || 55.75;
@@ -453,16 +535,7 @@ document.addEventListener('DOMContentLoaded', function() {
map.setView(markers.geo.getLatLng(), 10);
}
// Обновляем координаты в форме при перетаскивании маркеров
function setupMarkerDrag(marker, latFieldId, lngFieldId, color) {
marker.on('dragend', function(event) {
const latLng = event.target.getLatLng();
document.getElementById(latFieldId).value = latLng.lat.toFixed(6);
document.getElementById(lngFieldId).value = latLng.lng.toFixed(6);
});
}
// Обновляем положение маркера при изменении координат в форме
// Настройка формы для синхронизации с маркерами
function setupFormChange(latFieldId, lngFieldId, marker) {
const latField = document.getElementById(latFieldId);
const lngField = document.getElementById(lngFieldId);
@@ -482,24 +555,126 @@ document.addEventListener('DOMContentLoaded', function() {
// Инициализация
initMarkersFromForm();
// Настройка маркеров
setupMarkerDrag(markers.geo, 'id_geo_latitude', 'id_geo_longitude', 'blue');
setupMarkerDrag(markers.kupsat, 'id_kupsat_latitude', 'id_kupsat_longitude', 'red');
setupMarkerDrag(markers.valid, 'id_valid_latitude', 'id_valid_longitude', 'green');
// Настройка формы
// Настройка формы для синхронизации с маркерами
setupFormChange('id_geo_latitude', 'id_geo_longitude', markers.geo);
setupFormChange('id_kupsat_latitude', 'id_kupsat_longitude', markers.kupsat);
setupFormChange('id_valid_latitude', 'id_valid_longitude', markers.valid);
// --- УПРАВЛЕНИЕ РЕДАКТИРОВАНИЕМ ---
// Кнопки редактирования
const editControlsDiv = L.DomUtil.create('div', 'map-controls');
editControlsDiv.style.position = 'absolute';
editControlsDiv.style.top = '10px';
editControlsDiv.style.right = '10px';
editControlsDiv.style.zIndex = '1000';
editControlsDiv.style.background = 'white';
editControlsDiv.style.padding = '10px';
editControlsDiv.style.borderRadius = '4px';
editControlsDiv.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
editControlsDiv.innerHTML = `
<div class="map-controls">
<button type="button" id="edit-btn" class="map-control-btn edit">Редактировать</button>
<button type="button" id="save-btn" class="map-control-btn save" disabled>Сохранить</button>
<button type="button" id="cancel-btn" class="map-control-btn cancel" disabled>Отмена</button>
</div>
`;
map.getContainer().appendChild(editControlsDiv);
let isEditing = false;
// Сохраняем начальные координаты для отмены
const initialPositions = {
geo: markers.geo.getLatLng(),
kupsat: markers.kupsat.getLatLng(),
valid: markers.valid.getLatLng()
};
// Включение редактирования
document.getElementById('edit-btn').addEventListener('click', function() {
if (isEditing) return;
isEditing = true;
document.getElementById('edit-btn').classList.add('active');
document.getElementById('save-btn').disabled = false;
document.getElementById('cancel-btn').disabled = false;
// Включаем drag для всех маркеров
Object.values(markers).forEach(marker => {
marker.enableEditing();
});
// Показываем подсказку
L.popup()
.setLatLng(map.getCenter())
.setContent('Перетаскивайте маркеры. Нажмите "Сохранить" или "Отмена".')
.openOn(map);
});
// Сохранение изменений
document.getElementById('save-btn').addEventListener('click', function() {
if (!isEditing) return;
isEditing = false;
document.getElementById('edit-btn').classList.remove('active');
document.getElementById('save-btn').disabled = true;
document.getElementById('cancel-btn').disabled = true;
// Отключаем редактирование
Object.values(markers).forEach(marker => {
marker.disableEditing();
});
// Обновляем начальные позиции
initialPositions.geo = markers.geo.getLatLng();
initialPositions.kupsat = markers.kupsat.getLatLng();
initialPositions.valid = markers.valid.getLatLng();
// Убираем попап подсказки
map.closePopup();
});
// Отмена изменений
document.getElementById('cancel-btn').addEventListener('click', function() {
if (!isEditing) return;
isEditing = false;
document.getElementById('edit-btn').classList.remove('active');
document.getElementById('save-btn').disabled = true;
document.getElementById('cancel-btn').disabled = true;
// Возвращаем маркеры на исходные позиции
markers.geo.setLatLng(initialPositions.geo);
markers.kupsat.setLatLng(initialPositions.kupsat);
markers.valid.setLatLng(initialPositions.valid);
// Отключаем редактирование
Object.values(markers).forEach(marker => {
marker.disableEditing();
});
// Синхронизируем форму с исходными значениями
document.getElementById('id_geo_latitude').value = initialPositions.geo.lat.toFixed(6);
document.getElementById('id_geo_longitude').value = initialPositions.geo.lng.toFixed(6);
document.getElementById('id_kupsat_latitude').value = initialPositions.kupsat.lat.toFixed(6);
document.getElementById('id_kupsat_longitude').value = initialPositions.kupsat.lng.toFixed(6);
document.getElementById('id_valid_latitude').value = initialPositions.valid.lat.toFixed(6);
document.getElementById('id_valid_longitude').value = initialPositions.valid.lng.toFixed(6);
map.closePopup();
});
// Легенда
const legend = L.control({ position: 'bottomright' });
legend.onAdd = function() {
const div = L.DomUtil.create('div', 'info legend');
div.style.fontSize = '14px';
div.style.backgroundColor = 'white';
div.style.padding = '10px';
div.style.borderRadius = '4px';
div.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
div.innerHTML = `
<h6>Легенда</h6>
<h5>Легенда</h5>
<div><span style="color: blue; font-weight: bold;">•</span> Геолокация</div>
<div><span style="color: red; font-weight: bold;">•</span> Кубсат</div>
<div><span style="color: green; font-weight: bold;">•</span> Оперативники</div>
@@ -510,4 +685,4 @@ document.addEventListener('DOMContentLoaded', function() {
legend.addTo(map);
});
</script>
{% endblock %}
{% endblock %}