Dynamic tables

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

@@ -18,14 +18,6 @@ App.SectionController = Ember.ObjectController.extend
     addSection: -> @modal 'add_section', model: @get('model')
     addTables: -> @modal 'section_add_tables', model: @get('model')
     arrangeTables: -> @modal 'section_arrange_tables', model: @get('model')
-    editTable: (table)->
-      @modal 'edit_table',
-        model: table
-        title_path: 'table.edit.modal.title'
-        ok: ->
-          table.save()
-        close: ->
-          table.rollback()
     destroySection: ->
       @modal 'confirm',
         title_path: 'helpers.links.are_you_sure'

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

@@ -7,10 +7,6 @@ App.TablesIndexController = Ember.ArrayController.extend
       @modal 'table_edit',
         model: table
         close: -> table.deleteRecord()
-    editTable: (table)->
-      @modal 'table_edit',
-        model: table
-        close: -> table.rollback()
     destroyTable: (table)->
       @modal 'confirm',
         title: t('table.destroy.modal.title', number: table.get('number'))

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

@@ -1,8 +1,8 @@
 attr = DS.attr
 App.Table = DS.Model.extend
   number: attr 'number', defaultValue: 0
-  width: attr 'number', defaultValue: 1
+  width: attr 'number', defaultValue: 0.8
-  height: attr 'number', defaultValue: 1
+  height: attr 'number', defaultValue: 0.8
   position_x: attr 'number'
   position_y: attr 'number'
   # occupied: attr 'boolean'

app/assets/javascripts/supplier/app/routes/application_route.js.coffee.erb

@@ -102,6 +102,10 @@ App.ApplicationRoute = Ember.Route.extend
       new_rotation = 90 + record.get('rotation')
       new_rotation -= 360 if new_rotation >= 360
       record.set 'rotation', new_rotation
+    editTable: (table)->
+      @send 'openModal', 'table_edit',
+        model: table
+        close: -> table.rollback()
   events:
     list_needs_help: (data) ->
       if list = @store.getById('list', data.id)

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

@@ -5,6 +5,12 @@ p=t 'table.edit.modal.body_header'
 .form-row.section
   .form-label=t 'models.section'
   .form-field= view "select" content=sections selectionBinding="model.section" optionLabelPath="content.title" optionValuePath="content.id"
+.form-row.width
+  .form-label=t 'attributes.table.width'
+  .form-field= input type="number" valueBinding="model.width"
+.form-row.height
+  .form-label=t 'attributes.table.height'
+  .form-field= input type="number" valueBinding="model.height"
 hr
 button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
 button.modal-confirm.right{action "save"}=t 'section.add_tables.modal.add_button'

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

@@ -20,9 +20,13 @@ App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
     (@get('dpm') || 0) * (@get('content.position_y') || 0)
   ).property('dpm', 'content.position_y')
 
-  style: (->
+  myHeight: (-> Math.max((@get('dpm') || 0 ) * @get('content.height'), 60)).property('dpm', 'content.height')
-    "position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
+  myWidth: (-> Math.max((@get('dpm') || 0 ) * @get('content.width'), 60)).property('dpm', 'content.width')
-  ).property('offsetX', 'offsetY')
+  #style: (->
+    #"position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
+  #).property('offsetX', 'offsetY')
+  style: Ember.computed 'offsetX', 'offsetY', 'myWidth', 'myHeight', ->
+    "position:absolute;width:#{@get('myWidth')}px;height:#{@get('myHeight')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
 
   draggable: (->  if @get('controller.editmode') then 'true' else 'false' ).property('controller.editmode')
   placeInSection: ->
@@ -42,4 +46,7 @@ App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
     @$('.table-actions').hide()
     @$el.on 'click', =>
       # duplication of .table-actions because variable gets unshadowed
-      @$('.table-actions').toggle() if @$el.hasClass('occupied') and not @get('controller.editmode')
+      if @get('controller.editmode')
+        @get('controller').send 'editTable', @get('content')
+      else
+        @$('.table-actions').toggle() if @$el.hasClass('occupied')

app/assets/stylesheets/supplier/foundation1/components/_section_tables.css.sass

@@ -37,16 +37,20 @@
     cursor: pointer
     background-color: #ccc
     //TODO remove width and height for ember control
-    height: 48px
+    height: 60px
-    width: 83px
+    width: 60px
     background-repeat: no-repeat
-    box-shadow: 5px 5px 5px #888888
+    box-shadow: 2px 2px 4px #888888
     color: black
     border-radius: 3px
+    display: table
     .status-icons
       // float: right
       // width: 16px
+      position: absolute
       margin-top: -18px
+      right: 0
+      min-width: 60px
       .needs_help, .needs_payment, .occupied, .active_order
         display: none
         float: right
@@ -83,12 +87,15 @@
       margin-top: -45px
     .table-number
       color: black
-      position: absolute
+      //position: absolute
-      top: 0
+      display: table-cell
-      line-height: 44px
+      //top: 0
-      width: 45px
+      //line-height: 44px
-      font-size: 42px
+      width: 100%
+      height: 100%
+      font-size: 30px
       text-align: center
+      vertical-align: middle
 
     .action-button-container
       margin-right: -20px

app/controllers/suppliers/tables_controller.rb

@@ -94,7 +94,7 @@ module Suppliers
     private
 
     def table_params
-      permitted_attributes = [:number, :section_id, :position_x, :position_y]
+      permitted_attributes = [:number, :section_id, :position_x, :position_y, :width, :height]
       # do not raise in development and test for json communication
       if request.format.json?
         params.require(:table).slice(*permitted_attributes).permit!

app/models/table.rb

@@ -4,9 +4,11 @@ class Table
   per_page_method :limit_value #kaminari
 
   property :number, type: Fixnum, default: 1
-  property :position_x, type: Float
+  property :position_x, type: Float, default: 0
-  property :position_y, type: Float
+  property :position_y, type: Float, default: 0
-  property :needs_help, type: :boolean
+  property :needs_help, type: :boolean, default: false
+  property :width, type: Float, default: 0.8
+  property :height, type: Float, default: 0.8
 
   belongs_to :supplier
   belongs_to :section
@@ -96,16 +98,4 @@ class Table
   def name
     number
   end
-
-  # Method returning the sections table width
-  def width
-    2.0
-  end
-  def width=(val) end
-
-  # Method returning the sections table height
-  def height
-    2.0
-  end
-  def height=(val) end
 end