General usability

app/assets/javascripts/shared-ember-helpers/translation.js.coffee

@@ -3,5 +3,5 @@ Ember.Handlebars.helper 't', (path, params..., options)->
   if params.length and typeof(params[0].serialize) is 'function'
     $.extend toptions, params[0].serialize()
   text = t(path, options.hash)
-  tag = if options.hash.bare then text else "<span data-t='#{path}' data-t-attributes='#{JSON.stringify(options.hash)}'>#{text}</span>"
+  tag = if options.hash.bare then text else "<span data-t='#{path}' class='translation' data-t-attributes='#{JSON.stringify(options.hash)}'>#{text}</span>"
   tag.htmlSafe()

app/assets/javascripts/supplier/app/components/number-field.js.coffee

@@ -0,0 +1,13 @@
+App.NumberFieldComponent = Ember.TextField.extend
+  type: 'number'
+  attributeBindings: ['min', 'max', 'step']
+  focusIn: -> @$().select()
+  numericValue: Ember.computed 'value', (key, value) ->
+    if arguments.length > 1
+      if value?
+        setValue = parseFloat(value)
+        @set "value", if isFinite(setValue) then setValue else null
+      else
+        @set 'value', null
+    value = @get 'value'
+    if value? then String(value) else ''

app/assets/javascripts/supplier/app/components/qr-codes-link.js.coffee

@@ -0,0 +1,8 @@
+App.QrCodesLinkComponent = Ember.Component.extend
+  tagName: 'a'
+  target: '_blank'
+  classNames: ["table-qr-codes"]
+  attributeBindings: ['href', 'target']
+  href: Ember.computed 'section.id', ->
+    Routes.qr_codes_suppliers_tables_path(section_id: @get('section.id'))
+

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

@@ -1,6 +1,7 @@
 @App.modals.BaseController = Ember.ObjectController.extend
   needs: ['application']
   alert_message: ""
+  modal_options: {}
   title: (->
     # return title if directly set by options
     return @get('modal_options.title') if @get('modal_options.title')
@@ -21,6 +22,9 @@
     else
       underscored.capitalize().replace(/_/, ' ')
   ).property('model.id', 'modal_options.title_path')
+  body: (->
+    @get('modal_options.body')
+  ).property('modal_options.body')
   save_error: (error)->
     switch error.status
       when 403

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

@@ -1,16 +1,20 @@
 App.modals.SectionAddTablesController = App.modals.BaseController.extend
   number_start: 100
-  number_end: 110
+  number_end: 107
   title_path: 'section.add_tables.modal.title'
   actions:
     addTables: ->
       s = parseInt(@get('number_start'))
+      return @set('alert_message', t('section.add_tables.modal.invalid_start_number')) unless isFinite(s)
       e = parseInt(@get('number_end'))
+      return @set('alert_message', t('section.add_tables.modal.invalid_end_number')) unless isFinite(e)
       if e < s
         @set 'number_start', e
         @set 'number_end', s
         s = @get('number_start')
         e = @get('number_end')
+      number_of_tables = 1 + e - s
+      return @set('alert_message', t('section.add_tables.modal.too_many', count: number_of_tables)) if number_of_tables > 10
 
       Ember.$.post Routes.add_tables_suppliers_section_path(@get('model.id')),
         number_start: s

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

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

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

@@ -0,0 +1,2 @@
+Ember.Handlebars.helper 'dimension', (value, options)->
+  "#{value}<span class='dimension'>m</span>".htmlSafe()

app/assets/javascripts/supplier/app/templates/components/qr-codes-link.emblem

@@ -0,0 +1,2 @@
+span.qr-icon
+= t 'table.print_qr_codes'

app/assets/javascripts/supplier/app/templates/global/_top_menu.emblem

@@ -24,6 +24,7 @@ header.top-menu
         span.fa-stack.fa-lg
           i.fa.fa-beer.fa-stack-1x
           i.fa.fa-ban.fa-stack-2x.text-alert
+    .supplier-name= supplier.name
     .extra-info{action "showSupplierStatusInfo"}
       .supplier-info-row
         .counter.supplier-orders-placed-count

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

