Client side table management for supplier sections

app/assets/javascripts/supplier/app/controllers/modals/section_add_tables_controller.js.coffee

@@ -1,7 +1,13 @@
 App.modals.SectionAddTablesController = App.modals.BaseController.extend
   number_start: 100
-  number_end: 107
+  number_end: 100
   title_path: 'section.add_tables.modal.title'
+  #number_start: Ember.computed
+    #get: ->
+      #@_super() || 100
+    #set: (key, value)->
+      #@set 'number_end', value if value
+      #@_super()
   actions:
     addTables: ->
       s = parseInt(@get('number_start'))
@@ -15,11 +21,14 @@ App.modals.SectionAddTablesController = App.modals.BaseController.extend
         e = @get('number_end')
       number_of_tables = 1 + e - s
       return @set('alert_message', t('section.add_tables.modal.too_many', count: number_of_tables)) if number_of_tables > 10
+      for number in [s..e]
+        @store.createRecord 'table', number: number, section: @get('model')
 
-      Ember.$.post Routes.add_tables_suppliers_section_path(@get('model.id')),
-        number_start: s
-        number_end: e
-      , (result,state,xhr)=>
-        #@store.pushPayload 'table', result
-        @store.pushPayload result
-        @send 'close'
+      @send 'close'
+      #Ember.$.post Routes.add_tables_suppliers_section_path(@get('model.id')),
+        #number_start: s
+        #number_end: e
+      #, (result,state,xhr)=>
+      ## @store.pushPayload 'table', result
+        #@store.pushPayload result
+        #@send 'close'

app/assets/javascripts/supplier/app/controllers/modals/section_arrange_tables_controller.js.coffee

@@ -20,14 +20,23 @@ App.modals.SectionArrangeTablesController = App.modals.BaseController.extend
   actions:
     arrangeTables: ->
       return unless @isValid()
-      Ember.$.post Routes.arrange_tables_suppliers_section_path(@get('model.id')),
-        option: @get('arrange_type')
-        row_count: @get('row_count')
-        column_count: @get('column_count')
-      , (result,state,xhr)=>
-        @store.pushPayload result
-        @send 'close'
-        return
+      #Ember.$.post Routes.arrange_tables_suppliers_section_path(@get('model.id')),
+        #option: @get('arrange_type')
+        #row_count: @get('row_count')
+        #column_count: @get('column_count')
+      #, (result,state,xhr)=>
+        #@store.pushPayload result
+        #@send 'close'
+        #return
+      switch @get('arrange_type')
+        when 'by_row'
+          @get('model').invoke 'arrange_tables_in_rows_of', parseInt(@get('row_count'))
+        when 'by_column'
+          @get('model').invoke 'arrange_tables_in_columns_of', parseInt(@get('column_count'))
+        else
+          @get('model').invoke 'arrange_tables_in_grid'
+      @send 'close'
+
     makeDistributed: ->
       @set 'arrange_type', 'distributed'
       @set 'alert_message', ''

app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee

@@ -6,10 +6,16 @@ App.SectionController = Ember.Controller.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
+      @get('model.tables').filterProperty('hasDirtyAttributes').invoke 'save'
       @get('model.section_elements').filterProperty('hasDirtyAttributes').invoke 'save'
       @get('model.section_areas').filterProperty('hasDirtyAttributes').invoke 'save'
     rollbackEditable: ->
       @get('model').rollback()
+      @get('model.tables').forEach (table) ->
+        if table.get('isNew')
+          table.deleteRecord()
+        else
+          table.rollback()
       @get('model.section_elements').forEach (section_element) ->
         if section_element.get('isNew')
           section_element.deleteRecord()

app/assets/javascripts/supplier/app/helpers/distribute_lattice.js.coffee

@@ -0,0 +1,36 @@
+class Distribution
+  ##
+  # Distribute a section of width w and height h in a length and a width scale
+  # that makes n tables fit.
+  #   distribute_lattice 10, 10, 3 #=> [5.0, 5.0]
+  #   distribute_lattice 10, 10, 4 #=> [5.0, 5.0]
+  ##
+  distribute_lattice: (w, h, n)->
+    epsilon = 1e-10
+    w = parseFloat(w)
+    h = parseFloat(h)
+    n = parseInt(n)
+    area = w*h
+    l = Math.sqrt(area/n)
+    nx = w/l
+    ny = h/l
+    while Math.floor(w/l + epsilon) * Math.floor(h/l + epsilon) < n
+      tx = w/l
+      ty = h/l
+      # The biggest remainder is closest to a fitting option
+      # Just add one if no remainder wins and it still is not enough
+      if (tx % 1) < epsilon and (ty % 1) < epsilon
+        # Both divide, but there is no solution yet. Just add one
+        l = Math.max(Math.round(w/(tx + 1)), Math.round(h/(ty + 1)))
+        nx = Math.ceil(tx)
+        ny = Math.ceil(ny)
+      else if (tx % 1) > (ty % 1)
+        nx = Math.ceil(tx)
+        ny = Math.ceil(n/nx)
+        l = w/nx
+      else
+        ny = Math.ceil(ty)
+        nx = Math.ceil(n/ny)
+        l = h/ny
+    [w/nx, h/ny]
+App.Distribution = new Distribution()

