Add section elements

Gemfile

@@ -1,3 +1,4 @@
+source 'https://rails-assets.org'
 source 'https://rubygems.org'
 
 gem 'rails', '4.2.0'
@@ -41,6 +42,7 @@ group :assets do
   gem 'ember-validations-rails'
 
   gem 'foundation-rails' #, github: 'bterkuile/foundation-rails'
+  gem 'ace-rails-ap'
   #gem 'mustache' #, :require => 'mustache/railtie'
 end
 
@@ -87,12 +89,17 @@ gem 'iso_country_codes'
 group :user_app do
   gem 'pry-rails'
 end
+
 group :development, :test do
   gem 'rspec-rails'
   gem 'pry-rails'
+  gem 'test_squad'
+  gem 'rails-assets-qunit'
+  gem 'rails-assets-ember-qunit'
+  gem 'factory_girl_rails'
 end
+
 group :development do
-  #gem 'pry-remote'
   gem 'quiet_assets'
   gem 'letter_opener'
   # gem 'thin'
@@ -117,7 +124,6 @@ group :test do
   gem 'webmock'
   #gem 'rb-fsevent', :require => false #if RUBY_PLATFORM =~ /darwin/i
   gem 'simplecov', require: false
-  gem 'factory_girl_rails'
 end
 
 # Use unicorn as the app server
@@ -129,3 +135,7 @@ end
 
 # To use debugger
 # gem 'debugger'
+
+group :development, :test do
+  gem 'rails-assets-qunit'
+end

Gemfile.lock

@@ -44,8 +44,10 @@ GIT
       rails
 
 GEM
+  remote: https://rails-assets.org/
   remote: https://rubygems.org/
   specs:
+    ace-rails-ap (3.0.2)
     actionmailer (4.2.0)
       actionpack (= 4.2.0)
       actionview (= 4.2.0)
@@ -329,6 +331,8 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 4.2.0)
       sprockets-rails
+    rails-assets-ember-qunit (0.2.10)
+    rails-assets-qunit (1.17.1)
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
     rails-dom-testing (1.0.5)
@@ -421,6 +425,8 @@ GEM
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
     temple (0.7.5)
+    test_squad (0.0.1)
+      rails
     thor (0.19.1)
     thread_safe (0.3.4)
     tilt (1.4.1)
@@ -455,6 +461,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  ace-rails-ap
   active_attr
   active_decorator
   active_model_serializers (= 0.9.0)
@@ -499,6 +506,8 @@ DEPENDENCIES
   quiet_assets
   rack-cors
   rails (= 4.2.0)
+  rails-assets-ember-qunit
+  rails-assets-qunit
   rqrcode
   rspec-its
   rspec-rails
@@ -509,6 +518,7 @@ DEPENDENCIES
   slim-rails
   spring
   spring-commands-rspec
+  test_squad
   turnip
   uglifier (>= 1.0.3)
   web-console (~> 2.0.0)

app/abilities/admin/ability.rb

@@ -0,0 +1,6 @@
+class Admin::Ability
+  include CanCan::Ability
+  def initialize(administrator)
+    can :manage, :all
+  end
+end

app/assets/javascripts/admin/application.js.coffee

@@ -1,6 +1,12 @@
-#= require jquery
+# require jquery
-#= require jquery_ujs
+# require jquery_ujs
-#= require foundation
+# require foundation
+#= require coffee-script
+#= require snap.svg.js
+#= require ace/ace
+#= require ace/theme-monokai
+#= require ace/mode-coffee
+#= require_tree .
 #= require_self
-$ ->
+#$ ->
-  $(document).foundation()
+#  $(document).foundation()

app/assets/javascripts/admin/svg_element/svg_element.js.coffee

