/*
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* Copyright (C) 2021 Terra Yazılım Bilişim Hiz. Elek. Dan. Oto. ve Loj. Tic. Ltd. Şti. - All Rights Reserved.
* Unauthorized copying of this file, via any medium is strictly prohibited
* Proprietary and confidential.
*
* Written by M.Çağrı Tepebaşılı <cagritepebasili@protonmail.com>, September 2021
*/
// noinspection JSUnresolvedFunction,JSUnresolvedVariable,SpellCheckingInspection
import YerlemConnectJS from './ConnectJS'
import service from 'screens/tracking/service'
/**
* @author M.Çağrı Tepebaşılı <cagritepebasili@protonmail.com>
* @version 0.9.23-2
* @since 0.0.1
*/
const ConnectJs = function () {
const polylineMeasure = {
showBearings: true,
measureControlTitleOn: 'Uzunluk Ölçümünü Aktive Et.',
measureControlTitleOff: 'Uzunluk Ölçümünü Deaktive Et.',
clearMeasurementsOnStop: false,
showMeasurementsClearControl: true,
clearControlTitle: 'Ölçümleri Temizle.',
bearingTextIn: 'In', // language dependent label for inbound bearings
bearingTextOut: 'Out', // language dependent label for outbound bearings
tooltipTextFinish: 'Click to <b>finish line</b><br>',
tooltipTextDelete: 'Press SHIFT-key and click to <b>delete point</b>',
tooltipTextMove: 'Click and drag to <b>move point</b><br>',
tooltipTextResume: '<br>Press CTRL-key and click to <b>resume line</b>',
tooltipTextAdd: 'Press CTRL-key and click to <b>add point</b>'
}
const geoman = {
position: 'topleft',
drawMarker: false,
drawCircleMarker: false,
drawPolyline: false,
drawRectangle: false,
drawPolygon: false
}
const mapOptions = {
responsivePopupEnabled: false,
geomanEnabled: false,
polylineMeasureEnabled: false,
markerClusterEnabled: false,
zoomBoxEnabled: false,
mobileViewEnabled: false,
filterEnabled: true,
elementId: 'leafletmap',
coordinate: [37.93382, 32.50223],
zoom: 10,
tilelayer: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
}
const websocket = {
url: null,
username: null,
password: null,
subscriptions: null,
broker: null
}
const context = {
markerMap: [],
markerCluster: null,
map: null,
filteredDevices: [],
filteredByIgnition: [],
filteredByMaxSpeed: [],
predicates: []
}
const stack = {
polyline: null,
ignitionOffPositions: [],
ignitionOnPositions: [],
deviceEventMarkers: [],
motionEventMarkers: [],
};
function isFilteredDeprecated(deviceId) {
if (context.filteredDevices.length === 0) {
return true
}
for (const id in context.filteredDevices) {
if (context.filteredDevices[id] === deviceId) {
return true
}
}
return false
}
function isFiltered(GeoLocation) {
// kalkmalı
if (!mapOptions.filterEnabled) {
if (context.filteredDevices.length === 0) {
return true
}
}
let DeviceKey = GeoLocation.deviceKey
if (context.filteredDevices.length === 0 && context.filteredByIgnition === 'each' && !context.filteredByMaxSpeed) {
return true
}
// Sadece kontak açık mı kapalı mı
if (context.filteredDevices.length === 0 && context.filteredByIgnition !== 'each' && !context.filteredByMaxSpeed) {
if (
(context.filteredByIgnition === 'open') === GeoLocation.engineOn ||
(context.filteredByIgnition === 'off') !== GeoLocation.engineOn
)
return true
}
//Sadece Max Hız
//if(Leaflet.AcceptableDevices.length === 0 && Leaflet.AcceptableDevicesByIgnition === 'each' && Leaflet.AcceptableDevicesMaxSpeedLimit)
//Sadece deviceKey
if (context.filteredDevices.length !== 0 && context.filteredByIgnition === 'each' && !context.filteredByMaxSpeed) {
for (const Key in context.filteredDevices) {
if (context.filteredDevices[Key] === DeviceKey) {
return true
}
}
}
// deviceKey + Kontak
if (context.filteredDevices.length !== 0 && context.filteredByIgnition !== 'each' && context.filteredByMaxSpeed) {
for (const Key in context.filteredDevices) {
if (
context.filteredDevices[Key] === DeviceKey &&
((context.filteredByIgnition === 'open') === GeoLocation.engineOn ||
(context.filteredByIgnition === 'off') !== GeoLocation.engineOn)
) {
return true
}
}
}
return false
}
function addPolyline(data) {
const array = data.split(':')
let coordinates = []
array.forEach(function (item, index, array) {
if (item) {
const coords = item.split(',')
const latitude = coords[0]
const longitude = coords[1]
if (latitude && longitude) {
const lat = parseFloat(latitude)
const lon = parseFloat(longitude)
if (lat < 40 && lat > 34 && lon < 35 && lon > 29) {
coordinates.push([latitude, longitude])
}
}
}
})
L.polyline(coordinates).addTo(context.map)
}
function createBlueMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/90q2i5e.png',
iconSize: [16,16],
iconAnchor: [0,0]
})
})
}
function createRedMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/7x52u1w.png',
iconSize: [16, 16],
iconAnchor: [0, 0]
})
})
}
function createBlackMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/rbm8m77.png',
iconSize: [16, 16],
iconAnchor: [0, 0]
})
})
}
// https://i.hizliresim.com/2px3ngn.png
// https://i.hizliresim.com/94wjkvp.png
// https://i.hizliresim.com/sh0z1m8.png
// https://i.hizliresim.com/598daks.png
// https://www.hizliresim.com/rsoojxi <----- card Event warning
// hhttps://i.hizliresim.com/gjwa2xo.png normal card Event
function createDeviceEventMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/b68u17k.png',
iconSize: [32, 32],
iconAnchor: [-8, 16]
})
})
}
function createMotionMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/3bdllrt.png',
iconSize: [8, 8],
iconAnchor: [-8, 16]
})
})
}
function createCardEventMarker(latitude, longitude) {
return L.marker([latitude, longitude], {
icon: L.icon({
// iconUrl: 'https://i.hizliresim.com/9glu316.png',
iconUrl:'https://i.hizliresim.com/jxgmc5n.png',
iconSize: [32, 32],
iconAnchor: [16, 32]
})
})
}
function createCardEventWarningMarker(latitude, longitude,cardEventObject) {
return L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: 'https://i.hizliresim.com/rsoojxi.png',
iconSize: [32,32],
iconAnchor: [16,32]
})
}).bindTooltip(`Kart id:${cardEventObject?.identification} <br/> ${new Date(cardEventObject?.time).toLocaleString('tr')} `)
}
function freeStack() {
stack.polyline = null
stack.ignitionOffPositions = []
stack.ignitionOnPositions = []
stack.deviceEventMarkers = []
stack.motionEventMarkers = []
stack.cardEventMarkers = []
}
function loadCardEvents(json) {
stack.cardEventMarkers = []
const jsonObject = json /* JSON.parse(json) */
for (const eachJsonObject in jsonObject) {
const node = jsonObject[eachJsonObject]
if (node.coordinate) {
const coords = node.coordinate.split(",")
const latitude = coords[0];
const longitude = coords[1];
node.status==='BAŞARILI'?stack.cardEventMarkers.push(createCardEventMarker(latitude, longitude,node)):stack.cardEventMarkers.push(createCardEventWarningMarker(latitude, longitude,node))
}
}
}
function drawCardEvents(draw) {
if (draw) {
stack.cardEventMarkers.forEach(each => each.addTo(context.map))
} else {
stack.cardEventMarkers.forEach(each => context.map.removeLayer(each))
}
}
function loadDeviceEvents(json) {
stack.deviceEventMarkers = []
const jsonObject = JSON.parse(json)
for (const eachJsonObject in jsonObject) {
const node = jsonObject[eachJsonObject]
if (node.coordinate) {
const coords = node.coordinate.split(",")
const latitude = coords[0];
const longitude = coords[1];
stack.deviceEventMarkers.push(createDeviceEventMarker(latitude, longitude))
}
}
}
function drawDeviceEvents(draw) {
if (draw) {
stack.deviceEventMarkers.forEach(each => each.addTo(context.map))
} else {
stack.deviceEventMarkers.forEach(each => context.map.removeLayer(each))
}
}
function loadMotionEvents(json) {
stack.motionEventMarkers = []
const jsonObject = JSON.parse(json)
for (const eachJsonObject in jsonObject) {
const node = jsonObject[eachJsonObject]
if (node.coordinate) {
const coords = node.coordinate.split(",")
const latitude = coords[0];
const longitude = coords[1];
stack.motionEventMarkers.push(createMotionMarker(latitude, longitude))
}
}
}
function drawMotionEvents(draw) {
if (draw) {
stack.motionEventMarkers.forEach(each => each.addTo(context.map))
} else {
stack.motionEventMarkers.forEach(each => context.map.removeLayer(each))
}
}
function load(json) {
freeStack()
const jsonObject = json
let coordinates = []
for (const eachJsonObject in jsonObject) {
const node = jsonObject[eachJsonObject]
const coords = node.coordinate.split(",")
const latitude = coords[0];
const longitude = coords[1];
if (node.ignitionOn) {
if (latitude && longitude) {
coordinates.push([latitude, longitude])
if (node.speed && node.speed > 50) {
stack.ignitionOnPositions.push(createRedMarker(latitude, longitude))
} else {
stack.ignitionOnPositions.push(createBlueMarker(latitude, longitude))
}
}
} else {
stack.ignitionOffPositions.push(createBlackMarker(latitude, longitude))
}
}
stack.polyline = L.polyline(coordinates)
}
function drawIgnitionOnPositions(draw) {
if (draw) {
stack.ignitionOnPositions.forEach(any => any.addTo(context.map))
} else {
stack.ignitionOnPositions.forEach(any => context.map.removeLayer(any))
}
}
function drawIgnitionOffPositions(draw) {
if (draw) {
stack.ignitionOffPositions.forEach(any => any.addTo(context.map))
} else {
stack.ignitionOffPositions.forEach(any => context.map.removeLayer(any))
}
}
function drawPolyline(draw) {
if (draw) {
stack.polyline.addTo(context.map)
} else {
context.map.removeLayer(stack.polyline)
}
}
function createMarker(geolocation,setLiveVehicleDetails) {
let deviceId = geolocation.deviceKey
if (isFiltered(geolocation)) {
let marker = decodeMarker(geolocation).addEventListener('click',()=>setLiveVehicleDetails(geolocation))
util.set(context.markerMap, deviceId, marker)
if (mapOptions.mobileViewEnabled) {
context.map.setView([geolocation.latitude, geolocation.longitude])
}
}
}
async function updateMarker(geolocation,setLiveVehicleDetails) {
let deviceId = geolocation.deviceKey
if (isFiltered(geolocation)) {
let marker = util.getValue(context.markerMap, deviceId)
if (geolocation.latitude && geolocation.longitude) {
marker.setLatLng([geolocation.latitude, geolocation.longitude])
}
let content = decodePopup(geolocation)
// marker.bindPopup(content)
if (mapOptions.mobileViewEnabled) {
context.map.setView([geolocation.latitude, geolocation.longitude])
}
}
}
function decodeMarker(geolocation,setLiveVehicleDetails) {
if (context.predicates.length === 0) {
return _decodeMarker(geolocation)
} else {
let pass = true
for (let i = 0; i < context.predicates.length; i++) {
if (!context.predicates[i](geolocation)) {
pass = false
break
}
}
if (pass) {
return _decodeMarker(geolocation)
}
}
}
function _decodeMarker(geolocation) {
if (geolocation.latitude && geolocation.longitude) {
let popupContent = decodePopup(geolocation)
let markerIcon
if (geolocation.connectionOk) {
if (geolocation.engineOn) {
markerIcon = L.divIcon({
html:
'<div class="plate_rectangle">\n' +
' <div class="blue_tr">\n' +
' TR\n' +
' </div>\n' +
' <h5 class="plate_number"> + ' +
geolocation.vehiclePlate +
'</h5>\n' +
' </div>\n'
})
} else {
markerIcon = L.divIcon({
html:
'<div class="plate_rectangle">\n' +
' <div class="red_tr">\n' +
' TR\n' +
' </div>\n' +
' <h5 class="plate_number"> + ' +
geolocation.vehiclePlate +
'</h5>\n' +
' </div>\n'
})
}
} else {
markerIcon = L.divIcon({
html:
'<div class="plate_rectangle">\n' +
' <div class="black_tr">\n' +
' TR\n' +
' </div>\n' +
' <h5 class="plate_number"> + ' +
geolocation.vehiclePlate +
'</h5>\n' +
' </div>\n'
})
}
if (mapOptions.responsivePopupEnabled) {
let marker = L.marker([geolocation.latitude, geolocation.longitude], {
icon: markerIcon
})
// popup cancelled
// .bindPopup(L.responsivePopup().setContent(popupContent))
if (mapOptions.markerClusterEnabled) {
context.markerCluster.addLayer(marker)
} else {
marker.addTo(context.map)
}
return marker
} else {
let marker = L.marker([geolocation.latitude, geolocation.longitude], {
icon: markerIcon
})
// sideİnfoPanel istead of popup line
// popup cancelled
// .bindPopup(popupContent)
if (mapOptions.markerClusterEnabled) {
context.markerCluster.addLayer(marker)
} else {
marker.addTo(context.map)
}
return marker
}
}
}
function addMarker(coordinate) {
let marker = L.marker(coordinate).addTo(context.map)
return marker
}
function decodePopup(geolocation){
let content = ''
if (geolocation.deviceKey) {
content += '<p><strong>Cihaz No: </strong>' + geolocation.deviceKey + '<br/>'
}
if (geolocation.vehiclePlate) {
content += '<p><strong>Plaka: </strong>' + geolocation.vehiclePlate + '<br/>'
}
if (typeof geolocation.engineOn !== 'undefined'){
content += '<p><strong>Kontak : </strong>'
if (geolocation.engineOn) {
content += 'Açık' + '<br/>'
} else {
content += 'Kapalı' + '<br/>'
}
}
if (geolocation.lastEngineActivity) {
content += '<p><strong>Son Kontak Hareketi: </strong>' + geolocation.lastEngineActivity + '<br/>'
}
if (geolocation.localDateTime) {
content += '<p><strong>Tarih: </strong>' + geolocation.localDateTime + '<br/>'
}
if (geolocation.lastActivity) {
content += '<p><strong>Son Etkinlik: </strong>' + geolocation.lastActivity + '<br/>'
}
if (geolocation.latitude && geolocation.longitude) {
let coordinate = geolocation.latitude + '' + geolocation.longitude
if (geolocation.altitude) {
coordinate += ',' + geolocation.altitude
}
content += '<p><strong>Koordinat: </strong>' + coordinate + '<br/>'
}
if (geolocation.distance) {
content += '<p><strong>Mesafe: </strong>' + geolocation.distance + '<br/>'
}
if (geolocation.speed) {
content += '<p><strong>Hız: </strong>' + geolocation.speed + '<br/>'
}
if (geolocation.course) {
content += '<p><strong>Açı: </strong>' + geolocation.course + '<br/>'
}
if (geolocation.satellites) {
content += '<p><strong>Uydu Kullanım: </strong>' + geolocation.satellites + '<br/>'
}
content += '</p>'
return content
}
const util = {
has: function (map, element) {
return map && map[element]
},
set: function (map, key, value) {
return (map[key] = value)
},
foreach: function (object, callback) {
for (const property in object) {
if (object.hasOwnProperty(property)) {
callback(property, object[property])
}
}
},
getKey: function (map, value) {
for (const prop in map) {
if (map.hasOwnProperty(prop)) {
if (map[prop] === value) return prop
}
}
},
getValue: function (map, key) {
return map[key]
},
jsonToMap: function (json) {
const $json = JSON.parse(json)
const literal = {}
for (const key in $json) {
literal[key] = $json[key]
}
return literal
}
}
return {
initMap: (properties) => {
for (const option in properties) {
mapOptions[option] = properties[option]
}
context.map = L.map(mapOptions.elementId).setView(mapOptions.coordinate, mapOptions.zoom)
L.tileLayer(mapOptions.tilelayer).addTo(context.map)
},
enableGeoman: (options) => {
for (const option in options) {
geoman[option] = options[option]
}
context.map.pm.addControls(geoman)
mapOptions.geomanEnabled = true
},
enablePolylineMeasure: (options) => {
for (const option in options) {
polylineMeasure[option] = options[option]
}
L.control.polylineMeasure(polylineMeasure).addTo(context.map)
mapOptions.polylineMeasureEnabled = true
},
enableMarkerCluster: (options) => {
context.markerCluster = L.markerClusterGroup(options)
mapOptions.markerClusterEnabled = true
},
enableResponsivePopup: () => {
mapOptions.responsivePopupEnabled = true
},
enableZoomBox: () => {
context.map.addControl(L.control.zoomBox({ modal: true }))
},
enableMobileView: () => {
mapOptions.mobileViewEnabled = true
},
disableFilter: () => {
mapOptions.filterEnabled = false
},
setFilteredDevices: (devices) => {
context.filteredDevices = devices
},
setFilteredDevicesByIgnition: (devices) => {
context.filteredByIgnition = devices
},
setFilteredDevicesByMaxSpeed: (devices) => {
context.filteredByMaxSpeed = devices
},
addPolyline: (polylineString) => {
addPolyline(polylineString)
},
addMarker: (geolocation) => {
addMarker(geolocation)
},
setPredicates: (predicates) => {
context.predicates = predicates
},
getLeafletMap: () => {
return context.map
},
load: (json) => {
return load(json)
},
drawIgnitionOnPositions: (draw) => {
return drawIgnitionOnPositions(draw)
},
drawIgnitionOffPositions: (draw) => {
return drawIgnitionOffPositions(draw);
},
drawPolyline: (draw) => {
return drawPolyline(draw);
},
loadMotionEvents: (json) => {
return loadMotionEvents(json)
},
drawMotionEvents: (draw) => {
return drawMotionEvents(draw)
},
loadDeviceEvents: (json) => {
return loadDeviceEvents(json)
},
drawDeviceEvents: (draw) => {
return drawDeviceEvents(draw)
},
loadCardEvents: (json) => {
return loadCardEvents(json)
},
drawCardEvents: (draw) => {
return drawCardEvents(draw)
},
/**
* websocketOptions::url,
* websocketOptions::username,
* websocketOptions::password,
* websocketOptions::subscriptions,
* websocketOptions::broker
*
* @param websocketOptions
*/
connect: (websocketOptions,setWebSocketObjectArray,setLiveVehicleDetails) => {
for (const option in websocketOptions) {
websocket[option] = websocketOptions[option]
}
if (websocket.url && websocket.username && websocket.password) {
const SockJsAdapter = new SockJS(websocket.url)
const StompClient = Stomp.over(SockJsAdapter)
StompClient.connect({ login: websocket.username, passcode: websocket.password }, function (frame) {
StompClient.subscribe(websocket.broker, function (event) {
let json = JSON.parse(event.body)
if (Array.isArray(json)) {
for (let i = 0; i < json.length; i++) {
const GeoLocation = json[i]
if (util.has(context.markerMap, GeoLocation.deviceKey)) {
// updateMarker(GeoLocation,setLiveVehicleDetails)
} else {
// createMarker(GeoLocation,setLiveVehicleDetails)
}
}
} else {
if (util.has(context.markerMap, json.deviceKey)) {
updateMarker(json)
} else {
setWebSocketObjectArray(prevState=>{
const hasDeviceKey = prevState.some(state => state?.deviceKey ===json.deviceKey);
if (hasDeviceKey) {
return prevState
}
return [...prevState,json]
})
createMarker(json,setLiveVehicleDetails)
}
}
})
if (mapOptions.markerClusterEnabled) {
context.map.addLayer(context.markerCluster)
}
})
StompClient.debug = null
return StompClient
} else {
throw new Error('Check url,uname,password,broker.')
}
}
}
}
export default ConnectJs