business times: write changes to @options.hours

app/assets/javascripts/app/controllers/_ui_element/business_hours.js.coffee

@@ -1,6 +1,9 @@
 class App.UiElement.business_hours
   @render: (attribute, params) ->
 
+    # Martin: our frontend doesn't create 24:00. 
+    # you have to check second values ('till') for 00:00 
+    # and convert them to 24:00
     hours =
       mon:
         active: true
@@ -25,8 +28,9 @@ class App.UiElement.business_hours
         ]
       fri:
         active: true
-        timeframes:
+        timeframes: [
           ['09:00','17:00']
+        ]
       sat:
         active: false
         timeframes: [

app/assets/javascripts/app/lib/app_post/business_hours.js.coffee

@@ -30,9 +30,18 @@ class App.BusinessHours extends Spine.Controller
 
     @html html
 
-    @$('.js-time').timepicker
-      showMeridian: false # meridian = am/pm
-      tillMidnight: true
+    @$('.js-time')
+      .timepicker
+        showMeridian: false # meridian = am/pm
+      .on 'changeTime.timepicker', @onTimeChange
+
+  onTimeChange: (event) =>
+    input = @$(event.currentTarget)
+    day = input.attr('data-day')
+    slot = input.attr('data-slot')
+    i = input.attr('data-i')
+    console.log "something changed", event.time
+    @options.hours[day].timeframes[slot][i] = "#{event.time.hours}:#{event.time.minutes}"
 
   addTime: (event) =>
     day = @$(event.currentTarget).attr('data-day')

app/assets/javascripts/app/views/generic/business_hours.jst.eco

@@ -13,15 +13,15 @@
     <% end %>
 </thead>
 <tbody>
-  <% for i in [0..@maxTimeframes-1]: %>
+  <% for slot in [0..@maxTimeframes-1]: %>
   <tr>
     <% for id, day of @days: %>
-      <% if @hours[id].timeframes[i]: %>
-      <td data-day="<%- id %>" class="form-group day-time<%- ' is-active' if @hours[id].active %>">
+      <% if @hours[id].timeframes[slot]: %>
+      <td data-day="<%- id %>" data-slot="<%- slot %>" class="form-group day-time<%- ' is-active' if @hours[id].active %>">
         <label for="<%- id %>_start_time">from</label>
-        <input type="text" id="<%- id %>_start_time" value="<%- @hours[id].timeframes[i][0] %>" class="form-control form-control--small time js-time">
+        <input type="text" id="<%- id %>_start_time" value="<%- @hours[id].timeframes[slot][0] %>" data-day="<%- id %>" data-slot="<%- slot %>" data-i="0" class="form-control form-control--small time js-time">
         <label for="monday_end_time">till</label>
-        <input type="text" id="monday_end_time" value="<%- @hours[id].timeframes[i][1] %>" class="form-control form-control--small time js-time">
+        <input type="text" id="monday_end_time" value="<%- @hours[id].timeframes[slot][1] %>" data-day="<%- id %>" data-slot="<%- slot %>" data-i="1" class="form-control form-control--small time js-time">
       <% else: %>
       <td class="empty-cell">
       <% end %>