Untitled
unknown
plain_text
a year ago
23 kB
2
Indexable
Never
/* * 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