Ember2 progress

app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee

@@ -1,6 +1,6 @@
 App.BooleanSwitchComponent = Ember.Component.extend
+  layoutName: "form/boolean-switch"
   classNames: "switch"
-  templateName: "form/boolean-switch"
   classNameBindings: ['rounded:round']
 
   click: ->

app/assets/javascripts/supplier/app/components/section/area.js.coffee

@@ -1,4 +1,5 @@
 App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
+  layoutName: 'section/area'
   classNames: ['section-area-container']
   attributeBindings: ['style']
   classNameBindings: ['vertical', 'right_half:right-half', 'section_area.rounded:rounded']
@@ -6,8 +7,8 @@ App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
   pixelHeight: Ember.computed 'section_area.height', 'dpm', -> @get('dpm') * @get('section_area.height')
   offsetX: Ember.computed.product 'dpm', 'content.position_x'
   offsetY: Ember.computed.product 'dpm', 'content.position_y'
-  vertical: Ember.computed 'section_area.width', 'section_area.height', 'targetObject.editmode', ->
+  vertical: Ember.computed 'section_area.width', 'section_area.height', 'section.editmode', ->
-    not @get('targetObject.editmode') and @get('section_area.height') > @get('section_area.width')
+    not @get('section.editmode') and @get('section_area.height') > @get('section_area.width')
   right_half: Ember.computed 'section_area.position_x', 'section_area.width', 'section_area.sectino.width', ->
     @get('section_area.position_x') + (@get('section_area.width') / 2) > (@get('section_area.section.width') / 2)
   style: Ember.computed  'offsetX', 'offsetY', 'pixelWidth', 'pixelHeight', ->
@@ -19,8 +20,7 @@ App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
       "line-height": @get('pixelHeight')
     ).toString()
   content: Ember.computed.alias 'section_area'
-  draggable: (->  if @get('targetObject.editmode') then true else false ).property('targetObject.editmode')
+  draggable: (->  if @get('section.editmode') then true else false ).property('section.editmode')
-  dpm: Ember.computed.alias 'tablesContext.dpm'
   positionChange: (position)->
     dpm = @get('dpm')
     return if !dpm or parseFloat(dpm) is 0
@@ -28,7 +28,7 @@ App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
       position_x: position.left / dpm
       position_y: position.top / dpm
   click: ->
-    return unless @get('targetObject.editmode')
+    return unless @get('section.editmode')
     @modal 'section_area',
       title_path: 'section_area.modal.title'
       model: @get('section_area')

app/assets/javascripts/supplier/app/components/section/element.js.coffee

@@ -0,0 +1,40 @@
+App.SectionElementComponent = Ember.Component.extend DragNDrop.Draggable,
+  templateName: 'section/element'
+  classNames: ['section-element-container']
+  attributeBindings: ['style']
+  show_handles: false
+  classNameBindings: [
+    'uniqueClass'
+  ]
+  uniqueClass: (->
+    "section-element-#{@get('section_element.id')}"
+  ).property('section_element.id')
+  draggable: Ember.computed.alias 'section.editmode'
+  offsetX: (->
+    (@get('dpm') || 0) * (@get('section_element.position_x') || 0)
+  ).property('dpm', 'section_element.position_x')
+  offsetY: (->
+    return 0 unless dpm = @get('dpm')
+    dpm * (@get('section_element.position_y') || 0)
+  ).property('dpm', 'section_element.position_y', 'section_element.rotation')
+  #myHeight: (-> (@get('dpm') || 0 ) * @get('section_element.height')).property('dpm', 'section_element.height')
+  #myWidth: (-> (@get('dpm') || 0 ) * @get('section_element.width')).property('dpm', 'section_element.width')
+
+  # box size in dots [d]
+  box_size: (-> (@get('dpm') || 0 ) * @get('section_element.box_size')).property('dpm', 'section_element.box_size')
+  style: Ember.computed 'offsetX', 'offsetY', 'box_size', 'section_element.rotation', ->
+    "position:absolute;width:#{@get('box_size')}px;height:#{@get('box_size')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
+  positionChange: (position)->
+    dpm = @get('dpm')
+    return if !dpm or parseFloat(dpm) is 0
+    @get('section_element').setProperties
+      position_x: position.left / dpm
+      position_y: position.top / dpm
+  click: -> @toggleProperty('show_handles') if @get('section.editmode')
+  showHandles: Ember.computed.and 'show_handles', 'section.editmode'
+  actions:
+    rotateLeft: ->
+      @get('section_element').invoke "rotateLeft"
+    rotateRight: ->
+      @get('section_element').invoke "rotateRight"
+    removeSectionElement: -> @get('section_element').destroyRecord()

