Vue.filter('currency', function(money){ return accounting.formatMoney(money); }); Vue.filter('number', function(number, precision = 2){ return accounting.formatNumber(number, precision); }); var app = new Vue({ el: "#app", data : { articles : [], inventory : { ug : [], mob : [], stud : [] }, bon: [], view: 'inventur', ready: false, }, computed: { sales_ug: function (){ var total_sales = this.inventory.ug.reduce(function(total, item ) { return total + item.Sale; }, 0); return total_sales; }, bon_price: function() { var total = this.bon.reduce(function(total, item) { return total + item.count * item.price; }, 0); return accounting.formatMoney(total); }, bon_sum: function() { var total = this.bon.reduce(function(total, item) { return total + item.count; }, 0); return total; } }, methods: { addArticle: function() { this.articles.push(new Article()); }, storeArticles: function() { this.$http.post('./backend?controller=Article&action=store', JSON.stringify(this.articles)) .then(response => { M.toast({html: response.body}); }) }, loadArticles: function() { this.$http.get('./data/articles.json') .then(response => { return response.json();}) .then(json => { json.forEach(element => { this.articles.push(Article.thaw(element)); }); }).then( x => { M.toast({ html: 'Artikel wurden geladen.'}); }).then( x => { this.articles.forEach(a => { ia = new InventoryArticle(); ia.article = a; this.inventory.ug.push(ia); this.bon.push({count: 0, name: a.name, short: a.short, price: a.portion.price}); }); }).then( x => { M.updateTextFields(); this.ready = true; }); }, resetInventur: function() { }, exportInventur: function() { this.$http.post('./backend?controller=Inventur&action=export', JSON.stringify(this.inventory.ug)) .then(response => { M.toast({html: response.body}); }) }, resetBon: function(article) { this.bon.forEach(function (item){ item.count = 0; }); }, bonned: function (items) { return items.filter(function (item) { return item.count > 0; }); } }, created: function(){ this.loadArticles(); } });