var app = new Vue({
    el: "#app",
    data : {
        dimensions: [
            'l',
            'Stk.',
            'Gl.',
            'Fl.',
            'T.',
        ],
        articles : [],
        inventory : {
            ug : [],
            mob : [],
            stud : []
        }
    },
    computed: {
      sales_ug: function (){
          var total_sales = this.inventory.ug.reduce(function(total, item ) {
              return total + item.Sale;
          }, 0);
          return total_sales;
      }   
    },
    methods: {
        addArticle: function() {
            this.articles.push(new Article());
        },
        storeArticles: function() {
            this.$http.post('./backend?controller=Article&action=store', JSON.stringify(this.articles))
                .then(response => {
                    Materialize.toast(response.body, 2000);
                })
        },
        loadArticles: function() {
            this.$http.get('./data/test_articles.json')
            .then(response => { return response.json();})
            .then(json => {
                json.forEach(element => {
                    this.articles.push(Article.thaw(element));
                });
            }).then( x => {
                Materialize.toast('Artikel wurden geladen.', 2000);
            }).then( x => {
                this.articles.forEach(a => {
                    ia = new InventoryArticle();
                    ia.article = a;
                    this.inventory.ug.push(ia);
                });
            }).then( x => {
                Materialize.updateTextFields();
            });
        }
    },
    created: function(){
        this.loadArticles();
    }
    
});