@@ -0,0 +1,91 @@
+class SvgElementClass
+  setup: (container)->
+    if container
+      @text_field = container.find('.snap-code-editor')
+    else
+      @text_field = $('.snap-code-editor')
+    @text_field.change => @compileSource()
+    target = @text_field.data('target')
+    @target = target
+    container = @
+    ace_div = $('<div></div>').attr('id', 'ace-div').html @text_field.val()
+    ace_div.css
+      width: '100%'
+      height: '500px'
+    @text_field.after(ace_div)
+
+    #ACE
+    @editor = ace.edit('ace-div')
+    @editor.setTheme 'ace/theme/monokai'
+    @editor.getSession().setMode 'ace/mode/coffee'
+    @editor.getSession().on 'change', (e)=>
+      @text_field.val(@editor.getValue()).change()
+    @text_field.hide()
+
+    @svg_code_field = $('#svg_element_svg')
+    $(target).on "DOMSubtreeModified", =>
+      @svg_code_field.val $(target).html()
+
+    @box_width = $('#svg_element_box_width')
+    @box_height = $('#svg_element_box_height')
+    @dpm = $('#svg_element_dpm')
+
+    @box_width.change(->
+      $(target).attr 'width', $(@).val()
+      container.compileSource()
+    ).change()
+    @box_height.change(->
+      $(target).attr 'height', $(@).val()
+      container.compileSource()
+    ).change()
+    @dpm.change(->
+      return unless dpm = $(@).val()
+      if pheight = container.box_height.val()
+        height = Math.round(10 * pheight / dpm)/10
+        $('.box_height .attribute-info').html "#{height}&nbsp;<i>m</i>"
+
+      if pwidth = container.box_width.val()
+        width = Math.round(10 * pwidth / dpm)/10
+        $('.box_width .attribute-info').html "#{width}&nbsp;<i>m</i>"
+
+    ).change()
+    $(target).css('border', '1px solid black')
+    @compileSource()
+  compileSource: ->
+    source = @text_field.val()
+    results = $(@text_field.data('preview'))
+    window.compiledJS = ''
+    try
+      window.compiledJS = CoffeeScript.compile source, bare: on
+      el = results[0]
+      if el.innerText
+        el.innerText = window.compiledJS
+      else
+        results.text(window.compiledJS)
+      results.removeClass 'error'
+      window.evaluator = new SnapDsl(window.compiledJS, target: @target)
+      evaluator.result()
+      $('.minibutton.run').removeClass 'error'
+    catch {location, message}
+      if location?
+        message = "Error on line #{location.first_line + 1}: #{message}"
+      results.text(message).addClass 'error'
+      $('.minibutton.run').addClass 'error'
+class SnapDsl
+  constructor: (code, options = {})->
+    @js_code = code
+    @options = options
+    @t = $(options.target)
+    @width = @t.width()
+    @height = @t.height()
+    $(options.target).html('')
+  result: ->
+    @snap = Snap(@options.target)
+    s = @snap
+    try
+      eval @js_code
+    catch
+      @t.html('cannot render')
+
+@SvgElement = new SvgElementClass()
+$ -> SvgElement.setup()

app/assets/javascripts/supplier/app/application.js.coffee

@@ -6,6 +6,7 @@
 #= require_directory ./modifications
 #= require shared-ember-helpers/all
 #= require ./app
+#= require_directory ./mixins
 #= require ./controllers/modals/base_controller
 #= require ion.sound
 #= require_tree .

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

@@ -0,0 +1,10 @@
+App.modals.AddSectionElementController = @App.modals.BaseController.extend
+  title_path: 'section_element.modal.title'
+  svg_elements: (-> @store.find 'svg_element').property()
+  actions:
+    addSectionElement: (svg_element)->
+      section_element = @store.createRecord 'section_element'
+      section_element.copy_values svg_element
+      section_element.set 'section', @get('model')
+      @send 'ok'
+

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

@@ -6,8 +6,14 @@ App.SectionController = Ember.ObjectController.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
+      @get('model.section_elements').forEach (section_element) -> section_element.save()
     rollbackEditable: ->
-      @get('model').rollback()
+      @get('model').rollback().then =>
+        @get('model.section_elements').forEach (section_element) ->
+          if section_element.get('id')
+            section_element.rollback()
+          else
+            section_element.deleteRecord()
       @set('editmode', false)
     addSection: -> @modal 'add_section', model: @get('model')
     addTables: -> @modal 'section_add_tables', model: @get('model')
@@ -26,6 +32,10 @@ App.SectionController = Ember.ObjectController.extend
         ok: =>
           @get('model').destroyRecord()
           @transitionToRoute 'sections'
+    addSectionElement: ->
+      @modal 'add_section_element',
+        model: @get('model')
+        ok: => @send 'makeEditable'
   textures: ['wood1', 'wood2']
 
   sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')

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

@@ -9,13 +9,20 @@ DragNDrop = Ember.Namespace.create
 DragNDrop.Draggable = Ember.Mixin.create
   attributeBindings: 'draggable'
   draggable: 'true'
-  dragStart: (e)->
+  dragStart: (ev)->
     @set 'content.isDragging', true
     @set 'controller.isDragging', true
     @set 'controller.controllers.application.isDragging', true
     localStorage.setItem('draggingView', @get('elementId'))
-    dataTransfer = e.originalEvent.dataTransfer
+    dataTransfer = ev.originalEvent.dataTransfer
-    dataTransfer.setData 'Text', @get('elementId')
+    #dataTransfer.setData 'Text', @get('elementId')
+    offset = $(ev.target).offset()
+    dataTransfer.setData 'application/json', JSON.stringify
+      id: @get('elementId')
+      elementX: (ev.originalEvent.offsetX || ev.originalEvent.clientX) - offset.left
+      elementY: (ev.originalEvent.offsetY || ev.originalEvent.clientY) - offset.top
+      pageX: ev.originalEvent.pageX
+      pageY: ev.originalEvent.pageY
   dragEnd: (e)->
     @set 'content.isDragging', false
     @set 'controller.isDragging', false
