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
+  .form-field= input value=section_title
-    Ember.TextField valueBinding="section_title"
 .form-row
   .form-label
     label=t 'attributes.section.width'
-  .form-field
+  .form-field= number-field numericValue=section_width
-    view number-field valueBinding="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
+    .form-field= number-field numericValue=number_start
-      view number-field valueBinding="number_start"
   .form-row
     .form-label
       label for='add-tables-number-end'
         =t 'section.add_tables.modal.number_end'
-    .form-field
+    .form-field= number-field numericValue=number_end
-      view number-field valueBinding="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-close{action "close"}=t 'table.modal.close_button'
-button.modal-confirm.right{action "save"}=t 'section.add_tables.modal.add_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"
+      = input type="text" value=title class="section-edit-title-field"
-      view number-field valueBinding="width" class="dimension section-edit-width-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=dimension section.width
-            td.numeric= section.height
+            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-2.medium-2.small-3.columns= number-field numericValue=controller.model.house_number
-      .large-1.medium-2.small-2.columns: Ember.TextField valueBinding="controller.model.house_number_addition"
+      .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
+    = 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 @@
+- 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')

config/locales/supplier.en.yml

@@ -41,13 +41,17 @@ en:
     table_number: Table
     table:
       print_qr_codes: Print Qr codes
+      add_tables_first:
+        title: Add tables first
+        body: To be able to print QR-codes, you first need to add tables. Each table has its own QR-code
       destroy:
         modal:
           title: Are you sure you want to delete ${models.table} %{number}
-      edit:
       modal:
         title: "Edit ${models.table|downcase}"
         body_header: ""
+        close_button: Close
+        save_button: Save
       new_button: Add ${models.table|downcase}
     lists:
       index:
@@ -94,6 +98,9 @@ en:
           number_end: Till number
           close_button: Close
           add_button: Add
+          too_many: "You can add maximal 10 ${models.plural.table|downcase} at once (you want to add %{count})"
+          invalid_start_number: "Invalid start number"
+          invalid_end_number: "Invalid end number"
       add_section:
         modal:
           title: 'New ${models.section}'

config/locales/supplier.nl.yml

@@ -40,19 +40,23 @@ nl:
     table_number: Tafel
     table:
       print_qr_codes: Print Qr codes
+      add_tables_first:
+        title: Je moet eerst ${models.plural.table|downcase} toevoegen
+        body: Om QR-codes te kunnen printen moet je eerst tafels toevoegen. Elke tafel heeft een unieke QR-code
       destroy:
         modal:
           title: Weet je zeker dat je ${models.table} %{number} wilt verwijderen
-      edit:
       modal:
         title: "Bewerk ${models.table|downcase}"
         body_header: ""
+        close_button: Sluiten
+        save_button: Opslaan
       new_button: ${models.table} toevoegen
     lists:
       index:
         show_all: Toon alle ${models.plural.list}
         show_active: Toon actieve ${models.plural.list}
-        show_list_on_day: 'Lijsten op datum'
+        show_list_on_day: '${models.plural.list} op datum'
       show:
         title: "%{list} tonen"
         users: Klanten
@@ -60,11 +64,11 @@ nl:
       is_helped_button: Vraag beantwoord!
       close_list: Afsluiten!
       none_found: 'Geen ${models.plural.list|downcase}'
-      go_to_lists: Naar lijsten
+      go_to_lists: 'Naar ${models.plural.list|downcase}'
       close:
         modal:
           title: Wil je de ${models.list} afsluiten?
-          message: Hierna kunnen gebruikers weer een nieuwe lijst openen
+          message: Hierna kunnen gebruikers weer een nieuwe ${models.list|downcase} openen
           cancel: Nog niet
           close_list:  ${models.list} afsluiten
     order:
@@ -93,6 +97,9 @@ nl:
           number_end: Tot nummer
           close_button: Sluiten
           add_button: Voeg toe
+          too_many: "Je kan manimaal 10 ${models.plural.table|downcase} per keer toevoegen (je hebt %{count})"
+          invalid_start_number: "Ongeldig start nummer"
+          invalid_end_number: "Ongeldig eind nummer"
       add_section:
         modal:
           title: '${models.section} toevoegen'

wip.md

@@ -4,8 +4,9 @@ Release
 Supplier
 --------
 
-- Show menu next to table in section view at the right side for tables
+- Show menu next to table in section view at the left side for tables at
-  next to the right wall
+  the right side of the section
+- Proper emails when an employee is created or added to a supplier
 - Add section-area colors
 - Add snap_code toggle to svg elements
 - Link employee to orders