From 2df1b38e8fb7b72c218be7ddf6ef56af17831bc0 Mon Sep 17 00:00:00 2001
From: Benjamin ter Kuile <bterkuile@gmail.com>
Date: Mon, 17 Aug 2015 15:13:31 +0200
Subject: [PATCH] Ember2 progress

---
 .../components/form/boolean-switch.js.coffee  |  2 +-
 .../app/components/section/area.js.coffee     | 10 ++--
 .../app/components/section/element.js.coffee  | 40 +++++++++++++
 .../components/section/tab-header.js.coffee   | 32 ++++++++++
 .../app/components/section/table.js.coffee    | 58 +++++++++++++++++++
 .../section/tables.js.coffee                  | 18 +++---
 .../application_controller.js.coffee          |  1 -
 .../controllers/index_controller.js.coffee    |  2 +-
 .../modals/table_edit_controller.js.coffee    |  2 +-
 .../controllers/section_controller.js.coffee  | 10 ++--
 .../sections_index_controller.js.coffee       |  2 +-
 .../app/initializers/globals.js.coffee        |  1 +
 .../supplier/app/mixins/drag_n_drop.js.coffee |  4 +-
 .../supplier/app/mixins/rotation.js.coffee    |  9 +++
 .../app/models/section-element.js.coffee      |  2 +-
 .../supplier/app/models/section.js.coffee     |  3 +
 .../routes/application_route.js.coffee.erb    | 21 ++-----
 .../supplier/app/templates/index.emblem       |  6 +-
 .../app/templates/modals/section_area.emblem  | 16 +++--
 .../supplier/app/templates/section.emblem     | 11 ++--
 .../area.emblem}                              |  0
 .../app/templates/section/element.emblem      |  6 ++
 .../templates/section/section-element.emblem  |  6 --
 .../app/templates/section/tab-header.emblem   |  1 +
 .../app/templates/section/table.emblem        | 24 ++++----
 .../app/templates/section/tables.emblem       | 12 ++--
 .../app/templates/section_tab_header.emblem   |  1 -
 .../app/templates/tables/index.emblem         |  2 +-
 .../views/section/section-element.js.coffee   | 36 ------------
 .../app/views/section/table_view.js.coffee    | 53 -----------------
 .../views/section_tab_header_view.js.coffee   | 32 ----------
 .../_foundation_and_overrides.sass            |  2 +
 .../supplier/foundation1/_qsections.sass      |  8 +++
 .../components/_section_tables.sass           |  2 +-
 34 files changed, 229 insertions(+), 206 deletions(-)
 create mode 100644 app/assets/javascripts/supplier/app/components/section/element.js.coffee
 create mode 100644 app/assets/javascripts/supplier/app/components/section/tab-header.js.coffee
 create mode 100644 app/assets/javascripts/supplier/app/components/section/table.js.coffee
 rename app/assets/javascripts/supplier/app/{views => components}/section/tables.js.coffee (64%)
 create mode 100644 app/assets/javascripts/supplier/app/mixins/rotation.js.coffee
 rename app/assets/javascripts/supplier/app/templates/{components/section-area.emblem => section/area.emblem} (100%)
 create mode 100644 app/assets/javascripts/supplier/app/templates/section/element.emblem
 delete mode 100644 app/assets/javascripts/supplier/app/templates/section/section-element.emblem
 create mode 100644 app/assets/javascripts/supplier/app/templates/section/tab-header.emblem
 delete mode 100644 app/assets/javascripts/supplier/app/templates/section_tab_header.emblem
 delete mode 100644 app/assets/javascripts/supplier/app/views/section/section-element.js.coffee
 delete mode 100644 app/assets/javascripts/supplier/app/views/section/table_view.js.coffee
 delete mode 100644 app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee

diff --git a/app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee b/app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee
index 5fe0a5a4..b658e69c 100644
--- a/app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee
+++ b/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: ->
diff --git a/app/assets/javascripts/supplier/app/components/section/area.js.coffee b/app/assets/javascripts/supplier/app/components/section/area.js.coffee
index 9a3bb342..3163aea6 100644
--- a/app/assets/javascripts/supplier/app/components/section/area.js.coffee
+++ b/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', ->
-    not @get('targetObject.editmode') and @get('section_area.height') > @get('section_area.width')
+  vertical: Ember.computed 'section_area.width', 'section_area.height', 'section.editmode', ->
+    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')
-  dpm: Ember.computed.alias 'tablesContext.dpm'
+  draggable: (->  if @get('section.editmode') then true else false ).property('section.editmode')
   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')
diff --git a/app/assets/javascripts/supplier/app/components/section/element.js.coffee b/app/assets/javascripts/supplier/app/components/section/element.js.coffee
new file mode 100644
index 00000000..3a03f9e6
--- /dev/null
+++ b/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()
diff --git a/app/assets/javascripts/supplier/app/components/section/tab-header.js.coffee b/app/assets/javascripts/supplier/app/components/section/tab-header.js.coffee
new file mode 100644
index 00000000..42c90728
--- /dev/null
+++ b/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')
diff --git a/app/assets/javascripts/supplier/app/components/section/table.js.coffee b/app/assets/javascripts/supplier/app/components/section/table.js.coffee
new file mode 100644
index 00000000..d047e53a
--- /dev/null
+++ b/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()
diff --git a/app/assets/javascripts/supplier/app/views/section/tables.js.coffee b/app/assets/javascripts/supplier/app/components/section/tables.js.coffee
similarity index 64%
rename from app/assets/javascripts/supplier/app/views/section/tables.js.coffee
rename to app/assets/javascripts/supplier/app/components/section/tables.js.coffee
index 9e8b3575..65e435ec 100644
--- a/app/assets/javascripts/supplier/app/views/section/tables.js.coffee
+++ b/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']
-  templateName: 'section/tables'
+  classNameBindings: ['section.editmode:editing']
+  layoutName: 'section/tables'
   dpm: 1