@@ -36,17 +43,22 @@ DragNDrop.Droppable = Ember.Mixin.create
   dragLeave: ->
     if @dragLeft
       @dragLeft()
-  drop: (e)->
+  drop: (ev)->
     # e.preventDefault()
-    viewId = e.originalEvent.dataTransfer.getData('Text')
+    data = JSON.parse(ev.originalEvent.dataTransfer.getData('application/json'))
-    view = Ember.View.views[viewId]
+    view = Ember.View.views[data.id]
     return unless view
-    view.dragEnd(e) if view.dragEnd # not triggered on its own on drop
+    view.dragEnd(ev) if view.dragEnd # not triggered on its own on drop
 
     # Calculate the element's center drop position relative to container
+    el = $(view.get('element'))
+    offset = el.offset()
+    parentOffset = el.offsetParent().offset()
+    newX = offset.left - parentOffset.left + ev.originalEvent.pageX - data.pageX
+    newY = offset.top - parentOffset.top + ev.originalEvent.pageY - data.pageY
     position =
-      left: Math.max(e.originalEvent.pageX - view.$el.offsetParent().offset().left - (view.$el.outerWidth()/2), 0)
+      left: Math.max(newX, 0)
-      top:  Math.max(e.originalEvent.pageY - view.$el.offsetParent().offset().top - (view.$el.outerHeight()/2), 0)
+      top:  Math.max(newY, 0)
 
     @dropped view, position if @dropped
     @dragLeft() if @dragLeft # not triggered by system itself in case of drop

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

@@ -0,0 +1,4 @@
+Ember.Handlebars.helper 'svg', (content, options)->
+  width = options.hash.width8 || '100%'
+  height = options.hash.height8 || '100%'
+  "<svg width='#{width}' height='#{height}' viewBox='0 0 155 310'><g transform=''>#{content}</g></svg>".htmlSafe()

app/assets/javascripts/supplier/app/mixins/svg-element.js.coffee

@@ -0,0 +1,19 @@
+attr = DS.attr
+App.SvgElementMixin = Ember.Mixin.create
+  name: attr 'string'
+  dpm: attr 'number'
+  box_width: attr 'number'
+  box_height: attr 'number'
+  svg: attr('string')
+
+  width: Ember.computed 'dpm', 'box_width', ->
+    (@get('box_width') || 0 ) / (@get('dpm') || 1)
+  height: Ember.computed 'dpm', 'box_height', ->
+    (@get('box_height') || 0 ) / (@get('dpm') || 1)
+
+  copy_values: (similar_object)->
+    @set 'name', similar_object.get('name')
+    @set 'dpm', similar_object.get('dpm')
+    @set 'box_width', similar_object.get('box_width')
+    @set 'box_height', similar_object.get('box_height')
+    @set 'svg', similar_object.get('svg')

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

@@ -0,0 +1,6 @@
+attr = DS.attr
+App.SectionElement = DS.Model.extend App.SvgElementMixin,
+  position_x: attr 'number', defaultValue: 0
+  position_y: attr 'number', defaultValue: 0
+  rotation: attr 'number', defaultValue: 0
+  section: DS.belongsTo('section')

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

@@ -4,3 +4,4 @@ App.Section = DS.Model.extend
   width: attr 'number'
   height: attr 'number'
   tables: DS.hasMany('table')
+  section_elements: DS.hasMany('section_element')

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

@@ -0,0 +1,2 @@
+attr = DS.attr
+App.SvgElement = DS.Model.extend App.SvgElementMixin

app/assets/javascripts/supplier/app/routes/sections_route.js.coffee

@@ -1,4 +1,6 @@
 App.SectionsRoute = Ember.Route.extend
+  beforeModel: ->
+    @store.find 'section_element'
   model: ->  @store.all 'section'
 
   # setupController: (controller, collection) ->

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

@@ -0,0 +1,7 @@
+p Add those elements!
+ul
+  each svg_element in svg_elements
+    li: a{action "addSectionElement" svg_element}= svg_element.name
+
+hr
+button.modal-close{action "close"}=t 'section.add_section.modal.close_button'

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

@@ -20,6 +20,7 @@
           li: a{action "addTables"}: span.section-add-tables-icon=t 'section.add_tables.button_label'
           li: a{action "arrangeTables"}: span.section-arrange-tables-icon=t 'section.arrange_tables.modal.title'
           li: a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" target="_blank": span.qr-icon=t 'table.print_qr_codes'
+          li: a{action "addSectionElement"}: span.section-add-section-element-icon= t 'section_element.add_butoon'
           li: a.section-destroy{action "destroySection"}: span.section-remove-icon=t 'helpers.links.destroy'
       a.section-edit-mode-button{ action "makeEditable" }: span
 = view "section-tables" contentBinding="tables"

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