@@ -1,18 +1,16 @@
 .form-row
   .form-label
     label=t 'attributes.section.title'
-  .form-field
-    Ember.TextField valueBinding="section_title"
+  .form-field= input value=section_title
 .form-row
   .form-label
     label=t 'attributes.section.width'
-  .form-field
-    view number-field valueBinding="section_width"
+  .form-field= number-field numericValue=section_width
 .form-row
   .form-label
     label=t 'attributes.section.height'
   .form-field
-    view number-field valueBinding="section_height"
+  .form-field= number-field numericValue=section_height
 hr
 button.modal-close{action "close"}=t 'section.add_section.modal.close_button'
 button.modal-confirm.right{action "addSection"}=t 'section.add_section.modal.add_button'

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

@@ -5,14 +5,12 @@ form.form-horizontal
     .form-label
       label for='add-tables-number-start'
         =t 'section.add_tables.modal.number_start'
-    .form-field
-      view number-field valueBinding="number_start"
+    .form-field= number-field numericValue=number_start
   .form-row
     .form-label
       label for='add-tables-number-end'
         =t 'section.add_tables.modal.number_end'
-    .form-field
-      view number-field valueBinding="number_end"
+    .form-field= number-field numericValue=number_end
 hr
 button.modal-close{action "close"}=t 'section.add_tables.modal.close_button'
 button.modal-confirm.right{action "addTables"}=t 'section.add_tables.modal.add_button'

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

@@ -15,14 +15,14 @@ if canArrangeTables
       button.arrange-tables-type-button.by_column{action "makeByColumn"}=t 'section.arrange_tables.modal.by_column.title'
   .arrange-content
     if isDistributed
-      ==t 'section.arrange_tables.modal.distributed.explanation'
+      =t 'section.arrange_tables.modal.distributed.explanation'
     if isByRow
       =t 'section.arrange_tables.modal.by_row.before_field'
-      view number-field valueBinding="row_count"
+      = number-field numericValue=row_count
       =t 'section.arrange_tables.modal.by_row.after_field'
     if isByColumn
       =t 'section.arrange_tables.modal.by_column.before_field'
-      view number-field valueBinding="column_count"
+      = number-field numericValue=column_count
       =t 'section.arrange_tables.modal.by_column.after_field'
 hr
 button.modal-close{action "close"}=t 'section.arrange_tables.modal.close_button'

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

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

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

@@ -8,10 +8,10 @@
   a.go-to-orders-list{ action "showDashboardOrders" model }: span
   can manage sections
     if editmode
-      = input type="text" valueBinding="title" class="section-edit-title-field"
-      view number-field valueBinding="width" class="dimension section-edit-width-field"
+      = input type="text" value=title class="section-edit-title-field"
+      = number-field numericValue=width class="dimension section-edit-width-field"
       span.fa.fa-lg.fa-times
-      view number-field valueBinding="height" class="dimension section-edit-height-field"
+      = number-field numericValue=height class="dimension section-edit-height-field"
       a.section-rollback-button{ action "rollbackEditable" }: span
       a.section-normal-mode-button{ action "finishEditable" }: span
     else
@@ -21,7 +21,7 @@
           li: a{action "arrangeTables"}: span.section-arrange-tables-icon=t 'section.arrange_tables.modal.title'
           li: a{action "addSectionElement"}: span.section-add-section-element-icon= t 'section_element.add_button'
           li: a{action "addSectionArea"}: span.section-add-section-area-icon= t 'section_area.add_button'
-          li: a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" target="_blank": span.qr-icon=t 'table.print_qr_codes'
+          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-edit-mode-button{ action "makeEditable" }: span
 = view "section-tables" contentBinding="tables"

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

@@ -22,8 +22,8 @@
               a{ action "goToSection" section}= section.title
             td
               span.table-count= section.tables.length
-            td.numeric= section.width
-            td.numeric= section.height
+            td.numeric=dimension section.width
+            td.numeric=dimension section.height
             /td.boolean.needs_help=boolean list.needs_help
             /td.boolean.needs_payment=boolean list.needs_payment
             /td.timestamp=time list.closed_at
