Better product time selection for supplier products view

app/assets/stylesheets/supplier/products_preview.css.sass

@@ -0,0 +1,17 @@
+.products_preview-date
+  .products_preview-time-container
+  float: left
+  input
+    width: 120px
+.products_preview-hour
+  float: left
+  margin-left: 10px
+  select
+    width: 50px
+  &:after
+    content: " :"
+.products_preview-minute
+  float: left
+  margin-left: 10px
+  select
+    width: 50px

app/assets/stylesheets/supplier/structure.css.sass

@@ -56,3 +56,5 @@ form
   &.form-inline
     display: inline-block
     padding: 4px
+.clear
+  clear: both

app/controllers/suppliers/products_controller.rb

@@ -86,7 +86,8 @@ module Suppliers
     end
 
     def preview_products
-      @time = Time.parse(params[:date]) rescue Time.now
+      #TODO: time zone correction, since the hour and minute are of the supplier time zone, not the system time zone
+      @time = Time.parse("#{params[:date]}T#{params[:hour]}:#{params[:minute]}:00") rescue Time.now
       product_categories = ProductCategory.for_supplier_in_time(current_supplier, @time)
       render json: {categories: product_categories.map(&:to_client_format).select(&:present?)}
     end

app/views/suppliers/products/index.html.slim

@@ -30,7 +30,11 @@
   /a.btn.btn-primary data-t="helpers.links.new" href=new_suppliers_product_path
 .span4
   h4 data-t='product.preview.header'= t('supplier.product.preview.header')
-  input#product_preview_date.datepicker type="text" value=Date.today.strftime('%Y-%m-%d')
+  .products_preview-time-container
+    .products_preview-date= text_field_tag :date, Date.today.iso8601, class: 'datepicker'
+    .products_preview-hour= select_tag :preview_hour, options_for_select(0..23)
+    .products_preview-minute= select_tag :preview_minute, options_for_select(1..60)
+    .clear
   p data-t='product.preview.description'= t('supplier.product.preview.description')
   .well
     table#products-table
@@ -38,12 +42,21 @@
 script#products-category-template[type="text/html"]= mustache_template 'user/products_category'
 - onload_javascript do
   javascript:
+    var now = new Date();
+    //var hour = now.getHours();
+    //var minute = now.getMinutes();
+    $('.products_preview-hour select').val(now.getHours());
+    $('.products_preview-minute select').val(now.getMinutes());
+
     function update_preview_products(){
-      var date = $('#product_preview_date').val();
+      var date = $('.products_preview-date input').val();
       var body = $('#products-table tbody');
-      body.html('<tr><td>"#{spinner}"</td></tr>');
+      var hour = $('.products_preview-hour select').val()
+      var minute = $('.products_preview-minute select').val()
+
+      body.html('<tr><td>#{spinner}</td></tr>');
       if(!date) return;
-      $.get('#{preview_products_suppliers_products_path(format: :json)}', {date: date}, function(res){
+      $.get('#{preview_products_suppliers_products_path(format: :json)}', {date: date, hour: hour, minute: minute}, function(res){
         var i,j, category, obj, result_html;
         body.find('tr').remove();
         for(i=0; i < res.categories.length; i++){
@@ -59,6 +72,6 @@ script#products-category-template[type="text/html"]= mustache_template 'user/pro
       })
     }
     update_preview_products();
-    $('#product_preview_date').change(function(){
-      update_preview_products();   
+    $('.products_preview-date input,.products_preview-hour select,.products_preview-minute select').change(function(){
+      update_preview_products();
     })