@@ -0,0 +1 @@
+= svg view.content.svg width=view.content.box_width height=view.content.box_height

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

@@ -0,0 +1,4 @@
+each element in section_elements
+  view "section-element" content=element
+each table in tables
+  = view "section-table" content=table

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

@@ -1,2 +0,0 @@
-each table in tables
-  = view "section-table" content=table

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

@@ -0,0 +1,39 @@
+App.SectionElementView = Ember.View.extend DragNDrop.Draggable,
+  templateName: 'section/section-element'
+  classNames: ['section-element']
+  attributeBindings: ['style']
+  classNameBindings: [
+    'uniqueClass'
+  ]
+  uniqueClass: (->
+    "section-element-#{@get('content.id')}"
+  ).property('content.id')
+  draggable: (->  if @get('controller.editmode') then 'true' else 'false' ).property('controller.editmode')
+  offsetX: (->
+    (@get('dpm') || 0) * (@get('content.position_x') || 0)
+  ).property('dpm', 'content.position_x')
+  offsetY: (->
+    return 0 unless dpm = @get('dpm')
+    offset = dpm * (@get('content.position_y') || 0)
+    switch @get('content.rotation')
+      when 90 then offset - (dpm * @get('content.width')) / 2
+      when 270 then offset - (dpm * @get('content.width')) / 2
+      else offset
+  ).property('dpm', 'content.position_y', 'content.rotation')
+  myHeight: (-> (@get('dpm') || 0 ) * @get('content.height')).property('dpm', 'content.height')
+  myWidth: (-> (@get('dpm') || 0 ) * @get('content.width')).property('dpm', 'content.width')
+  style: Ember.computed 'offsetX', 'offsetY', 'myWidth', 'myHeight', 'content.rotation', ->
+    "position:absolute;width:#{@get('myWidth')}px;height:#{@get('myHeight')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px;transform:rotate(#{@get('content.rotation')}deg)"
+  dpm: Ember.computed.alias 'parentView.dpm'
+  positionChange: (position)->
+    dpm = @get('dpm')
+    return if !dpm or parseFloat(dpm) is 0
+
+    @get('content').setProperties
+      position_x: Math.round(10 * position.left / dpm ) / 10
+      position_y: Math.round(10 * position.top / dpm ) / 10
+  click: ->
+    return unless @get('controller.editmode')
+    new_rotation = 90 + @get('content.rotation')
+    new_rotation -= 360 if new_rotation >= 360
+    @set 'content.rotation', new_rotation

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

@@ -0,0 +1,45 @@
+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')
+
+  style: (->
+    "position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
+  ).property('offsetX', 'offsetY')
+
+  draggable: (->  if @get('controller.editmode') then 'true' else 'false' ).property('controller.editmode')
+  placeInSection: ->
+    @$el.css 'left', @offsetX()
+    @$el.css 'top', @offsetY()
+  positionChange: (position)->
+    dpm = @get('dpm')
+    return if !dpm or parseFloat(dpm) is 0
+
+    @content.setProperties
+      position_x: position.left / dpm
+      position_y: position.top / dpm
+    @content.save()
+  dpm: Ember.computed.alias 'parentView.dpm'
+  didInsertElement: ->
+    @$el = @$()
+    @$('.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')

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

@@ -1,8 +1,7 @@
 App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
   classNames: ['well', 'section-tables-container', 'section-tables-active']
-  templateName: 'section_tables'
+  templateName: 'section/tables'
-  element_width: 0
+  dpm: 1
-  element_height: 0
   didInsertElement: ->
     @$el = $(@get('element'))
     height = @$el.width() * @get('controller.model.height') / @get('controller.model.width')
@@ -13,20 +12,16 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
     return unless @get('element')
     @$el = $(@get('element'))
     viewport_width = $(window).width()
-    @$el.css 'width', viewport_width
-    width = viewport_width
-    height =  width * @get('controller.model.height') / @get('controller.model.width')
     viewport_height = $(window).height() - 52
-    if height > viewport_height
+    section_width = @get('controller.model.width')
-      # Fit screen
+    section_height = @get('controller.model.height')
-      correction = viewport_height / height
+    dpm = viewport_width / section_width # try to fill the width
-      width = correction * width
+    if dpm * section_height > viewport_height
-      @$el.css('width', width)
+      # Height goes of the window, not what we want, adjust to fit height
-      height = correction * height
+      dpm = viewport_height / section_height
-
+    @$el.css 'width', dpm * section_width
-    @set 'element_width', width
+    @$el.css 'height', dpm * section_height
-    @set 'element_height', height
+    @set 'dpm', dpm
-    @$el.css('height', height)
   ).observes('controller.model.height', 'controller.model.width')
   tables: (->@get('content')).property('content')
   didInsertElement: ->

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

