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

function entry(data){
    var id = ko.utils.unwrapObservable(data.id);
    var value_date = ko.utils.unwrapObservable(data.value_date);
    var operation_date = ko.utils.unwrapObservable(data.operation_date);
    var label = ko.utils.unwrapObservable(data.label);
    var value = ko.utils.unwrapObservable(data.value);
    var account = ko.utils.unwrapObservable(data.account);
    var sold = ko.utils.unwrapObservable(data.sold);
    var pointedSold = ko.utils.unwrapObservable(data.pointedSold);

    this.id=ko.observable(id ? id : null);
    this.value_date=ko.observable(value_date ? value_date : null);
    this.operation_date=ko.observable(operation_date ? operation_date : null);
    this.label=ko.observable(label ? label : null);
    this.value=ko.observable(value ? value : null);
    this.account=ko.observable(account ? account : null);
    this.sold=ko.observable(sold ? sold : null);
    this.pointedSold=ko.observable(pointedSold ? pointedSold : null);
}

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.pointedSold = ko.observable();
    self.futureSold = ko.observable();
    self.currentSold = ko.observable();

    self.selectedItem = ko.observable();
    self.savedItem = ko.observable();

    self.entriesChart = ko.computed(function() {
      var entries = 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) {
          self.entries.removeAll();
          self.selectedItem(null);

          var entries = [];
          $.each(data, function(index, element) {
              entries.push(new entry({
                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 : ''
              }));
          });

          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());
      });
    };

    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());
      });
    };

    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);
      });
    };

    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({
        account: self.account().id
      });

      self.entries.unshift(newEntry);
      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);
      });
    };

    self.save = function() {
      var item = new entry(self.selectedItem());

      if(item.value_date()) {
          item.value_date(dateToString(item.value_date()));
      }
      if(item.operation_date()) {
          item.operation_date(dateToString(item.operation_date()));
      }

      $.post("api/entry.php", {action: "save_entry", entry:item}).success(function(data) {
        message("success", "Save", data.message);

        self.selectedItem(null);
        self.loadAccounts();
      }).error(function() {
        message("error", "Error.", "Unexpected error.");
      });
    };

    self.remove = function (item) {
      if (item.id()) {
        if (confirm('Are you sure you wish to delete this item?')) {
          $.post("api/entry.php", {action: "remove_entry", entry:item}).success(function (result) {
            self.selectedItem(null);
            self.loadAccounts();
          });
        }
      } else {
        self.entries.remove(item);
      }
    };

    self.selectMonth = function(month) {
      if(month) {
        self.month(month);
        self.loadEntries(self.account(), month);
      }
    };

    self.selectAccount = function(account) {
      if(account) {
        self.account(account);
        self.loadMonths(account);
      }
    };
};

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;

      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;

      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;

      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;

      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;

      if(value) {
        $(element).val(dateToString(value));
      } else {
        $(element).val('');
      }
    }
};

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;

      if(entries && entries.length > 0) {
        var firstDate, lastDate;
        var chartValues = [[], []];

        var day = 24 * 60 * 60 * 1000;

        lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + 1 * day);
        firstDate = new Date(Date.parse(entries[0][0]).valueOf() - 1 * day);

        // For the '0' line.
        chartValues[0].push(
          [new Date(firstDate.valueOf()).toString(), 0],
          [new Date(lastDate.valueOf()).toString(), 0]);

        // Push last entry
        chartValues[1] = entries;

        // clear previous chart
        $(element).html("");

        // plot chart
        $.jqplot(element.id, chartValues, {
            axes:{
              xaxis:{
                //autoscale: true,
                //min: firstDate.toString(),
                //max: lastDate.toString(),
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions: {formatString: "%F"}
              },
              yaxis: {
                autoscale: true,
                //tickOptions: {formatString: "%f"}
              }
            },
            highlighter: {
              show:true,
              //tooltipAxes: 'y',
              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: [{
              linePattern: "dashed",
              lineWidth: 1,
              color: "red",
              showMarker: false
            },{
              renderer:$.jqplot.OHLCRenderer,
              color: "blue",
              lineWidth: 3,
              rendererOptions:{
                //candleStick: true
            }}],
        });//*/
      }
    }
};

var viewModel = new ListViewModel();

ko.applyBindings(viewModel);

$(viewModel.loadAccounts);