app/assets/javascripts/supplier/app/components/section/tab-header.js.coffee

@@ -0,0 +1,32 @@
+App.SectionTabHeaderComponent= Ember.Component.extend DragNDrop.Droppable,
+  layoutName: 'section/tab-header'
+  classNames: ['section-tab-header']
+  classNameBindings: ['section_header_class', 'section_active:active']
+  click: (e)->
+    @set 'globals.active_section', @get('section')
+    @get('targetObject').transitionToRoute 'section', @get('section.id')
+
+  section_header_class: (-> "section-tab-header-#{@get('section.id')}").property()
+  #dragEntered: (view)->
+    #@$().addClass('table-hover')
+    #return false
+    # Changing the route for now is too difficult. Just do a move
+    #if view.constructor.toString().match(/SectionTableView$/)
+      #@get('controller').transitionToRoute 'section', @get('section')
+  #dragLeft: -> @$().removeClass('table-hover')
+  #dropped: (view)->
+    #if view.constructor.toString().match(/SectionTableView$/)
+      #table = view.get('section')
+      #section =  @get('section')
+      #if section isnt table.get('section')
+        #section.get('tables').addObject table
+        #table.save()
+        #@get('controller').transitionToRoute 'section', section.get('id')
+  #didInsertElement: ->
+    #@$el = $ @get('element')
+
+  section_active: (->
+    current_section = @get('targetObject.model.id')
+    view_section = @get('section.id')
+    current_section == view_section
+  ).property('targetObject.model.id')

app/assets/javascripts/supplier/app/components/section/table.js.coffee

@@ -0,0 +1,58 @@
+App.SectionTableComponent = Ember.Component.extend DragNDrop.Draggable,
+  layoutName: 'section/table'
+  classNames: ['section-table']
+  attributeBindings: ['style']
+
+  # required bindings
+  dpm: 1
+  section: null
+  table: null
+
+  classNameBindings: [
+    'table.active_list.active:occupied',
+    'section.editmode:draggable',
+    'table.active_list.needs_help:needs_help',
+    'table.active_list.needs_payment:needs_payment',
+    'table.active_list.has_active_orders:active_order',
+    'uniqueClass'
+  ]
+  uniqueClass: (->
+    "section-table-#{@get('table.id')}"
+  ).property('table.id')
+  offsetX: (->
+    (@get('dpm') || 0) * (@get('table.position_x') || 0)
+  ).property('dpm', 'table.position_x')
+  offsetY: (->
+    (@get('dpm') || 0) * (@get('table.position_y') || 0)
+  ).property('dpm', 'table.position_y')
+
+  myHeight: (-> Math.max((@get('dpm') || 0 ) * @get('table.height'), 60)).property('dpm', 'table.height')
+  myWidth: (-> Math.max((@get('dpm') || 0 ) * @get('table.width'), 60)).property('dpm', 'table.width')
+  #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: Ember.computed.alias 'section.editmode'
+  positionChange: (position)->
+    dpm = @get('dpm')
+    return if !dpm or parseFloat(dpm) is 0
+
+    @get('table').setProperties
+      position_x: position.left / dpm
+      position_y: position.top / dpm
+    #@get('table').save()
+  click: (evt)->
+    evt.preventDefault()
+    if @get('section.editmode')
+      table = @get('table')
+      @modal 'table_edit',
+        model: table
+        close: -> table.rollback()
+    else
+      @$('.table-actions').toggle() if @$el.hasClass('occupied')
+    false
+  didInsertElement: ->
+    @$el = @$()
+    @$('.table-actions').hide()