@@ -1,57 +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: (->
-    return 0 unless section_width = @get('content.section.width')
-    ((@get('content.position_x') || 0) * @get('containerWidth') / section_width)
-  ).property('content.section.width', 'content.position_x', 'containerWidth')
-  offsetY: (->
-    return 0 unless section_height = @get('content.section.height')
-    # debugger if @get('content.number') == 11
-    ((@content.get('position_y') || 0) * @get('containerHeight') / section_height)
-  ).property('content.section.height', 'content.position_y', 'containerHeight')
-
-  style: (->
-    "position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
-  ).property('offsetX', 'offsetY')
-
-  draggable: (->  if @get('controller.editmode') then 'true' else 'false' ).property('controller.editmode')
-  placeInSection: ->
-    @$el.css 'left', @offsetX()
-    @$el.css 'top', @offsetY()
-  positionChange: (position)->
-    #@$el.css 'left', position.left
-    #@$el.css 'top', position.top
-    @content.setProperties
-      position_x: position.left*@get('content.section.width') / @get('containerWidth')
-      position_y: position.top *@get('content.section.height') / @get('containerHeight')
-    #@content.get('transaction').commit()
-    @content.save()
-  containerWidth: (-> @get('parentView.element_width') ).property('parentView.element_width')
-  containerHeight: (-> @get('parentView.element_height') ).property('parentView.element_height')
-  # $(@get('parentView.element')).width()
-  # containerHeight: ->
-  #   $(@get('parentView.element')).height()
-  #click: ->
-    #@$('.table-actions').show()
-  didInsertElement: ->
-    @$el = @$()
-    #@$('.table-actions').hide()
-    #title = @$('.table-actions .title').clone()
-    @$('.table-actions').hide()
-    #@$('.table-actions .title').remove()
-    @$el.on 'click', =>
-      # duplication of .table-actions because variable gets unshadowed
-      @$('.table-actions').toggle() if @$el.hasClass('occupied') and not @get('controller.editmode')

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

@@ -32,7 +32,7 @@
 .section-manage-tables
   .dropdown-container
     margin-right: 10px
-    $icon-right-margin: 12px
+    $icon-right-margin: 16px
     ul
       list-style: none
       margin: 0
@@ -58,8 +58,10 @@
       @extend .fa-th
       margin-right: $icon-right-margin
     span.section-remove-icon
-      @extend .fa
+      @extend .fa, .fa-trash-o
-      @extend .fa-trash-o
+      margin-right: $icon-right-margin
+    span.section-add-section-element-icon
+      @extend .fa, .fa-image
       margin-right: $icon-right-margin
   input
     height: auto

app/controllers/admin/application_controller.rb

@@ -1,8 +1,16 @@
 module Admin
   class ApplicationController < ::ApplicationController
-    before_filter :authenticate_administrator!
+    before_action :setup_administrator!
-    layout 'administrator'
+    load_and_authorize_resource
-  private
+    layout 'cmtool/application'
+    private
+
+    def setup_administrator!
+      authenticate_administrator!
+      @current_ability = Admin::Ability.new current_administrator
+      run_after_authentication_hooks!
+    end
+
     def set_locale
       I18n.locale = :en
     end

app/controllers/admin/products_controller.rb

@@ -1,5 +1,5 @@
 # encoding: UTF-8
-module Admin  
+module Admin
   class ProductsController < Admin::ApplicationController
     before_filter :set_relation_options, only: [:new, :edit, :create, :update]
     # GET /products

app/controllers/admin/svg_elements_controller.rb

@@ -0,0 +1,42 @@
+# encoding: UTF-8
+module Admin
+  class SvgElementsController < Admin::ApplicationController
+    def index
+      @svg_elements = SvgElement.all
+    end
+
+    def new
+
+    end
+
+    def create
+      if @svg_element.save
+        redirect_to [:edit, :admin, @svg_element]
+      else
+        render 'new'
+      end
+    end
+
+    def update
+      if @svg_element.update_attributes svg_element_params
+        redirect_to [:edit, :admin, @svg_element]
+      else
+        render 'edit'
+      end
+    end
+
+    def show
+
+    end
+
+    def edit
+
+    end
+
+    private
+
+    def svg_element_params
+      params.require(:svg_element).permit!
+    end
+  end
+end

app/controllers/suppliers/section_elements_controller.rb

