405 lines
17 KiB
JavaScript
405 lines
17 KiB
JavaScript
//maps variable
|
||
const MAP_ENDPOINT = "https://rmsmap.rmto.ir";
|
||
const MAP_MIN_ZOOM = 5;
|
||
const MAP_MAX_ZOOM = 10;
|
||
var bounds = [
|
||
[46.9130026312, 77.6166317076],
|
||
[17.5782370061, 32.5092252948],
|
||
];
|
||
var mymap;
|
||
var current_year = new persianDate().year();
|
||
var jalali_to_Gregorian;
|
||
var queryParems = [];
|
||
var queryNames=[];
|
||
var markerLayercluster = null;
|
||
var currentDate = {};
|
||
var date_array = [];
|
||
function showLoaderScreen() {
|
||
$(".divloader").css("display", "flex").hide().fadeIn();
|
||
}
|
||
|
||
function hideLoaderScreen() {
|
||
$(".divloader").fadeOut();
|
||
}
|
||
var purpleIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-purple'></span>",
|
||
iconSize: [32, 44],
|
||
});
|
||
var pinkIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-pink'></span>",
|
||
iconSize: [32, 44],
|
||
});
|
||
var greenIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-green'></span>",
|
||
iconSize: [32, 44],
|
||
});
|
||
var redIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-red'></span>",
|
||
iconSize: [32, 44],
|
||
});
|
||
var blueIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-blue'></span>",
|
||
iconSize: [32, 44],
|
||
});
|
||
var iranLayer = L.tileLayer(
|
||
"https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png",
|
||
{}
|
||
);
|
||
(function () {
|
||
buildMap().then(()=>{
|
||
getProvinceList().then(()=>{
|
||
getYearList().then(()=>{
|
||
UncheckAll();
|
||
});
|
||
});
|
||
});
|
||
})();
|
||
function getProvinceList() {
|
||
return new Promise(function(resolve) {
|
||
$.ajax({
|
||
url: `https://rms.rmto.ir/webapi/getuser/province-perm?type=all`,
|
||
type: "GET",
|
||
beforeSend: function() {
|
||
showLoaderScreen();
|
||
},
|
||
success: function(result) {
|
||
const provinces = result.data;
|
||
$(".province-list").empty();
|
||
provinces.map((item,index) => {
|
||
$(".province-list").append(`<li class="layerButton2 pb-1">
|
||
<span class="title-type-inside">${item.name_fa}</span>
|
||
<input class="checkbox_sub input-road-type" type="checkbox" value="${item.id}" name="subitem1" />
|
||
</li>`)
|
||
});
|
||
hideLoaderScreen();
|
||
},
|
||
error: function(error) {
|
||
hideLoaderScreen();
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا",
|
||
text: "مشکل در دریافت استان ها",
|
||
confirmButtonText: "بروزرسانی صفحه",
|
||
showLoaderOnConfirm: true,
|
||
preConfirm: () => {
|
||
location.reload(true);
|
||
},
|
||
});
|
||
},
|
||
});
|
||
resolve();
|
||
})
|
||
}
|
||
function getYearList() {
|
||
return new Promise(function(resolve) {
|
||
for (let i = 1398; i <= current_year; i++) {
|
||
currentDate.from = moment(i, "jYYYY");
|
||
currentFilterQueryfrom = currentDate.from.locale("en").format("YYYY-MM-DD");
|
||
currentDate.to = moment(i, "jYYYY");
|
||
currentDate.to.add(1, "year");
|
||
currentFilterQueryto = currentDate.to.locale("en").format("YYYY-MM-DD");
|
||
$(".year-list").append(`<li class="layerButton2 pb-1">
|
||
<span class="title-type-inside">${i}</span>
|
||
<input type="checkbox" name="subitem" value="" data-from="${currentFilterQueryfrom}" data-to="${currentFilterQueryto}" class="checkbox_sub input-road-type year-checkbox">
|
||
</li>`);
|
||
}
|
||
resolve();
|
||
})
|
||
}
|
||
function buildMap(){
|
||
return new Promise(function(resolve) {
|
||
mymap =L.map("mymap", {
|
||
maxBounds: bounds,
|
||
minZoom: 6,
|
||
}).setView([35.5468992, 51.7300532], 6);
|
||
L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {}).addTo(mymap);
|
||
resolve();
|
||
})
|
||
}
|
||
|
||
$(document).on("click", ".guid-custom-box-DailyAccident input", function () {
|
||
queryParems=[];
|
||
if ($(this).is(":checked")) {
|
||
if (queryNames.length!=0) {
|
||
if (queryNames.filter(e => e.name === $(this).parent().parent().data('name')).length > 0) {
|
||
if (($(this).parent().parent().data('name')==="day_part")){
|
||
|
||
var index = queryNames.findIndex(x => x.name === $(this).parent().parent().data('name'));
|
||
queryNames[index].value = $(this).val();
|
||
}
|
||
else {
|
||
var index = queryNames.findIndex(x => x.name === $(this).parent().parent().data('name'));
|
||
queryNames[index].value = [...queryNames[index].value, $(this).val()];
|
||
}
|
||
}
|
||
else {
|
||
queryNames.push({name:$(this).parent().parent().data('name'),value:[$(this).val()]});
|
||
}
|
||
}
|
||
else {
|
||
queryNames.push({name:$(this).parent().parent().data('name'),value:[$(this).val()]});
|
||
}
|
||
|
||
}
|
||
else {
|
||
if (($(this).parent().parent().data('name')==="year")){
|
||
$('.year-list').find('.year-checkbox:checked').each(function( index ) {
|
||
date_array = jQuery.grep(date_array, function(value) {
|
||
return value != `from_date[${index}]=${$(this).data("from")}&to_date[${index}]=${$(this).data("to")}`;
|
||
});
|
||
});
|
||
}
|
||
else {
|
||
if (queryNames.filter(e => e.name === $(this).parent().parent().data('name')).length > 0) {
|
||
var index = queryNames.findIndex(x => x.name === $(this).parent().parent().data('name'));
|
||
queryNames[index].value=queryNames[index].value.filter((el)=> el!==$(this).val());
|
||
}
|
||
}
|
||
|
||
}
|
||
GetData();
|
||
});
|
||
function showPointsOnMap(data){
|
||
removeAccidentMarker().then(()=>{
|
||
addClusterMarkers(data).then(()=>{
|
||
hideLoaderScreen()
|
||
})
|
||
});
|
||
}
|
||
function addClusterMarkers(data) {
|
||
return new Promise(function(resolve) {
|
||
markerLayercluster = L.markerClusterGroup();
|
||
let markerList = [];
|
||
data.map((item,index) => {
|
||
let marker = null;
|
||
if (item.lat!=null && item.lng!=null){
|
||
marker = L.marker([item.lat, item.lng], {
|
||
icon: purpleIcon,
|
||
}).on("click", function () {
|
||
var popup = L.popup()
|
||
.setLatLng(this.getLatLng())
|
||
.setContent("در حال بروزرسانی ...")
|
||
.openOn(mymap);
|
||
$.ajax({
|
||
url: `https://rms.rmto.ir/daily_accident/${item.id}`,
|
||
type: "GET",
|
||
beforeSend: function() {
|
||
showLoaderScreen();
|
||
},
|
||
success: function(result) {
|
||
var chart_div= `<div class="popup">
|
||
<div class="popupTitle">
|
||
<img src="../../dist/images/icons/por_accident_village.svg" alt="">
|
||
<span class="popupHeader">تصادفات</span>
|
||
</div>
|
||
<div class="popupHeaderContent"><div class="popUpBanner">
|
||
اداره کل :${result.province_fa} ,نام محور :${result.axis_name}
|
||
</div>
|
||
<div class="popupContent row col-12">
|
||
<div class="popUpBox col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f;"><span class="header-popupcontent-allpoints"> نوع راه </span><div class="popUpBoxContent">
|
||
${result.axis_type_fa== null ? "" : result.axis_type_fa}
|
||
</div></div>
|
||
<div class="popUpBox col-6" style="border-bottom:2px solid #ff5c0f;"><span class="header-popupcontent-allpoints"> فاصله از محور </span><div class="popUpBoxContent">
|
||
${result.distance_axis_start== null ? "" : result.distance_axis_start}
|
||
</div></div> </div>
|
||
<div class="popupFooter col-12">
|
||
<span class="header-popupcontent-allpoints"> نام محلی </span><div class="popUpBoxContent">
|
||
${result.local_name == null ? "" : result.local_name}
|
||
</div> </div>
|
||
</div>
|
||
<div class="popupContent row col-12">
|
||
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد جرحی </span><div class="popUpBoxContent">
|
||
${result.number_of_injured== null ? "" : result.number_of_injured}
|
||
</div></div>
|
||
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد فوتی </span><div class="popUpBoxContent">
|
||
|
||
${result.number_of_died== null ? "" : result.number_of_died}
|
||
</div></div>
|
||
<div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">نوع تصادف </span><div class="popUpBoxContent">
|
||
${result.accident_type_fa== null ? "" : result.accident_type_fa}
|
||
</div></div>
|
||
<div class="popupContent row col-12">
|
||
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> توصیف هندسی</span><div class="popUpBoxContent">
|
||
${result.way_geometri_fa== null ? "" : result.way_geometri_fa}
|
||
</div></div>
|
||
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">شرایط جوی</span><div class="popUpBoxContent">
|
||
|
||
${result.weather_condition_fa== null ? "" : result.weather_condition_fa}
|
||
</div></div>
|
||
<div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints">روز هفته</span><div class="popUpBoxContent">
|
||
${result.day_of_the_week== null ? "" : result.day_of_the_week}
|
||
</div></div>
|
||
<div class="popUpBox col-4" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نوع برخورد</span><div class="popUpBoxContent">
|
||
${result.collision_type_fa== null ? "" : result.collision_type_fa}
|
||
</div></div>
|
||
<div class="popUpBox col-4" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تاریخ تصادف</span><div class="popUpBoxContent">
|
||
${moment(result.accident_date).format('jYYYY/jMM/jDD')}
|
||
</div></div>
|
||
<div class="popUpBox col-4" style="text-align:center;"><span class="header-popupcontent-allpoints">ساعت تصادف </span><div class="popUpBoxContent">
|
||
${result.accident_time== null ? "" : result.accident_time}
|
||
</div></div>
|
||
</div>
|
||
</div>`
|
||
popup.setContent(chart_div);
|
||
},
|
||
error: function(error) {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا",
|
||
text: "مشکل در دریافت اطلاعات",
|
||
confirmButtonText: "بروزرسانی صفحه",
|
||
showLoaderOnConfirm: true,
|
||
preConfirm: () => {
|
||
location.reload(true);
|
||
},
|
||
});
|
||
},
|
||
complete:function(){
|
||
hideLoaderScreen();
|
||
}
|
||
});
|
||
});
|
||
markerList.push(marker)
|
||
}
|
||
});
|
||
markerLayercluster.addLayers(markerList);
|
||
mymap.addLayer(markerLayercluster);
|
||
resolve();
|
||
});
|
||
}
|
||
// UncheckAll
|
||
function UncheckAll() {
|
||
return new Promise(function(resolve) {
|
||
var w = document.getElementsByTagName("input");
|
||
for (var i = 0; i < w.length; i++) {
|
||
if (w[i].type == "checkbox") {
|
||
w[i].checked = false;
|
||
}
|
||
}
|
||
resolve();
|
||
})
|
||
|
||
}
|
||
function removeAccidentMarker() {
|
||
return new Promise(function(resolve) {
|
||
if(markerLayercluster!=null) {
|
||
mymap.removeLayer(markerLayercluster);
|
||
markerLayercluster=null;
|
||
};
|
||
resolve();
|
||
});
|
||
}
|
||
$(document).on("click", ".dropdownstart", function () {
|
||
var dropdown = $(this).parents(".layerButton1");
|
||
$(dropdown).find(".layerbuttonparent").slideToggle(500);
|
||
});
|
||
$(document).on("click", ".dropdownstart_sub", function () {
|
||
var dropdown = $(this).parents(".layerButton2");
|
||
$(dropdown).find(".layerbuttonparent_sub").slideToggle(500);
|
||
});
|
||
$(document).on("click", ".All_button", function () {
|
||
var button_parent = $(this).parents(".layerButton1");
|
||
|
||
if ($(this).text() == "انتخاب همه") {
|
||
$(this).text("لغو همه");
|
||
$(button_parent)
|
||
.find(".layerbuttonparent input[type=checkbox]")
|
||
.prop("checked", true);
|
||
$(button_parent).find(".layerbuttonparent").slideDown(500);
|
||
$(button_parent).find(".layerbuttonparent_sub").slideDown(500);
|
||
$(button_parent).find(".All_button_sub").attr("disabled", true);
|
||
seletAllFiltersOptions($(this).data("name"),button_parent)
|
||
} else {
|
||
$(this).text("انتخاب همه");
|
||
$(button_parent)
|
||
.find(".layerbuttonparent input[type=checkbox]")
|
||
.prop("checked", false);
|
||
$(button_parent).find(".layerbuttonparent").slideUp(500);
|
||
$(button_parent).find(".layerbuttonparent_sub").slideUp(500);
|
||
$(button_parent).find(".All_button_sub").attr("disabled", false);
|
||
dSelectAllFiltersOptions($(this).data("name"),button_parent)
|
||
|
||
}
|
||
});
|
||
function seletAllFiltersOptions(name,parent){
|
||
queryParems=[];
|
||
var valueSelected=[]
|
||
$(parent)
|
||
.find(".layerbuttonparent input[type=checkbox]:checked").each(function() {
|
||
valueSelected.push($(this).val());
|
||
});
|
||
if (queryNames.length!=0) {
|
||
if (queryNames.filter(e => e.name === name).length > 0) {
|
||
var index = queryNames.findIndex(x => x.name === name);
|
||
queryNames[index].value = valueSelected;
|
||
}
|
||
else {
|
||
var values = $(parent)
|
||
.find(".layerbuttonparent input[type=checkbox]:checked").map(function() {
|
||
return $(this).val();
|
||
}).get().join(',');
|
||
queryNames.push({name:name,value:valueSelected})
|
||
}
|
||
}
|
||
else {
|
||
queryNames.push({name:name,value:valueSelected})
|
||
}
|
||
GetData();
|
||
}
|
||
function dSelectAllFiltersOptions(name,parent){
|
||
queryParems=[];
|
||
queryNames= queryNames.filter((el) => el.name !== name);
|
||
GetData();
|
||
}
|
||
function GetData(){
|
||
if(queryNames.length>0){
|
||
queryNames.map((item,index) => {
|
||
if(item.value.length!=0) {
|
||
if (item.name!="year"){
|
||
queryParems.push(`${item.name}=${item.value}`)
|
||
}else {
|
||
date_array = [];
|
||
$('.year-list').find('.year-checkbox:checked').each(function( index ) {
|
||
date_array.push(`from_date[${index}]=${$(this).data("from")}&to_date[${index}]=${$(this).data("to")}`);
|
||
});
|
||
date_array.length
|
||
if (date_array.length!=0){
|
||
queryParems.push( date_array.join('&'))
|
||
}else {
|
||
removeAccidentMarker();
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
removeAccidentMarker();
|
||
}
|
||
});
|
||
}
|
||
else{
|
||
removeAccidentMarker();
|
||
}
|
||
if (queryParems.length!=0) {
|
||
$.ajax({
|
||
url: `https://rms.rmto.ir/daily_accident_map/accidents${queryParems.length != 0 ? `?${queryParems.join('&')}` : ''}`,
|
||
type: "GET",
|
||
beforeSend: function () {
|
||
showLoaderScreen();
|
||
},
|
||
success: function (result) {
|
||
showPointsOnMap(result.data)
|
||
},
|
||
error: function (error) {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا",
|
||
confirmButtonText: "بستن",
|
||
});
|
||
},
|
||
});
|
||
}
|
||
} |