2013-01-13 09:50:15 +01:00
|
|
|
// Entry object
|
2013-01-13 12:27:42 +01:00
|
|
|
function entry(){
|
|
|
|
this.id=ko.observable();
|
|
|
|
this.value_date=ko.observable();
|
|
|
|
this.operation_date=ko.observable();
|
|
|
|
this.label=ko.observable();
|
|
|
|
this.value=ko.observable();
|
|
|
|
this.account_id=ko.observable();
|
|
|
|
this.sold=ko.observable();
|
|
|
|
this.pointedsold=ko.observable();
|
|
|
|
this.category=ko.observable();
|
2013-01-07 18:42:02 +01:00
|
|
|
}
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Util function to show a message in message placeholder.
|
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">×</button><h4>' + title + '</h4><strong>' + message + '</strong></div>');
|
|
|
|
}
|
|
|
|
|
|
|
|
var ListViewModel = function() {
|
|
|
|
var self = this;
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Account store and selection
|
2013-01-07 18:42:02 +01:00
|
|
|
self.account = ko.observable();
|
|
|
|
self.accounts = ko.observableArray([]);
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Month store and selection
|
2013-01-07 18:42:02 +01:00
|
|
|
self.months = ko.observableArray();
|
|
|
|
self.month = ko.observable();
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Entry store and selection
|
|
|
|
self.entries = ko.observableArray([]);
|
2013-01-07 18:42:02 +01:00
|
|
|
self.selectedItem = ko.observable();
|
2013-01-13 12:00:44 +01:00
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Placeholder for saved value to cancel entry edition
|
2013-01-13 12:00:44 +01:00
|
|
|
self.savedItem = null;
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Placeholder for entry to remove to be available in modal function "yes" click callback
|
2013-01-12 16:36:33 +01:00
|
|
|
self.itemToRemove = ko.observable();
|
2013-01-07 18:42:02 +01:00
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Returns the data for the categories by summing values with same category
|
2013-01-12 23:02:31 +01:00
|
|
|
self.expenseCategoriesChart = ko.computed(function() {
|
2013-01-12 22:11:48 +01:00
|
|
|
var entries=ko.utils.unwrapObservable(self.entries);
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// First pass: get sum values for each category.
|
2013-01-12 22:11:48 +01:00
|
|
|
var chartValuesTmp = {};
|
|
|
|
$.each(entries, function(index, entry) {
|
|
|
|
var category = entry.category();
|
|
|
|
var value = entry.value() ? Number(entry.value()) : null;
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
if(category && value && value < 0.0) {
|
2013-01-12 22:11:48 +01:00
|
|
|
var oldValue = 0.0;
|
|
|
|
|
|
|
|
if(chartValuesTmp[category]) {
|
|
|
|
oldValue = chartValuesTmp[category];
|
|
|
|
}
|
|
|
|
|
|
|
|
chartValuesTmp[category] = oldValue - value
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Second pass: transform to an array readable by jqplot.
|
|
|
|
var chartValues = [];
|
2013-01-12 22:11:48 +01:00
|
|
|
$.each(chartValuesTmp, function(key, value) {
|
|
|
|
chartValues.push([key, value]);
|
|
|
|
});
|
|
|
|
|
|
|
|
return chartValues;
|
|
|
|
});
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Return the data for the sold chart.
|
2013-01-12 13:56:52 +01:00
|
|
|
self.entriesChart = ko.computed(function() {
|
2013-01-13 10:14:43 +01:00
|
|
|
// We assume that entries are sorted by value date descending.
|
2013-01-12 22:11:48 +01:00
|
|
|
var entries = ko.utils.unwrapObservable(self.entries).slice().reverse();
|
2013-01-12 13:56:52 +01:00
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// First pass: get open, high, low and close values for each day.
|
2013-01-12 13:56:52 +01:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Second pass: transform to an array readable by jqplot OHLC renderer.
|
|
|
|
var chartValues = [];
|
2013-01-12 13:56:52 +01:00
|
|
|
$.each(chartValuesTmp, function(key, value) {
|
2013-01-13 10:14:43 +01:00
|
|
|
chartValues.push([key, value['open'], value['high'], value['low'], value['close']]);
|
2013-01-12 13:56:52 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
return chartValues;
|
|
|
|
}, self);
|
|
|
|
|
2013-01-13 10:14:43 +01:00
|
|
|
// Function to load entries from server for a specific account and month.
|
2013-01-10 13:10:41 +01:00
|
|
|
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-13 10:14:43 +01:00
|
|
|
// Clean up current entries.
|
2013-01-07 18:42:02 +01:00
|
|
|
self.entries.removeAll();
|
2013-01-13 10:14:43 +01:00
|
|
|
|
|
|
|
// Clean up selected entry.
|
2013-01-07 18:42:02 +01:00
|
|
|
self.selectedItem(null);
|
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
self.entries(ko.utils.arrayMap(data, ko.mapping.fromJS));
|
2013-01-09 23:39:26 +01:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
self.loadAccounts = function() {
|
|
|
|
$.post("api/entry.php", {action: "get_accounts"}).success(function (result) {
|
|
|
|
self.accounts(result);
|
|
|
|
|
2013-01-12 13:56:52 +01:00
|
|
|
if(self.account()) {
|
|
|
|
$.each(self.accounts(), function(index, account) {
|
|
|
|
if(self.account().id == account.id) {
|
|
|
|
self.account(account);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2013-01-09 23:39:26 +01:00
|
|
|
if(!self.account()){
|
|
|
|
self.account(result[0]);
|
|
|
|
}
|
2013-01-10 13:10:41 +01:00
|
|
|
|
|
|
|
self.loadMonths(self.account());
|
2013-01-09 23:39:26 +01:00
|
|
|
});
|
|
|
|
};
|
2013-01-07 18:42:02 +01:00
|
|
|
|
2013-01-09 23:39:26 +01:00
|
|
|
self.loadMonths = function(account){
|
|
|
|
$.post("api/entry.php", {action: "get_months", account: account.id}).success(function (result) {
|
|
|
|
self.months(result);
|
|
|
|
|
2013-01-12 13:56:52 +01:00
|
|
|
if(self.month()) {
|
|
|
|
$.each(self.months(), function(index, month) {
|
|
|
|
if(self.month().year == month.year && self.month().month == month.month) {
|
|
|
|
self.month(month);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2013-01-10 13:10:41 +01:00
|
|
|
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) {
|
2013-01-13 12:00:44 +01:00
|
|
|
if(self.savedItem) {
|
2013-01-07 18:42:02 +01:00
|
|
|
self.cancel();
|
|
|
|
}
|
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
self.savedItem=ko.toJS(item);
|
2013-01-07 18:42:02 +01:00
|
|
|
self.selectedItem(item);
|
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
$("#value_date").datepicker().on('changeDate', function(ev){
|
|
|
|
self.selectedItem().value_date(ev.date.format(ev.currentTarget.dataset.dateFormat));
|
2013-01-07 18:42:02 +01:00
|
|
|
});
|
2013-01-08 18:03:25 +01:00
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
$("#operation_date").datepicker().on('changeDate', function(ev){
|
|
|
|
self.selectedItem().operation_date(ev.date.format(ev.currentTarget.dataset.dateFormat));
|
2013-01-08 18:03:25 +01:00
|
|
|
});
|
2013-01-07 18:42:02 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
self.cancel = function() {
|
2013-01-13 12:00:44 +01:00
|
|
|
if(self.selectedItem() && self.savedItem) {
|
|
|
|
self.selectedItem().id(self.savedItem.id); // id should not change, but just in case...
|
|
|
|
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_id(self.savedItem.account_id); // account_id should not change, but just in case...
|
2013-01-07 18:42:02 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// This item was just added.
|
|
|
|
if(self.selectedItem() && !self.selectedItem().id()) {
|
|
|
|
self.entries.remove(self.selectedItem());
|
|
|
|
}
|
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
self.savedItem = null;
|
2013-01-07 18:42:02 +01:00
|
|
|
self.selectedItem(null);
|
|
|
|
};
|
|
|
|
|
|
|
|
self.add = function() {
|
2013-01-13 12:27:42 +01:00
|
|
|
var newEntry = new entry();
|
|
|
|
newEntry.account_id(self.account().id);
|
2013-01-12 13:56:52 +01:00
|
|
|
|
|
|
|
self.entries.unshift(newEntry);
|
2013-01-08 18:03:25 +01:00
|
|
|
|
2013-01-13 12:00:44 +01:00
|
|
|
self.edit(newEntry);
|
2013-01-07 18:42:02 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
self.save = function() {
|
2013-01-12 23:02:31 +01:00
|
|
|
var item = ko.toJS(self.selectedItem());
|
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);
|
2013-01-10 13:10:41 +01:00
|
|
|
self.loadAccounts();
|
2013-01-07 18:42:02 +01:00
|
|
|
}).error(function() {
|
|
|
|
message("error", "Error.", "Unexpected error.");
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
self.remove = function (item) {
|
|
|
|
if (item.id()) {
|
2013-01-12 16:36:33 +01:00
|
|
|
self.itemToRemove(item);
|
|
|
|
$('#remove-confirm').modal();
|
2013-01-07 18:42:02 +01:00
|
|
|
} else {
|
|
|
|
self.entries.remove(item);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-01-12 16:36:33 +01:00
|
|
|
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');
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2013-01-09 23:39:26 +01:00
|
|
|
self.selectMonth = function(month) {
|
2013-01-10 13:10:41 +01:00
|
|
|
if(month) {
|
|
|
|
self.month(month);
|
|
|
|
self.loadEntries(self.account(), month);
|
|
|
|
}
|
2013-01-08 18:50:47 +01:00
|
|
|
};
|
|
|
|
|
2013-01-09 23:39:26 +01:00
|
|
|
self.selectAccount = function(account) {
|
2013-01-10 13:10:41 +01:00
|
|
|
if(account) {
|
|
|
|
self.account(account);
|
|
|
|
self.loadMonths(account);
|
|
|
|
}
|
2013-01-07 18:42:02 +01:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2013-01-12 19:10:43 +01:00
|
|
|
drawChart = function(entries, element) {
|
2013-01-12 22:11:48 +01:00
|
|
|
// clear previous chart
|
|
|
|
$(element).html("");
|
|
|
|
|
|
|
|
if(entries && entries.length > 0) {
|
|
|
|
var chartValues = [[], []];
|
|
|
|
|
2013-01-13 01:14:58 +01:00
|
|
|
chartValues[0] = entries;
|
2013-01-12 22:11:48 +01:00
|
|
|
|
2013-01-13 09:50:15 +01:00
|
|
|
var today = new Date();
|
|
|
|
today.setHours(0);
|
|
|
|
today.setMinutes(0);
|
|
|
|
|
2013-01-13 12:24:33 +01:00
|
|
|
var day = 24 * 60 * 60 * 1000;
|
|
|
|
|
|
|
|
var firstDate = new Date(Date.parse(entries[0][0]).valueOf() - day).format('yyyy-mm-dd');
|
|
|
|
var lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + day).format('yyyy-mm-dd');
|
|
|
|
|
2013-01-12 22:11:48 +01:00
|
|
|
// plot chart
|
|
|
|
window.chart = $.jqplot(element.id, chartValues, {
|
2013-01-12 23:02:31 +01:00
|
|
|
title: "Évolution du solde",
|
2013-01-12 22:11:48 +01:00
|
|
|
axes:{
|
|
|
|
xaxis:{
|
2013-01-13 12:24:33 +01:00
|
|
|
autoscale: true,
|
2013-01-12 22:11:48 +01:00
|
|
|
renderer:$.jqplot.DateAxisRenderer,
|
2013-01-13 12:24:33 +01:00
|
|
|
min: firstDate,
|
|
|
|
max: lastDate,
|
2013-01-12 22:11:48 +01:00
|
|
|
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,
|
2013-01-13 01:14:58 +01:00
|
|
|
rendererOptions:{}
|
|
|
|
}],
|
|
|
|
canvasOverlay: {
|
|
|
|
show: true,
|
|
|
|
objects: [{
|
|
|
|
dashedHorizontalLine: {
|
|
|
|
name: "zero",
|
|
|
|
y: 0,
|
|
|
|
lineWidth: 1,
|
2013-01-13 01:17:45 +01:00
|
|
|
color: "red",
|
|
|
|
shadow: false
|
2013-01-13 01:14:58 +01:00
|
|
|
}},
|
|
|
|
{ dashedVerticalLine: {
|
|
|
|
name: "today",
|
2013-01-13 09:50:15 +01:00
|
|
|
x: today,
|
2013-01-13 01:14:58 +01:00
|
|
|
lineWidth: 1,
|
2013-01-13 01:17:45 +01:00
|
|
|
color: "gray",
|
|
|
|
shadow: false
|
2013-01-13 01:14:58 +01:00
|
|
|
}}]
|
|
|
|
}
|
2013-01-12 22:11:48 +01:00
|
|
|
});
|
2013-01-12 22:14:42 +01:00
|
|
|
} else {
|
|
|
|
window.chart = null;
|
2013-01-12 22:11:48 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
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, {
|
2013-01-12 23:02:31 +01:00
|
|
|
title: "Dépenses",
|
2013-01-12 22:11:48 +01:00
|
|
|
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;
|
2013-01-12 22:11:48 +01:00
|
|
|
}
|
2013-01-12 19:10:43 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
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-12 13:56:52 +01:00
|
|
|
}
|
|
|
|
};
|
2013-01-07 18:42:02 +01:00
|
|
|
|
2013-01-12 22:11:48 +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);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-01-12 19:10:43 +01:00
|
|
|
$(document).ajaxError(function(event, xhr, settings) {
|
|
|
|
message("error", "Error.", xhr.statusText);
|
|
|
|
});
|
2013-01-12 15:51:00 +01:00
|
|
|
|
2013-01-12 22:11:48 +01:00
|
|
|
$(window).resize(function() {
|
|
|
|
if(window.chart) {
|
|
|
|
window.chart.replot({resetAxes: true});
|
|
|
|
}
|
|
|
|
|
2013-01-12 22:16:05 +01:00
|
|
|
if(window.pieChart) {
|
2013-01-12 22:11:48 +01:00
|
|
|
window.pieChart.replot({resetAxes: true});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-01-12 19:10:43 +01:00
|
|
|
var viewModel = new ListViewModel();
|
2013-01-12 15:51:00 +01:00
|
|
|
ko.applyBindings(viewModel);
|
|
|
|
|
|
|
|
$(viewModel.loadAccounts);
|
2013-01-07 18:42:02 +01:00
|
|
|
|