@@ -0,0 +1,31 @@
+module Suppliers
+  class SectionElementsController < Suppliers::ApplicationController
+    def index
+      @section_elements = SectionElement.for_supplier(current_supplier)
+      render json: @section_elements, each_serializer: Suppliers::SectionElementSerializer
+    end
+
+    def create
+      @section_element.supplier = current_supplier
+      if @section_element.save
+        render json: @section_element, serializer: Suppliers::SectionElementSerializer
+      else
+        render json: {errors: @section.errors}, status: :unprocessable_entity
+      end
+    end
+
+    def update
+      if @section_element.update_attributes section_element_params
+        render json: @section_element, serializer: Suppliers::SectionElementSerializer
+      else
+        render json: {errors: @section.errors}, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def section_element_params
+      params.require(:section_element).permit %i[name svg dpm box_width box_height position_x position_y rotation svg_element_id section_id]
+    end
+  end
+end

app/controllers/suppliers/svg_elements_controller.rb

@@ -0,0 +1,8 @@
+module Suppliers
+  class SvgElementsController < Suppliers::ApplicationController
+    def index
+      @svg_elements = SvgElement.all
+      render json: @svg_elements, each_serializer: Suppliers::SvgElementSerializer
+    end
+  end
+end

app/controllers/tests/application_controller.rb

@@ -0,0 +1,7 @@
+module Tests
+  class ApplicationController < ::ApplicationController
+    def f
+      FactoryGirl
+    end
+  end
+end

app/controllers/tests/lists_controller.rb

@@ -0,0 +1,7 @@
+module Tests
+  class ListsController < Tests::ApplicationController
+    def index
+      render json: []
+    end
+  end
+end

app/controllers/tests/suppliers_controller.rb

@@ -0,0 +1,8 @@
+module Tests
+  class SuppliersController < Tests::ApplicationController
+    def show
+      @supplier = f.build :supplier, id: params[:id]
+      render json: @supplier, serializer: Suppliers::SupplierSerializer
+    end
+  end
+end

app/models/concerns/svg_element_defaults.rb

@@ -0,0 +1,11 @@
+module SvgElementDefaults
+  extend ActiveSupport::Concern
+  included do
+    property :svg
+    property :name
+    property :dpm, type: Float, default: 300
+    property :box_width, type: Float, default: 300
+    property :box_height, type: Float, default: 300
+    validates :dpm, numericality: {greater_than: 0}
+  end
+end

app/models/section.rb

@@ -10,6 +10,7 @@ class Section
   has_many :tables
   has_many :lists
   has_many :orders
+  has_many :section_elements
 
   attr_protected :supplier_id
 

app/models/section_element.rb

@@ -0,0 +1,17 @@
+class SectionElement
+  include SimplyStored::Couch
+  include ActiveModel::SerializerSupport
+  include SvgElementDefaults
+  property :position_x, type: Float
+  property :position_y, type: Float
+  property :rotation, type: Float
+  belongs_to :section
+  belongs_to :supplier
+  belongs_to :svg_element
+
+  view :by_supplier_id, key: :supplier_id
+
+  def self.for_supplier(supplier)
+    find_all_by_supplier_id(supplier.id)
+  end
+end

app/models/svg_element.rb

@@ -0,0 +1,7 @@
+class SvgElement
+  include SimplyStored::Couch
+  include ActiveModel::SerializerSupport
+  include SvgElementDefaults
+  property :snap_code
+  has_many :section_elements
+end

app/serializers/suppliers/employee_serializer.rb

@@ -1,5 +1,3 @@
 class Suppliers::EmployeeSerializer < Qwaiter::Serializer
-  self.root = :employee
-  embed :ids, include: true
   attributes :name, :email, :manager, :active, :color
 end

app/serializers/suppliers/section_element_serializer.rb

@@ -0,0 +1,3 @@
+class Suppliers::SectionElementSerializer < Qwaiter::Serializer
+  attributes :name, :box_width, :box_height, :dpm, :svg, :position_x, :position_y, :rotation, :section_id
+end

app/serializers/suppliers/svg_element_serializer.rb

@@ -0,0 +1,3 @@
+class Suppliers::SvgElementSerializer < Qwaiter::Serializer
+  attributes :name, :box_width, :box_height, :dpm, :svg
+end

app/views/admin/svg_elements/_form.html.slim

@@ -0,0 +1,32 @@
+- content_for :head do
+  = javascript_include_tag "admin/application"
+= form_for [:admin, @svg_element] do |f|
+  = render 'error_messages', target: @svg_element
+  = f.row :name
+    .form-label= f.label :name
+    .form-field= f.text_field :name
+  = f.row :dpm
+    .small-3.columns= f.label :dpm
+    .small-3.columns= f.number_field :dpm
+    .small-6.columns.attribute-info= f.error_message :dpm
+  = f.row :box_width
+    .small-3.columns= f.label :box_width
+    .small-3.columns= f.number_field :box_width
+    .small-6.columns.attribute-info
+  = f.row :box_height
+    .small-3.columns= f.label :box_height
+    .small-3.columns= f.number_field :box_height
+    .small-6.columns.attribute-info
+  = f.row :svg
+    .form-label= f.label :svg
+    .form-field= f.text_area :svg
+  = f.row :snap_code
+    .form-label= f.label :snap_code
+  .row: .small-12.columns= f.text_area :snap_code, rows: 20, class: ['snap-code-editor'], data: {target: '#svg-preview', preview: '#javascript-preview'}
+  .row: .small-12.columns: pre#javascript-preview.hide
+  .form-actions
+    = f.submit nil, class: 'form-submit-button'
+    '
+    = link_to t("helpers.links.cancel"), admin_svg_elements_path, class: 'to-index-button'
+- content_for :sidebar do
+  .row: .small-12.columns: svg#svg-preview