app/assets/javascripts/supplier/app/components/section/tables.js.coffee

@@ -1,17 +1,17 @@
-App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
+App.SectionTablesComponent = Ember.Component.extend DragNDrop.Droppable,
   classNames: ['well', 'section-tables-container', 'section-tables-active']
-  classNameBindings: ['controller.editmode:editing']
+  classNameBindings: ['section.editmode:editing']
-  templateName: 'section/tables'
+  layoutName: 'section/tables'
   dpm: 1
-  dropped: (view, position)->
+  dropped: (component, position)->
-    view.positionChange(position, @get('content'))
+    component.positionChange(position, @get('section.tables'))
   handleDimensionChange: ->
     return unless @get('element')
     @$el = $(@get('element'))
     viewport_width = $(window).width()
     viewport_height = $(window).height() - 52
-    section_width = @get('controller.model.width')
+    section_width = @get('section.width')
-    section_height = @get('controller.model.height')
+    section_height = @get('section.height')
     dpm = viewport_width / section_width # try to fill the width
     if dpm * section_height > viewport_height
       # Height goes of the window, not what we want, adjust to fit height
@@ -22,9 +22,9 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
     @set 'dpm', dpm
   observeSectionDimensions: (->
     @handleDimensionChange()
-  ).observes('controller.model.height', 'controller.model.width')
+  ).observes('section.height', 'section.width')
   didInsertElement: ->
     # the first observable event is triggered without the container having its dimensions
-    @get('controller.model').notifyPropertyChange('width') #.notifyPropertyChange('height')
+    @get('section').notifyPropertyChange('width') #.notifyPropertyChange('height')
     that = this
     $(window).on 'orientationchange resize', -> Ember.run( -> that.handleDimensionChange())

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

@@ -1,5 +1,4 @@
 App.ApplicationController = Ember.Controller.extend
-  active_section: null
   flash_message: ''
   #init: ->
     #success = (supplier)=>

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

@@ -5,7 +5,7 @@ App.IndexController = Ember.Controller.extend
   lists: (-> @store.all('list')).property()
   orders: (-> @store.all('order')).property()
   sections: (-> @store.all('section')).property()
