accountant-ui/src/html/js/entries.js

517 lines
14 KiB
JavaScript
Raw Normal View History

2013-01-07 18:42:02 +01:00
function entry(data){
this.id=ko.observable(ko.utils.unwrapObservable(data.id));
this.value_date=ko.observable(ko.utils.unwrapObservable(data.value_date));
this.operation_date=ko.observable(ko.utils.unwrapObservable(data.operation_date));
this.label=ko.observable(ko.utils.unwrapObservable(data.label));
this.value=ko.observable(ko.utils.unwrapObservable(data.value));
this.account=ko.observable(ko.utils.unwrapObservable(data.account));
this.sold=ko.observable(ko.utils.unwrapObservable(data.sold));
this.pointedSold=ko.observable(ko.utils.unwrapObservable(data.pointedSold));
this.category=ko.observable(ko.utils.unwrapObservable(data.category));
2013-01-07 18:42:02 +01:00
}
function message(alertType, title, message) {
$(".alert").alert('close');
$("#message-placeholder").append('<div class="alert alert-' + alertType + '"><button type="button" class="close" data-dismiss="alert">&times;</button><h4>' + title + '</h4><strong>' + message + '</strong></div>');
}
var ListViewModel = function() {
var self = this;
self.account = ko.observable();
self.accounts = ko.observableArray([]);
self.entries = ko.observableArray([]);
self.months = ko.observableArray();
self.month = ko.observable();
self.selectedItem = ko.observable();
self.savedItem = ko.observable();
self.itemToRemove = ko.observable();
self.chart = null;
2013-01-07 18:42:02 +01:00
self.expenseCategoriesChart = ko.computed(function() {
var entries=ko.utils.unwrapObservable(self.entries);
var chartValues = [];
var chartValuesTmp = {};
$.each(entries, function(index, entry) {
var category = entry.category();
var value = entry.value() ? Number(entry.value()) : null;
if(category && value) {
var oldValue = 0.0;
if(chartValuesTmp[category]) {
oldValue = chartValuesTmp[category];
}
chartValuesTmp[category] = oldValue - value
}
});
$.each(chartValuesTmp, function(key, value) {
chartValues.push([key, value]);
});
return chartValues;
});
self.entriesChart = ko.computed(function() {
var entries = ko.utils.unwrapObservable(self.entries).slice().reverse();
var chartValues = [];
var chartValuesTmp = {};
$.each(entries, function(index, entry) {
//var date = entry.value_date() ? entry.value_date().toString() : null;
var date = entry.value_date();
var value = entry.value ? Number(entry.value()) : null;
if(date && value) {
var values = {};
var sold = Number(entry.sold());
var open = Number((sold - value).toFixed(2));
values['open'] = open;
values['high'] = sold > open ? sold : open;
values['low'] = sold < open ? sold : open;
values['close'] = sold;
if(chartValuesTmp[date]) {
var oldValues = chartValuesTmp[date];
if(oldValues['high'] > values['high']) {
values['high'] = oldValues['high'];
}
if(oldValues['low'] < values['low']) {
values['low'] = oldValues['low'];
}
values['open'] = oldValues['open'];
}
chartValuesTmp[date] = values;
}
});
$.each(chartValuesTmp, function(key, value) {
var ohlc = [key, value['open'], value['high'], value['low'], value['close']];
chartValues.push(ohlc);
});
chartValues.sort(function(a, b){
var aDate = Date.parse(a[0]);
var bDate = Date.parse(b[0]);
return aDate < bDate ? -1 : 1;
});
return chartValues;
}, self);
self.loadEntries = function(account, month) {
$.post("api/entry.php", {action: "get_entries", account: account.id, year: month.year, month: month.month}, function(data) {
2013-01-07 18:42:02 +01:00
self.entries.removeAll();
self.selectedItem(null);
var entries = [];
$.each(data, function(index, element) {
entries.push(new entry({
2013-01-07 18:42:02 +01:00
id: element.id,
value_date: new Date(element.value_date),
operation_date: element.operation_date ? new Date(element.operation_date) : null,
label: element.label,
value: element.value,
account: element.account_id,
sold: element.sold,
pointedSold: element.operation_date ? element.pointedsold : '',
category: element.category
2013-01-07 18:42:02 +01:00
}));
});
self.entries(entries);
});
};
self.loadAccounts = function() {
$.post("api/entry.php", {action: "get_accounts"}).success(function (result) {
self.accounts(result);
if(self.account()) {
$.each(self.accounts(), function(index, account) {
if(self.account().id == account.id) {
self.account(account);
}
});
}
if(!self.account()){
self.account(result[0]);
}
self.loadMonths(self.account());
});
};
2013-01-07 18:42:02 +01:00
self.loadMonths = function(account){
$.post("api/entry.php", {action: "get_months", account: account.id}).success(function (result) {
self.months(result);
if(self.month()) {
$.each(self.months(), function(index, month) {
if(self.month().year == month.year && self.month().month == month.month) {
self.month(month);
}
});
}
if(!self.month()) {
self.month(result[result.length - 1]);
}
self.loadEntries(self.account(), self.month());
2013-01-07 18:42:02 +01:00
});
};
self.templateToUse = function (item) {
return self.selectedItem() === item ? 'editTmpl' : 'itemsTmpl';
};
self.edit = function(item) {
if(self.savedItem() != null) {
self.cancel();
}
self.savedItem(new entry(item));
self.selectedItem(item);
$("#value_date").datepicker({format: "yyyy-mm-dd"}).on('changeDate', function(ev){
self.selectedItem().value_date(new Date(ev.date.valueOf()));
});
$("#operation_date").datepicker({format: "yyyy-mm-dd"}).on('changeDate', function(ev){
self.selectedItem().operation_date(new Date(ev.date.valueOf()));
});
$("#operation_date_clear").click(function(e){
self.selectedItem().operation_date(null);
});
2013-01-07 18:42:02 +01:00
};
self.cancel = function() {
if(self.selectedItem() && self.savedItem()) {
self.selectedItem().id(self.savedItem().id());
self.selectedItem().operation_date(self.savedItem().operation_date());
self.selectedItem().value_date(self.savedItem().value_date());
self.selectedItem().label(self.savedItem().label());
self.selectedItem().value(self.savedItem().value());
self.selectedItem().account(self.savedItem().account());
}
// This item was just added.
if(self.selectedItem() && !self.selectedItem().id()) {
self.entries.remove(self.selectedItem());
}
self.savedItem(null);
self.selectedItem(null);
};
self.add = function() {
if(self.savedItem() != null) {
self.cancel();
}
var newEntry = new entry({
2013-01-07 18:42:02 +01:00
account: self.account().id
});
self.entries.unshift(newEntry);
2013-01-07 18:42:02 +01:00
self.selectedItem(newEntry);
$("#value_date").datepicker({format: "yyyy-mm-dd"}).on('changeDate', function(ev){
self.selectedItem().value_date(new Date(ev.date.valueOf()));
});
$("#operation_date").datepicker({format: "yyyy-mm-dd"}).on('changeDate', function(ev){
self.selectedItem().operation_date(new Date(ev.date.valueOf()));
});
$("#operation_date_clear").click(function(e){
self.selectedItem().operation_date(null);
});
2013-01-07 18:42:02 +01:00
};
self.save = function() {
var item = ko.toJS(self.selectedItem());
2013-01-07 18:42:02 +01:00
if(item.value_date) {
item.value_date = dateToString(item.value_date);
2013-01-07 18:42:02 +01:00
}
if(item.operation_date) {
item.operation_date = dateToString(item.operation_date);
2013-01-07 18:42:02 +01:00
}
$.post("api/entry.php", {action: "save_entry", entry:item}).success(function(data) {
message("success", "Save", data.message);
self.selectedItem(null);
self.loadAccounts();
2013-01-07 18:42:02 +01:00
}).error(function() {
message("error", "Error.", "Unexpected error.");
});
};
self.remove = function (item) {
if (item.id()) {
self.itemToRemove(item);
$('#remove-confirm').modal();
2013-01-07 18:42:02 +01:00
} else {
self.entries.remove(item);
}
};
self.confirmRemove = function() {
var item = self.itemToRemove();
$.post("api/entry.php", {action: "remove_entry", entry:item}).success(function (result) {
self.loadAccounts();
}).complete(function (result) {
self.itemToRemove(null);
$('#remove-confirm').modal('hide');
});
};
self.selectMonth = function(month) {
if(month) {
self.month(month);
self.loadEntries(self.account(), month);
}
2013-01-08 18:50:47 +01:00
};
self.selectAccount = function(account) {
if(account) {
self.account(account);
self.loadMonths(account);
}
2013-01-07 18:42:02 +01:00
};
};
function dateToString(date) {
if(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateStr = year + "-" + (month < 10 ? '0' : '') + month + "-" + (day < 10 ? '0' : '') + day;
2013-01-07 18:42:02 +01:00
return dateStr;;
} else {
return '';
}
};
ko.bindingHandlers.date = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var value = dataSource ? unwrap(dataSource) : null;
2013-01-07 18:42:02 +01:00
if(value) {
$(element).text(dateToString(value));
} else {
$(element).text('');
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var value = dataSource ? unwrap(dataSource) : null;
2013-01-07 18:42:02 +01:00
if(value) {
$(element).text(dateToString(value));
} else {
$(element).text('');
}
}
};
ko.bindingHandlers.dateValue = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var value = dataSource ? unwrap(dataSource) : null;
2013-01-07 18:42:02 +01:00
if(value) {
$(element).val(dateToString(value));
} else {
$(element).val('');
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var value = dataSource ? unwrap(dataSource) : null;
2013-01-07 18:42:02 +01:00
if(value) {
$(element).val(dateToString(value));
} else {
$(element).val('');
}
}
};
drawChart = function(entries, element) {
// clear previous chart
$(element).html("");
if(entries && entries.length > 0) {
var chartValues = [[], []];
chartValues[0] = entries;
// plot chart
window.chart = $.jqplot(element.id, chartValues, {
title: "&Eacute;volution du solde",
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {formatString: "%F"}
},
yaxis: {
autoscale: true,
}
},
highlighter: {
show:true,
yvalues: 4,
formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>open:</td><td>%s</td></tr><tr><td>hi:</td><td>%s</td></tr><tr><td>low:</td><td>%s</td></tr><tr><td>close:</td><td>%s</td></tr></table>'
},
series: [{
renderer:$.jqplot.OHLCRenderer,
color: "blue",
lineWidth: 3,
rendererOptions:{}
}],
canvasOverlay: {
show: true,
objects: [{
dashedHorizontalLine: {
name: "zero",
y: 0,
lineWidth: 1,
color: "red",
shadow: false
}},
{ dashedVerticalLine: {
name: "today",
x: new Date(),
lineWidth: 1,
color: "gray",
shadow: false
}}]
}
});
2013-01-12 22:14:42 +01:00
} else {
window.chart = null;
}
};
drawPieChart = function(entries, element) {
// clear previous chart
$(element).html("");
if(entries && entries.length > 0) {
var chartValues = [[]];
chartValues[0] = entries;
// plot chart
window.pieChart = $.jqplot(element.id, chartValues, {
title: "D&eacute;penses",
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: {
show: true,
location: 'e'
},
highlighter: {
show: true,
formatString:'%s: %s',
tooltipLocation:'sw',
useAxesFormatters:false
}
});
2013-01-12 22:14:42 +01:00
} else {
window.pieChart = null;
}
};
ko.bindingHandlers.chart = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// empty - left as placeholder if needed later
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
//var entries = dataSource ? unwrap(dataSource) : null;
var entries = dataSource ? unwrap(dataSource) : null;
drawChart(entries, element);
}
};
2013-01-07 18:42:02 +01:00
ko.bindingHandlers.pieChart = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// empty - left as placeholder if needed later
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
//var entries = dataSource ? unwrap(dataSource) : null;
var entries = dataSource ? unwrap(dataSource) : null;
drawPieChart(entries, element);
}
};
$(document).ajaxError(function(event, xhr, settings) {
message("error", "Error.", xhr.statusText);
});
$(window).resize(function() {
if(window.chart) {
window.chart.replot({resetAxes: true});
}
2013-01-12 22:16:05 +01:00
if(window.pieChart) {
window.pieChart.replot({resetAxes: true});
}
});
var viewModel = new ListViewModel();
ko.applyBindings(viewModel);
$(viewModel.loadAccounts);
2013-01-07 18:42:02 +01:00