app/views/admin/svg_elements/edit.html.slim

@@ -0,0 +1,3 @@
+- model_class = SvgElement
+- title :edit, model_class
+= render 'form'

app/views/admin/svg_elements/index.html.slim

@@ -0,0 +1,19 @@
+- model_class = SvgElement
+div.page-header= title :index, model_class
+- if @svg_elements.any?
+  table.table
+    thead
+      tr
+        th= model_class.human_attribute_name(:name)
+        th=t 'helpers.actions.title'
+    tbody
+      - @svg_elements.each do |svg_element|
+        tr
+          td= link_to svg_element.name, [:admin, svg_element]
+          td
+            = link_to t('helpers.links.edit'), [:edit, :admin, svg_element], class: 'table-edit-button'
+            '
+            = link_to t("helpers.links.destroy"), [:admin, svg_element], method: :delete, data: {confirm: are_you_sure? }, class: 'table-destroy-button'
+- else
+  = no_content_given model_class
+= link_to t("helpers.links.new"), new_admin_svg_element_path, class: 'record-new-button'

app/views/admin/svg_elements/new.html.slim

@@ -0,0 +1,3 @@
+- model_class = SvgElement
+- title :new, model_class
+= render 'form'

app/views/admin/svg_elements/show.html.slim

@@ -0,0 +1,16 @@
+- model_class = SvgElement
+.page-header= title :show, @svg_element
+
+dl.dl-horizontal.show-list
+  dt= model_class.human_attribute_name(:number)
+  dd= @svg_element.number
+  - if @svg_element.supplier.present?
+    dt= Supplier.model_name.human
+    dd= link_to @svg_element.supplier.name, [:admin, @svg_element.supplier]
+
+.form-actions
+  = link_to t("helpers.links.back"), admin_svg_elements_path, class: 'btn'
+  '
+  = link_to t('helpers.links.edit'), [:edit, :admin, @svg_element], class: 'btn'
+  '
+  = link_to t("helpers.links.destroy"), [:admin, @svg_element], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-danger'

config/application.rb

@@ -95,6 +95,7 @@ module Qwaiter
             resource_link Supplier, scope: 'Admin'
             resource_link Section, scope: 'Admin'
             resource_link Table, scope: 'Admin'
+            resource_link SvgElement, scope: 'Admin'
             engine_link Rails.application, title: 'Go to the website', path: '/'
           end
         end

config/environments/production.rb

