move to evented mustache system

app/assets/javascripts/supplier/application.js

@@ -14,6 +14,7 @@
 //= require jquery_ujs
 //= require jquery-ui
 //= require twitter/bootstrap
+//= require mustache
 //= require_directory .
 //= require_self
 var path_mapping = {

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

@@ -0,0 +1,12 @@
+class List
+  constructor: (@attributes)->
+  id: -> @attributes.id || @attributes._id
+  table_number: -> @attributes.table_number
+  total_amount: -> @attributes.total_amount
+  section_title: -> @attributes.section_title
+  needs_help: -> @attributes.needs_help
+  needs_payment: -> @attributes.needs_payment
+  active: -> @attributes.state == 'active'
+  products: -> @attributes.products || []
+
+@List = List

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

@@ -0,0 +1,17 @@
+class Order
+  constructor: (@attributes)->
+  table_number: -> @attributes.table_number
+  id: -> @attributes.id || @attributes._id
+  total_amount: -> @attributes.total_amount
+  section_title: -> @attributes.section_title
+  list_id: -> @attributes.list_id
+  state: -> @attributes.state
+  display: ->
+    order_txts = []
+    return '' unless @attributes.products
+    for product in @attributes.products
+      order_txts.push(product.name + ' (' + product.number + ')')
+    order_txts.join(', ')
+  can_process: -> @attributes.state == 'placed'
+
+@Order = Order

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

@@ -1,6 +1,37 @@
 root = exports ? this
-data_host = ''
 root.Qsupplier=
+  watch_events: ->
+    faye = new Faye.Client('http://localhost:9292/faye')
+    faye.subscribe "/supplier/"+supplier_id, (e)=>
+      if(e.event == 'new_order')
+        body = $('#active-orders-table tbody')
+        order = new Order(e.data)
+        body.append @mustache('#active-order-template', order)
+      else if(e.event == 'list_needs_help')
+        $('#list-needs-help-indicator-'+e.data.id).removeClass('hide')
+        $('#list-is-helped-button-'+e.data.id).removeClass('hide')
+      else if(e.event == 'list_needs_payment')
+        $('#list-needs-payment-indicator-'+e.data.id).removeClass('hide')
+      else if(e.event == 'list_added')
+        $('#active-lists-table tbody').append @mustache('#active-list-template', new List(e.data))
+      else if e.event == 'list_update'
+        list = new List(e.data)
+        row = $('#list-row-'+list.id())
+        content = @mustache('#active-list-template', list)
+        if row.length then row.replaceWith(content) else $('#active-lists-table tbody').append(content)
+      else if e.event == 'list_closed'
+        $('#list-row-'+e.data.id).remove()
+        $('.of-list-'+e.data.id).remove()
+      else if e.event == 'list_helped'
+        list_id = e.data.id
+        $('#list-needs-help-indicator-'+list_id).addClass('hide')
+        $('#list-is-helped-button-'+list_id).addClass('hide')
+      else if e.event == 'order_being_processed'
+        $('#order-in-process-button-'+e.data.id).hide()
+      else if e.event == 'order_being_delivered'
+        $('#order-row-'+e.data.id).remove()
+      console.log(e)
+    false
   move_table_to_active_section: (table_id)->
     table_container = $('#section-table-'+table_id)
     section_container = $('.section-tables-active')
@@ -14,7 +45,7 @@ root.Qsupplier=
       data: {table: {section_id: current_section_id}},
       dataType: 'json'
     )
-  position_table_in_active_section: (section_container, table_container, make_draggable)-> 
+  position_table_in_active_section: (section_container, table_container, make_draggable)->
     make_draggable ||= false
     button_container = table_container.find('.action-button-container')
     button_container.html('')
@@ -55,84 +86,39 @@ root.Qsupplier=
       data: {table: {section_id: ''}},
       dataType: 'json'
     )
