Expanded nook UI and Reservation booking form changes

app/assets/javascripts/application.js

@@ -21,7 +21,7 @@
 //= require moment
 //= require selectize
 //= require twitter/bootstrap
-//= require bootstrap-datepicker.min
+//= require datetime_picker
 //= require bootstrap-slider.min
 //= require masonry.min
 //= require imagesloaded.pkgd.min

app/assets/javascripts/filters.js

@@ -1,62 +1,69 @@
-$(function() {
-  /**
-   * Filters general
-   */
-
-  // updating nooks wall
-  $(document).on('filter-updated', function (e, params) {
-    var searchParams = {};
-
-    // locations filter selection
-    var selected = [];
-    $('.selected-location-item').each(function (k, val) {
-      selected.push($(this).attr('data-item-id'));
-    });
-    searchParams.location_ids = selected;
+function getSearchParams() {
+  var searchParams = {};
 
-    // time filter selection
-    var time = $('#hour-range-slider').slider('getValue');
-
-    searchParams.time_range = {
-      start: time[0] * 3600,
-      end: time[1] * 3600
-    };
+  // locations filter selection
+  var selected = [];
+  $("#location-element option:selected").each(function () {
+    selected.push($(this).val());
+  });
+  $('.selected-location-item').each(function (k, val) {
+    selected.push($(this).attr('data-item-id'));
+  });
+  searchParams.location_ids = selected;
 
-    // date filter selection
-    var selected = [];
+  function convert_to_time(s){
+    s = s.split(' ');
+    var time = s[0].split(':').reverse().reduce((prev, curr, i) => prev + (curr == 12 ? 0 : curr)*Math.pow(60, i+1), 0);
+    if(s[1]=="PM"){
+      time += 12*3600;
+    }
+    return time;
+  }
+  // time filter selection
+  var timeStart = $('#timeStart').val();
+  var timeEnd = $('#timeEnd').val();
+  searchParams.time_range = {
+    start: convert_to_time(timeStart),
+    end: convert_to_time(timeEnd)
+  };
 
-    var selectedDate = $('.datepicker-element').first().datepicker('getFormattedDate');
-    var dateArr = selectedDate.split('/');
+  // date filter selection
+  var selected = [];
 
-    var date = dateArr[2] + '-' + dateArr[0] + '-' + dateArr[1];
+  var selectedDate = $('#datepicker-element').data('DateTimePicker').date();
+  var date = selectedDate.format('YYYY-MM-DD');
 
-    selected.push(date);
-    searchParams.days = selected;
+  selected.push(date);
+  searchParams.days = selected;
+  searchParams.nook_capacity = $('#nook_capacity').val();
 
-    // amentities filter selection
-    searchParams.amenities = [];
-    $('.amenity input:checked').each(function (key, val) {
-      var elem = $(this);
+  // amentities filter selection
+  searchParams.amenities = [];
+  $('.amenity input:checked').each(function (key, val) {
+    var elem = $(this);
 
-      searchParams.amenities.push(elem.val());
-    });
+    searchParams.amenities.push(elem.val());
+  });
 
-    // matching rooms filter selection
-    searchParams.matching_rooms = [];
-    $('#matching-rooms-list input:checked').each(function (key, val) {
-      var elem = $(this);
+  // matching rooms types filter selection
+  searchParams.nook_types = [];
+  $('#matching-types-list input:checked').each(function (key, val) {
+    var elem = $(this);
 
-      searchParams.matching_rooms.push(elem.val());
-    });
+    searchParams.nook_types.push(elem.val());
+  });
+  return searchParams;
+}
 
-    // matching rooms types filter selection
-    searchParams.nook_types = [];
-    $('#matching-types-list input:checked').each(function (key, val) {
-      var elem = $(this);
+$(function() {
+  /**
+   * Filters general
+   */
 
-      searchParams.nook_types.push(elem.val());
-    });
+  // updating nooks wall
+  $(document).on('filter-updated',function (e, params) {
 
+    var searchParams = getSearchParams();
     // getting nooks items
     updateWall(searchParams);
   });
@@ -65,179 +72,68 @@ $(function() {
    * Date filter
    */
 
-  $('.datepicker-element').datepicker('setDate', 'today');
-
-  $(".datepicker-element").on("changeDate", function (event) {
-    NProgress.start();
-
-    $(document).trigger('filter-updated');
+  $('#datepicker-element').datetimepicker({
+    inline: true,
+    format: 'YYYY-MM-DD'
   });
-
-  $(".datepicker-element").on("hide", function (event) {
-    console.log('foo');
+  $('#timeStart').datetimepicker({
+    format: 'LT',
+    stepping: 30,
+    showClear: true,
+    icons: {
+      clear: 'clear btn btn-primary'
+    }
   });
-
-  $('form.booking .date-this-week button').on('click', function () {
-    NProgress.start();
-
-    $(this).toggleClass('active');
-
-    $(document).trigger('filter-updated');
+  $('#timeEnd').datetimepicker({
+    format: 'LT',
+    stepping: 30,
+    showClear: true,
+    icons: {
+      clear: 'clear btn btn-primary'
+    },
+    useCurrent: false //Important! See issue #1075
   });
-
-  /**
-   * Time filter
-   */
-
-  $("#hour-range-slider").slider({});
-  $("#hour-range-slider").on('change', function (object) {
-    var min_start = object.value["oldValue"][0];
-    var min_end = object.value["newValue"][0];
-    var max_start = object.value["oldValue"][1];
-    var max_end = object.value["newValue"][1];
-    var minutes, hour;
-
-    if (min_start != min_end) {
-      hour = Math.floor(min_end);
-      minutes = s.lpad((min_end - hour) * 60, 2, '0');
-      $(this).parent().find('.slider-min').html((hour > 12 ? hour - 12 : hour) + ':' + minutes + (hour >= 12 ? 'PM' : 'AM'));
-    }
-    if (max_start != max_end) {
-      hour = Math.floor(max_end);
-      minutes = s.lpad((max_end - hour) * 60, 2, '0');
-      $(this).parent().find('.slider-max').html((hour > 12 ? hour - 12 : hour) + ':' + minutes + (hour >= 12 ? 'PM' : 'AM'));
-    }
-
-    // refresh a list only when user finished moving
-    if (typeof hourRangeTimer !== 'undefined') {
-      clearTimeout(hourRangeTimer);
-    }
-    hourRangeTimer = setTimeout(function () {
-      NProgress.start();
-
-      // getting nooks items
+  $("#timeStart").on("dp.show", function(e) {
+    $('.clear').html("Any Time");
+  }).on("dp.change", function (e) {
+      $('#timeEnd').data("DateTimePicker").minDate(e.date);
+      var endDate = $('#timeEnd').data("DateTimePicker").date();
+      if (endDate <= e.date || endDate == undefined) {
+        $('#timeEnd').data("DateTimePicker").date(e.date);
+      }
+      if(e.date === false){
+        $(e.target).val("Any");
+      }
       $(document).trigger('filter-updated');
-    }, 700);
+      NProgress.start();
   });
-
-  /**
-   * Location filter
-   */
-
-  // get client geolocation to show distance to each location
-  $(document).ready(function () {
-    if ( $('#select-locations-link').length ) {
-      var href = $('#select-locations-link').attr('href');
-      $('#add-location-button').toggle();
-
-      if( navigator.geolocation ) {
-        // Call getCurrentPosition with success and failure callbacks
-        navigator.geolocation.getCurrentPosition( function(position) {
-          var clientLocation = [position.coords.latitude, position.coords.longitude];
-          href = href + '?client_location=' + clientLocation
-          $('#select-locations-link').attr('href', href);
-          showSelectLocationButton();
-        }, function() {
-          showSelectLocationButton();
-        } );
-      } else {
-        showSelectLocationButton();
+  $("#timeEnd").on("dp.show", function(e) {
+    $('.clear').html("Any Time");
+  }).on("dp.change", function (e) {
+      if(e.date === false){
+        $(e.target).val("Any");
       }
-    }
-
-    function showSelectLocationButton() {
-      $('.loading').remove();
-      $('#add-location-button').toggle();
-    }
+      $(document).trigger('filter-updated');
+      NProgress.start();
   });
+  $("#datepicker-element").on("dp.change", function (event) {
+    NProgress.start();
 
-  // selecting location items
-  $(document).on('click', '#locations-select li', function (e) {
-    $(this).toggleClass('active');
+    $(document).trigger('filter-updated');
   });
 
-  // process location selection
-  $(document).on('click', '#process-locations-select', function () {
-    var locationActiveItems = $('#locations-select li.active');
-
+  $('form.booking .date-this-week button').on('click', function () {
     NProgress.start();
 
-    locationActiveItems.each(function (key, item) {
-      var locationData = $(item).data('item');
-
-      var newElem = $('<div/>', {
-        class: 'btn selected-location-item',
-        'data-item-id': locationData.id
-      });
-
-      var nameElem = $('<span/>', {
-        text: locationData.name
-      });
-
-      var removeElem = $('<span/>', {
-        class: 'remove_input',
-        text: 'x'
-      });
-
-      removeElem.on('click', function () {
-        NProgress.start();
-
-        $(this).parent().remove();
-        $(document).trigger('filter-updated');
-      });
-
-      nameElem.appendTo(newElem);
-      removeElem.appendTo(newElem);
-
-      $('#add-location-button').before(newElem);
-    });
+    $(this).toggleClass('active');
 
     $(document).trigger('filter-updated');
-
-    modal.modal('hide');
   });
 
-  locationsModalLoaded = function () {
-    var selected = [];
-    $('.selected-location-item').each(function (k, val) {
-      selected.push($(this).attr('data-item-id'));
-    });
-
-    $('#locations-select li').each(function (key, value) {
-      var elem = $(this);
-
-      var locationData = elem.data('item');
-
-      if (selected.indexOf(String(locationData.id)) !== -1) {
-        elem.remove();
-      }
-    });
-  };
-
-  /**
-   * Time period filter
-   */
-
-  $('form.booking #when button').on('click', function () {
-    var elem = $(this);
-
-    $('#when button').removeClass('active');
-    elem.addClass('active');
-
-    if (elem.val() === 'today') {
-      NProgress.start();
-      $('.filter.date').removeClass('this-week future').addClass('today');
-      $('.filter.date').addClass('inactive');
-      var searchParams = {};
-      searchParams.when = elem.val();
-
-      // getting nooks items
-      $(document).trigger('filter-updated');
-    } else if (elem.val() === 'future') {
-      $('.filter.date').removeClass('today this-week').addClass('future');
-      $('.filter.date').removeClass('inactive');
-    }
-
+  $('.clear-time').on('click',function() {
+    console.log("clearing");
+    $('#timeStart').data("DateTimePicker").date(null);
+    $('#timeEnd').data("DateTimePicker").date(null);
   });
 
   /**
@@ -259,4 +155,40 @@ $(function() {
 
     $(document).trigger('filter-updated');
   });
+
+  var $select = $('#location-element').selectize();
+  $('select').on('change', function(e){
+    NProgress.start();
+
+    $(document).trigger('filter-updated');
+  });
+  $('form.booking #clear-select').on('click',function(e){
+    e.preventDefault();
+    var control = $select[0].selectize;
+    control.clear();
+  });
+
+  if($(document).find(".alert.alert-danger").length > 0){
+    var data = window.localStorage.getItem('form');
+    if(data){
+      var formData = JSON.parse(data);
+      var locationsToRemove = _.reject($select[0].selectize.items, function(x) {
+          return _.some(formData.location_ids, function(y) {
+              return y == x
+          })
+      });
+      locationsToRemove.forEach(function(item){
+        $select[0].selectize.removeItem(item,false);
+      })
+      $('#datepicker-element').data("DateTimePicker").date(new Date(formData.days[0]));
+      $('#timeStart').val(moment().startOf('day').seconds(formData.time_range.start).format("hh:mm A"));
+      $('#timeEnd').val(moment().startOf('day').seconds(formData.time_range.end).format("hh:mm A"));
+      $('#nook_capacity').val(formData.nook_capacity);
+      window.localStorage.removeItem('form');
+    }
+  }
+
+  NProgress.start();
+
+  $(document).trigger('filter-updated');
 });