map.js oleg

map.js

'use strict';

(function () {
  var pins;
  var type;
  var price;
  var roomNumbers;
  var guestNumbers;
  var featuresSets = [];
  var housingType = document.querySelector('#housing_type');
  var housingPrice = document.querySelector('#housing_price');
  var housingRoomNumber = document.querySelector('#housing_room-number');
  var housingGuestsNumber = document.querySelector('#housing_guests-number');
  var filterSet = document.querySelector('.tokyo__filter-set');
  var featuresIn = filterSet.querySelectorAll('.feature input');
  var tokyofilters = document.querySelector('.tokyo__filters');

  tokyofilters.addEventListener('change', function () {
    type = housingType.value;
    price = housingPrice.value;
    roomNumbers = housingRoomNumber.value;
    guestNumbers = housingGuestsNumber.value;
    window.debounce(filterPins);
  });
  featuresIn.forEach(function (featureSet) {
    featureSet.addEventListener('click', function () {
      if (featureSet.checked) {
        featuresSets.push(featureSet.value);
      }
      if (!featureSet.checked) {
        for (var i = 0; i < featuresSets.length; i++) {
          if (featureSet.value === featuresSets[i]) {
            featuresSets.splice(i, 1);
          }
        }
      }
    });
  });

  function filterPins() {
    var filteredPins = [];

    pins.forEach(function (pin) {
      if (filterTypeHouse(pin) === false) {
        return;
      } else if (filterPriceHouse(pin) === false) {
        return;
      } else if (filterRoomsHouse(pin) === false) {
        return;
      } else if (filterGuestHouse(pin) === false) {
        return;
      } else if (filterFeaturesHouse(pin) === false) {
        return;
      }

      filteredPins.push(pin);
    });

    function filterTypeHouse(pin) {
      if (type === undefined) {
        return true;
      }
      return pin.offer.type === type;
    }

    function filterPriceHouse(pin) {
      if (price === 'middle') {
        return pin.offer.price >= 10000 && pin.offer.price <= 50000;
      } else if (price === 'low') {
        return pin.offer.price < 10000;
      } if (price === 'high') {
        return pin.offer.price > 50000;
      } 
      return true;
    }

    function filterRoomsHouse(pin) {
      if (roomNumbers === '1') {
        return pin.offer.rooms === 1;
      } else if (roomNumbers === '2') {
        return pin.offer.rooms === 2;
      } else if (roomNumbers === '3') {
        return pin.offer.rooms === 3;
      } 
      return true;
    }

    function filterGuestHouse(pin) {
      if (guestNumbers === '1') {
        return pin.offer.guests === 1;
      } else if (guestNumbers === '2') {
        return pin.offer.guests === 2;
      } 
      return true;
    }

function filterFeaturesHouse(pin) {
 if (featuresSets.length === 0) {
   return true;
 }
  for (var i = 0; i < featuresSets.length; i++) {
    var featureFound = false;
    for (var j = 0; j < pin.offer.features.length; j++) {
        if (featuresSets[i] === pin.offer.features[j]) {
          featureFound = true;
          break;
        }
    }
    if (!featureFound) {
        return false;
    }
  }
  return true;
}

      var parent = document.querySelector('.tokyo__pin-map');
      var child = document.querySelectorAll('.pin');
      for (var i = 1; i < child.length; i++) {
        parent.removeChild(child[i]);
      }
      window.makePin.generateLabels(filteredPins);
  }

  function successHandler(data) {
    pins = data;
    filterPins();
  }
  window.load(successHandler, 'https://intensive-javascript-server-kjgvxfepjl.now.sh/keksobooking/data');

  function closePopup() {
    var pin = document.querySelector('.pin--active');
    var dialog = document.querySelector('.dialog');
    var dialogPanel = dialog.querySelector('.dialog__panel');
    var dialogTitle = dialog.querySelector('.dialog__title');
    if (pin === null) {
      dialogTitle.style.display = 'none';
      dialogPanel.style.display = 'none';
    } else if (pin.classList.contains('pin--active')) {
      pin.classList.remove('pin--active');
      dialogTitle.style.display = 'none';
      dialogPanel.style.display = 'none';
    }
  }

  var dialogClose = document.querySelector('.dialog__close');
  var escKeyCode = 27;

  dialogClose.addEventListener('click', function (evt) {
    closePopup();
  });

  document.addEventListener('keydown', function (evt) {
    if (evt.keyCode === escKeyCode) {
      closePopup();
    }
  });

  var inputAddress = document.querySelector('#address');
  var pinMain = document.querySelector('.pin__main');
  pinMain.addEventListener('mousedown', function (evt) {
    evt.preventDefault();
    var startCoordsX = evt.clientX;
    var startCoordsY = evt.clientY;

    function onMouseMove(moveEvt) {
      moveEvt.preventDefault();
      var shiftX = startCoordsX - moveEvt.clientX;
      var shiftY = startCoordsY - moveEvt.clientY;

      startCoordsX = moveEvt.clientX;
      startCoordsY = moveEvt.clientY;

      pinMain.style.top = (pinMain.offsetTop - shiftY) + 'px';
      pinMain.style.left = (pinMain.offsetLeft - shiftX) + 'px';

      inputAddress.value = 'x: ' + (pinMain.offsetLeft - shiftX + 90) + ', y: ' + (pinMain.offsetTop - shiftY + 42.5);
    }

    function onMouseUp(upEvt) {
      upEvt.preventDefault();
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });

})();