supplier improvements

app/assets/javascripts/supplier/application.js

@@ -1,6 +1,8 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui
+//= require jquery.ui.datepicker-en
+//= require jquery.ui.datepicker-nl
 // require bootstrap-transition
 // require bootstrap-affix
 // require bootstrap-alert
@@ -43,15 +45,3 @@ function redirect_to(mapping, variables){
 function currency(num) {
   return Qwaiter.currency(num);
 }
-$(function(){
-  //$locale = Qstorage.getItem('locale') || 'en';
-  if(Qstorage.getItem('message')){
-    var container = $('.alert-success');
-    var msg_finder = Qstorage.getItem('message');
-    if(msg_finder.indexOf('.') == -1) msg_finder = 'messages.'+msg_finder;
-    container.find('div').text(t(msg_finder));
-    container.show();
-    Qstorage.removeItem('message');
-  }
-  setTranslations();
-});

app/assets/javascripts/supplier/initializer.js.coffee

@@ -1,13 +1,8 @@
 $( ->
-  week_days_container = $('#week_days-group')
-  $('.week-day-select').each( (i)->
-    select = $(this)
-    toggle = $('<button type="button" class="btn"></button>')
-    toggle.attr('data-t', 'product_category.week_days.abbreviation.'+select.data('day'))
-    toggle.addClass('active') if select.val() == '1'
-    week_days_container.append(toggle)
-    toggle.click( -> select.val(Math.abs(select.val() - 1)))
-  )
+  $('.week-day-toggle').each ->
+    select = $('#week-day-select-'+$(@).data('day'))
+    $(@).addClass('active') if select.val() == '1'
+    $(@).click( -> select.val(Math.abs(select.val() - 1)))
 
   $('#full_day-controller').each ->
     control = $('#product_category_full_day')
@@ -24,10 +19,22 @@ $( ->
         $(@).removeClass 'icon-white'
         $('#sub-day-container').addClass('hide')
 
+  if Qstorage.getItem('message')
+    container = $('.alert-success');
+    msg_finder = Qstorage.getItem('message');
+    msg_finder = 'messages.'+msg_finder if msg_finder.indexOf('.') == -1
+    container.find('div').text(t(msg_finder))
+    container.show()
+    Qstorage.removeItem('message')
+
+  $('.datepicker').datepicker(window.datepicker_options)
+
+  setTranslations()
 
   # GOOGLE LOCATION PICKER
   $("input.location_picker").each( (i)->
     #return if typeof(google) == 'undefined'
+    iconBase = 'https://maps.google.com/mapfiles/kml/'
     location_input = $(this)
     map_div = $('<div>').addClass("location_picker_map")
  
@@ -43,7 +50,7 @@ $( ->
       lng = values[1]
     center = new google.maps.LatLng(lat,lng)
     mapOptions =
-      zoom: 13
+      zoom: 15
       center: center
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       zoomControl: true
@@ -59,10 +66,54 @@ $( ->
       position: center
       map: map
       title: 'Location'
+      icon: '/assets/icons/maps_location.png'
     )
     google.maps.event.addListener(map, 'click', (point)->
       marker.setPosition(point.latLng)
       location_input.val point.latLng.lat() + ','+ point.latLng.lng()
     )
+
+    search_field = $('<input type="text">')
+    search_field.addClass('location_picker_search')
+    autocomplete = new google.maps.places.Autocomplete(search_field.get(0))
+    autocomplete.bindTo('bounds', map)
+    search_field.keypress( (e) ->
+      if e.which == 13
+        e.preventDefault() 
+    )
+    window.autocomplete = autocomplete
+    map_div.before(search_field)
+    infowindow = new google.maps.InfoWindow()
+    search_marker = new google.maps.Marker({map: map, icon: iconBase + 'shapes/placemark_circle.png'})
+    google.maps.event.addListener(autocomplete, 'place_changed', ->
+      infowindow.close()
+      search_marker.setVisible(false)
+      place = autocomplete.getPlace()
+      return unless place.geometry
+      #if place.geometry.viewport
+        #  map.fitBounds(place.geometry.viewport)
+        #else
+      map.setCenter(place.geometry.location)
+      map.setZoom(17)
+      image =
+        url: place.icon
+        size: new google.maps.Size(71, 71)
+        origin: new google.maps.Point(0, 0)
+        anchor: new google.maps.Point(17, 34)
+        scaledSize: new google.maps.Size(35, 35)
+        #search_marker.setIcon(image)
+      search_marker.setPosition(place.geometry.location)
+      search_marker.setVisible(true)
+
+      address = ''
+      if place.address_components
+        address = [
+          (place.address_components[0] && place.address_components[0].short_name || ''),
+          (place.address_components[1] && place.address_components[1].short_name || ''),
+          (place.address_components[2] && place.address_components[2].short_name || '')
+        ].join(' ')
+      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address + '</div>')
+      infowindow.open(map, search_marker)
+    )
   )
 )

app/assets/javascripts/supplier/qsupplier.js.coffee

@@ -13,7 +13,8 @@ root.Qsupplier=
       else if(e.event == 'list_needs_payment')
         $('#list-needs-payment-indicator-'+e.data.id).removeClass('hide')
       else if(e.event == 'list_added')
-        $('#active-lists-table tbody').append @mustache('#active-list-template', new List(e.data))
+        list = new List(e.data)
+        $('#active-lists-table tbody').append @mustache('#active-list-template', list)
       else if e.event == 'list_update'
         list = new List(e.data)
         row = $('#list-row-'+list.id())
@@ -146,6 +147,8 @@ root.Qsupplier=
         if table.occupied then to.addClass('occupied') else to.removeClass('occupied')
         if table.needs_help then to.addClass('needs_help') else to.removeClass('needs_help')
         if table.needs_payment then to.addClass('needs_payment') else to.removeClass('needs_payment')
+        if table.active_order then to.addClass('active_order') else to.removeClass('active_order')
+
     )
   add_tables_to_active_section: ->
     number_start = $('#add-tables-number-start').val()

app/assets/javascripts/supplier/translations.js.erb

@@ -3,17 +3,18 @@ var $translations = {
     models: <%= I18n.t('activemodel.models', locale: :en).to_json %>,
     attributes: <%= I18n.t('activemodel.attributes', locale: :en).to_json %>,
     helpers: <%= I18n.t('helpers', locale: :en).to_json %>,
+    pagination: <%= I18n.t('views.pagination', locale: :en).to_json %>,
     <%= I18n.t('supplier', locale: :en).to_json[1..-2] %>
   },
   nl: {
     models: <%= I18n.t('activemodel.models', locale: :nl).to_json %>,
     attributes: <%= I18n.t('activemodel.attributes', locale: :nl).to_json %>,
     helpers: <%= I18n.t('helpers', locale: :nl).to_json %>,
+    pagination: <%= I18n.t('views.pagination', locale: :nl).to_json %>,
     <%= I18n.t('supplier', locale: :nl).to_json[1..-2] %>
   }
 }
 
-
 $transformation_mappings = {
   downcase: 'toLowerCase',
   upcase: 'toUpperCase'
@@ -29,6 +30,7 @@ function t(path, vars){
   } catch(err){ 
     result = parts[parts.length - 1].capitalize();
   }
+  if(result == '') return '';
   if(!result) return parts[parts.length - 1].capitalize(); 
   $.each(vars, function(v, value){ result = result.replace('%{'+v+'}', value)});
   isafety = 0;
@@ -61,10 +63,12 @@ function setTranslations(selector){
   if(selector){
     $(selector).find('[data-t]').each(function(){$(this).text(t($(this).data('t'), $(this).data('tAttributes')))})
   }else{
-    $('[data-t]').each(function(){$(this).text(t($(this).data('t'),$(this).data('tAttributes')))})
+    $('[data-t]').each(function(){$(this).html(t($(this).data('t'),$(this).data('tAttributes')))})
   }
   moment.lang($locale);
   $('[data-time]').each(function(){
     $(this).text(moment($(this).data('time')).format($(this).data('timeFormat') || 'dd D HH:MM'))
   })
+
+  $('.datepicker').datepicker("option", $.datepicker.regional[$locale])
 }