app/assets/javascripts/supplier/app/models/section.js.coffee

@@ -6,3 +6,61 @@ App.Section = DS.Model.extend
   tables: DS.hasMany('table')
   section_elements: DS.hasMany('section-element')
   section_areas: DS.hasMany('section-area')
+  arrange_tables_in_grid: (tables)->
+    epsilon = 1e-10
+    tables ||= @get('tables').sortBy('number')
+    w = parseFloat(@get('width'))
+    h = parseFloat(@get('height'))
+    n = parseInt(tables.get('length'))
+    unless w > 0 and h > 0 and n > 0
+      console.log "Cannot arrange tables in grid since not all conditions are met"
+      return false
+    [lx, ly] = App.Distribution.distribute_lattice(w, h, n)
+    return unless lx > 0 and ly > 0
+    console.log "Distributing tables in grid using lx: #{lx}, ly: #{ly}"
+    x0 = lx/2
+    x = x0
+    y = ly/2
+    tables.forEach (table)->
+      if x > w + (1e4*epsilon) # New row,  error = epsilon times possible tables in a row
+        x = x0
+        y += ly
+      table.set 'position_x', x - table.get('width')/2 # Starting point of square + half the square (center) minus half the table size
+      table.set 'position_y', y - table.get('height')/2
+      x += lx
+  arrange_tables_in_rows_of: (n, tables)->
+    return false unless n
+    n = parseInt(n)
+    return false unless n > 0
+    tables ||= @get('tables').sortBy('number')
+    width = parseFloat(@get('width'))
+    height = parseFloat(@get('height'))
+    dx = width / n
+    dy = height / Math.ceil(tables.get('length')/n)
+    x = 0.0
+    y = 0.0
+    tables.forEach (table, i)->
+      table.set 'position_x', x + (dx/2) - (table.get('width')/2)
+      table.set 'position_y', y + (dy/2) - (table.get('height')/2)
+      x += dx
+      if (i + 1) % n  is 0
+        x = 0.0
+        y += dy
+  arrange_tables_in_columns_of: (n, tables)->
+    return false unless n
+    n = parseInt(n)
+    return false unless n > 0
+    tables ||= @get('tables').sortBy('number')
+    width = parseFloat(@get('width'))
+    height = parseFloat(@get('height'))
+    dx = width / Math.ceil(tables.get('length') / n)
+    dy = height / n
+    x = 0.0
+    y = 0.0
+    tables.forEach (table, i)->
+      table.set 'position_x', x + (dx/2) - (table.get('width')/2)
+      table.set 'position_y', y + (dy/2) - (table.get('height')/2)
+      y += dy
+      if (i + 1) % n  is 0
+        y = 0.0
+        x += dx

app/assets/javascripts/supplier/app/templates/modals/section_add_tables.emblem

@@ -5,12 +5,12 @@ form.form-horizontal
     .form-label
       label for='add-tables-number-start'
         =t 'section.add_tables.modal.number_start'
-    .form-field= number-field numericValue=number_start
+    .form-field= number-field value=number_start
   .form-row
     .form-label
       label for='add-tables-number-end'
         =t 'section.add_tables.modal.number_end'
-    .form-field= number-field numericValue=number_end
+    .form-field= number-field value=number_end
 hr
 button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
-button.modal-confirm.right{action "ok"}=t 'section.add_tables.modal.add_button'
+button.modal-confirm.right{action "addTables"}=t 'section.add_tables.modal.add_button'

app/assets/javascripts/supplier/app/templates/section.emblem

@@ -12,9 +12,6 @@
       = number-field numericValue=model.width class="dimension section-edit-width-field"
       span.fa.fa-lg.fa-times
       = number-field numericValue=model.height class="dimension section-edit-height-field"
-      a.section-rollback-button{ action "rollbackEditable" }: span
-      a.section-normal-mode-button{ action "finishEditable" }: span
-    else
       = dropdown-link title="Action"
         ul
           li: a{action "addTables"}: span.section-add-tables-icon=t 'section.add_tables.button_label'
@@ -23,5 +20,11 @@
           li: a{action "addSectionArea"}: span.section-add-section-area-icon= t 'section_area.add_button'
           li= qr-codes-link section=content: span.qr-icon= t 'table.print_qr_codes'
           li: a.section-destroy{action "destroySection"}: span.section-remove-icon=t 'helpers.links.destroy'
+      a.section-rollback-button{ action "rollbackEditable" }: span
+      a.section-normal-mode-button{ action "finishEditable" }: span
+    else
+      = dropdown-link title="Action"
+        ul
+          li= qr-codes-link section=content: span.qr-icon= t 'table.print_qr_codes'
       a.section-edit-mode-button{ action "makeEditable" }: span
 = view "section-tables" content=model.tables

app/assets/javascripts/supplier/app/views/section/table_view.js.coffee

@@ -40,7 +40,7 @@ App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
     @get('content').setProperties
       position_x: position.left / dpm
       position_y: position.top / dpm
-    @get('content').save()
+    #@get('content').save()
   dpm: Ember.computed.alias 'tablesContext.dpm'
   didInsertElement: ->
     @$el = @$()