Implement tooltips for suppliers table view

app/assets/javascripts/supplier/application.js

@@ -17,10 +17,11 @@
 // require bootstrap-popover
 // require bootstrap-typeahead
 //= require bootstrap
-//= require mustache
+//= require handlebars
 //= require faye
 //= require supplier/base
 //= require qwaiter
+//= require qtip
 //= require_directory .
 //= require_self
 //= require moment
@@ -45,3 +46,16 @@ function redirect_to(mapping, variables){
 function currency(num) {
   return Qwaiter.currency(num);
 }
+
+Handlebars.registerHelper('t', function(tlocation) {
+  return t(tlocation)
+})
+Handlebars.registerHelper('currency', function(price) {
+  if(price.fn){
+    price = price.fn(this);
+  }
+  if(typeof(price) == 'function'){
+    price = price.call(this)
+  }
+  return new Handlebars.SafeString(currency(price))
+})

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

@@ -6,7 +6,8 @@ root.Qsupplier=
       if(e.event == 'new_order')
         body = $('#active-orders-table tbody')
         order = new Order(e.data)
-        body.append @mustache('#active-order-template', order)
+        if body.length
+          body.append @mustache('#active-order-template', order)
         $('.section-table-list-'+order.list_id()).addClass('active_order')
       else if(e.event == 'list_needs_help')
         $('#list-needs-help-indicator-'+e.data.id).removeClass('hide')
@@ -202,6 +203,11 @@ root.Qsupplier=
   mustache: (selector, locals)->
     html = $(selector).html()
     return '' unless html
+    template = Handlebars.compile(html)
+    container = $('<div></div>')
+    container.html(template(locals))
+    setTranslations(container)
+    return container.html()
     locs = $.extend(locals,
       currency: ->
         (val)->

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

@@ -61,7 +61,7 @@ function setTranslations(selector){
   list.find('.locale').show();
   list.find('.locale-'+$locale).hide();
   if(selector){
-    $(selector).find('[data-t]').each(function(){$(this).text(t($(this).data('t'), $(this).data('tAttributes')))})
+    $(selector).find('[data-t]').each(function(){$(this).html(t($(this).data('t'), $(this).data('tAttributes')))})
   }else{
     $('[data-t]').each(function(){$(this).html(t($(this).data('t'),$(this).data('tAttributes')))})
   }

app/assets/stylesheets/supplier/application.css

@@ -2,6 +2,7 @@
  *= require 'twitter-bootstrap/bootstrap_and_overrides'
  *= require 'twitter-bootstrap/bootstrap_overrides'
  *= require 'jquery-ui-1.8.23.custom.css'
+ *= require qtip
  *= require 'general'
  *= require user/active_list
  *= require_directory .

app/assets/stylesheets/supplier/darkstrap.sass

@@ -265,6 +265,11 @@ legend
   border-top: 1px solid #222
   +box-shadow(0 1px 0 #333333 inset)
 
+.popover
+  color: #333
+  h3
+    color: #333
+
 //=Progress bars
 .progress
   @extend .well

app/assets/stylesheets/supplier/section_tables.css.sass

@@ -40,7 +40,7 @@ $table-width: 83px
     background-color: rgba(0,0,0,0.4)
     .section-table
       position: absolute
-      cursor: move
+      cursor: pointer
       &.occupied
         background-color: #ffa
       &.needs_help
@@ -59,6 +59,9 @@ $table-width: 83px
       a
         &:hover
           text-decoration: none
+  &.section-tables-manage
+    .section-table
+      cursor: move
   &.section-tables-inactive
     .section-table
       position: relative
@@ -76,3 +79,7 @@ table
           content: " - "
 .go-to-tables-view.hide
   display: inline-block
+
+ul#table-actions-list
+  list-style: none
+  margin: 0

app/controllers/suppliers/sections_controller.rb

@@ -103,6 +103,7 @@ module Suppliers
     # GET /sections/1/tables_view.json
     def tables_view
       @section = Section.find_by_supplier_id_and_id!(current_supplier.id, params[:id])
+      @tables =  Table.enrich_active_list_id(@section.tables)
 
       respond_to do |format|
         format.html # show.html.erb
@@ -138,5 +139,15 @@ module Suppliers
       else render(json: json_alert('messages.could_not_arrange_tables'))
       end
     end
+
+    def table_actions
+      @section = Section.find_by_supplier_id_and_id!(current_supplier.id, params[:id])
+      render(text: 'No table_id given', content_type: Mime::HTML.to_s) and return unless params[:table_id].present?
+      @table = Table.find(params[:table_id])
+      render(text: 'Table is not correct', content_type: Mime::HTML.to_s) and return unless @table.section_id == @section.id
+      @list = List.active_for_table(@table).first
+      @orders = @list ? @list.active_orders : []
+      render layout: false
+    end
   end
 end

app/models/list.rb

@@ -314,6 +314,10 @@ class List
     Order.count_active_for_supplier_and_list(supplier_id, id) > 0
   end
 
+  def active_orders
+    Order.active_for_supplier_and_list(supplier_id, id)
+  end
+
   # Return a join requests object in the form of:
   #   {join_request: [{user_id: '1saf3...', user_email: 'info@qwaiter.com'}, [....]]}
   def join_requests_as_json

app/templates/supplier/_active_list.mustache

@@ -5,10 +5,10 @@
   </td>
   <td class="numeric table_number">{{table_number}}</td>
   <td class="section_title">{{section_title}}</td>
-  <td class="currency total_list_amount">{{#currency}}{{total_amount}}{{/currency}}</td>
+  <td class="currency total_list_amount">{{currency total_amount}}</td>
   <td class="actions">
-    <button id="list-is-helped-button-{{id}}" class="btn btn-info {{^needs_help}}hide{{/needs_help}}" onclick="Qsupplier.mark_list_as_helped('{{id}}')">Question answered!</button>
-    <button class="btn btn-warning" onclick="Qsupplier.close_list('{{id}}')">Close!</button>
+    <button id="list-is-helped-button-{{id}}" class="btn btn-info {{^needs_help}}hide{{/needs_help}}" onclick="Qsupplier.mark_list_as_helped('{{id}}')" data-t="list.is_helped_button"></button>
+    <button class="btn btn-warning" onclick="Qsupplier.close_list('{{id}}')" data-t="list.close_list"></button>
     <a href="/supplier/lists/{{id}}" class="btn"><span class="icon-list">&nbsp;</span></a>
   </td>
 <tr>

app/templates/supplier/_active_order.mustache

@@ -2,9 +2,9 @@
   <td>{{display}}</td>
   <td class="numeric table_number">{{table_number}}</td>
   <td class="section_title">{{section_title}}</td>
-  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
+  <td class="currency">{{currency total_amount}}</td>
   <td class="actions">
-    <button id="order-in-process-button-{{id}}" class="btn btn-success {{^can_process}}hide{{/can_process}}" onclick="Qsupplier.mark_order_in_process('{{id}}')">In process!</button>
-    <button class="btn btn-inverse" onclick="Qsupplier.mark_order_delivered('{{id}}')">Is delivered!</button>
+    <button id="order-in-process-button-{{id}}" class="btn btn-success {{^can_process}}hide{{/can_process}}" onclick="Qsupplier.mark_order_in_process('{{id}}')" data-t="order.being_processed"></button>
+    <button class="btn btn-inverse" onclick="Qsupplier.mark_order_delivered('{{id}}')" data-t="order.being_served"></button>
   </td>
 </tr>

app/views/suppliers/sections/manage_tables.html.slim

@@ -6,7 +6,7 @@
     - for section in @section.supplier.sections
       li class=(section == @section ? 'active' : nil) = link_to section.title, [:manage_tables, :suppliers, section]
   .span9
-    .well.section-tables-container.section-tables-active
+    .well.section-tables-container.section-tables-active.section-tables-manage
       - for table in @section.tables
         .section-table.hide{ id="section-table-#{table.id}" data-position-x=table.position_x data-position-y=table.position_y data-table-id=table.id}
           .pull-right.action-button-container

app/views/suppliers/sections/table_actions.html.slim

@@ -0,0 +1,8 @@
+ul#table-actions-list
+  - if @list
+    - if @list.needs_help?
+      li
+        button.btn.btn-info.btn-small class="of-list-#{@list.id}" id="list-is-helped-button-#{@list.id}" onclick="Qsupplier.mark_list_as_helped('#{@list.id}')" data-t="list.is_helped_button"
+    button.btn.btn-warning.btn-small class="of-list-#{@list.id}" onclick="Qsupplier.close_list('#{@list.id}')" data-t="list.close_list"
+  li
+    a data-t='section.tables_view.table_actions.got_to_table' href=suppliers_table_path(@table)

app/views/suppliers/sections/tables_view.html.slim

@@ -4,15 +4,21 @@
   .span12
     .well.section-tables-container.section-tables-active
       .section-manage-tables.pull-right= link_to content_tag(:span, '', class: 'icon-pencil'), manage_tables_suppliers_section_path(@section), class: 'btn btn-mini'
-      - for table in Table.enrich_active_list_id(@section.tables)
+      - for table in @tables
         .section-table.hide[
           class="section-table-list-#{table.active_list_id}" id="section-table-#{table.id}" 
           data-position-x=table.position_x data-position-y=table.position_y data-table-id=table.id]
-          .table-number = link_to table.number, suppliers_table_path(table)
+          .table-number = table.number
           .status-icons
             span.needs_payment.icon-flag
             span.needs_help.icon-bell
             span.active_order.icon-glass
+#section-table-menu-container.hide
+  - @tables.each do |table|
+    .section-table-menu-content class="section-table-menu-#{table.id} section-table-list-#{table.active_list_id}"
+      button.btn.btn-info.list-is-helped.hide Question answered!
+
+    
 - content_for :footer do
   javascript:
     var current_section_id = '#{@section.id}';
@@ -24,6 +30,38 @@
       active_section_container.css('height', #{@section.height/@section.width}*active_section_container.width());
       active_section_container.find('.section-table').each(function(){
         Qsupplier.position_table_in_active_section(active_section_container, $(this), false);
+        var table_id;
+        var match = $(this).attr('id').match(/section-table-(\w+)/);
+        if(!match || match.length < 2) return;
+        table_id = match[1];
+
+        $(this).qtip({
+          content: {
+            text: '#{spinner}',
+            ajax: {
+              url: '#{table_actions_suppliers_section_path(@section)}',
+              data: {table_id: table_id},
+              success: function(data, status){
+                var container = $('<div></div>');
+                container.html(data); // Create a container to parse translation data
+                setTranslations(container);
+                this.set('content.text', container.html());
+              }, 
+              once: false
+            },
+            title: {
+              text: t('section.tables_view.table_actions.title'),
+              button: true
+            }
+          },
+          show: {
+            event: 'click'
+          },
+          hide: 'unfocus',
+          style: {
+            classes: 'qtip-wiki qtip-light qtip-shadow'
+          }
+        })
       });
       Qsupplier.update_section_tables_view('#{@section.id}');
       Qsupplier.watch_events();