Старт
This commit is contained in:
510
observation/jscripts/geofences.js
Normal file
510
observation/jscripts/geofences.js
Normal file
@ -0,0 +1,510 @@
|
||||
//Объезды
|
||||
class TGeofences //Current user with role name and access
|
||||
{
|
||||
constructor(map){
|
||||
this.geofences = [];
|
||||
}
|
||||
|
||||
//Получаем список объектов
|
||||
//Фильтруем объекты для заполнения в таблицу
|
||||
filtering()
|
||||
{
|
||||
showProgressBar(document.getElementById('id5_geofences'));
|
||||
|
||||
let data = {
|
||||
geofence_type_id: document.getElementById("geofence_type_id_id0").value,
|
||||
name: document.getElementById("filter_name_geofences").value
|
||||
};
|
||||
|
||||
let req=createRequestObject();
|
||||
req.onreadystatechange = function(thiz)
|
||||
{
|
||||
return function(){
|
||||
if(req.readyState === 4){
|
||||
|
||||
var data=null;
|
||||
try {
|
||||
data = JSON.parse(req.responseText);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
return;
|
||||
}
|
||||
if(data!=null)
|
||||
{
|
||||
if(data.errorMessage !== undefined && data.errorMessage!='')
|
||||
{
|
||||
alert2(trt('Error'),data.errorMessage);
|
||||
return;
|
||||
}
|
||||
thiz.clear();
|
||||
|
||||
//Приходит JSON уже в объектах
|
||||
//let features = [];
|
||||
for(i=0;i<data.length;i++)
|
||||
{
|
||||
var obj = new TGeofence(thiz);
|
||||
obj.id=data[i].id;
|
||||
obj.name=data[i].name;
|
||||
obj.count=data[i].count;
|
||||
obj.geofence_type_name=data[i].geofence_type_name;
|
||||
obj.lon=parseFloat(data[i].lon);
|
||||
obj.lat=parseFloat(data[i].lat);
|
||||
|
||||
thiz.geofences.push(obj);
|
||||
}
|
||||
thiz.fillRezDiv();
|
||||
}
|
||||
hideProgressBar(document.getElementById('id5_geofences'));
|
||||
};
|
||||
}
|
||||
}(this);
|
||||
|
||||
req.open("POST", '/monitoring/pscripts/geofences.php?fn=1', true);
|
||||
req.setRequestHeader("Content-type", "text/plain");
|
||||
req.send(JSON.stringify(data));
|
||||
|
||||
/*
|
||||
var data = {
|
||||
name: "",
|
||||
type: ""
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: '/monitoring/pscripts/geofences.php',
|
||||
data: JSON.stringify(data),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
success: function(thiz){return function(data,status){
|
||||
if(status=='success')
|
||||
{
|
||||
thiz.geofences = []; //Удаляю старые объекты
|
||||
g_vectorSourceGeofences.clear(); //Удаляю все отображения
|
||||
|
||||
|
||||
for(i=0;i<data.length;i++)
|
||||
{
|
||||
var obj = new TRoute();
|
||||
obj.id=data[i].id;
|
||||
obj.name=data[i].name;
|
||||
obj.count=data[i].count;
|
||||
thiz.geofences.push(obj);
|
||||
}
|
||||
thiz.fillRezDiv();
|
||||
}else
|
||||
{
|
||||
alert(status);
|
||||
}
|
||||
|
||||
}}(this)
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
//Заполнить результатом выборки DIV в виде таблицы
|
||||
fillRezDiv()
|
||||
{
|
||||
var div=document.getElementById("id5_geofences");
|
||||
delChild(div);
|
||||
div.innerHTML='<table id="thetable_geofences" border="0" style="width:100%;" class="SShow"><thead><tr style="background-color: rgb(218, 218, 218);"><th></th><th id="cell_ch_D" style="width:1%;text-decoration:underline;cursor: pointer;">'+trt('View')+'.</th><th style="width: 90%;">'+trt('Geofence_name')+'</th><th style="width: 1%;">'+trt('Points')+'</th></tr></thead><tbody></tbody></table>';
|
||||
|
||||
var theTable = document.getElementById('thetable_geofences');
|
||||
|
||||
let type_name='';
|
||||
for(i=0;i<this.geofences.length;i++)
|
||||
{
|
||||
if(type_name!=this.geofences[i].geofence_type_name) //Если новая группа
|
||||
{
|
||||
type_name=this.geofences[i].geofence_type_name;
|
||||
if(type_name=='') type_name=trt('Group');
|
||||
|
||||
let tr = document.createElement('tr');
|
||||
let bgColor='';
|
||||
if (i%2==0) bgColor='var(--row-color-1)'; else bgColor='var(--row-color-2)';
|
||||
tr.style.backgroundColor=bgColor;
|
||||
let td = document.createElement('td');
|
||||
td.innerHTML=type_name;
|
||||
td.colSpan=6;
|
||||
//td.style.cssText="text-align: center;";
|
||||
tr.appendChild(td);
|
||||
|
||||
theTable.tBodies[0].appendChild(tr);
|
||||
}
|
||||
|
||||
let tr = document.createElement('tr');
|
||||
let bgColor='';
|
||||
if (i%2==0) bgColor='var(--row-color-1)'; else bgColor='var(--row-color-2)';
|
||||
tr.style.backgroundColor=bgColor;
|
||||
tr.onmouseover=function(){this.style.backgroundColor='var(--btn-color2)';};
|
||||
tr.onmouseout=function(val1,val2){return function(){val1.style.backgroundColor=val2;}}(tr,bgColor);
|
||||
|
||||
let td;
|
||||
|
||||
td = document.createElement('td');
|
||||
td.style.cssText="width:24px;text-align:center;vertical-align:top;";
|
||||
td.innerHTML='<img id="geofences_down_btn_'+this.geofences[i].id+'" src="/resources/images/right.png" alt="" style="cursor: pointer;">';
|
||||
tr.appendChild(td);
|
||||
|
||||
td = document.createElement('td');
|
||||
td.style.cssText="text-align: center;";
|
||||
td.innerHTML='<input id="geofences_ch_'+this.geofences[i].id+'" type="checkbox"/>';
|
||||
tr.appendChild(td);
|
||||
|
||||
td = document.createElement('td');
|
||||
td.style.cursor='pointer';
|
||||
td.innerHTML=this.geofences[i].name;
|
||||
td.onclick=function(detour){
|
||||
return function(){
|
||||
detour.goToCenter();
|
||||
}
|
||||
}(this.geofences[i]);
|
||||
tr.appendChild(td);
|
||||
|
||||
/*td = document.createElement('td');
|
||||
td.style.cssText='cursor:pointer;text-align:right;';
|
||||
td.innerHTML=this.geofences[i].date_start;
|
||||
td.onclick=function(detour){
|
||||
return function(){
|
||||
detour.goToCenter();
|
||||
}
|
||||
}(this.geofences[i]);
|
||||
tr.appendChild(td);
|
||||
|
||||
td = document.createElement('td');
|
||||
td.style.cssText='cursor:pointer;text-align:right;';
|
||||
td.innerHTML=this.geofences[i].date_end;
|
||||
td.onclick=function(detour){
|
||||
return function(){
|
||||
detour.goToCenter();
|
||||
}
|
||||
}(this.geofences[i]);
|
||||
tr.appendChild(td);*/
|
||||
|
||||
td = document.createElement('td');
|
||||
td.style.cssText='cursor:pointer;text-align:right;';
|
||||
td.innerHTML=this.geofences[i].count;
|
||||
td.onclick=function(detour){
|
||||
return function(){
|
||||
detour.goToCenter();
|
||||
}
|
||||
}(this.geofences[i]);
|
||||
tr.appendChild(td);
|
||||
|
||||
theTable.tBodies[0].appendChild(tr);
|
||||
|
||||
//Формирую раскрывающийся список
|
||||
var tr = document.createElement('tr');
|
||||
tr.id=this.geofences[i].id;
|
||||
tr.style.cssText="background-color:var(--back-color-3);display:none";
|
||||
td = document.createElement('td');
|
||||
td.colSpan=4;
|
||||
|
||||
let html='<table style="width:100%;"><tr><td style="width:100%;border: 0;">';
|
||||
if(this.geofences[i].geofence_type_name!=null)
|
||||
html+='<b>Тип геозоны'+trt('')+'</b>: '+this.geofences[i].geofence_type_name+'<br>';
|
||||
html+='</td><td valign="top" style="border: 0;"><img id="detour_del_'+this.geofences[i].id+'" src="/resources/images/del24.png" alt="'+trt('Delete')+'" title="'+trt('Delete')+'" style="cursor:pointer;"></td><td valign="top" style="border: 0;"><img id="detour_edit_'+this.geofences[i].id+'" src="/resources/images/edit24.png" alt="'+trt('Edit')+'" title="'+trt('Edit')+'" style="cursor:pointer;"></td></tr></table>';
|
||||
|
||||
td.innerHTML=html;
|
||||
|
||||
tr.appendChild(td);
|
||||
theTable.tBodies[0].appendChild(tr);
|
||||
|
||||
var cell=document.getElementById("geofences_ch_"+this.geofences[i].id);
|
||||
cell.onclick=function(route){
|
||||
return function(){
|
||||
var chb=document.getElementById("geofences_ch_"+route.id);
|
||||
route.setVisibility(chb.checked);
|
||||
}
|
||||
}(this.geofences[i]);
|
||||
|
||||
//Кнопка разсрыть список
|
||||
var btn=document.getElementById('geofences_down_btn_'+this.geofences[i].id);
|
||||
btn.onclick=function(tr,thiz,id){ return function(){
|
||||
var btn=document.getElementById('geofences_down_btn_'+id);
|
||||
if(btn.src.indexOf("right.png")!=-1)
|
||||
{
|
||||
btn.src = '/resources/images/down.png';
|
||||
tr.style.display = 'table-row';
|
||||
}else if(btn.src.indexOf("down.png")!=-1)
|
||||
{
|
||||
btn.src = '/resources/images/right.png';
|
||||
tr.style.display = 'none';
|
||||
}
|
||||
}; }(tr,this,this.geofences[i].id);
|
||||
|
||||
/*
|
||||
//При щелчке по иконке календаря отображаем календарь выбора
|
||||
//setCalendar("filter_date_route_start_"+this.geofences[i].id,"filter_date_route_start_trigger_"+this.geofences[i].id,-2);
|
||||
//setCalendar("filter_date_route_end_"+this.geofences[i].id,"filter_date_route_end_trigger_"+this.geofences[i].id);
|
||||
|
||||
this.geofences[i].getGeoJSON();
|
||||
*/
|
||||
//Кнопка удалить
|
||||
btn=document.getElementById('detour_del_'+this.geofences[i].id)
|
||||
btn.onclick=function(thiz,id){ return function(){ thiz.deleteDetour({id:id}); }; }(this,this.geofences[i].id);
|
||||
|
||||
//Кнопка редактировать
|
||||
btn=document.getElementById('detour_edit_'+this.geofences[i].id)
|
||||
btn.onclick=function(thiz,id){ return function(){ thiz.editDetour({id:id}); }; }(this,this.geofences[i].id);
|
||||
}
|
||||
|
||||
//Количество элементов в дереве
|
||||
var divCnt = document.getElementById("count_geofences");
|
||||
delChild(divCnt);
|
||||
divCnt.appendChild(document.createTextNode(this.geofences.length));
|
||||
|
||||
//По нажатию на заголовок инвертируем чекбуксы
|
||||
divCnt = document.getElementById("cell_ch_D");
|
||||
divCnt.onclick=function(thiz){
|
||||
return function(){
|
||||
thiz.hide();
|
||||
}
|
||||
}(this);
|
||||
}
|
||||
|
||||
createDetour()
|
||||
{
|
||||
//В настройках передаю центр карты
|
||||
let center=ol.proj.transform(g_map.getView().getCenter(), 'EPSG:3857','EPSG:4326');
|
||||
let eRec = new EdtRec("");
|
||||
eRec.eRecNa("Geofences",-1,'<type n="Geofences"><properties><prop n="name"><![CDATA['+document.getElementById("filter_name_geofences").value+']]></prop><prop n="lat"><![CDATA['+center[1]+']]></prop><prop n="lon"><![CDATA['+center[0]+']]></prop></properties></type>');
|
||||
eRec.win.onClose=function(thiz){ return function(){ thiz.filtering();};}(this);
|
||||
}
|
||||
|
||||
//Удалить объезд
|
||||
deleteDetour(settings)
|
||||
{
|
||||
if (typeof settings === 'string' || settings instanceof String)
|
||||
{
|
||||
try {
|
||||
settings = JSON.parse(settings);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (confirm(trt("Do_you_really_want_to_delete_the_record")+'?')) {
|
||||
|
||||
var req=createRequestObject();
|
||||
req.onreadystatechange = function(thiz)
|
||||
{
|
||||
return function(){
|
||||
if(req.readyState === 4){
|
||||
var data=null;
|
||||
try {
|
||||
data = JSON.parse(req.responseText);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
return;
|
||||
}
|
||||
if(data!=null)
|
||||
{
|
||||
if(data.errorMessage !== undefined && data.errorMessage!='')
|
||||
{
|
||||
alert(data.errorMessage);
|
||||
thiz.win.hideProgressBar();
|
||||
}else
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
//Фильтрую список заново
|
||||
thiz.filtering();
|
||||
}
|
||||
};
|
||||
}(this);
|
||||
|
||||
req.open("POST", '/monitoring/pscripts/geofences.php?fn=3', true);
|
||||
req.setRequestHeader("Content-type", "text/plain");
|
||||
req.send(JSON.stringify(settings));
|
||||
|
||||
this.filtering();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
editDetour(settings)
|
||||
{
|
||||
if (typeof settings === 'string' || settings instanceof String)
|
||||
{
|
||||
try {
|
||||
settings = JSON.parse(settings);
|
||||
} catch (e) {
|
||||
alert(e.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
var detour=this.getDetourByID(settings.id);
|
||||
|
||||
let eRec = new EdtRec("");
|
||||
eRec.eRecNa("Geofences",settings.id);
|
||||
eRec.win.onClose=function(thiz,detour){ return function(){
|
||||
detour.showPoints(false);
|
||||
//thiz.filtering();
|
||||
};}(this,detour);
|
||||
|
||||
if(detour!=null)
|
||||
{
|
||||
detour.showPoints(true);
|
||||
detour.setVisibility(true);
|
||||
}
|
||||
}
|
||||
|
||||
//Вернуть объект TDetour по идентификатору
|
||||
getDetourByID(id)
|
||||
{
|
||||
for(var i=0;i<this.geofences.length;i++)
|
||||
{
|
||||
if(this.geofences[i].id==id)
|
||||
return this.geofences[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
clear()
|
||||
{
|
||||
//Удаляю геометриию
|
||||
for(var i=0;i<this.geofences.length;i++)
|
||||
{
|
||||
this.geofences[i].setVisibility(false);
|
||||
}
|
||||
this.geofences = [];
|
||||
}
|
||||
|
||||
//Инвертировать видимость маршрутов
|
||||
hide()
|
||||
{
|
||||
for(var i=0;i<this.geofences.length;i++)
|
||||
{
|
||||
this.geofences[i].setVisibility(!this.geofences[i].getVisibility());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
class TGeofence
|
||||
{
|
||||
constructor(geofences){
|
||||
this.id='';
|
||||
this.feature=null; //Объект который отображается на карте
|
||||
this.shP=false; //Показывать ли точки для редактирования
|
||||
|
||||
this.geofences=geofences;
|
||||
this.visible=false; //По умолчанию всё видим
|
||||
}
|
||||
|
||||
getVisibility()
|
||||
{
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
//Отобразить объект на карте
|
||||
setVisibility(val)
|
||||
{
|
||||
var chb=document.getElementById("geofences_ch_"+this.id);
|
||||
if(val)
|
||||
{
|
||||
if(!chb.checked) chb.checked=true;
|
||||
if(this.feature==null)
|
||||
{
|
||||
this.getGeoJSON(); //Подгружаем объект с сервера
|
||||
}else
|
||||
{
|
||||
//Проверяю чтобы заново не добавить
|
||||
var exists=false;
|
||||
var features=g_vectorSourceGeofences.getFeatures();
|
||||
for(var i=0;i<features.length;i++)
|
||||
{
|
||||
if(features[i]==this.feature)
|
||||
{
|
||||
exists=true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!exists)
|
||||
g_vectorSourceGeofences.addFeature(this.feature);
|
||||
}
|
||||
}else{
|
||||
if(chb!=null && chb.checked) chb.checked=false;
|
||||
if(this.feature!=null)
|
||||
{
|
||||
g_vectorSourceGeofences.removeFeature(this.feature);
|
||||
this.showPoints(false);
|
||||
}
|
||||
}
|
||||
this.visible=val;
|
||||
}
|
||||
|
||||
goToCenter()
|
||||
{
|
||||
var point=ol.proj.transform([this.lon, this.lat], 'EPSG:4326','EPSG:3857');
|
||||
g_map.getView().setCenter(point);
|
||||
if(g_map.getView().getZoom()<9)
|
||||
g_map.getView().setZoom(9);
|
||||
}
|
||||
|
||||
//Отобразить точки для редактирования
|
||||
showPoints(val)
|
||||
{
|
||||
//alert("showPoints="+val);
|
||||
|
||||
this.shP=val;
|
||||
if(this.shP)
|
||||
enableEditPoints(this.feature);
|
||||
else
|
||||
disableEditPoints(this.feature);
|
||||
return true;
|
||||
}
|
||||
|
||||
//Запросить гео данные для построения объекта на карте
|
||||
getGeoJSON()
|
||||
{
|
||||
if(this.feature!=null) return;
|
||||
|
||||
var data = {
|
||||
id: this.id
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: '/monitoring/pscripts/geofences.php?fn=2',
|
||||
data: JSON.stringify(data),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
success: function(thiz){return function(data,status){
|
||||
if(status=='success')
|
||||
{
|
||||
var features = (new ol.format.GeoJSON()).readFeatures(data, {dataProjection: 'EPSG:4326',featureProjection: 'EPSG:3857'});
|
||||
for(i=0;i<features.length;i++)
|
||||
{
|
||||
features[i].setStyle(new ol.style.Style({
|
||||
fill: new ol.style.Fill({color: 'rgba(0, 255, 0, 0.5)'}),
|
||||
stroke: new ol.style.Stroke({color: 'rgba(0, 100, 0, 0.7)', width: 2}),
|
||||
text: new ol.style.Text({
|
||||
font: 'bold 12px helvetica,sans-serif',
|
||||
//text: userData.percent+" %",
|
||||
fill: new ol.style.Fill({color: 'black'}),
|
||||
stroke: new ol.style.Stroke({color: 'white', width: 1}),
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
})
|
||||
}));
|
||||
thiz.feature=features[i]; //Должен быть один объект в объекте
|
||||
thiz.feature.userData=thiz; //ссылка на родителя
|
||||
|
||||
g_vectorSourceGeofences.addFeature(thiz.feature);
|
||||
|
||||
//Если в режиме редактирования точек то отображаем эти точки
|
||||
if(thiz.shP)
|
||||
enableEditPoints(thiz.feature);
|
||||
}
|
||||
}else
|
||||
{
|
||||
alert(status);
|
||||
}
|
||||
}}(this)
|
||||
});
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user