351 lines
12 KiB
PHP
351 lines
12 KiB
PHP
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card shadow-sm mb-3">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<h5 class="mb-0">Редактирование участков</h5>
|
||
@if(!empty($cat->cat_name))
|
||
<small class="text-muted d-block">Раздел: {{ $cat->cat_name }}</small>
|
||
@endif
|
||
</div>
|
||
<button type="button" class="btn btn-primary btn-sm" id="btn-create-zone">
|
||
<i class="fa fa-draw-polygon mr-1"></i> Создать участок
|
||
</button>
|
||
</div>
|
||
|
||
<div class="card-body p-0">
|
||
<div id="map" class="w-100 map-container"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
#newzoneedit {
|
||
display: none;
|
||
}
|
||
|
||
.map-container {
|
||
height: 600px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.balloon-response {
|
||
font-size: 0.875rem;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript" src="assets/js/jquery.ajaxform.js"></script>
|
||
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
|
||
|
||
<script>
|
||
// Конфиг для запросов
|
||
var POLYGON_CONFIG = {
|
||
baseUrl: @json('?cat=' . $cat->cat) // строка вида "?cat=admin_polygon"
|
||
};
|
||
|
||
var PolygonEditor = {
|
||
myMap: null,
|
||
myPolygon: null,
|
||
isDrawing: false,
|
||
poligons: {},
|
||
|
||
init: function () {
|
||
var self = this;
|
||
|
||
self.myMap = new ymaps.Map('map', {
|
||
center: [59.859605, 30.340733],
|
||
zoom: 14,
|
||
controls: ['smallMapDefaultSet']
|
||
});
|
||
|
||
// Кнопка создания участка
|
||
$('#btn-create-zone').on('click', function () {
|
||
if (!self.isDrawing) {
|
||
self.startDrawing();
|
||
} else {
|
||
self.cancelDrawing();
|
||
}
|
||
});
|
||
|
||
// Рендер существующих участков
|
||
@if (!empty($rows))
|
||
@foreach($rows as $row)
|
||
self.addPolygon(
|
||
{!! $row['coords'] !!},
|
||
{{ (int)$row['id'] }},
|
||
{!! json_encode($row['title']) !!}
|
||
);
|
||
@endforeach
|
||
@endif
|
||
},
|
||
|
||
setDrawButtonState: function (active) {
|
||
this.isDrawing = !!active;
|
||
var $btn = $('#btn-create-zone');
|
||
|
||
if (this.isDrawing) {
|
||
$btn
|
||
.removeClass('btn-primary')
|
||
.addClass('btn-danger')
|
||
.html('<i class="fa fa-check mr-1"></i> Завершить рисование');
|
||
} else {
|
||
$btn
|
||
.removeClass('btn-danger')
|
||
.addClass('btn-primary')
|
||
.html('<i class="fa fa-draw-polygon mr-1"></i> Создать участок');
|
||
}
|
||
},
|
||
|
||
startDrawing: function () {
|
||
var self = this;
|
||
|
||
if (self.isDrawing) {
|
||
return;
|
||
}
|
||
|
||
self.myPolygon = new ymaps.Polygon([], {}, {
|
||
editorDrawingCursor: "crosshair",
|
||
editorMaxPoints: 999,
|
||
fillColor: '#ed4543',
|
||
strokeColor: '#ed4543',
|
||
fillOpacity: 0.6,
|
||
strokeWidth: 1
|
||
});
|
||
|
||
self.myMap.geoObjects.add(self.myPolygon);
|
||
|
||
self.attachEditorMonitor(self.myPolygon, function () {
|
||
self.stopDrawing();
|
||
});
|
||
|
||
self.myPolygon.editor.startDrawing();
|
||
self.setDrawButtonState(true);
|
||
},
|
||
|
||
cancelDrawing: function () {
|
||
if (!this.myPolygon) {
|
||
this.setDrawButtonState(false);
|
||
return;
|
||
}
|
||
|
||
this.myPolygon.editor.stopDrawing();
|
||
this.myMap.geoObjects.remove(this.myPolygon);
|
||
this.myPolygon = null;
|
||
this.setDrawButtonState(false);
|
||
},
|
||
|
||
stopDrawing: function () {
|
||
var self = this;
|
||
|
||
if (!self.myPolygon) {
|
||
self.setDrawButtonState(false);
|
||
return;
|
||
}
|
||
|
||
var coords = self.myPolygon.geometry.getCoordinates();
|
||
self.myPolygon.editor.stopDrawing();
|
||
self.myMap.geoObjects.remove(self.myPolygon);
|
||
self.myPolygon = null;
|
||
|
||
self.setDrawButtonState(false);
|
||
|
||
// ВАЖНО: используем сигнатуру $.post(url, data, success, dataType)
|
||
$.post(
|
||
POLYGON_CONFIG.baseUrl + '&act=editgeom&id=0',
|
||
{ geom: coords },
|
||
function (data) {
|
||
if (data && data.id && data.id !== 0) {
|
||
self.addPolygon(coords, data.id, data.title || '');
|
||
}
|
||
},
|
||
'json'
|
||
).fail(function () {
|
||
console.error('Ошибка сохранения нового участка');
|
||
});
|
||
},
|
||
|
||
addPolygon: function (coords, id, title) {
|
||
var self = this;
|
||
|
||
// $.get(url, success, dataType)
|
||
$.get(
|
||
POLYGON_CONFIG.baseUrl + '&act=getForm&id=' + id,
|
||
function (params) {
|
||
params = params || {};
|
||
self._addPolygonHtml(
|
||
coords,
|
||
id,
|
||
params.title || title || '',
|
||
params.html || '',
|
||
params.color || '#00FF00'
|
||
);
|
||
},
|
||
'json'
|
||
).fail(function () {
|
||
console.error('Ошибка получения формы участка');
|
||
});
|
||
},
|
||
|
||
_addPolygonHtml: function (coords, id, title, html, fillcolor) {
|
||
var self = this;
|
||
fillcolor = fillcolor || "#00FF00";
|
||
|
||
self.poligons[id] = new ymaps.GeoObject({
|
||
geometry: {
|
||
type: "Polygon",
|
||
coordinates: coords,
|
||
fillRule: "nonZero"
|
||
},
|
||
properties: {
|
||
myid: id,
|
||
balloonContentHeader: title,
|
||
balloonContent: html,
|
||
balloonContentFooter:
|
||
'<div class="mt-2">' +
|
||
'<a href="#" onclick="PolygonEditor.editPolygon(' + id + ');return false;">Редактировать контур</a>' +
|
||
' | ' +
|
||
'<a href="#" class="text-danger" onclick="PolygonEditor.removePolygon(' + id + ');return false;">Удалить участок</a>' +
|
||
'</div>'
|
||
}
|
||
}, {
|
||
fillColor: fillcolor,
|
||
strokeColor: '#0000FF',
|
||
opacity: 0.5,
|
||
strokeWidth: 1,
|
||
strokeStyle: 'shortdash'
|
||
});
|
||
|
||
self.attachEditorMonitor(self.poligons[id], function (e) {
|
||
if (e.originalEvent && e.originalEvent.target) {
|
||
var tid = e.originalEvent.target.properties.get('myid');
|
||
var tcoords = e.originalEvent.target.geometry.getCoordinates();
|
||
|
||
if (!tid) {
|
||
self.stopDrawing();
|
||
return;
|
||
}
|
||
|
||
$.post(
|
||
POLYGON_CONFIG.baseUrl + '&act=editgeom&id=' + tid,
|
||
{ geom: tcoords },
|
||
function (data) {
|
||
if (data && data.id && data.id !== 0) {
|
||
self.addPolygon(tcoords, data.id, data.title || '');
|
||
}
|
||
},
|
||
'json'
|
||
).fail(function () {
|
||
console.error('Ошибка обновления контура участка');
|
||
});
|
||
}
|
||
});
|
||
|
||
self.myMap.geoObjects.add(self.poligons[id]);
|
||
},
|
||
|
||
editPolygon: function (id) {
|
||
var polygon = this.poligons[id];
|
||
if (!polygon) {
|
||
return;
|
||
}
|
||
|
||
var self = this;
|
||
|
||
self.myPolygon = polygon;
|
||
self.myMap.geoObjects.add(self.myPolygon);
|
||
|
||
self.attachEditorMonitor(self.myPolygon, function () {
|
||
self.stopDrawing();
|
||
});
|
||
|
||
self.myPolygon.editor.startDrawing();
|
||
self.setDrawButtonState(true);
|
||
},
|
||
|
||
removePolygon: function (id) {
|
||
var self = this;
|
||
|
||
if (!self.poligons[id]) {
|
||
return;
|
||
}
|
||
|
||
$.get(
|
||
POLYGON_CONFIG.baseUrl + '&act=remove&id=' + id,
|
||
function () {
|
||
self.myMap.geoObjects.remove(self.poligons[id]);
|
||
delete self.poligons[id];
|
||
}
|
||
).fail(function () {
|
||
console.error('Ошибка удаления участка');
|
||
});
|
||
},
|
||
|
||
submitForm: function (id, idn) {
|
||
var self = this;
|
||
var $resp = $('#resp' + idn);
|
||
|
||
var options = {
|
||
dataType: 'json',
|
||
success: function (params) {
|
||
params = params || {};
|
||
var data = params.html || '';
|
||
|
||
$resp
|
||
.addClass('balloon-response')
|
||
.html('<span class="text-success">Данные сохранены</span>' + data);
|
||
|
||
if (self.poligons[id]) {
|
||
self.poligons[id].properties.set('balloonContent', data);
|
||
if (params.color) {
|
||
self.poligons[id].options.set('fillColor', params.color);
|
||
}
|
||
}
|
||
},
|
||
error: function () {
|
||
$resp
|
||
.addClass('balloon-response')
|
||
.html('<span class="text-danger">Ошибка сохранения</span>');
|
||
}
|
||
};
|
||
|
||
$('#form' + idn).ajaxSubmit(options);
|
||
$resp.html("<img src='img/loader.gif' alt='' class='img-fluid'>");
|
||
|
||
return false;
|
||
},
|
||
|
||
attachEditorMonitor: function (polygon, onStopCallback) {
|
||
var stateMonitor = new ymaps.Monitor(polygon.editor.state);
|
||
stateMonitor.add("drawing", function (newValue) {
|
||
polygon.options.set("strokeColor", newValue ? '#FF0000' : '#0000FF');
|
||
});
|
||
|
||
polygon.events.add(['editorstatechange'], function (e) {
|
||
if (
|
||
e.originalEvent &&
|
||
e.originalEvent.originalEvent &&
|
||
e.originalEvent.originalEvent.originalEvent &&
|
||
e.originalEvent.originalEvent.originalEvent.newDrawing === false &&
|
||
e.originalEvent.originalEvent.originalEvent.oldDrawing === true
|
||
) {
|
||
if (typeof onStopCallback === 'function') {
|
||
onStopCallback(e);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
// Для совместимости со старой формой: onsubmit="return submit_form(id, idn)"
|
||
function submit_form(id, idn) {
|
||
return PolygonEditor.submitForm(id, idn);
|
||
}
|
||
|
||
ymaps.ready(function () {
|
||
PolygonEditor.init();
|
||
});
|
||
</script>
|