use mustache to abstract out html logic in javascript

app/assets/javascripts/user/application.js.erb

@@ -27,6 +27,7 @@
 //= require twitter/bootstrap/bootstrap-typeahead
 //= require twitter/bootstrap/bootstrap-affix
 //= require qwaiter
+//= require mustache
 //= require_directory .
 //= require_self
 var path_mapping = {
@@ -176,9 +177,20 @@ $(function(){
     container.show();
   }
   $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  setTranslations();
 });
 function setLocale(locale){
   QMobile.setLocale(locale);
   $locale = locale;
-  $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  setTranslations();
+}
+function Qupdate(selector){
+  setTranslations(selector);
+}
+function setTranslations(selector){
+  if(selector){
+    $(selector).find('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  }else{
+    $('[data-t]').each(function(){$(this).text(t($(this).attr('data-t')))})
+  }
 }

app/assets/javascripts/user/quser.js.coffee

@@ -175,31 +175,35 @@ window.Quser=
           link.attr('href', root_url + src + '?'+authentication_string+'&page='+i)
         li.append(link)
         list.append(li)
+  mustache: (selector, locals)->
+    locs = $.extend(locals,
+      currency: ->
+        (val)->
+          currency(Mustache.render(val, this))
+    )
+    Mustache.to_html($(selector).html(), locs)
   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
-    for order in res.orders
+    m_obj = res
+    for order in m_obj.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>')
+      order.products_display = order_txts.join(', ')
+    body.append @mustache('#active-list-orders-template', m_obj)
+    foot.append @mustache('#active-list-orders-footer-template', m_obj)
+
   order_selected_products: ()->
     return if $.isEmptyObject(window.active_products_list)
     h = {}
     match = window.document.URL.toString().match('table_id=([0-9a-zA-Z]+)')
     h['table_id'] = match[1] if match
-    for product_id, info of window.active_products_list
-      h['products['+product_id+']'] = info.number
+    for product_id, number of window.active_products_list
+      h['products['+product_id+']'] = number
     $.post(data_host + '/user/order_selected_products', $.extend(h, authentication_object), ((res) -> Quser.handle_response(res)), 'json')
   handle_response: (res) ->
     if(typeof(res) == 'string')
@@ -215,21 +219,17 @@ window.Quser=
     else
       redirect_to res.location || 'list_products' if res['ok']
   build_product_list: ->
-    table = $('#active-order-table')
-    tbody = table.find('tbody')
-    tbody = $('<tbody></tbody>').appendTo(table) unless tbody.length
-    tbody.find('tr').remove()
     total = 0.0
-    for product_id, info of window.active_products_list
-      total += info.product.price * info.number
-      row = $('<tr></tr>').attr('id', 'active-order-row-'+product_id).appendTo(tbody)
-      row.append('<td>'+info.product.name+'</td>')
-      row.append('<td>'+info.number+'</td>')
-      row.append('<td class="currency">'+currency(info.product.price * info.number)+'</td>')
-      x_btn = $('<button class="btn btn-warning btn-mini">x</button>').click(-> delete(window.active_products_list[product_id]) && Quser.build_product_list() )
-      row.append($('<td></td>').append(x_btn))
-    $('#active-order-total').html(currency(total))
-    table.show() 
+    h = {products: []}
+    for product_id, number of window.active_products_list
+      product = window.products[product_id]
+      product.number = number
+      product.product_total = product.price * number
+      h.products.push product
+      total += product.price * number
+    h.total = total
+    $('#active-order-container').html @mustache('#active-order-template', h)
+    Qupdate('#active-order-container')
 
   load_active_list_products: ->
     Quser.populate_products_table('/user/list_products.json?'+authentication_string)
@@ -256,40 +256,39 @@ window.Quser=
       if res.supplier_name
         $('.supplier-name').text(res.supplier_name)
         delete(res['supplier_name'])
+      window.products = {}
       body.find('tr').remove()
+      script_id = if include_order_buttons then '#products-category-for-order-template' else '#products-category-template'
       for category, products of res
-        body.append('<tr><td colspan="4"><h4>'+category+'<h4></td></tr>')
+        body.append Quser.mustache(script_id,
+          category: category,
+          products: products,
+          include_order_buttons: include_order_buttons
+        )
         for product in products
-          row = $('<tr></tr>')
-          row.append('<td>'+product.name+'</td>')
-          if include_order_buttons
-            button = $('<button class="btn btn-mini btn-primary">Add</button>')
-            callback = ((prod) ->
-              ->
-                product_count_holder = $('#order-product-count-'+prod._id)
-                count = parseInt(product_count_holder.text())
-                product_count_holder.text(1)
-                Quser.add_product(prod, count)
-            )(product)
-            button.click(callback)
-            order_product_count = $('<span id="order-product-count-'+product._id+'" class="order-product-count">1</span>')
-            order_count_minus = $('<span class="btn btn-info btn-mini">-</span>')
-            order_count_minus.click(->
-              val_holder = $(this).siblings('.order-product-count')
-              val = parseInt(val_holder.text())
-              val_holder.text(val - 1) if val > 1
-            )
-            order_count_plus = $('<span class="btn btn-info btn-mini">+</span>')
-            order_count_plus.click(->
-              val_holder = $(this).siblings('.order-product-count')
-              val = parseInt(val_holder.text())
-              val_holder.text(val + 1)
-            )
-            row.append($('<td class="order-count-cell"></td>').append(order_count_minus).append('&nbsp;').append(order_product_count).append('&nbsp;').append(order_count_plus))
-          row.append('<td>'+currency(product.price)+'</td>')
-          row.append($('<td></td>').append(button)) if include_order_buttons
-          body.append(row)
+          window.products[product._id] = product
     )