@@ -67,7 +67,7 @@ Qwaiter::Application.configure do
   config.action_mailer.smtp_settings = {
     address: "smtp.gmail.com",
     port: 587,
-    domain: "atool.nl",
+    domain: "mozo.bar",
     authentication: :plain,
     user_name: "bterkuile@companytools.nl",
     password: "BjTKct22",

config/locales/models.en.yml

@@ -14,6 +14,7 @@ en:
       user_feedback: User feedback
       employee: Employee
       employee_shift: Shift
+      svg_element: Svg element
       plural:
         user: Users
         supplier: Restaurants
@@ -28,6 +29,7 @@ en:
         user_feedback: User feedbacks
         employee: Employees
         employee_shift: Shifts
+        svg_element: Svg elements
     attributes:
       product_category:
         name: Name
@@ -94,3 +96,5 @@ en:
         email: "Your email:*"
         male: "Mr."
         female: "Ms."
+      svg_element:
+        name: Name

config/locales/supplier.en.yml

@@ -210,3 +210,7 @@ en:
         destroy_confirmation: Are you sure?
     suppliers_switcher:
       switch_to_button: Switch to %{name}
+    section_element:
+      add_button: Add ${models.section_element}
+      modal:
+        title: Add ${models.section_element}

config/routes.rb

@@ -27,6 +27,7 @@ Qwaiter::Application.routes.draw do
     resources :user_feedbacks
 
     resources :lists
+    resources :svg_elements
     resources :products
     resources :product_categories
     root to: 'users#index'
@@ -86,36 +87,21 @@ Qwaiter::Application.routes.draw do
   end
 
 
-  #get '/supplier/suppliers/current' => 'supplier#current' #ember
-  #get '/supplier/suppliers/:id' => 'supplier#current' #ember
-  #put '/supplier/suppliers/:id' => 'supplier#update' #ember
-
-  #match '/show_products' => 'dashboard#show_products', as: :user_products
-  # GENERAL
-  #get '/about' => 'dashboard#about'
-  #get '/enquete' => 'dashboard#enquete'
-  #get '/cartoon' => 'dashboard#cartoon'
-  #get '/bars-restaurants' => 'dashboard#bars_restaurants', as: :bars_restaurants
-  #get '/clients' => 'dashboard#clients'
-  #get '/contact' => 'dashboard#contact'
   get '/s' => 'dashboard#scan', as: :scan
 
   # DEVELOPMENT ONLY
   get '/qr' => 'dashboard#qr'
   get '/demo_both' => 'dashboard#demo_both'
+  get :tests, to: 'test_squad#tests' unless Rails.env.production?
 
   # SUPPLIER
   get '/supplier' => 'supplier#home', as: :supplier_root
-  #get '/supplier/active_orders' => 'supplier#active_orders', as: :supplier_active_orders
+  if Rails.env.test? or Rails.env.development?
-  #get '/supplier/active_lists' => 'supplier#active_lists', as: :supplier_active_lists
+    namespace :tests do
-  #get '/supplier/menu' => 'supplier#menu', as: :suppliers_menu
+      resources :suppliers
-  #post '/supplier/remove_list_needs_payment' => 'supplier#remove_list_needs_payment', as: :supplier_remove_list_needs_payment
+      resources :lists
-
+    end
-  #post '/supplier/mark_as_open' => 'supplier#mark_as_open', as: :supplier_mark_as_open
+  end
-  #post '/supplier/mark_as_closed' => 'supplier#mark_as_closed', as: :supplier_mark_as_closed
-
-  #get '/supplier/settings' => 'supplier#edit', as: :supplier_settings
-  #match '/supplier/settings' => 'supplier#update', as: :supplier_update_settings, via: [:put, :post, :patch]
 
   namespace :suppliers, path: '/supplier' do
     resources :suppliers do
@@ -134,6 +120,9 @@ Qwaiter::Application.routes.draw do
         post :arrange_tables
       end
     end
+
+    resources :section_elements
+    resources :svg_elements, only: [:index, :show]
     resources :tables do
       collection do
         get :qr_codes

spec/javascript/components/suppliers-switcher_test.coffee

@@ -0,0 +1,21 @@
+#module "suppliers-switcher", "SuppliersSwitcherComponent"
+moduleForComponent "suppliers-switcher"
+test "Triggers switch", ->
+  component = @subject()
+  controller = App.__container__.lookup('controller:settings')
+  Ember.run ->
+    controller.store.createRecord 'supplier',
+      id: 'other-supplier'
+      name: 'Other supplier1'
+  component.set 'targetObject', controller
+  @render()
+  equal find('ul').text(), "Switch to Other supplier1"
+
+  s_name = null
+  # Stub the action, since it triggers an external call
+  component._actions.switchTo = (supplier)->
+    s_name = supplier.get('name')
+
+  click 'li a'
+
+  equal s_name, 'Other supplier1'

spec/javascript/test_helper.coffee

@@ -0,0 +1,39 @@
+#= require supplier/foundation1/application
+#= require supplier/app/application
+#= require require
+#= require qunit
+#= require ember-qunit/ember-qunit
+#= require_self
+#= require_tree ./components
+#= require_tree ./models
+#= require_tree ./routes
+#= require_tree ./unit
+#= require_tree ./views
+
+# Set the application.
+#App = App;
+
+# Set up Ember testing.
+window.supplier_object = {id: 'supplier1'}
+window.employee_object = {id: 'employee1'}
+window.Faye = {}
+class window.Faye.Client
+  constructor: (host)->
+    @host = host
+  subscribe: (subscribe_path)->
+    @subscribe_path = subscribe_path
+window.data_host = ''
+window.$asset_path = '/assets/'
+window.event_host = ''
+App.rootElement = '#ember-testing'
+App.ApplicationStore = DS.Store.extend({
+  adapter: DS.ActiveModelAdapter.extend({
+    namespace: 'tests'
+  })
+})
+
+#emq.globalize()
+App.Resolver = Ember.DefaultResolver.extend({namespace: App})
+setResolver(App.Resolver.create())
+App.setupForTesting()
+App.injectTestHelpers()

spec/javascript/test_squad.rb

@@ -0,0 +1,5 @@
+TestSquad.configure do |config|
+  # Set the testing framework.
+  # Can be jasmine, qunit, mocha or ember.
+  config.framework = 'ember'
+end

spec/javascript/unit/router_test.coffee

@@ -0,0 +1,4 @@
+module 'Router', setup: -> App.reset()
+test 'root route', ->
+  visit '/'
+  andThen -> equal currentRouteName(), 'index'