-  dropped: (view, position)->
-    view.positionChange(position, @get('content'))
+  dropped: (component, position)->
+    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_height = @get('controller.model.height')
+    section_width = @get('section.width')
+    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())
diff --git a/app/assets/javascripts/supplier/app/controllers/application_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/application_controller.js.coffee
index cb195733..fb96570c 100644
--- a/app/assets/javascripts/supplier/app/controllers/application_controller.js.coffee
+++ b/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)=>
diff --git a/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee
index 5641b8a4..ffb4b21f 100644
--- a/app/assets/javascripts/supplier/app/controllers/index_controller.js.coffee
+++ b/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' )
diff --git a/app/assets/javascripts/supplier/app/controllers/modals/table_edit_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modals/table_edit_controller.js.coffee
index cedcac8c..e699a5c2 100644
--- a/app/assets/javascripts/supplier/app/controllers/modals/table_edit_controller.js.coffee
+++ b/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: ->
diff --git a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
index 26bd6c0b..29ff1e9a 100644
--- a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
+++ b/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')
diff --git a/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee
index 3434f5c6..200db8e2 100644
--- a/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee
+++ b/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
diff --git a/app/assets/javascripts/supplier/app/initializers/globals.js.coffee b/app/assets/javascripts/supplier/app/initializers/globals.js.coffee
index 74480eac..5322700b 100644
--- a/app/assets/javascripts/supplier/app/initializers/globals.js.coffee
+++ b/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)->
diff --git a/app/assets/javascripts/supplier/app/mixins/drag_n_drop.js.coffee b/app/assets/javascripts/supplier/app/mixins/drag_n_drop.js.coffee
index 7c6d91fc..8b648525 100644
--- a/app/assets/javascripts/supplier/app/mixins/drag_n_drop.js.coffee
+++ b/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)->
diff --git a/app/assets/javascripts/supplier/app/mixins/rotation.js.coffee b/app/assets/javascripts/supplier/app/mixins/rotation.js.coffee
new file mode 100644
index 00000000..ca60bab5
--- /dev/null
+++ b/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
diff --git a/app/assets/javascripts/supplier/app/models/section-element.js.coffee b/app/assets/javascripts/supplier/app/models/section-element.js.coffee
index dc9d2a08..a1b112a7 100644
--- a/app/assets/javascripts/supplier/app/models/section-element.js.coffee
+++ b/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
diff --git a/app/assets/javascripts/supplier/app/models/section.js.coffee b/app/assets/javascripts/supplier/app/models/section.js.coffee
index d30b0a07..09a40d46 100644
--- a/app/assets/javascripts/supplier/app/models/section.js.coffee
+++ b/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')
diff --git a/app/assets/javascripts/supplier/app/routes/application_route.js.coffee.erb b/app/assets/javascripts/supplier/app/routes/application_route.js.coffee.erb
index c68ff2b6..fb5d687d 100644
--- a/app/assets/javascripts/supplier/app/routes/application_route.js.coffee.erb
+++ b/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 controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
+        return if @get('globals.active_section.id') and list.get('section.id') isnt @get('globals.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 controller.get('active_section.id') and list.get('section.id') isnt controller.get('active_section.id')
+        return if @get('globals.active_section.id') and list.get('section.id') isnt @get('globals.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) ->
diff --git a/app/assets/javascripts/supplier/app/templates/index.emblem b/app/assets/javascripts/supplier/app/templates/index.emblem
index 8f9b0450..bfa167ae 100644
--- a/app/assets/javascripts/supplier/app/templates/index.emblem
+++ b/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
-      /= home-section-selector sectionBinding="controller.controllers.application.active_section"
+      /App.HomeSectionSelectorView selectionBinding="globals.active_section" content=controller.sections prompt=globals.current_supplier.name
+      /= home-section-selector sectionBinding="globals.active_section"
       /= view "home-section-jumper"
     if active_lists.length
       h3.dashboard-lists-header{action "toggleDashboardLists"}
diff --git a/app/assets/javascripts/supplier/app/templates/modals/section_area.emblem b/app/assets/javascripts/supplier/app/templates/modals/section_area.emblem
index fd2bdae3..68e60456 100644
--- a/app/assets/javascripts/supplier/app/templates/modals/section_area.emblem
+++ b/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
-    = input valueBinding="model.title"
+  .form-field= input value=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
diff --git a/app/assets/javascripts/supplier/app/templates/section.emblem b/app/assets/javascripts/supplier/app/templates/section.emblem
index 5eed1a10..c83943ad 100644
--- a/app/assets/javascripts/supplier/app/templates/section.emblem
+++ b/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
-  a.go-to-orders-list{ action "showDashboardOrders" model }: span
+  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
diff --git a/app/assets/javascripts/supplier/app/templates/components/section-area.emblem b/app/assets/javascripts/supplier/app/templates/section/area.emblem
similarity index 100%
rename from app/assets/javascripts/supplier/app/templates/components/section-area.emblem
rename to app/assets/javascripts/supplier/app/templates/section/area.emblem
diff --git a/app/assets/javascripts/supplier/app/templates/section/element.emblem b/app/assets/javascripts/supplier/app/templates/section/element.emblem
new file mode 100644
index 00000000..09c0c32a
--- /dev/null
+++ b/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
diff --git a/app/assets/javascripts/supplier/app/templates/section/section-element.emblem b/app/assets/javascripts/supplier/app/templates/section/section-element.emblem
deleted file mode 100644
index 6921dfc6..00000000
--- a/app/assets/javascripts/supplier/app/templates/section/section-element.emblem
+++ /dev/null
@@ -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
diff --git a/app/assets/javascripts/supplier/app/templates/section/tab-header.emblem b/app/assets/javascripts/supplier/app/templates/section/tab-header.emblem
new file mode 100644
index 00000000..6db55c1a
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/section/tab-header.emblem
@@ -0,0 +1 @@
+= section.title
diff --git a/app/assets/javascripts/supplier/app/templates/section/table.emblem b/app/assets/javascripts/supplier/app/templates/section/table.emblem
index fb3a77fc..e895af94 100644
--- a/app/assets/javascripts/supplier/app/templates/section/table.emblem
+++ b/app/assets/javascripts/supplier/app/templates/section/table.emblem
@@ -1,24 +1,24 @@
-.table-number= view.content.number
-unless editmode
+.table-number= table.number
+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"
-        = button-mark-list-helped content=view.content.active_list
-        /= view "close-list-button" view.contentBinding="table.active_list"
-        = button-close-list content=view.content.active_list
-    each view.content.active_list.active_orders as |order|
+        /= view "mark-list-helped-button" tableBinding="table.active_list"
+        = button-mark-list-helped content=table.active_list
+        /= view "close-list-button" tableBinding="table.active_list"
+        = button-close-list content=table.active_list
+    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
-        =currency view.content.active_list.total
+      = link-to "list" table.active_list.id
+        =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
diff --git a/app/assets/javascripts/supplier/app/templates/section/tables.emblem b/app/assets/javascripts/supplier/app/templates/section/tables.emblem
index 899b8bd6..3e39934d 100644
--- a/app/assets/javascripts/supplier/app/templates/section/tables.emblem
+++ b/app/assets/javascripts/supplier/app/templates/section/tables.emblem
@@ -1,6 +1,6 @@
-each model.section_elements as |section_element|
-  view "section-element" content=section_element tablesContext=view
-each model.section_areas as |section_area|
-  = section-area section_area=section_area tablesContext=view
-each model.tables as |table|
-  = view "section-table" content=table tablesContext=view
+each section.section_elements as |section_element|
+  = section-element section_element=section_element section=section dpm=dpm
+each section.section_areas as |section_area|
+  = section-area section_area=section_area section=section dpm=dpm
+each section.tables as |table|
+  = section-table table=table section=section dpm=dpm
diff --git a/app/assets/javascripts/supplier/app/templates/section_tab_header.emblem b/app/assets/javascripts/supplier/app/templates/section_tab_header.emblem
deleted file mode 100644
index 3c034d92..00000000
--- a/app/assets/javascripts/supplier/app/templates/section_tab_header.emblem
+++ /dev/null
@@ -1 +0,0 @@
-= title
diff --git a/app/assets/javascripts/supplier/app/templates/tables/index.emblem b/app/assets/javascripts/supplier/app/templates/tables/index.emblem
index 00de37db..5f47ac74 100644
--- a/app/assets/javascripts/supplier/app/templates/tables/index.emblem
+++ b/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
diff --git a/app/assets/javascripts/supplier/app/views/section/section-element.js.coffee b/app/assets/javascripts/supplier/app/views/section/section-element.js.coffee
deleted file mode 100644
index 4451e3b9..00000000
--- a/app/assets/javascripts/supplier/app/views/section/section-element.js.coffee
+++ /dev/null
@@ -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'
diff --git a/app/assets/javascripts/supplier/app/views/section/table_view.js.coffee b/app/assets/javascripts/supplier/app/views/section/table_view.js.coffee
deleted file mode 100644
index bd5c0fb6..00000000
--- a/app/assets/javascripts/supplier/app/views/section/table_view.js.coffee
+++ /dev/null
@@ -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')
diff --git a/app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee
deleted file mode 100644
index 83e30b73..00000000
--- a/app/assets/javascripts/supplier/app/views/section_tab_header_view.js.coffee
+++ /dev/null
@@ -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')
diff --git a/app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.sass b/app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.sass
index 83ebab54..e8d365dd 100644
--- a/app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.sass
+++ b/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
diff --git a/app/assets/stylesheets/supplier/foundation1/_qsections.sass b/app/assets/stylesheets/supplier/foundation1/_qsections.sass
index c36fa350..52007c03 100644
--- a/app/assets/stylesheets/supplier/foundation1/_qsections.sass
+++ b/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
diff --git a/app/assets/stylesheets/supplier/foundation1/components/_section_tables.sass b/app/assets/stylesheets/supplier/foundation1/components/_section_tables.sass
index ae2b8de8..fd438f94 100644
--- a/app/assets/stylesheets/supplier/foundation1/components/_section_tables.sass
+++ b/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