595 lines
21 KiB
JavaScript
595 lines
21 KiB
JavaScript
// variables part
|
|
var operationCartable;
|
|
var operationCartable_url = "/v2/road_patrols/operator/cartable/show";
|
|
const MAP_ENDPOINT = "https://rmsmap.rmto.ir";
|
|
var permission_api = "/webapi/user/get-permission";
|
|
var excel_api = "/v2/road_patrols/operator/cartable/report";
|
|
var report_api = "/v2/road_patrols/operator/report/";
|
|
var items_api = "/v2/items"
|
|
var markers = [];
|
|
var markersLayer;
|
|
var editMap = null;
|
|
var startMarkerEdit = null;
|
|
var endMarkerEdit = null;
|
|
var isSetStartMarkerEdit = false;
|
|
var isSetEndMarkerEdit = false;
|
|
var mapZoom = getWidth() < 508 ? 5 : 6;
|
|
var filterDatepicker = {};
|
|
var PERMISSIONS = [];
|
|
// end variables part
|
|
|
|
// resize func
|
|
function getWidth() {
|
|
return Math.max(
|
|
document.body.scrollWidth,
|
|
document.documentElement.scrollWidth,
|
|
document.body.offsetWidth,
|
|
document.documentElement.offsetWidth,
|
|
document.documentElement.clientWidth
|
|
);
|
|
}
|
|
// end resize func
|
|
|
|
// icon
|
|
var mapIcon = L.icon({
|
|
iconUrl: '/dist/images/dashboard/pinmarker_dashboard.png',
|
|
iconSize: [32, 32],
|
|
});
|
|
var activeMapIcon = L.icon({
|
|
iconUrl: '/dist/images/dashboard/pinmarker_dashboard_active.png',
|
|
iconSize: [40, 40],
|
|
});
|
|
// icon
|
|
var bounds = [
|
|
[42.9130026312, 75.6166317076],
|
|
[20.5782370061, 30.5092252948],
|
|
];
|
|
var map = L.map("map", {
|
|
maxBounds: bounds,
|
|
minZoom: mapZoom,
|
|
zoomControl: false,
|
|
attributionControl: false
|
|
}).setView([35.5468992, 51.7300532], mapZoom);
|
|
L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {
|
|
attributionControl: false,
|
|
}).addTo(map);
|
|
// end map
|
|
|
|
(() => {
|
|
//get permission
|
|
showLoaderScreen()
|
|
$.ajax({
|
|
url: permission_api,
|
|
type: "GET",
|
|
cache: false,
|
|
async: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (result) {
|
|
PERMISSIONS = result.data;
|
|
},
|
|
error: function () {
|
|
Swal.fire({
|
|
icon: "error",
|
|
title: "خطا",
|
|
text: "مشکل در دریافت سطح دسترسی",
|
|
confirmButtonText: "بروزرسانی صفحه",
|
|
showLoaderOnConfirm: true,
|
|
preConfirm: () => {
|
|
location.reload(true);
|
|
},
|
|
});
|
|
},
|
|
});
|
|
//end get permission
|
|
})()
|
|
|
|
$(document).bind("click", function (e) {
|
|
const clicked = $(e.target);
|
|
if (clicked.parents(".toolbox").length != 0) return false;
|
|
if (clicked.parents(".datepicker-grid-view").length != 0) return false;
|
|
if (clicked.parents(".datepicker-navigator").length != 0) return false;
|
|
if (clicked.parents(".datepicker-container").length != 0) return false;
|
|
if (clicked.parents(".select2-selection__choice").length != 0) return false;
|
|
if (
|
|
clicked.closest(".filtering-btn").length == 0 &&
|
|
clicked.closest("#filter_box").length == 0 &&
|
|
$("filter_box").css("display") != "none"
|
|
) {
|
|
$("#filter_box").css("display", "none");
|
|
}
|
|
});
|
|
|
|
const FilterBoxInit = () => {
|
|
const top = $('.dt-button')[0].offsetHeight + 5
|
|
return `<div id="filter_box" style="top:${top}px">
|
|
<div class="d-flex">
|
|
<div class="form-group" style="flex: 1">
|
|
<label for="filter_id">کد یکتا</label>
|
|
<input id="filter_id" type="search" class="form-control form-control-sm" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="form-group ml-2" style="flex: 1">
|
|
<label for="filter_officer_name">نام مامور</label>
|
|
<input id="filter_officer_name" type="search" class="form-control form-control-sm" autocomplete="off" />
|
|
</div>
|
|
<div class="form-group" style="flex: 1">
|
|
<label for="filter_status">وضعیت</label>
|
|
<select class="form-control form-control-sm fill-status" id="filter_status">
|
|
<option value="-1" selected>انتخاب وضعیت</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div class="form-group ml-2" style="flex: 1">
|
|
<label for="filter_from_activity_date_time">از تاریخ فعالیت</label>
|
|
<input class="form-control form-control-sm" type="search" id="filter_from_activity_date_time">
|
|
</div>
|
|
<div class="form-group mr-2" style="flex: 1">
|
|
<label for="filter_to_activity_date_time">تا تاریخ فعالیت</label>
|
|
<input class="form-control form-control-sm" type="search" id="filter_to_activity_date_time">
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<button class="btn btn-info btn-sm" id="btn_filter">فیلتر</button>
|
|
</div>`
|
|
}
|
|
|
|
|
|
const fillFilterBox = () => {
|
|
filterDatepicker.from = $(
|
|
"#filter_from_activity_date_time"
|
|
).persianDatepicker({
|
|
format: "YYYY/MM/DD",
|
|
autoClose: true,
|
|
initialValue: false,
|
|
onSelect: function (unix) {
|
|
filterDatepicker.from.touched = true;
|
|
|
|
if (
|
|
filterDatepicker.from.getState().selected.unixDate >=
|
|
filterDatepicker.to.getState().selected.unixDate
|
|
) {
|
|
filterDatepicker.to.setDate(
|
|
filterDatepicker.from.getState().selected.unixDate
|
|
);
|
|
}
|
|
|
|
if (
|
|
filterDatepicker.to &&
|
|
filterDatepicker.to.options &&
|
|
filterDatepicker.to.options.minDate != unix
|
|
) {
|
|
let cachedValue =
|
|
filterDatepicker.to.getState().selected.unixDate;
|
|
|
|
filterDatepicker.to.options = { minDate: unix };
|
|
|
|
if (filterDatepicker.from.touched) {
|
|
filterDatepicker.to.setDate(cachedValue);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
filterDatepicker.to = $(
|
|
"#filter_to_activity_date_time"
|
|
).persianDatepicker({
|
|
format: "YYYY/MM/DD",
|
|
autoClose: true,
|
|
initialValue: false,
|
|
onSelect: function (unix) {
|
|
filterDatepicker.to.touched = true;
|
|
},
|
|
});
|
|
|
|
$(document).on('input', '#filter_from_activity_date_time', function (e) {
|
|
if (e.target.value == '') {
|
|
filterDatepicker.from.setDate(moment().valueOf())
|
|
filterDatepicker.to.setDate(moment().valueOf())
|
|
$("#filter_to_activity_date_time").val('')
|
|
$("#filter_from_activity_date_time").val('')
|
|
}
|
|
})
|
|
|
|
$(document).on('input', '#filter_to_activity_date_time', function (e) {
|
|
if (e.target.value == '') {
|
|
filterDatepicker.from.setDate(moment().valueOf())
|
|
filterDatepicker.to.setDate(moment().valueOf())
|
|
$("#filter_from_activity_date_time").val('')
|
|
$("#filter_to_activity_date_time").val('')
|
|
}
|
|
})
|
|
|
|
$('.fill-status').empty()
|
|
|
|
$('.fill-status').append(`
|
|
<option value="-1">انتخاب وضعیت</option>
|
|
<option value="0">در حال بررسی</option>
|
|
<option value="1">تایید شده</option>
|
|
<option value="2">عدم تایید</option>
|
|
`)
|
|
}
|
|
|
|
const filterBox = (show) => {
|
|
$('#filter_box').css('display', show ? 'flex' : 'none')
|
|
}
|
|
|
|
$(function () {
|
|
// operation cartable table
|
|
showLoaderScreen();
|
|
operationCartable = $("#operation_cartable").DataTable({
|
|
serverSide: true,
|
|
dom: "<<'d-flex justify-content-between align-items-center'lB><t>p>",
|
|
pagingType: "simple_numbers",
|
|
scrollX: true,
|
|
filter: true,
|
|
language: {
|
|
sEmptyTable: "هیچ دادهای در جدول وجود ندارد",
|
|
sInfo: "نمایش _START_ تا _END_ از _TOTAL_ ردیف",
|
|
sInfoEmpty: "نمایش 0 تا 0 از 0 ردیف",
|
|
sInfoFiltered: "(فیلتر شده از _MAX_ ردیف)",
|
|
sInfoPostFix: "",
|
|
sInfoThousands: ",",
|
|
sLengthMenu: "نمایش _MENU_ ردیف",
|
|
sLoadingRecords: "در حال بارگزاری...",
|
|
sProcessing: "در حال پردازش...",
|
|
sSearch: "جستجو: ",
|
|
sZeroRecords: "رکوردی با این مشخصات پیدا نشد",
|
|
oPaginate: {
|
|
sFirst: "برگهی نخست",
|
|
sLast: "برگهی آخر",
|
|
sNext: "بعدی",
|
|
sPrevious: "قبلی",
|
|
},
|
|
oAria: {
|
|
sSortAscending: ": فعال سازی نمایش به صورت صعودی",
|
|
sSortDescending: ": فعال سازی نمایش به صورت نزولی",
|
|
},
|
|
},
|
|
order: [[0, "desc"]],
|
|
processing: true,
|
|
select: true,
|
|
ajax: {
|
|
url: operationCartable_url,
|
|
type: "GET",
|
|
beforeSend: function () {
|
|
showLoaderScreen();
|
|
if (markers.length != 0) {
|
|
map.removeLayer(markersLayer);
|
|
markers = [];
|
|
markersLayer.clearLayers();
|
|
}
|
|
$("#operation_cartable").find("tbody tr").removeClass("activate-row");
|
|
},
|
|
dataSrc: function (json) {
|
|
let data = json.data;
|
|
hideLoaderScreen();
|
|
if (data.length == 0) {
|
|
return data
|
|
}
|
|
const latlonArr = []
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = new L.Marker([data[i].start_lat, data[i].start_lon], { icon: mapIcon, id: data[i].id }).on('click', function (e) {
|
|
const id = e.target.options.id
|
|
operationCartable.rows().eq(0).map(index => {
|
|
if (operationCartable.row(index).data().id == id) {
|
|
const node = operationCartable.row(index).node()
|
|
$("html, body").animate({
|
|
scrollTop: $(node).offset().top,
|
|
},
|
|
100
|
|
);
|
|
$("#operation_cartable").find("tbody tr").removeClass("activate-row");
|
|
$(node).addClass("activate-row");
|
|
setTimeout(() => {
|
|
markersLayer.eachLayer(layer => {
|
|
if (layer.options.id == id) {
|
|
layer.setIcon(activeMapIcon)
|
|
layer.setZIndexOffset(100)
|
|
return
|
|
}
|
|
layer.setZIndexOffset(0)
|
|
layer.setIcon(mapIcon)
|
|
})
|
|
map.flyTo([operationCartable.row(index).data().start_lat, operationCartable.row(index).data().start_lon], 16, { duration: .5 });
|
|
}, 500)
|
|
}
|
|
})
|
|
})
|
|
markers.push(marker);
|
|
latlonArr.push([data[i].start_lat, data[i].start_lon])
|
|
}
|
|
markersLayer = new L.LayerGroup(markers);
|
|
map.addLayer(markersLayer);
|
|
$("html, body").animate({
|
|
scrollTop: $('#map').offset().top - 50,
|
|
},
|
|
100
|
|
);
|
|
setTimeout(() => {
|
|
map.flyToBounds(latlonArr, { padding: [60, 60], duration: .5 })
|
|
}, 250)
|
|
return json.data;
|
|
},
|
|
error: function (request) {
|
|
ajax_error(request.responseJSON, request.status);
|
|
hideLoaderScreen();
|
|
},
|
|
},
|
|
columns: [
|
|
// 1
|
|
{
|
|
className: "text-center align-middle",
|
|
data: null,
|
|
name: {
|
|
name: 'id',
|
|
type: 'text'
|
|
},
|
|
render: function (data, type, row) {
|
|
return `<div class="d-flex justify-content-center align-items-center">${data.status == 2 ? '<span class="blink_me blink_dot ml-2"></span>' : ''}<span>${data.id}</span></div>`
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 2
|
|
{
|
|
className: "text-center align-middle",
|
|
data: "officer_name",
|
|
name: {
|
|
name: 'officer_name',
|
|
type: 'text'
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 3
|
|
{
|
|
className: "text-center align-middle",
|
|
data: "officer_phone_number",
|
|
name: {
|
|
name: 'officer_phone_number',
|
|
type: 'text'
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 4
|
|
{
|
|
className: "d-flex justify-content-center",
|
|
data: null,
|
|
name: {
|
|
name: 'officer_plaque',
|
|
type: 'text'
|
|
},
|
|
render: function (data, type, row) {
|
|
const plaque = data.officer_plaque.split('-')
|
|
return `<div dir='ltr' style="width: 100px" class='d-flex border rounded justify-content-between align-items-center'>
|
|
<div class="p-1">${plaque[0]}</div>
|
|
<div class="p-1">${plaque[1] == '*' ? '<i class="fa fa-wheelchair"></i>' : plaque[1]}</div>
|
|
<div class="p-1">${plaque[2]}</div>
|
|
<div class="p-1 border-left">${plaque[3]}</div>
|
|
</div>`
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 5
|
|
{
|
|
className: "text-center text-nowrap align-middle",
|
|
data: null,
|
|
name: {
|
|
name: 'start_time',
|
|
type: 'between'
|
|
},
|
|
render: function (data, type, row) {
|
|
if (data.start_time == null) return '-'
|
|
return moment(data.start_time).format("HH:mm:ss | jYYYY/jMM/jDD")
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 6
|
|
{
|
|
className: "text-center text-nowrap align-middle",
|
|
data: null,
|
|
name: {
|
|
name: 'end_time',
|
|
type: 'between'
|
|
},
|
|
render: function (data, type, row) {
|
|
if (data.end_time == null) return '-'
|
|
return moment(data.end_time).format("HH:mm:ss | jYYYY/jMM/jDD")
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 7
|
|
{
|
|
className: "text-center align-middle",
|
|
data: "distance",
|
|
name: {
|
|
name: 'distance',
|
|
type: 'text'
|
|
},
|
|
searchable: true,
|
|
orderable: true,
|
|
},
|
|
// 8
|
|
{
|
|
className: "text-center sorting align-middle",
|
|
data: null,
|
|
name: {
|
|
name: 'option',
|
|
type: 'option'
|
|
},
|
|
render: function (data, type, row) {
|
|
return `<button type="button" class="btn-dataTable report" data-toggle="tooltip" data-placement="top" title="گزارش"><i class="fa fa-print icon-btnTable"></i></button>`;
|
|
},
|
|
searchable: false,
|
|
orderable: false,
|
|
}
|
|
],
|
|
buttons: [
|
|
{
|
|
text: '<i class="fa fa-filter" aria-hidden="true"></i><span class="pr-1">فیلتر پیشرفته<span>',
|
|
className: 'filtering-btn',
|
|
action: function (e, dt, node, config) {
|
|
filterBox(true)
|
|
}
|
|
},
|
|
{
|
|
text: '<i class="fa fa-file" aria-hidden="true"></i><span class="pr-1">گزارش اکسل<span>',
|
|
className: 'table-btns',
|
|
action: function (e, dt, node, config) {
|
|
let queryParems = [];
|
|
const id = $("#filter_id").val();
|
|
const officer_name = $("#filter_officer_name").val();
|
|
const status = $("#filter_status").val();
|
|
let activityDate = {}
|
|
if ( $("#filter_from_activity_date_time").val() != "" && $("#filter_to_activity_date_time").val() != "" ) {
|
|
activityDate.from = moment(
|
|
filterDatepicker.from.getState().selected.year +
|
|
"/" +
|
|
filterDatepicker.from.getState().selected.month +
|
|
"/" +
|
|
filterDatepicker.from.getState().selected.date,
|
|
"jYYYY/jM/jD"
|
|
).format("YYYY-MM-DD");
|
|
|
|
activityDate.to = moment(
|
|
filterDatepicker.to.getState().selected.year +
|
|
"/" +
|
|
filterDatepicker.to.getState().selected.month +
|
|
"/" +
|
|
filterDatepicker.to.getState().selected.date,
|
|
"jYYYY/jM/jD"
|
|
).format("YYYY-MM-DD");
|
|
|
|
queryParems.push(`fromDate=${activityDate.from}`);
|
|
queryParems.push(`toDate=${activityDate.to}`);
|
|
}
|
|
if (id != '') queryParems.push(`id=${id}`);
|
|
if (officer_name != '') queryParems.push(`officer_name=${officer_name}`);
|
|
if (status != '-1') queryParems.push(`status=${status}`);
|
|
|
|
const url = `${excel_api}${queryParems.length != 0 ? `?${queryParems.join("&")}` : ""}`;
|
|
window.open(url);
|
|
}
|
|
}
|
|
],
|
|
initComplete: function () {
|
|
$(".dt-buttons").append(FilterBoxInit)
|
|
fillFilterBox()
|
|
},
|
|
fnDrawCallback: function () {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
},
|
|
});
|
|
// end operation cartable table
|
|
});
|
|
// end on load
|
|
|
|
$("#operation_cartable").on("click", "tbody tr", function (e) {
|
|
e.preventDefault()
|
|
let tr = $(this).closest("tr");
|
|
let row = operationCartable.row(tr);
|
|
let data = row.data();
|
|
dataOnMap(data);
|
|
$("#operation_cartable").find("tbody tr").removeClass("activate-row");
|
|
$(this).addClass("activate-row");
|
|
});
|
|
|
|
// show active data on map
|
|
function dataOnMap(data) {
|
|
$("html, body").animate({
|
|
scrollTop: $("#map").offset().top - 50,
|
|
},
|
|
100
|
|
);
|
|
setTimeout(() => {
|
|
markersLayer.eachLayer(layer => {
|
|
if (layer.options.id == data.id) {
|
|
layer.setIcon(activeMapIcon)
|
|
layer.setZIndexOffset(100)
|
|
return
|
|
}
|
|
layer.setZIndexOffset(0)
|
|
layer.setIcon(mapIcon)
|
|
})
|
|
map.flyTo([data.start_lat, data.start_lon], 16, { duration: .5 });
|
|
}, 500)
|
|
}
|
|
// end show active data on map
|
|
|
|
// filtering
|
|
$(document).on('click', '#btn_filter', function () {
|
|
filterBox(false)
|
|
|
|
let _table = operationCartable
|
|
|
|
const id = $("#filter_id").val();
|
|
const officer_name = $("#filter_officer_name").val();
|
|
const status = $("#filter_status").val();
|
|
let activityDate = {}
|
|
if (
|
|
$("#filter_from_activity_date_time").val() != "" &&
|
|
$("#filter_to_activity_date_time").val() != ""
|
|
) {
|
|
activityDate.from = moment(
|
|
filterDatepicker.from.getState().selected.year +
|
|
"/" +
|
|
filterDatepicker.from.getState().selected.month +
|
|
"/" +
|
|
filterDatepicker.from.getState().selected.date,
|
|
"jYYYY/jM/jD"
|
|
).format("YYYY-MM-DD");
|
|
|
|
activityDate.to = moment(
|
|
filterDatepicker.to.getState().selected.year +
|
|
"/" +
|
|
filterDatepicker.to.getState().selected.month +
|
|
"/" +
|
|
filterDatepicker.to.getState().selected.date,
|
|
"jYYYY/jM/jD"
|
|
).format("YYYY-MM-DD");
|
|
}
|
|
|
|
if (id != '') {
|
|
_table = _table.column(0).search(id);
|
|
} else {
|
|
_table = _table.column(0).search('');
|
|
}
|
|
|
|
if (officer_name != '') {
|
|
_table = _table.column(1).search(officer_name);
|
|
} else {
|
|
_table = _table.column(1).search('');
|
|
}
|
|
|
|
if (status != '-1') {
|
|
_table = _table.column(7).search(status);
|
|
} else {
|
|
_table = _table.column(7).search('');
|
|
}
|
|
|
|
if (Object.keys(activityDate).length !== 0) {
|
|
_table = _table.column(4).search(`${activityDate.from}&${activityDate.to}`);
|
|
} else {
|
|
_table = _table.column(4).search('');
|
|
}
|
|
|
|
_table.draw();
|
|
})
|
|
// end filtering
|
|
|
|
// report
|
|
$("#operation_cartable").on('click', '.report', function (e) {
|
|
e.stopPropagation()
|
|
let tr = $(this).closest("tr");
|
|
let row = operationCartable.row(tr);
|
|
let data = row.data();
|
|
window.open(report_api + data.id, '_blank')
|
|
});
|
|
// end report
|