Start with supplier foundation style

This commit is contained in:
2014-04-10 18:31:51 +02:00
parent 19acd26dbc
commit 0942cf4b1d
22 changed files with 1610 additions and 114 deletions
@@ -0,0 +1,52 @@
//= require jquery
//= require jquery_ujs
//= require jquery.ui.sortable
//= require js-routes
//= require translations
//= require qwaiter
//= require ./qsupplier
//= require handlebars
//= require faye
//= require ./base
//= require qtip
//= require pickdate
//= require_directory .
//= require_self
//= require moment
var Qstorage = localStorage;
$.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
$.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
String.prototype.capitalize = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
}
var path_mapping = {
user_root: '/user',
join_occupied_table: '/user/join_occupied_table',
list_products_for_table: '/user/list_products_for_table',
list_products: '/user/list_products'
}
function redirect_to(mapping, variables){
variables || (variables = {});
var vars = []
for(var name in variables){
vars.push(name + '=' +variables[name])
}
window.location = path_mapping[mapping] + '?' + vars.join('&')
}
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))
})
@@ -0,0 +1,6 @@
jQuery ->
$('#product-category-list').sortable
axis: 'y'
handle: '.handle'
update: ->
$.post($(this).data('update-url'), $(this).sortable('serialize'))
@@ -0,0 +1,127 @@
$ ->
$('.week-day-toggle').each ->
select = $('#week-day-select-'+$(@).data('day'))
$(@).addClass('active') if select.val() == '1'
$(@).click( -> select.val(Math.abs(select.val() - 1)))
$('#full_day-controller').each ->
control = $('#product_category_full_day')
if control.is(':checked')
$('#sub-day-container').removeClass('hide')
$(@).removeClass 'active'
else
$(@).addClass('active')
$(@).click ->
if control.is(':checked')
control.prop 'checked', false
$(@).removeClass 'active'
$('#sub-day-container').removeClass('hide')
else
$(@).addClass 'active'
control.prop 'checked', true
$('#sub-day-container').addClass('hide')
if Qstorage.getItem('message')
container = $('.alert-success');
msg_finder = Qstorage.getItem('message');
msg_finder = 'messages.'+msg_finder if msg_finder.indexOf('.') == -1
container.find('div').text(t(msg_finder))
container.show()
Qstorage.removeItem('message')
setupTranslations()
# GOOGLE LOCATION PICKER
$("input.location_picker").each (i)->
#return if typeof(google) == 'undefined'
iconBase = 'https://maps.google.com/mapfiles/kml/'
location_input = $(this)
map_div = $('<div>').addClass("location_picker_map")
location_input.before(map_div)
#this.parentNode.insertBefore(map_div, this)
location_input.hide()
lat = 52.07436798080633
lng = 4.316811561584473
if (this.value.split(',').length == 2)
values = this.value.split(',')
lat = values[0]
lng = values[1]
center = new google.maps.LatLng(lat,lng)
mapOptions =
zoom: 15
center: center
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
zoomControlOptions:
style: google.maps.ZoomControlStyle.SMALL
mapTypeControl: false
panControl: false
scaleControl: false
streetViewControl: false
map = new google.maps.Map(map_div.get(0), mapOptions)
marker = new google.maps.Marker(
position: center
map: map
title: 'Location'
icon: '/assets/icons/maps_location.png'
)
google.maps.event.addListener(map, 'click', (point)->
marker.setPosition(point.latLng)
location_input.val point.latLng.lat() + ','+ point.latLng.lng()
)
search_field = $('<input type="text">')
search_field.addClass('location_picker_search')
autocomplete = new google.maps.places.Autocomplete(search_field.get(0))
autocomplete.bindTo('bounds', map)
search_field.keypress( (e) ->
if e.which == 13
e.preventDefault()
)
window.autocomplete = autocomplete
map_div.before(search_field)
infowindow = new google.maps.InfoWindow()
search_marker = new google.maps.Marker({map: map, icon: iconBase + 'shapes/placemark_circle.png'})
google.maps.event.addListener autocomplete, 'place_changed', ->
infowindow.close()
search_marker.setVisible(false)
place = autocomplete.getPlace()
return unless place.geometry
#if place.geometry.viewport
# map.fitBounds(place.geometry.viewport)
#else
map.setCenter(place.geometry.location)
map.setZoom(17)
image =
url: place.icon
size: new google.maps.Size(71, 71)
origin: new google.maps.Point(0, 0)
anchor: new google.maps.Point(17, 34)
scaledSize: new google.maps.Size(35, 35)
#search_marker.setIcon(image)
search_marker.setPosition(place.geometry.location)
search_marker.setVisible(true)
address = ''
if place.address_components
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ')
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address + '</div>')
infowindow.open(map, search_marker)
# end google location map
$('.toggle-side-menu,.side-menu').click ->
menu = $('aside.side-menu')
toggle = $('.toggle-side-menu')
if menu.is(':visible')
menu.animate left: -255, -> $(@).hide()
toggle.animate left: 0, -> $(@).removeClass('open')
else
menu.show().animate left: 0
toggle.animate left: 222 - 30, -> $(@).addClass('open')
@@ -0,0 +1,11 @@
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
@@ -0,0 +1,21 @@
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'
table_id: -> @attributes.table_id
products: -> @attributes.products || []
has_active_orders: -> @attributes.has_active_orders
supplier_name: -> @attributes.supplier_name
created_at: -> @attributes.created_at
display: ->
txt = @supplier_name()
txt += ' - '
txt += Quser.format_date(@created_at())
txt
@List = List
@@ -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
@@ -0,0 +1,212 @@
root = exports ? this
root.Qsupplier=
watch_events: ->
faye = new Faye.Client(event_host)
faye.subscribe "/supplier/"+supplier_id, (e)=>
console.log(e)
if(e.event == 'new_order')
Qsupplier.App.Order.pushByAttriburtes(e.data.order) if Qsupplier.App
else if(e.event == 'list_needs_help')
if Qsupplier.App and list = Qsupplier.App.List.findCached(e.data.id)
list.markNeedsHelp()
# old stuff
$('#list-needs-help-indicator-'+e.data.id).removeClass('hide')
$('#list-is-helped-button-'+e.data.id).removeClass('hide')
$('.section-table-list-'+e.data.id).addClass('needs_help')
else if(e.event == 'list_needs_payment')
if Qsupplier.App and list = Qsupplier.App.List.findCached(e.data.id)
list.markNeedsPayment()
# old stuff
$('#list-needs-payment-indicator-'+e.data.id).removeClass('hide')
$('.section-table-list-'+e.data.id).addClass('needs_payment')
else if(e.event == 'list_is_paid')
if list = Qsupplier.App.List.findCached(e.data.id)
list.markIsPaid()
else if e.event == 'list_update'
Qsupplier.App.List.updateOrAdd(e.data.list) if Qsupplier.App
else if e.event == 'list_closed'
if Qsupplier.App and list = Qsupplier.App.List.findCached(e.data.id)
list.markClosed()
$('.list-row-'+e.data.id).remove()
$('.of-list-'+e.data.id).remove()
table_list_class = 'section-table-list-'+e.data.id
$('.'+table_list_class).removeClass('occupied needs_help needs_payment active_order').removeClass(table_list_class)
else if e.event == 'order_closed'
order.markClosed() if Qsupplier.App and order = Qsupplier.App.Order.findCached(e.data.id)
else if e.event == 'list_helped'
if Qsupplier.App and list = Qsupplier.App.List.findCached(e.data.id)
list.markHelped()
list_id = e.data.id
$('#list-needs-help-indicator-'+list_id).addClass('hide')
$('#list-is-helped-button-'+list_id).addClass('hide')
$('.section-table-list-'+list_id).removeClass('needs_help')
else if e.event == 'order_being_processed'
$('#order-in-process-button-'+e.data.id).hide()
$('.order-row-'+e.data.id).removeClass('placed').addClass('active')
else if e.event == 'order_being_delivered'
$('.order-row-'+e.data.id).remove()
$('.section-table-list-'+e.data.list_id).removeClass('active_order')
else if e.event == 'list_changed_table'
Qsupplier.App && Qsupplier.App.List.updateOrAdd(e.data.list)
# old stuff
#list = new List(e.data.list)
#list_row = $('.list-row-'+list.id())
#list_row.find('.table_number').text(list.table_number()).addClass('changed')
#list_row.find('.section_title').text(e.data.section_title)
#order_rows = $('.of-list-'+list.id())
#order_rows.find('.table_number').text(list.table_number()).addClass('changed')
#order_rows.find('.section_title').text(e.data.section_title)
## Move properties from table in section tables view
#window.last_data = e.data
#from_table = $('#section-table-'+e.data.from_table_id)
#to_table = $('#section-table-'+list.table_id())
#if to_table.length
#to_table.addClass('section-table-list-'+list.id())
#to_table.addClass('occupied')
#to_table.addClass('needs_help') if list.needs_help()
#to_table.addClass('needs_payment') if list.needs_payment()
#to_table.addClass('active_order') if list.has_active_orders()
#from_table.removeClass('occupied needs_help needs_payment active_order section-table-list-'+list.id())
console.log(e)
false
move_table_to_active_section: (table_id)->
table_container = $('#section-table-'+table_id)
section_container = $('.section-tables-active')
section_container.append(table_container)
Qsupplier.position_table_in_active_section(section_container, table_container, true)
# Set the section id of the table in the database
$.ajax(
type: 'PUT',
url: '/supplier/tables/'+table_container.data('table-id'),
data: {table: {section_id: current_section_id}},
dataType: 'json'
)
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')) ))
position_x = parseFloat(table_container.data('position-x'))
position_y = parseFloat(table_container.data('position-y'))
table_container.css('left', section_container.width()*position_x/current_section_width)
table_container.css('top', section_container.height()*position_y/current_section_height)
#TODO place element at 0.0 if it happens to be outside the region
table_container.show()
table_container.draggable(
containment: section_container,
stop: ->
position_x = current_section_width * $(this).position().left / section_container.width()
position_y = current_section_height * $(this).position().top / section_container.height()
table_container.data('position-x', position_x)
table_container.data('position-y', position_y)
$.ajax(
type: 'PUT',
url: '/supplier/tables/'+table_container.data('table-id'),
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')
table_container.css('top', 'auto')
section_container = $('.section-tables-inactive')
section_container.prepend(table_container)
button_container = table_container.find('.action-button-container')
button_container.html('')
button_container.append($('<button class="btn btn-primary btn-mini">+</button>').click( -> Qsupplier.move_table_to_active_section(table_container.data('table-id')) ))
#TODO make ajax call safe
$.ajax(
type: 'PUT',
url: '/supplier/tables/'+table_container.data('table-id'),
data: {table: {section_id: ''}},
dataType: 'json'
)
load_active_lists: () ->
$.get('/supplier/active_lists.json?section_id='+($('.section_selector').val() || ''), (res) =>
body = $('#active-lists-table tbody')
body.find('tr').remove()
foot = $('#active-lists-table tfoot')
for list in res.lists
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='+($('.section_selector').val() || ''), (res) =>
body = $('#active-orders-table tbody')
body.html('')
foot = $('#active-orders-table tfoot')
return unless res.orders
for order in res.orders
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?old_style=1', (res) ->
body = $('#list-table tbody')
foot = $('#list-table tfoot')
Qsupplier.build_list_table(body, foot, res)
)
build_list_table: (body, foot, res) ->
body.html('')
return unless res.orders
for order in res.orders
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
to = $('#section-table-'+table._id)
if table.occupied then to.addClass('occupied') else to.removeClass('occupied')
if table.needs_help then to.addClass('needs_help') else to.removeClass('needs_help')
if table.needs_payment then to.addClass('needs_payment') else to.removeClass('needs_payment')
if table.active_order then to.addClass('active_order') else to.removeClass('active_order')
)
add_tables_to_active_section: ->
number_start = $('#add-tables-number-start').val()
number_end = $('#add-tables-number-end').val()
$.post('/supplier/sections/'+current_section_id+'/add_tables', {number_start: number_start, number_end: number_end}, -> window.location.reload())
#$('#add-tables-modal').modal('hide')
false
arrange_tables_of_active_section: ->
option = $('input[name=arrange-table-option]:checked').val()
by_row_count = parseInt($('#arrange-tables-by-row-count').val())
by_column_count = parseInt($('#arrange-tables-by-column-count').val())
if(option == "by_row")
return @alert(t('section.arrange_tables.by_row_no_row_count')) unless by_row_count && by_row_count > 0
if(option == "by_column")
return @alert(t('section.arrange_tables.by_column_no_column_count')) 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}, (response)=>
if response.ok then window.location.reload() else @alert(t(response.message))
false
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)->
currency(Mustache.render(val, this))
)
Mustache.to_html(html, locs)
alert: Qwaiter.alert