398 lines
13 KiB
JavaScript
398 lines
13 KiB
JavaScript
function enable_all_customers() {
|
||
$("li.customer").each(function(i) {
|
||
$(this).removeClass("marked");
|
||
$(this).show();
|
||
});
|
||
}
|
||
function filter_customers(typed) {
|
||
setTimeout(function() {
|
||
$("li.customer").each(function(i) {
|
||
var pattern = new RegExp(typed,"i");
|
||
var name = $(this).children("span.name").text();
|
||
if(!pattern.test(name)) {
|
||
$(this).hide();
|
||
$(this).removeClass("marked");
|
||
} else {
|
||
$(this).show();
|
||
var full_match = name.toLowerCase() == typed.toLowerCase();
|
||
// FIXME: needs one more char.
|
||
var single_match = $("li.customer:visible").length == 1;
|
||
console.log(full_match, single_match);
|
||
//if(full_match || single_match) {
|
||
if(full_match) {
|
||
$(this).addClass("marked");
|
||
} else {
|
||
$(this).removeClass("marked");
|
||
}
|
||
}
|
||
});
|
||
}, 50);
|
||
}
|
||
function enable_all_products() {
|
||
$("li.product").each(function(i) {
|
||
$(this).removeClass("marked");
|
||
$(this).show();
|
||
});
|
||
}
|
||
function reset_qtys() {
|
||
$(".qty").each(function(i) {
|
||
$(this).html('0');
|
||
});
|
||
|
||
$("input[name$=amount]").each(function(i) {
|
||
$(this).val("0");
|
||
});
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
/* Hide alert messages */
|
||
$("a[data-dismiss=alert]").click(function(){
|
||
$(this).parent().parent().parent().slideUp();
|
||
});
|
||
setTimeout( function() {
|
||
$("a[data-dismiss=alert]").parent().parent().parent().slideUp();
|
||
}, 5000);
|
||
|
||
/* Tooltips */
|
||
$("h2").tooltip({placement: 'right'});
|
||
$("img.customer").tooltip();
|
||
$("a.product").tooltip();
|
||
$("#footer .credits .love").tooltip();
|
||
|
||
/*
|
||
* View: Deposit and register
|
||
*/
|
||
|
||
/* Customer search */
|
||
$('#id_customer_typeahead').keyup(function(event) {
|
||
filter_customers(event.target.value);
|
||
});
|
||
/* Customer selection */
|
||
$("li.customer").click( function() {
|
||
enable_all_customers();
|
||
/* Disable the customer button just clicked */
|
||
$(this).addClass("marked");
|
||
/* Update the typeahead field */
|
||
var name = $(this).children("span.name").text();
|
||
$("#id_customer_typeahead").val(name);
|
||
/* Update the select field */
|
||
var id = $(this).children("span.id").text();
|
||
$("#id_customer option, #id_user option").removeAttr('selected');
|
||
$("#id_customer option[value="+id+"], #id_user option[value="+id+"]").attr('selected','selected');
|
||
console.log(id);
|
||
});
|
||
|
||
|
||
/*
|
||
* View: Register
|
||
*/
|
||
|
||
/* Product amount controls */
|
||
$("#register li.product").click( function() {
|
||
/* Mark the product as selected */
|
||
$(this).addClass("marked");
|
||
/* Update amounts */
|
||
var form_field = $(this).children("input[name$=amount]");
|
||
var display = $(this).children(".qty");
|
||
var qty = Number(form_field.val()) + 1;
|
||
form_field.val(qty);
|
||
display.html(qty);
|
||
/* Update total*/
|
||
var sale_price_int = Number($(this).children("span.sale_price_int").text());
|
||
var cur_total = Number($("span.total_text").text());
|
||
$("span.total_text").html(cur_total + sale_price_int);
|
||
});
|
||
/* Form reset */
|
||
$("#register button[type=reset]").click( function() {
|
||
$('#id_customer option').removeAttr('selected');
|
||
$("#id_customer_typeahead").val("");
|
||
$("span.total_text").html("");
|
||
enable_all_customers();
|
||
enable_all_products();
|
||
reset_qtys();
|
||
});
|
||
|
||
/* Toggle infrequent users */
|
||
$(".toggle-infrequent-users").on('click', function(e) {
|
||
e.preventDefault();
|
||
$("li.customer.infrequent").toggleClass('hidden');
|
||
$(".users-description .infrequent-users").toggleClass('hidden');
|
||
if($(this).text() === "Vis alle") {
|
||
$(this).text("Skjul gamliser");
|
||
}
|
||
else {
|
||
$(this).text("Vis alle");
|
||
}
|
||
});
|
||
|
||
/*
|
||
* View: Stats
|
||
*/
|
||
if( $("#stats").length > 0) {
|
||
/* TODO select data element with index 0 of each pie-chart */
|
||
var charts = [];
|
||
var products_url = '/stats/products/';
|
||
var order_url = '/stats/orders/';
|
||
var order_hourly_url = '/stats/orders/hourly';
|
||
var products_realtime_url = '/stats/orders/products_realtime';
|
||
|
||
/* orders */
|
||
$.getJSON(order_url, function(data) {
|
||
var render_to = 'order_chart';
|
||
|
||
// define the options
|
||
var options = {
|
||
credits: {
|
||
enabled: false
|
||
},
|
||
chart: {
|
||
renderTo: render_to,
|
||
plotBackgroundColor: null,
|
||
plotBorderWidth: null,
|
||
plotShadow: false
|
||
},
|
||
title: {
|
||
text: 'Fordeling av ordre på person'
|
||
},
|
||
tooltip: {
|
||
formatter: function() {
|
||
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
|
||
}
|
||
},
|
||
plotOptions: {
|
||
pie: {
|
||
allowPointSelect: true,
|
||
cursor: 'pointer',
|
||
dataLabels: {
|
||
enabled: true,
|
||
color: '#000000',
|
||
connectorColor: '#000000',
|
||
formatter: function() {
|
||
return '<b>'+ this.point.name +'</b>: '+ this.y;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
name: 'Orders',
|
||
data: data
|
||
}]
|
||
};
|
||
charts.push(new Highcharts.Chart(options));
|
||
});
|
||
|
||
/* products */
|
||
$.getJSON(products_url, function(data) {
|
||
var products = data.response.products;
|
||
for(var i in products) {
|
||
var render_to = 'product_chart' + products[i].product.id;
|
||
var series_data = products[i].counts;
|
||
// define the options
|
||
var options = {
|
||
credits: {
|
||
enabled: false
|
||
},
|
||
chart: {
|
||
renderTo: render_to,
|
||
plotBackgroundColor: null,
|
||
plotBorderWidth: null,
|
||
plotShadow: false
|
||
},
|
||
title: {
|
||
text: products[i].product.name
|
||
},
|
||
tooltip: {
|
||
formatter: function() {
|
||
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +' %';
|
||
}
|
||
},
|
||
plotOptions: {
|
||
pie: {
|
||
allowPointSelect: true,
|
||
cursor: 'pointer',
|
||
dataLabels: {
|
||
enabled: true,
|
||
color: '#000000',
|
||
connectorColor: '#000000',
|
||
formatter: function() {
|
||
return '<b>'+ this.point.name +'</b>: ' + this.y;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
name: 'Orders',
|
||
data: series_data
|
||
}]
|
||
};
|
||
charts.push(new Highcharts.Chart(options));
|
||
}
|
||
});
|
||
/* orders hourly */
|
||
$.getJSON(order_hourly_url, function(data) {
|
||
var render_to = 'order_hourly_chart';
|
||
|
||
// define the options
|
||
var options = {
|
||
credits: {
|
||
enabled: false
|
||
},
|
||
chart: {
|
||
renderTo: render_to,
|
||
type: 'column'
|
||
},
|
||
title: {
|
||
text: 'Ordre - time for time'
|
||
},
|
||
tooltip: {
|
||
formatter: function() {
|
||
return this.y + " stk";
|
||
}
|
||
},
|
||
yAxis: {
|
||
title: {
|
||
text: 'Ordre'
|
||
},
|
||
},
|
||
xAxis: {
|
||
title: {
|
||
text: 'Tid (h)'
|
||
},
|
||
labels: {
|
||
formatter: function() {
|
||
return this.value + ":00";
|
||
},
|
||
}
|
||
},
|
||
plotOptions: {
|
||
column: {
|
||
minPointLength: 3,
|
||
},
|
||
series: {
|
||
groupPadding: 0,
|
||
pointPadding: 0.05,
|
||
},
|
||
},
|
||
series: [{
|
||
name: 'Ordre',
|
||
data: data.hourly
|
||
}]
|
||
};
|
||
charts.push(new Highcharts.Chart(options));
|
||
});
|
||
|
||
var products_realtime_chart = new Highcharts.Chart({
|
||
chart: {
|
||
renderTo: 'products_realtime_chart'
|
||
},
|
||
title: {
|
||
text: "Produkter solgt over tid"
|
||
},
|
||
xAxis: {
|
||
type: "datetime"
|
||
},
|
||
yAxis: {
|
||
title: {
|
||
text: "Antall solgt"
|
||
}
|
||
},
|
||
|
||
plotOptions: {
|
||
series: {
|
||
marker: {
|
||
radius: 3
|
||
}
|
||
}
|
||
},
|
||
|
||
series: {}
|
||
});
|
||
charts.push(products_realtime_chart);
|
||
|
||
function parse_products_realtime_data(data) {
|
||
var chart = products_realtime_chart;
|
||
|
||
for (var product in data.products) {
|
||
if (chart.get(product) === null) {
|
||
chart.addSeries({
|
||
data: [],
|
||
id: product,
|
||
name: product
|
||
});
|
||
|
||
var series = chart.get(product);
|
||
_.each(data.products[product], function(point) {
|
||
series.addPoint({
|
||
id: point[0],
|
||
x: point[0],
|
||
y: point[1]
|
||
});
|
||
});
|
||
}
|
||
else {
|
||
var series = chart.get(product);
|
||
_.each(data.products[product], function(point) {
|
||
if (chart.get(point[0]) === null) {
|
||
series.addPoint({
|
||
id: point[0],
|
||
x: point[0],
|
||
y: point[1]
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function get_products_realtime_data() {
|
||
var that = this;
|
||
$.ajax( {
|
||
url: products_realtime_url,
|
||
dataType: "json",
|
||
success: function (data) {
|
||
parse_products_realtime_data(data);
|
||
|
||
setTimeout(function () {
|
||
get_products_realtime_data();
|
||
}, 15000);
|
||
},
|
||
cache: false
|
||
});
|
||
}
|
||
|
||
get_products_realtime_data();
|
||
|
||
}
|
||
var input_selector = "#id_facebook_username";
|
||
/* Facebook username check */
|
||
$(input_selector).on('keyup', _.debounce(function(event) {
|
||
var user_id = event.target.value;
|
||
if(user_id.trim().length === 0) {
|
||
$(input_selector).parent().removeClass('has-success has-feedback has-error');
|
||
$(input_selector).parent().find(".facebook-image img").attr('src', no_picture_url);
|
||
return;
|
||
}
|
||
var picture_url = "https://graph.facebook.com/" + user_id + "/picture";
|
||
var static_url = $("meta[name=x-django-static-url]").attr('content');
|
||
var no_picture_url = static_url +"img/unknown_person.png";
|
||
$.ajax({
|
||
url: picture_url,
|
||
statusCode: {
|
||
200: function() {
|
||
$(input_selector).parent().addClass('has-success has-feedback');
|
||
$(input_selector).parent().removeClass('has-error');
|
||
$(input_selector).parent().find(".facebook-image img").attr('src', picture_url);
|
||
|
||
},
|
||
404: function() {
|
||
$(input_selector).parent().addClass('has-error has-feedback');
|
||
$(input_selector).parent().removeClass('has-success');
|
||
$(input_selector).parent().find(".facebook-image img").attr('src', no_picture_url);
|
||
}
|
||
}
|
||
});
|
||
}, 300)); // Only every 300ms
|
||
});
|