+  increment_products_counter: (product_id)->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    product_count_holder.text(count + 1)
+    false
+  lower_products_counter: (product_id)->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    product_count_holder.text(count - 1)
+    false
+  add_product_to_order: (product_id, context) ->
+    product_count_holder = $('#order-product-count-'+product_id)
+    count = parseInt(product_count_holder.text())
+    count ||= 1
+    product_count_holder.text(1)
+    window.active_products_list ||= {}
+    window.active_products_list[product_id] ||= 0
+    window.active_products_list[product_id] += count
+    delete(window.active_products_list[product_id]) if window.active_products_list[product_id] < 1
+    Quser.build_product_list()
+    false
   actions_for_table: (table)->
     table = JSON.parse(table) if typeof(table) == 'string'
     $.getJSON(data_host + '/user/table_info.json?'+authentication_string+'&table_id='+table.table_id, (res)->
@@ -357,11 +356,11 @@ window.Quser=
       else
         redirect_to 'user_root', {message: 'join_request_rejected'}
     )
-  add_product: (product, count) ->
+  add_product: (product_id, count) ->
     count ||= 1
-    window.active_products_list = {} unless window.active_products_list
-    window.active_products_list[product._id] = {product: product, number: 0} unless window.active_products_list[product._id]
-    window.active_products_list[product._id].number += count
+    window.active_products_list ||= {}
+    window.active_products_list[product_id] ||= 0
+    window.active_products_list[product_id] += count
     Quser.build_product_list()
   clear_selected_products: ->
     window.active_products_list = {}

app/templates/user/_active_list_orders.mustache