@@ -32,7 +32,7 @@
             /td.timestamp=time list.created_at
             td.actions
               a.section-dashboard-orders.go-to-orders-list{action "showDashboardOrders" section}: span
-              a.table-qr-codes{path qr_codes_suppliers_tables section_id=section.id} target="_blank": span.qr-icon
+              = qr-codes-link section=section
   else
     .row: .small-12.columns
       .panel=t 'section.none_found'

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

@@ -1,10 +1,10 @@
 .row: .small-12.columns: h2=t 'settings.title'
 .form-row
   .form-label: label=t 'attributes.supplier.name'
-  .form-field: Ember.TextField valueBinding="controller.model.name" classNames="supplier-name"
+  .form-field= input value=controller.model.name classNames="supplier-name"
 .form-row
   .form-label: label=t 'attributes.supplier.email'
-  .form-field: App.EmailField valueBinding="controller.model.email" classNames="supplier-email"
+  .form-field= input value=controller.model.email type="email" classNames="supplier-email"
 /input.location_picker name="location" type="text" valueBinding="location"
 /.form-row
   .location_picker_map
@@ -16,24 +16,24 @@
   .form-label: label=t 'attributes.supplier.address'
   .form-field.full
     .row
-      .large-8.medium-8.columns: Ember.TextField valueBinding="controller.model.address"
+      .large-8.medium-8.columns= input value=controller.model.address
       .large-1.show-for-large-up.columns  
-      .large-2.medium-2.small-3.columns: view number-field valueBinding="controller.model.house_number"
-      .large-1.medium-2.small-2.columns: Ember.TextField valueBinding="controller.model.house_number_addition"
+      .large-2.medium-2.small-3.columns= number-field numericValue=controller.model.house_number
+      .large-1.medium-2.small-2.columns= input value=controller.model.house_number_addition
 .form-row
   .form-label: label=t 'attributes.supplier.postal_code'
-  .form-field: Ember.TextField valueBinding="controller.model.postal_code"
+  .form-field= input value=controller.model.postal_code
 .form-row
   .form-label: label=t 'attributes.supplier.city'
-  .form-field: Ember.TextField valueBinding="controller.model.city"
+  .form-field= input value=controller.model.city
 .form-row
   .form-label: label=t 'attributes.supplier.country'
-  .form-field: Ember.Select content=countries optionValuePath="content.name"  optionLabelPath="content.name" valueBinding="controller.model.country"
+  .form-field: view "select" content=countries optionValuePath="content.name"  optionLabelPath="content.name" value=controller.model.country
 if editIensProfile
   .form-row
     .form-label: label=t 'attributes.supplier.iens_profile'
     .form-field
-      view number-field valueBinding="controller.model.iens_profile"
+      = number-field numericValue=controller.model.iens_profile
       = image_tag 'supplier/settings/iens-example.png'
       span=t "settings.reviews.explanation"
 .row: .small-12.columns= language-switcher

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

@@ -24,7 +24,7 @@
   .form-actions
     can manage tables
       a.form-action-new.new-table-button{action "newTable"}= t 'table.new_button'
-    if tables
-      a.table-qr-codes{path qr_codes_suppliers_tables} target="_blank"
-        span.qr-icon
-        = t 'table.print_qr_codes'
+    = qr-codes-link
+    a.table-qr-codes{path qr_codes_suppliers_tables} target="_blank"
+      span.qr-icon
+      = t 'table.print_qr_codes'

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

@@ -1,3 +0,0 @@
-App.EmailField = Ember.TextField.extend
-  type: 'email'
-  #attributeBindings: ['min', 'max', 'step']

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

@@ -1,8 +0,0 @@
-App.NumberFieldView = Ember.TextField.extend
-  type: 'number'
-  attributeBindings: ['min', 'max', 'step']
-  numericValue: Ember.computed 'value', (key, value) ->
-    if arguments.length is 1
-      parseFloat @get "value"
-    else
-      @set "value", (if value isnt undefined then "#{value}" else "")

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

