Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 21942

Ocena czystości kodu

$
0
0

Cześć wszystkim, chciałbym się zapytać o rade co można zrobić w skrypcie javascript poniżej korzystającego z Google Map API, żeby był bardziej czytelny i wydajniejszy:)

class Geolocations
{

    constructor(radius_circle) {
        this.radius_circle = radius_circle;
    }

    init(options) {

        if(!options.location) return;

        try {google.maps.event.addDomListener(window, "load", this.makeMap.bind(this)); } catch(e) { return; }

        try {google.maps.event.addDomListener(window, "load", this.Listener.bind(this)); } catch(e) { return; }

        this.options = options;
        this.location = this.options.location;
    }

    makeMap() {
        this.GetAllLocationsOnMap();

        var elements=0;
        this.elements=elements;

        var TableTypeSelectedIcon=[];
        this.TableTypeSelectedIcon=TableTypeSelectedIcon;

        var TableIfIconSelect=[];
        this.TableIfIconSelect=TableIfIconSelect;

        var geokoder = new google.maps.Geocoder();
        this.geokoder=geokoder;

        var loc = this.location.split(","),
            pos = new google.maps.LatLng(loc[0], loc[1]);

        var mapOptions =new google.maps.Map(document.querySelector("#map"), {
            zoom: 13,
            center: pos,
            disableDefaultUI: false,
            scaleControl: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl:false,
            mapTypeControl: true,
            mapTypeControlOptions:
            {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
        });

        this.mapOptions=mapOptions;
        var Map = new google.maps.Map(document.getElementById("map"), mapOptions);
        this.Map=Map;

    }

    GetAllLocationsOnMap(val)
    {
      var lan="http://localhost:3000/api/connectAll/";

      this.SendRequestToDatabase(lan);
    }

    Listener(){
      var markers_on_map = [];
      this.markers_on_map=markers_on_map;

      var Circle=()=>this.circle;
      var CallbackToThisDragListener=()=>this.DragListener();

        google.maps.event.addListener(this.Map,'dragstart',function(zdarzenie)
        {

                Circle().setMap(null);

        });

        google.maps.event.addListener(this.Map,'dragend',function(zdarzenie)
        {

                for (var i = 0; i < markers_on_map.length; i++) {
                  if (markers_on_map[i]) {
                    markers_on_map[i].setMap(null);
                    markers_on_map[i] = null;
                  }
                }

              CallbackToThisDragListener();

        });
    }

    DragListener()
    {
      this.CheckAddressValue();
    }

    CheckAddressValue()
    {

      var CallbackToThisCreateCircle=()=>this.CreateCircle();
      var CallbackToThisAll_locations=this.BringDataFromDatabase.locations;
      var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration);

      if(this.address==null)
      {
        this.address='';
      }

      if (this.geokoder) {

       this.geokoder.geocode({'address': this.address}, function (results, status) {

         if (status == google.maps.GeocoderStatus.OK) {

            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

                    CallbackToThisCreateCircle();

                    for (var iteration = 0; iteration < CallbackToThisAll_locations.length; iteration++) {


                            CallbackUpdateMarker(CallbackToThisAll_locations[iteration],iteration);

                    }
                  }
                }
              });
            }
    }

    CreateCircle()
    {
       var mylat=this.Map.getCenter().lat();
       this.mylat=mylat;
       var mylng=this.Map.getCenter().lng();
       this.mylng=mylng;

       var circle;

        circle = new google.maps.Circle({
          map: this.Map,
          position: new google.maps.LatLng(mylat, mylng),
          radius: this.radius_circle,
          strokeColor: '#b2dae8',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          clickable: false,
          fillColor: '#b2dae8',
          fillOpacity: 0.35
        });

        this.circle=circle;

        circle.bindTo('center', circle, 'position');
    }

    SaveGlobalLocationsValueInClass(LocationsOnMap,iteration)
    {
      this.LocationsOnMap=LocationsOnMap;
      this.iteration=iteration;
      this.SetMarkerLocation(iteration)
    }

    SetMarkerLocation()
    {
      var DymekLocations=this.LocationsOnMap;

      var Mapka=()=>this.Map;

      var InfoWindow = new google.maps.InfoWindow();

      var wartosc=this.ComputeDistance();
      var marker_lat_lng=wartosc[0];
      var distance_from_location=wartosc[1];


      if (distance_from_location <= this.radius_circle) {

          var new_marker=this.CreatNewMarker(marker_lat_lng);
          this.new_marker=new_marker;

          this.FiltersMarkers();

          google.maps.event.addListener(new_marker, 'mouseover', function () {

            InfoWindow = new google.maps.InfoWindow({
              content: '<div style="color:black"><strong>'+DymekLocations.name+'</strong><br>'+DymekLocations.street+'<br>'+DymekLocations.phone+'</div>',
              size: new google.maps.Size(150,50),
              pixelOffset: new google.maps.Size(0, -30),
              position: marker_lat_lng,
              map: Mapka()
            });
              google.maps.event.addListener(new_marker, 'mouseout', function () {
                if(InfoWindow){

                   InfoWindow.setMap(null);
                   InfoWindow = null;
                }

              });
          });

        this.markers_on_map.push(new_marker);

      }

    }

     ComputeDistance()
    {
      var marker_lat_lng = new google.maps.LatLng(this.LocationsOnMap.lat, this.LocationsOnMap.lng);

      var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(this.mylat, this.mylng), marker_lat_lng);

      return [marker_lat_lng, distance_from_location];

    }

     CreatNewMarker(marker_lat_lng)
    {
      var new_marker = new google.maps.Marker({
          position: marker_lat_lng,
          map: this.Map,
          title: location.name
      });

        return new_marker;

    }

    FiltersMarkers()
    {

            if(this.BringDataFromDatabase.locations[this.iteration].type.indexOf(this.address) != -1
              || this.BringDataFromDatabase.locations[this.iteration].name.indexOf(this.address) != -1
              ||this.BringDataFromDatabase.locations[this.iteration].name==this.address
              || this.BringDataFromDatabase.locations[this.iteration].type==this.address)
            {

                  this.new_marker.setVisible(true);

            }
            else
            {
                  this.new_marker.setVisible(false);
            }


            this.FiltersMarkersOnTypeSelectedIcon();

    }

    FiltersMarkersOnTypeSelectedIcon()
    {
      for(var x=0;x<this.TableTypeSelectedIcon.length;x++)
      {
        if(this.TableIfIconSelect[x]==true && this.BringDataFromDatabase.locations[this.iteration].type==this.TableTypeSelectedIcon[x])
        {
            this.new_marker.setVisible(false);
        }
      }

    }

    UpdateCircleRadius(rad) {
      this.radius_circle=rad;
      this.circle.radius=rad;

      this.circle.bindTo('center', this.circle, 'position');

      this.UpdateNumbersOfMarkers();

    }

    UpdateNumbersOfMarkers()
    {

      var All_locations=this.BringDataFromDatabase.locations;
      var CallbackUpdateMarker=(All_locations,iteration)=>this.SaveGlobalLocationsValueInClass(All_locations,iteration);

      this.CleanMarkersOnMap();

      for (var iteration = 0; iteration < All_locations.length; iteration++) {

        CallbackUpdateMarker(All_locations[iteration],iteration);

      }
    }

    UncheckedLocation(TypeSelectedIcon,IfIconSelect)
    {

      if(this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon)>-1)
      {
        var TheSameElementInArray=this.TableTypeSelectedIcon.indexOf(TypeSelectedIcon);

        this.TableIfIconSelect[TheSameElementInArray]=IfIconSelect;
      }
      else
      {

        this.TableTypeSelectedIcon[this.elements]=TypeSelectedIcon;

        this.TableIfIconSelect[this.elements]=IfIconSelect;

        this.elements=this.elements+1;
      }

      this.UpdateNumbersOfMarkers();
    }

    UpdateAddressValue(val)
    {
      this.circle.setMap(null);

      this.CleanMarkersOnMap();

      this.address=val;
      this.CheckAddressValue();
    }
    CleanMarkersOnMap(){

      for (var i = 0; i < this.markers_on_map.length; i++) {
        if (this.markers_on_map[i]) {
          this.markers_on_map[i].setMap(null);
          this.markers_on_map[i] = null;
        }
      }

    }
    SendRequestToDatabase(lan)
    {
      var SaveLocationsFromDatabaseArrowFunction=(BringDataFromDatabase)=>this.BringDataFromDatabase=BringDataFromDatabase;

      var xhr = new XMLHttpRequest();

      xhr.open("POST",lan);

      xhr.onreadystatechange = function(e)
      {

        if (this.readyState === 4 && this.status === 200) {

            var res=xhr.responseText;
            var BringDataFromDatabase=JSON.parse(res);

            SaveLocationsFromDatabaseArrowFunction(BringDataFromDatabase);

        }
      };

      xhr.send(null);
    }

}


