layout changes and section handling

app/assets/javascripts/qrammer.js.coffee

@@ -20,82 +20,7 @@ root.Qrammer =
   currency: (num) ->
     num = 0.0 if isNaN(num) || num == '' || num == null
     '€ ' + parseFloat(num).toFixed(2)
-  load_active_orders: () -> 
-    $.get('/supplier/active_orders.json', (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;
-      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 class="currency"></td>').html(Qrammer.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>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
-    )
-
-    
-  load_active_lists: () -> 
-    $.get('/supplier/active_lists.json', (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></td>').text(list.table_number))
-        row.append($('<td class="currency"></td>').html(Qrammer.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>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
-    )
 
   build_product_list_as_modal: ->
     wrapper = $('<div class="modal"></div>')

app/assets/javascripts/qsupplier.js.coffee

@@ -13,8 +13,8 @@ root.Qsupplier=
       data: {table: {section_id: current_section_id}},
       dataType: 'json'
     )
-  position_table_in_active_section: (section_container, table_container, skip_persisting)-> 
-    skip_persisting ||= false
+  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('')
     button_container.append($('<button class="btn btn-warning btn-mini">x</button>').click( -> Qsupplier.move_table_to_inactive_section(table_container.data('table-id')) ))
@@ -37,7 +37,7 @@ root.Qsupplier=
           data: {table: {position_x: position_x, position_y: position_y}},
           dataType: 'json'
         )
-    )
+    ) if make_draggable
   move_table_to_inactive_section: (table_id)->
     table_container = $('#section-table-'+table_id)
     table_container.css('left', 'auto')
@@ -54,3 +54,81 @@ root.Qsupplier=
       data: {table: {section_id: ''}},
       dataType: 'json'
     )
+    
+  load_active_lists: () -> 
+    $.get('/supplier/active_lists.json', (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>').text(list.table_number))
+        row.append($('<td></td>').text(list.section_title))
+        row.append($('<td class="currency"></td>').html(Qrammer.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>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
+    )
+
+  load_active_orders: () -> 
+    $.get('/supplier/active_orders.json', (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;
+      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(Qrammer.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>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
+    )

app/assets/stylesheets/phone/bootstrap_overrides.css.sass

@@ -0,0 +1,17 @@
+
+//BOOTSTRAP overrides
+body
+  a
+    color: white
+    &:hover
+      color: white
+  .table-hover
+    tbody
+      tr
+        &:hover
+          td
+            background-color: #555
+  .navbar-inner
+    $navbar-inner-teint: 200 
+    background-color: rgba($navbar-inner-teint, $navbar-inner-teint, $navbar-inner-teint, 0.8)
+    background-image: url()

app/assets/stylesheets/phone/structure.css.sass

@@ -1,6 +1,8 @@
 @import compass
 $side-spacing: 5px
 $qbrown: #8B5A2B
+
+
 html
   background-image: image-url('textures/wood5.jpg')
 body

app/assets/stylesheets/structure.css.sass

@@ -5,6 +5,9 @@ table
         text-align: right
       &.numeric
         text-align: right
+      &.actions
+        text-align: right
+
   tbody
     td
       &.status-icons

app/assets/stylesheets/tablet/application.css

@@ -1,4 +1,5 @@
 /*
  *= require_self
  *= require_directory .
+ *= require 'phone/bootstrap_overrides'
  */

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

@@ -0,0 +1,36 @@
+.section-tables-container
+  .section-table
+    background-color: #ccc
+    height: 44px
+    background-repeat: no-repeat
+    width: 45px
+    color: black
+    a
+      color: black
+    //background-image: image-url('icons/section-table.png')
+    .table-link
+      margin-top: -45px
+    .table-number
+      position: absolute
+      top: 0
+      line-height: 44px
+      width: 45px
+      font-size: 42px
+      text-align: center
+    .action-button-container
+      margin-right: -20px
+  &.section-tables-active
+    position: relative
+    padding: 0
+    height: 400px
+    //background-image: image-url('textures/wood4.jpg')
+    background-color: rgba(0,0,0,0.4)
+    .section-table
+      position: absolute
+      cursor: move
+  &.section-tables-inactive
+    .section-table
+      margin-top: 10px
+      margin-bottom: 30px
+      float: left
+      margin-right: 30px

app/assets/stylesheets/tablet/structure.css.sass

@@ -12,38 +12,6 @@ body
     margin-top: 4px
     margin-bottom: 6px
     padding-bottom: 0
-.section-tables-container
-  .section-table
-    background-color: #ccc
-    height: 44px
-    background-repeat: no-repeat
-    width: 45px
-    //background-image: image-url('icons/section-table.png')
-    .table-link
-      margin-top: -45px
-    .table-number
-      position: absolute
-      top: 0
-      line-height: 44px
-      width: 45px
-      font-size: 42px
-      text-align: center
-    .action-button-container
-      margin-right: -20px
-  &.section-tables-active
-    position: relative
-    padding: 0
-    height: 400px
-    background-image: image-url('textures/wood5.jpg')
-    .section-table
-      position: absolute
-      cursor: move
-  &.section-tables-inactive
-    .section-table
-      margin-top: 10px
-      margin-bottom: 30px
-      float: left
-      margin-right: 30px
 .supplier-is-closed
   .alert
     form