@@ -5,7 +5,7 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
   dpm: 1
   dropped: (view, position)->
     view.positionChange(position, @content)
-  observeSectionDimensions: (->
+  handleDimensionChange: ->
     return unless @get('element')
     @$el = $(@get('element'))
     viewport_width = $(window).width()
@@ -18,9 +18,14 @@ App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
       dpm = viewport_height / section_height
     @$el.css 'width', dpm * section_width
     @$el.css 'height', dpm * section_height
+    console.log "dpm: #{dpm}"
     @set 'dpm', dpm
+  observeSectionDimensions: (->
+    @handleDimensionChange()
   ).observes('controller.model.height', 'controller.model.width')
   tables: (->@get('content')).property('content.@each')
   didInsertElement: ->
     # the first observable event is triggered without the container having its dimensions
     @get('controller.model').notifyPropertyChange('width') #.notifyPropertyChange('height')
+    that = this
+    $(window).on 'orientationchange resize', -> Ember.run( -> that.handleDimensionChange())

app/assets/javascripts/supplier/foundation1/application.js.erb

@@ -26,7 +26,6 @@ String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() +
 window.time_zones = <%= ActiveSupport::TimeZone.all.map{|tz| {name: tz.name, formatted: "GMT#{tz.formatted_offset} #{tz.name}"}}.to_json.html_safe %>;
 window.countries = <%= IsoCountryCodes.all.map{|cc| {name: cc.name}}.to_json.html_safe %>;
 
-
 var path_mapping = {
   user_root: '/user',
   join_occupied_table: '/user/join_occupied_table',

app/assets/javascripts/translations.js.coffee.erb

@@ -23,7 +23,7 @@
 
 # return translation in the form
 #   <span data-t="models.table">Tafel</span>
-@tspan = (path, vars={}) -> "<span data-t='#{path}' data-t-attributes='#{JSON.stringify(vars)}'>#{t(path, vars)}</span>"
+@tspan = (path, vars={}) -> "<span data-t='#{path}' class='translation' data-t-attributes='#{JSON.stringify(vars)}'>#{t(path, vars)}</span>"
 
 @t = (path, vars={}) ->
   #result = undefined

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

@@ -18,6 +18,9 @@ $side-spacing: 0px
   color: $warning-color
 input.dimension
   width: 52px
+span.dimension
+  font-style: italic
+  padding-left: 2px
 .location_picker_map
   width: 600px
   height: 500px

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

@@ -48,6 +48,13 @@ header.top-menu
     margin-right: 8px
     &.is-open
       line-height: 60px
+  .supplier-name
+    display: inline-block
+    float: right
+    margin-right: 10px
+    line-height: 50px
+    font-weight: bold
+    color: #555
   .extra-info
     position: absolute
     top: 0
@@ -61,8 +68,6 @@ header.top-menu
     .table-number
       display: inline-block
       //text-transform: lowercase
-    .supplier-name
-      display: inline-block
     .supplier-orders-placed-count
       display: inline-block
       // margin-right: 15px

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

@@ -22,6 +22,8 @@ table
       color: $alert-color
   a.table-qr-codes
     +button-icon-only
+    .translation
+      display: none
 .table-edit
   +button($bg: $secondary-color)
   +button-icon-only

app/views/layouts/qr_sheet.html.slim

@@ -8,6 +8,5 @@ html lang="en"
     = csrf_meta_tags
     = stylesheet_link_tag "qr_sheet/application", :media => "all"
     link href="/favicon.ico" rel="shortcut icon"
-
   body
     = yield

app/views/suppliers/tables/qr_codes.html.slim

@@ -1,3 +1,7 @@
-ul#qr-list
-  - for table in @tables
-    li= image_tag(url_for(table_qr_image_path(table_id: table.id, format: :svg)))
+- if @tables.any?
+  ul#qr-list
+    - for table in @tables
+      li= image_tag(url_for(table_qr_image_path(table_id: table.id, format: :svg)))
+- else
+  h3= t('supplier.table.add_tables_first.title')
+  p= t('supplier.table.add_tables_first.body')