var geo=new Geolocations(3000);

geo.init({
    location: "51.269262, 22.548271",
});

function sliderChange(val) {

        var kolo=val*100;
        geo.UpdateCircleRadius(kolo);

}
function IconClick(TypeSelectedIcon,IfIconSelect) {

  geo.UncheckedLocation(TypeSelectedIcon,IfIconSelect);

}

var clearSearch;
var WaitForDataFromDatabase;

function InputSearchValue(val){

    clearTimeout(clearSearch);
    clearTimeout(WaitForDataFromDatabase);

    WaitForDataFromDatabase=setTimeout(()=>{

        var lan="http://localhost:3000/api/connect/"+val;

        geo.SendRequestToDatabase(lan);

    },500);

    clearSearch=setTimeout(()=>{

      geo.UpdateAddressValue(val);

    },600);
}

 


Viewing all articles
Browse latest Browse all 21942

Trending Articles


TRX Antek AVT - 2310 ver 2,0


Автовишка HAULOTTE HA 16 SPX


POTANIACZ


Zrób Sam - rocznik 1985 [PDF] [PL]


Maxgear opinie


BMW E61 2.5d błąd 43E2 - klapa gasząca a DPF


Eveline ➤ Matowe pomadki Velvet Matt Lipstick 500, 506, 5007


Auta / Cars (2006) PLDUB.BRRip.480p.XviD.AC3-LTN / DUBBING PL


Peugeot 508 problem z elektroniką


AŚ Jelenia Góra