-    
-  load_active_lists: () -> 
-    $.get('/supplier/active_lists.json?section_id='+($('#current_section_selector').val() || ''), (res) ->
+
+  load_active_lists: () ->
+    $.get('/supplier/active_lists.json?section_id='+($('#current_section_selector').val() || ''), (res) =>
       body = $('#active-lists-table tbody')
       body.find('tr').remove()
       foot = $('#active-lists-table tfoot')
       for list in res.lists
-        order_txts = []
-        row = $('<tr></tr>').appendTo(body)
-        close_btn = $('<button class="btn btn-warning">Close!</button>')
-        close_callback = ( (lst, r) ->
-          ->
-            my_btn = $(this)
-            $.post('/supplier/close_list', {list_id: list._id}, (res)-> r.slideUp('slow'))
-        )(list, row)
-        close_btn.click(close_callback)
-        
-        needs_help_btn = $('<button class="btn btn-info">Question answered!</button>')
-        needs_help_callback = ( (lst, r) ->
-          ->
-            my_btn = $(this)
-            $.post('/supplier/mark_list_as_helped', {list_id: list._id}, (res)-> my_btn.remove() )
-        )(list, row)
-        needs_help_btn.click(needs_help_callback)
-        
-
-        icons_td = $('<td class="status-icons"></td>').appendTo(row)
-        icons_td.append('<i class="icon-hand-up"></i>').append('&nbsp;') if list.needs_help # or icon-bell 
-        icons_td.append('<i class="icon-check"></i>') if list.needs_payment
-
-        row.append($('<td class="numeric"></td>').append($('<a href="/supplier/lists/'+list._id+'"></a>').text(list.table_number)))
-        row.append($('<td></td>').text(list.section_title))
-        row.append($('<td class="currency"></td>').html(currency(list.total_amount)))
-        td_buttons = $('<td class="actions"></td>')
-        td_buttons.append(needs_help_btn).append('&nbsp;') if list.needs_help
-        td_buttons.append(close_btn)
-        row.append(td_buttons)
-      #foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>');
+        body.append @mustache('#active-list-template', new List(list))
+    )
+  mark_list_as_helped: (list_id)->
+    $.post('/supplier/mark_list_as_helped', {list_id: list_id}, (res)->
+    )
+  close_list: (list_id)->
+    $.post('/supplier/close_list', {list_id: list_id}, (res)->
     )
 
-  load_active_orders: () -> 
-    $.get('/supplier/active_orders.json?section_id='+($('#current_section_selector').val() || ''), (res) ->
+  load_active_orders: () ->
+    $.get('/supplier/active_orders.json?section_id='+($('#current_section_selector').val() || ''), (res) =>
       body = $('#active-orders-table tbody')
       body.find('tr').remove()
       foot = $('#active-orders-table tfoot')
       if(!res.orders && !res.orders.length)
-        alert('No orders in list');
-        return;
+        alert('No orders in list')
+        return
       for order in res.orders
-        order_txts = []
-        row = $('<tr></tr>').appendTo(body)
-        process_btn = $('<button class="btn btn-success">In process!</button>')
-        process_callback = ( (ord) ->
-          ->
-            my_btn = $(this)
-            $.post('/supplier/mark_order_in_process', {order_id: ord.id}, (res)-> my_btn.remove())
-        )(order)
-        process_btn.click(process_callback)
-
-        delivered_btn = $('<button class="btn btn-inverse">Is delivered!</button>')
-        delivered_callback = ( (ord, r) ->
-          ->
-            my_btn = $(this)
-            $.post('/supplier/order_is_delivered', {order_id: ord.id}, (res)-> r.slideUp('slow'))
-        )(order, row)
-        delivered_btn.click(delivered_callback)
-        for product in order.products
-          order_txts.push(product.name + ' (' + product['number'] + ')')
-        row.append($('<td></td>').text(order_txts.join(', ')))
-        row.append($('<td class="numeric"></td>').text(order.table_number))
-        row.append($('<td></td>').text(order.section_title))
-        row.append($('<td class="currency"></td>').html(currency(order.total_amount)))
-        td_buttons = $('<td class="actions"></td>')
-        td_buttons.append(process_btn).append('&nbsp;') if order.state == 'placed'
-        td_buttons.append(delivered_btn)
-        row.append(td_buttons)
-      #foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>');
+        ord = new Order(order)
+        body.append @mustache('#active-order-template', ord)
     )
+  mark_order_in_process: (order_id)->
+    $.post('/supplier/mark_order_in_process', {order_id: order_id})
+  mark_order_delivered: (order_id)->
+    $.post('/supplier/order_is_delivered', {order_id: order_id})
+
   load_list: (list_id) ->
     $.get(data_host + '/supplier/lists/'+list_id+'.json', (res) ->
       body = $('#list-table tbody')
@@ -140,23 +126,13 @@ root.Qsupplier=
       Qsupplier.build_list_table(body, foot, res)
     )
   build_list_table: (body, foot, res) ->
-    body.find('tr').remove()
-    foot.find('tr').remove()
     if !res.orders && !res.orders.length
       alert('No orders in list')
       return
+    body.html('')
     for order in res.orders
-      order_txts = []
-      row = $('<tr></tr>').appendTo(body)
-      row.addClass(order.state)
-      #if(order.state == 'placed') row.addClass('info');
-      #if(order.state == 'delivered') row.addClass('success');
-      row.addClass('error') if order.state == 'cancelled'
-      for product in order.products
-        order_txts.push(product.name + ' (' + product['number'] + ')')
-      row.append($('<td></td>').text(order_txts.join(', ')))
-      row.append($('<td class="currency"></td>').html(currency(order.total_amount)))
-    foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>')
+      body.append @mustache('#list-order-template', new Order(order))
+    foot.find('.list-total').html(currency(res.total_amount))
   update_section_tables_view: (section_id)->
     $.get(data_host + '/supplier/sections/'+section_id+'/tables_view.json', (res)->
       for table in res.tables
@@ -181,3 +157,10 @@ root.Qsupplier=
       return alert('Please fill in a positive number representing the number of tables per column') unless by_column_count && by_column_count > 0
     $.post('/supplier/sections/'+current_section_id+'/arrange_tables', {option: option, row_count: by_row_count, column_count: by_column_count}, -> window.location.reload())
     false
+  mustache: (selector, locals)->
+    locs = $.extend(locals,
+      currency: ->
+        (val)->
+          currency(Mustache.render(val, this))
+    )
+    Mustache.to_html($(selector).html(), locs)