@@ -0,0 +1,6 @@
+{{#orders}}
+<tr class="{{state}}">
+  <td>{{products_display}}</td>
+  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
+</tr>
+{{/orders}}

app/templates/user/_active_list_orders_footer.mustache

@@ -0,0 +1 @@
+<tr><td></td><td class="currency"><strong>{{#currency}}{{total_amount}}{{/currency}}</strong></td></tr>

app/templates/user/_active_order.mustache

@@ -0,0 +1,29 @@
+<table id="active-order-table" class="table">
+  <thead>
+    <tr>
+      <th data-t="models.product"></th>
+      <th>#</th>
+      <th class="currency" data-t="basket.total"></th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#products}}
+    <tr>
+      <td>{{name}}</td>
+      <td>{{number}}</td>
+      <td class="currency">{{#currency}}{{product_total}}{{/currency}}</td>
+    </tr>
+    {{/products}}
+  </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="2">
+        <button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"></button>
+        <button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"></button>
+      </td>
+      <td class="currency"><strong id="active-order-total">{{#currency}}{{total}}{{/currency}}</strong></td>
+      <td></td>
+    <tr>
+  </tfoot>
+</table>

app/templates/user/_products_category.mustache

@@ -0,0 +1,7 @@
+<tr><td colspan="2"><h4>{{category}}</h4></td></tr>
+{{#products}}
+<tr>
+  <td>{{name}}</td>
+  <td>{{#currency}}{{price}}{{/currency}}</td>
+</tr>
+{{/products}}

app/templates/user/_products_category_for_order.mustache

@@ -0,0 +1,13 @@
+<tr><td colspan="4"><h4>{{category}}</h4></td></tr>
+{{#products}}
+<tr>
+  <td>{{name}}</td>
+  <td class="order-count-cell">
+    <span class="btn btn-info btn-mini" onclick="Quser.lower_products_counter('{{_id}}')">-</span>
+    <span id="order-product-count-{{_id}}" class="order-product-count">1</span>
+    <span class="btn btn-info btn-mini" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
+  </td>
+  <td>{{#currency}}{{price}}{{/currency}}</td>
+  <td><button class="btn btn-mini btn-primary" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
+</tr>
+{{/products}}

app/views/layouts/phone.html.slim

@@ -17,7 +17,7 @@ html lang="en"
     link href="/images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
     link href="/favicon.ico" rel="shortcut icon"
     javascript:
-      var data_host = '#{Rails.env == 'development' ? 'http://localhost:3000' : 'http://data.qwaiter.com' }';
+      var data_host = '#{Rails.env == 'development' ? 'http://qwaiter.dev' : 'http://data.qwaiter.com' }';
       //var data_host = 'http://localhost:3000';
       //data_host = 'http://192.168.1.148:3000';
       var $locale = 'en';

app/views/user/active_list.html.slim

@@ -16,6 +16,8 @@
       tr
         td colspan=2 = slider_image
     tfoot
+script#active-list-orders-template[type="text/html"]= render 'active_list_orders.mustache'
+script#active-list-orders-footer-template[type="text/html"]= render 'active_list_orders_footer.mustache'
 - content_for :footer do
   javascript:
     jQuery(function(){

app/views/user/list_products.html.slim

@@ -11,23 +11,10 @@
     tbody
       tr
         td= slider_image
-  table#active-order-table.table.hide
-    thead
-      tr
-        th data-t="models.product"= Product.model_name.human
-        th #
-        th.currency data-t="basket.total"= t('user.basket.total')
-        th
-    tbody
-    tfoot
-      tr
-        td colspan=2
-          button class="btn btn-primary" onClick="Quser.handle_active_list(function(){Quser.order_selected_products()})" data-t="selected_products.order"= t('selected_products.order')
-          | 
-          button class="btn btn btn-warning" onClick="Quser.clear_selected_products()" data-t="selected_products.clear"= t('selected_products.clear')
-        td.currency
-          strong#active-order-total
-        td
+  #active-order-container
+script#products-category-template[type="text/html"]= render 'products_category.mustache'
+script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
+script#active-order-template[type="text/html"]= render 'active_order.mustache'
 - content_for :footer do
   javascript:
     jQuery(function(){

app/views/user/list_products_for_table.html.slim

@@ -24,6 +24,8 @@
         td.currency
           strong#active-order-total
         td
+script#products-category-template[type="text/html"]= render 'products_category.mustache'
+script#products-category-for-order-template[type="text/html"]= render 'products_category_for_order.mustache'
 - content_for :footer do
   javascript:
     jQuery(function(){