-  active_section: Ember.computed.alias 'controllers.application.active_section'
+  active_section: Ember.computed.alias 'globals.active_section'
   active_lists: (->
     if section_id = @get('active_section.id')
       lists = @get('lists').filter (l)=>( l.get('section.id') == section_id && l.get('state') == 'active' )

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

@@ -1,6 +1,6 @@
 App.modals.TableEditController = App.modals.BaseController.extend
   title_path: 'table.modal.title'
-  sections: (-> @store.all('section')).property()
+  sections: (-> @store.peekAll('section')).property()
   #setSelectedSection: (-> @set 'selectedSection', @get('model.section')).on('init')
   actions:
     confirm: ->

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

@@ -1,10 +1,9 @@
 App.SectionController = Ember.Controller.extend
   needs: ['application', 'sections', 'section'] #wtf? section, otherwise an Ember error
-  editmode: false
   actions:
-    makeEditable: -> @set('editmode', true)
+    makeEditable: -> @set('model.editmode', true)
     finishEditable: ->
-      @set('editmode', false)
+      @set('model.editmode', false)
       @get('model').save()
       @get('model.tables').filterProperty('hasDirtyAttributes').invoke 'save'
       @get('model.section_elements').filterProperty('hasDirtyAttributes').invoke 'save'
@@ -26,7 +25,7 @@ App.SectionController = Ember.Controller.extend
           section_area.deleteRecord()
         else
           section_area.rollback()
-      @set('editmode', false)
+      @set('model.editmode', false)
     addSection: -> @modal 'add_section', model: @get('model')
     addTables: -> @modal 'section_add_tables', model: @get('model')
     arrangeTables: -> @modal 'section_arrange_tables', model: @get('model')
@@ -43,7 +42,7 @@ App.SectionController = Ember.Controller.extend
     addSectionArea: ->
       section_area = @store.createRecord('section-area')
       section_area.set 'section', @get('model')
-      @set 'editmode', true
+      #@set 'model.editmode', true
       @modal 'section_area',
         title_path: 'section_area.add_button'
         model: section_area
@@ -53,7 +52,6 @@ App.SectionController = Ember.Controller.extend
             section_area.deleteRecord()
           else
             section_area.rollback()
-    removeSectionElement: (section_element)-> section_element.destroyRecord()
   textures: ['wood1', 'wood2']
 
   sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')

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

@@ -10,5 +10,5 @@ App.SectionsIndexController = Ember.Controller.extend
   actions:
     addSection: -> @modal 'add_section', model: @get('model')
     goToSection: (section)->
-      @set 'controllers.application.active_section', section
+      @set 'globals.active_section', section
       @transitionToRoute 'section', section.id

app/assets/javascripts/supplier/app/initializers/globals.js.coffee

@@ -2,6 +2,7 @@ Globals = Ember.Object.extend
   current_employee: null
   current_supplier: null
   isDragging: false
+  active_section: null
 App.initializer
   name: 'injectCurrent'
   initialize: (container, app)->

app/assets/javascripts/supplier/app/mixins/drag_n_drop.js.coffee

@@ -10,7 +10,7 @@ DragNDrop.Draggable = Ember.Mixin.create
   attributeBindings: 'draggable'
   draggable: 'true'
   dragStart: (ev)->
-    @set 'content.isDragging', true
+    @set 'isDragging', true
     @set 'globals.isDragging', true
     localStorage.setItem('draggingView', @get('elementId'))
     dataTransfer = ev.originalEvent.dataTransfer
@@ -23,7 +23,7 @@ DragNDrop.Draggable = Ember.Mixin.create
       pageX: ev.originalEvent.pageX
       pageY: ev.originalEvent.pageY
   dragEnd: (e)->
-    @set 'content.isDragging', false
+    @set 'isDragging', false
     @set 'globals.isDragging', false
     localStorage.removeItem 'draggingView' if localStorage.getItem 'draggingView'
   touchStart: (ev)->

app/assets/javascripts/supplier/app/mixins/rotation.js.coffee

@@ -0,0 +1,9 @@
+App.Rotation = Ember.Mixin.create
+  rotateLeft: ->
+    new_rotation = -90 + @get('rotation')
+    new_rotation += 360 if new_rotation < 0
+    @set 'rotation', new_rotation
+  rotateRight: ->
+    new_rotation = 90 + @get('rotation')
+    new_rotation -= 360 if new_rotation >= 360
+    @set 'rotation', new_rotation

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

@@ -1,5 +1,5 @@
 attr = DS.attr
-App.SectionElement = DS.Model.extend App.SvgElementMixin,
+App.SectionElement = DS.Model.extend App.SvgElementMixin, App.Rotation,
   position_x: attr 'number', defaultValue: 0
   position_y: attr 'number', defaultValue: 0
   rotation: attr 'number', defaultValue: 0

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

@@ -6,6 +6,9 @@ App.Section = DS.Model.extend
   tables: DS.hasMany('table')
   section_elements: DS.hasMany('section-element')
   section_areas: DS.hasMany('section-area')
+
+  editmode: false
+
   arrange_tables_in_grid: (tables)->
     epsilon = 1e-10
     tables ||= @get('tables').sortBy('number')

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

@@ -81,19 +81,18 @@ App.ApplicationRoute = Ember.Route.extend
     newOrder: (order_id)->
       @store.findById('order', order_id).then (order)=>
         controller = @controllerFor('application')
-        return if controller.get('active_section.id') and order.get('section.id') isnt controller.get('active_section.id')
+        return if @get('globals.active_section.id') and order.get('section.id') isnt @get('globals.active_section.id')
         $('body').addClass('new-order')
         controller.set 'flash_message', order.get('display_with_table')
         setTimeout (-> $('body').removeClass('new-order')), 4000
         try ion.sound.play('water_droplet')
     showDashboardOrders: (section)->
-      @controllerFor('application').set 'active_section', section
+      @set('globals.active_section', section)
       @transitionTo 'index'
     markSupplierClosed: ->
       return unless @get('globals.current_employee.manager')
-      controller = @controllerFor('application')
       return unless supplier = @get('globals.current_supplier')
-      controller.modal 'confirm',
+      @send 'openModal', 'confirm',
         title_path: 'supplier.close_for_orders_confirmation'
         model: supplier
         ok: -> supplier.close()
@@ -101,14 +100,6 @@ App.ApplicationRoute = Ember.Route.extend
       return unless @get('globals.current_employee.manager')
       return unless supplier = @get('globals.current_supplier')
       supplier.open_the_place()
-    rotateLeft: (record)->
-      new_rotation = -90 + record.get('rotation')
-      new_rotation += 360 if new_rotation < 0
-      record.set 'rotation', new_rotation
-    rotateRight: (record)->
-      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
@@ -117,14 +108,12 @@ App.ApplicationRoute = Ember.Route.extend
     list_needs_help: (data) ->
       if list = @store.getById('list', data.id)
         list.isNeedingHelp()
-        controller = @controllerFor('application')
+        return if @get('globals.active_section.id') and list.get('section.id') isnt @get('globals.active_section.id')
-        return if controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
         try ion.sound.play 'bell_ring'
     list_needs_payment: (data) ->
       if list = @store.getById('list', data.id)
         list.isNeedingPayment()
-        controller = @controllerFor('application')
+        return if @get('globals.active_section.id') and list.get('section.id') isnt @get('globals.active_section.id')
-        return if controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
         try ion.sound.play 'water_droplet_3'
     list_is_paid: (data) -> list.isPaid() if list = @store.getById('list', data.id)
     list_update: (data) ->

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

@@ -1,5 +1,5 @@
 .row: .small-12.columns
-  = sections-header sectionBinding="controller.controllers.application.active_section"
+  = sections-header section=globals.active_section
   can "manage" globals.current_supplier
     unless globals.current_supplier.open
       .alert-box.alert.radius data-alert=true
@@ -7,8 +7,8 @@
         a{ action "markSupplierOpen" }= t 'supplier.open_for_orders'
   .page-header
     div.dashboard-section-selection
-      /App.HomeSectionSelectorView selectionBinding="controller.controllers.application.active_section" content=controller.sections prompt=globals.current_supplier.name
+      /App.HomeSectionSelectorView selectionBinding="globals.active_section" content=controller.sections prompt=globals.current_supplier.name
-      /= home-section-selector sectionBinding="controller.controllers.application.active_section"
+      /= home-section-selector sectionBinding="globals.active_section"
       /= view "home-section-jumper"
     if active_lists.length
       h3.dashboard-lists-header{action "toggleDashboardLists"}

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

@@ -1,20 +1,24 @@
 p= t 'section_area.modal.explanation'
 .form-row.title
   .form-label=t 'attributes.section_area.title'
-  .form-field
+  .form-field= input value=model.title
-    = input valueBinding="model.title"
   .form-info
-    span.dimension m
     = errors model.errors.title
 .form-row.width
   .form-label=t 'attributes.section_area.width'
-  .form-field= input type="number" valueBinding="model.width"
+  .form-field= input type="number" value=model.width
+  .form-info
+    span.dimension m
+    = errors model.errors.width
 .form-row.height
   .form-label=t 'attributes.section_area.height'
-  .form-field= input type="number" valueBinding="model.height"
+  .form-field= input type="number" value=model.height
+  .form-info
+    span.dimension m
+    = errors model.errors.height
 .form-row.rounded
   .form-label= t 'attributes.section_area.rounded'
-  .form-field= view "boolean-switch" value=model.rounded
+  .form-field= boolean-switch value=model.rounded
 hr
 button.modal-close{action "close"}=t 'section_area.modal.close_button'
 button.modal-confirm.right{action "save"} disabled=model.isInvalid

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

@@ -1,13 +1,15 @@
 .section-tabs-container
   = link-to 'sections' class="goto-sections-index-tab-header": span
   each sections as |section|
-    = view "section-tab-header" context=section
+    = section-tab-header section=section
   can "manage" "sections"
     a.add-section{action "addSection"}: span
 .section-manage-tables.pull-right
+  unless model.editmode
     a.go-to-orders-list{ action "showDashboardOrders" model }: span
   can "manage" "sections"
-    if editmode
+    if model.editmode
+      a.section-rollback-button{ action "rollbackEditable" }: span
       = input type="text" value=model.title class="section-edit-title-field"
       = number-field numericValue=model.width class="dimension section-edit-width-field"
       span.fa.fa-lg.fa-times
@@ -20,11 +22,10 @@
           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
+= section-tables section=model

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

@@ -0,0 +1,6 @@
+= svg section_element.svg width=section_element.box_width height=section_element.box_height rotation=section_element.rotation
+if showHandles
+  .section-element-handles.handles-inside-draggable
+    a.rotate-left{action "rotateLeft" bubbles=false}: span.icon
+    a.rotate-right{action "rotateRight" bubbles=false}: span.icon
+    a.remove-section-element{action "removeSectionElement" bubbles=false}: span.icon

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

@@ -1,6 +0,0 @@
-= svg view.content.svg width=view.content.box_width height=view.content.box_height rotation=view.content.rotation
-if view.showHandles
-  .section-element-handles.handles-inside-draggable
-    a.rotate-left{action "rotateLeft" view.content bubbles=false}: span.icon
-    a.rotate-right{action "rotateRight" view.content bubbles=false}: span.icon
-    a.remove-section-element{action "removeSectionElement" view.content bubbles=false}: span.icon

app/assets/javascripts/supplier/app/templates/section/tab-header.emblem

@@ -0,0 +1 @@
+= section.title

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

@@ -1,24 +1,24 @@
-.table-number= view.content.number
+.table-number= table.number
-unless editmode
+unless section.editmode
   .status-icons
     span.needs_payment
     span.needs_help
     span.active_order
-if view.content.active_list
+if table.active_list
   div.table-actions
     .title= table.number
-    if view.content.active_list
+    if table.active_list
       .table-action-row
-        /= view "mark-list-helped-button" view.contentBinding="table.active_list"
+        /= view "mark-list-helped-button" tableBinding="table.active_list"
-        = button-mark-list-helped content=view.content.active_list
+        = button-mark-list-helped content=table.active_list
-        /= view "close-list-button" view.contentBinding="table.active_list"
+        /= view "close-list-button" tableBinding="table.active_list"
-        = button-close-list content=view.content.active_list
+        = button-close-list content=table.active_list
-    each view.content.active_list.active_orders as |order|
+    each table.active_list.active_orders as |order|
       .table-action-row= order.display_tag
     .table-action-row.total
-      = link-to "list" view.content.active_list
+      = link-to "list" table.active_list.id
-        =currency view.content.active_list.total
+        =currency table.active_list.total
     /.table-action-row
       a{action "editTable" table}: span.fa.fa-lg.fa-wrench
-    each view.content.active_list.users as |user|
+    each table.active_list.users as |user|
       = user.avatar_tag

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

@@ -1,6 +1,6 @@
-each model.section_elements as |section_element|
+each section.section_elements as |section_element|
-  view "section-element" content=section_element tablesContext=view
+  = section-element section_element=section_element section=section dpm=dpm
-each model.section_areas as |section_area|
+each section.section_areas as |section_area|
-  = section-area section_area=section_area tablesContext=view
+  = section-area section_area=section_area section=section dpm=dpm
-each model.tables as |table|
+each section.tables as |table|
-  = view "section-table" content=table tablesContext=view
+  = section-table table=table section=section dpm=dpm

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

@@ -1 +0,0 @@
-= title

app/assets/javascripts/supplier/app/templates/tables/index.emblem

@@ -11,7 +11,7 @@
       tbody
         each tables as |table|
           tr
-            td: link-to 'table' table: span= table.number
+            td= link-to 'table' table: span= table.number
             td.link
               if table.section
                 = link-to 'section' table.section

app/assets/javascripts/supplier/app/views/section/section-element.js.coffee

@@ -1,36 +0,0 @@
-App.SectionElementView = Ember.View.extend DragNDrop.Draggable,
-  templateName: 'section/section-element'
-  classNames: ['section-element-container']
-  attributeBindings: ['style']
-  show_handles: false
-  classNameBindings: [
-    'uniqueClass'
-  ]
-  uniqueClass: (->
-    "section-element-#{@get('content.id')}"
-  ).property('content.id')
-  draggable: Ember.computed.alias 'context.editmode'
-  offsetX: (->
-    (@get('dpm') || 0) * (@get('content.position_x') || 0)
-  ).property('dpm', 'content.position_x')
-  offsetY: (->
-    return 0 unless dpm = @get('dpm')
-    dpm * (@get('content.position_y') || 0)
-  ).property('dpm', 'content.position_y', 'content.rotation')
-  targetObject: Ember.computed.alias 'controller'
-  #myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
-  #myWidth: (-> (@get('dpm') || 0 ) * @get('content.width')).property('dpm', 'content.width')
-
-  # box size in dots [d]
-  box_size: (-> (@get('dpm') || 0 ) * @get('content.box_size')).property('dpm', 'content.box_size')
-  style: Ember.computed 'offsetX', 'offsetY', 'box_size', 'content.rotation', ->
-    "position:absolute;width:#{@get('box_size')}px;height:#{@get('box_size')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
-  dpm: Ember.computed.alias 'tablesContext.dpm'
-  positionChange: (position)->
-    dpm = @get('dpm')
-    return if !dpm or parseFloat(dpm) is 0
-    @get('content').setProperties
-      position_x: position.left / dpm
-      position_y: position.top / dpm
-  click: -> @toggleProperty('show_handles')
-  showHandles: Ember.computed.and 'show_handles', 'controller.editmode'

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

@@ -1,53 +0,0 @@
-App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
-  templateName: 'section/table'
-  classNames: ['section-table']
-  attributeBindings: ['style']
-  classNameBindings: [
-    'content.active_list.active:occupied',
-    'controller.editmode:draggable',
-    'content.active_list.needs_help:needs_help',
-    'content.active_list.needs_payment:needs_payment',
-    'content.active_list.has_active_orders:active_order',
-    'uniqueClass'
-  ]
-  uniqueClass: (->
-    "section-table-#{@get('content.id')}"
-  ).property('content.id')
-  offsetX: (->
-    (@get('dpm') || 0) * (@get('content.position_x') || 0)
-  ).property('dpm', 'content.position_x')
-  offsetY: (->
-    (@get('dpm') || 0) * (@get('content.position_y') || 0)
-  ).property('dpm', 'content.position_y')
-
-  myHeight: (-> Math.max((@get('dpm') || 0 ) * @get('content.height'), 60)).property('dpm', 'content.height')
-  myWidth: (-> Math.max((@get('dpm') || 0 ) * @get('content.width'), 60)).property('dpm', 'content.width')
-  #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: Ember.computed.alias 'context.editmode'
-  targetObject: Ember.computed.alias 'controller'
-  placeInSection: ->
-    @$el.css 'left', @offsetX()
-    @$el.css 'top', @offsetY()
-  positionChange: (position)->
-    dpm = @get('dpm')
-    return if !dpm or parseFloat(dpm) is 0
-
-    @get('content').setProperties
-      position_x: position.left / dpm
-      position_y: position.top / dpm
-    #@get('content').save()
-  dpm: Ember.computed.alias 'tablesContext.dpm'
-  didInsertElement: ->
-    @$el = @$()
-    @$('.table-actions').hide()
-    @$el.on 'click', =>
-      # duplication of .table-actions because variable gets unshadowed
-      if @get('controller.editmode')
-        @get('controller').send 'editTable', @get('content')
-      else
-        @$('.table-actions').toggle() if @$el.hasClass('occupied')

app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee

@@ -1,32 +0,0 @@
-App.SectionTabHeaderView = Ember.View.extend DragNDrop.Droppable,
-  templateName: 'section_tab_header'
-  classNames: ['section-tab-header']
-  classNameBindings: ['section_header_class', 'controller.globals.isDragging:table-dragging', 'section_active']
-  click: (e)->
-    @set 'controller.controllers.application.active_section', @get('context')
-    @get('controller').transitionToRoute 'section', @get('context.id')
-
-  section_header_class: (-> "section-tab-header-#{@get('context.id')}").property()
-  dragEntered: (view)->
-    @$().addClass('table-hover')
-    return false
-    # Changing the route for now is too difficult. Just do a move
-    #if view.constructor.toString().match(/SectionTableView$/)
-      #@get('controller').transitionToRoute 'section', @get('content')
-  dragLeft: -> @$().removeClass('table-hover')
-  dropped: (view)->
-    if view.constructor.toString().match(/SectionTableView$/)
-      table = view.get('content')
-      section =  @get('context')
-      if section isnt table.get('section')
-        section.get('tables').addObject table
-        table.save()
-        @get('controller').transitionToRoute 'section', section.get('id')
-  didInsertElement: ->
-    @$el = $ @get('element')
-
-  section_active: (->
-    current_section = @get('controller.controllers.section.content.id')
-    view_section = @get('context.id')
-    if current_section == view_section then 'active' else ''
-  ).property('controller.controllers.section.content.id')

app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.sass

@@ -1253,6 +1253,8 @@ $alert-color: #ee3e41
       font-weight: bold
       padding-left: 10px
       color: white
+.switch
+  margin-bottom: 0
 
 $button-margin: rem-calc(10)
 $button-qr-code-color: #555

app/assets/stylesheets/supplier/foundation1/_qsections.sass

@@ -1,4 +1,6 @@
 .section-edit-mode-button
+  +push-button($bg: $secondary-color)
+  color: $warning-color
   margin-left: 5px
   span
     @extend .fa
@@ -6,12 +8,17 @@
     @extend .fa-edit
 .section-normal-mode-button
   margin-left: 5px
+  +push-button($bg: $secondary-color)
+  color: $success-color
   span
     @extend .fa
     @extend .fa-lg
     @extend .fa-save
 .section-rollback-button
   margin-left: 5px
+  margin-right: 12px
+  +push-button($bg: $secondary-color)
+  color: $warning-color
   span
     @extend .fa
     @extend .fa-lg
@@ -32,6 +39,7 @@
 .section-manage-tables
   .dropdown-container
     margin-right: 10px
+    margin-left: 10px
     .section-destroy
       color: $alert-color
   input

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

@@ -7,7 +7,7 @@
   font-size: 24px
   padding: 4px 0px
 .section-manage-tables
-  margin: -26px 6px 4px 6px
+  margin: -40px 6px 4px 6px
   min-width: 470px
   text-align: right
   .section-edit-title-field