<commit_before>// Map Properties
var mapProp = {
  center:new google.maps.LatLng(37.362128,-121.910308),
  zoom:12,
  mapTypeId:google.maps.MapTypeId.ROADMAP

};

// Render Map with properties
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

// InfoWindow Template
var infoWindowTemplate = '<div class="infoWindow">'+
                          '<h3 class="heading">%heading%</h3>'+
                         '</div>';

// Bounce animation on and off for markers
function toggleBounce(marker) {
 if (marker.getAnimation() !== null) {
   marker.setAnimation(null);
 } else {
   marker.setAnimation(google.maps.Animation.BOUNCE);
 }
}

var Location = function(name,lat,lng){
  var self = this;
  this.title = ko.observable(name);
  this.marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    animation: google.maps.Animation.DROP,
    map: map,
    title: name,
    info: new google.maps.InfoWindow({
      content: infoWindowTemplate.valueOf().replace('%heading%',name)
    })
  });
  this.isVisible = ko.observable(false);

  this.isVisible.subscribe(function(currentState){
      if (currentState){
        self.marker.setVisible(true);
      } else {
        self.marker.setVisible(false);
        self.marker.info.close();
      }
  });

  google.maps.event.addListener(this.marker, 'click', function() {
      this.marker.info.open(map,this.marker);
      toggleBounce(this.marker);
  }.bind(this));

  this.isVisible(true);

  this.statusCss = ko.computed(function(){
      if(!self.isVisible()){
        return 'filtered';
      }else{
        return '';
      }
  });
};

var ViewModel = function(){
  var self = this;

  this.query = ko.observable('');

  this.locationList = ko.observableArray([]);
  this.selectedLocation = ko.observable('Dummy');
  var foursquareBaseURL = 'https://api.foursquare.com/v2/venues/explore?v=20150929';
	var clientId = 'client_id=<KEY>'
  var clientSecret= 'client_secret=<KEY>';
	var latlng = 'll=37.362128,-121.910308';
  var requestUrl = foursquareBaseURL + '&' + clientId + '&' + clientSecret + '&' + latlng;
  $.ajax({
    url: requestUrl,
    success: function(data){
      var items = data.response.groups[0].items;
      items.forEach(function(item){
        var venue = item.venue;
        self.locationList.push(new Location(venue.name, venue.location.lat, venue.location.lng));
      });
    },
    error: function(){
      alert('Failed to get locations for the neighbourhood');
    }
  });

  this.activateLocation = function(location){
    var currentLocation = self.selectedLocation();
    if(currentLocation != 'Dummy'){
      currentLocation.marker.setAnimation(null);
      currentLocation.marker.info.close();
    }
    self.selectedLocation(location);
    location.marker.info.open(map,location.marker);
    toggleBounce(location.marker);
  };

  self.filterLocations = ko.computed(function(){
    var search = self.query().toLowerCase();

    return ko.utils.arrayFilter(self.locationList(), function(location){
        var contains = location.title().toLowerCase().indexOf(search) >= 0;
        location.isVisible(contains);
        return contains;
    });
  });
};

ko.applyBindings(new ViewModel());
<commit_msg>Add detail information for a location in the location template<commit_after>
// Map Properties (In future, properties can be made dynamic with user inputs)
var mapProp = {
    center:new google.maps.LatLng(37.362128,-121.910308),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

// Render Map with properties
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

// InfoWindow Template
var infoWindowTemplate = '<div class="infoWindow">'+
                          '<h3 class="heading">%heading%</h3>'+
                          '<div class="details">' +
                              '<div>%address1%</div>' +
                              '<div>%address2%</div>' +
                              '<div>%phone%</div>' +
                              '<div><a target="_blank" href="%website%">%website%</a></div>' +
                              '<div>Rating: %rating%</div>' +
                          '</div>' +
                         '</div>';

// Bounce animation on and off for markers
function toggleBounce(marker) {
   if (marker.getAnimation() !== null) {
     marker.setAnimation(null);
   } else {
     marker.setAnimation(google.maps.Animation.BOUNCE);
   }
}

var Location = function(name,lat,lng,info){
    var self = this;
    this.title = ko.observable(name);
    this.marker = new google.maps.Marker({
      position: {lat: lat, lng: lng},
      animation: google.maps.Animation.DROP,
      map: map,
      title: name,
      info: new google.maps.InfoWindow({
        content: info
      })
    });
    this.isVisible = ko.observable(false);

    this.isVisible.subscribe(function(currentState){
        if (currentState){
          self.marker.setVisible(true);
        } else {
          self.marker.setVisible(false);
          self.marker.info.close();
        }
    });

    this.isVisible(true);

    this.statusCss = ko.computed(function(){
        if(!self.isVisible()){
          return 'filtered';
        }else{
          return '';
        }
    });
};

var ViewModel = function(){
    var self = this;

    this.query = ko.observable('');

    this.locationList = ko.observableArray([]);
    this.selectedLocation = ko.observable('Dummy');
    var foursquareBaseURL = 'https://api.foursquare.com/v2/venues/explore?v=20150929';
  	var clientId = 'client_id=YB<KEY>'
    var clientSecret= 'client_secret=<KEY>';
  	var latlng = 'll=37.362128,-121.910308';
    var requestUrl = foursquareBaseURL + '&' + clientId + '&' + clientSecret + '&' + latlng;
    $.ajax({
      url: requestUrl,
      success: function(data){
        var items = data.response.groups[0].items;
        items.forEach(function(item){
          var venue = item.venue;
          var info = infoWindowTemplate.valueOf()
                    .replace('%heading%', venue.name)
                    .replace('%phone%', venue.contact.formattedPhone)
                    .replace('%address1%', venue.location.formattedAddress[0])
                    .replace('%address2%', venue.location.formattedAddress[1])
                    .replace('%website%', venue.url)
                    .replace('%website%', venue.url)
                    .replace('%rating%', venue.rating);

          var location = new Location(venue.name, venue.location.lat, venue.location.lng, info);
          google.maps.event.addListener(location.marker, 'click', function() {
              self.activateLocation(location);
          }.bind(location));

          self.locationList.push(location);
        });
      },
      error: function(){
        alert('Failed to get locations for the neighbourhood');
      }
    });

    this.activateLocation = function(location){
      var currentLocation = self.selectedLocation();
      if(currentLocation != 'Dummy'){
        toggleBounce(currentLocation.marker);
        currentLocation.marker.info.close();
      }
      self.selectedLocation(location);
      location.marker.info.open(map,location.marker);
      toggleBounce(location.marker);
    };

    self.filterLocations = ko.computed(function(){
      var search = self.query().toLowerCase();

      return ko.utils.arrayFilter(self.locationList(), function(location){
          var contains = location.title().toLowerCase().indexOf(search) >= 0;
          location.isVisible(contains);
          return contains;
      });
    });
};

ko.applyBindings(new ViewModel());

{'fraction_non_alphanumeric': 0.149835418038183, 'fraction_numerical': 0.013693219223173141, 'mean_word_length': 2.6223175965665235, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4952502', 'n_tokens_mistral': 2320, 'n_tokens_neox': 2238, 'n_words': 398}