Untitled

/*
 * 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