Add section elements

2015-03-01 12:57:20 +01:00
parent 832f80e20e
commit 275b4524bc
62 changed files with 10388 additions and 124 deletions
@@ -1,6 +1,12 @@
-#= require jquery
-#= require jquery_ujs
-#= require foundation
+# require jquery
+# require jquery_ujs
+# 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()
@@ -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()
@@ -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 .
@@ -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'
+
@@ -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')
@@ -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.setData 'Text', @get('elementId')
+    dataTransfer = ev.originalEvent.dataTransfer
+    #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')
-    view = Ember.View.views[viewId]
+    data = JSON.parse(ev.originalEvent.dataTransfer.getData('application/json'))
+    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)
-      top:  Math.max(e.originalEvent.pageY - view.$el.offsetParent().offset().top - (view.$el.outerHeight()/2), 0)
+      left: Math.max(newX, 0)
+      top:  Math.max(newY, 0)

    @dropped view, position if @dropped
    @dragLeft() if @dragLeft # not triggered by system itself in case of drop
@@ -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()
@@ -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')
@@ -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')
@@ -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')
@@ -0,0 +1,2 @@
+attr = DS.attr
+App.SvgElement = DS.Model.extend App.SvgElementMixin
@@ -1,4 +1,6 @@
 App.SectionsRoute = Ember.Route.extend
+  beforeModel: ->
+    @store.find 'section_element'
  model: ->  @store.all 'section'

  # setupController: (controller, collection) ->
@@ -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'
@@ -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"
@@ -0,0 +1 @@
+= svg view.content.svg width=view.content.box_width height=view.content.box_height
@@ -0,0 +1,4 @@
+each element in section_elements
+  view "section-element" content=element
+each table in tables
+  = view "section-table" content=table
@@ -1,2 +0,0 @@
-each table in tables
-  = view "section-table" content=table
@@ -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
@@ -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')
@@ -1,8 +1,7 @@
 App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
  classNames: ['well', 'section-tables-container', 'section-tables-active']
-  templateName: 'section_tables'
-  element_width: 0
-  element_height: 0
+  templateName: 'section/tables'
+  dpm: 1
  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
-      # Fit screen
-      correction = viewport_height / height
-      width = correction * width
-      @$el.css('width', width)
-      height = correction * height
-
-    @set 'element_width', width
-    @set 'element_height', height
-    @$el.css('height', height)
+    section_width = @get('controller.model.width')
+    section_height = @get('controller.model.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
+      dpm = viewport_height / section_height
+    @$el.css 'width', dpm * section_width
+    @$el.css 'height', dpm * section_height
+    @set 'dpm', dpm
  ).observes('controller.model.height', 'controller.model.width')
  tables: (->@get('content')).property('content')
  didInsertElement: ->
@@ -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')
				`@@ -0,0 +1 @@`
				`= svg view.content.svg width=view.content.box_width height=view.content.box_height`