//$(document).foundation()

Vue.component('modal', {
    template: '#modal-template'
})

var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app, #image-modal',
    data: {
        items: data,
        currentItem: false,
        showModal: false
    },
    methods: {
        detailPopup: function (itm, event) {
            // `this` inside methods points to the Vue instance
            this.currentItem = itm;
            this.showModal = true;
        },
        approveItem: function (id) {
            var req = new XMLHttpRequest();
            req.addEventListener("load", function () {
                console.log("Approved ID " + id);
            });
            req.open("POST", "/admin/approve/" + id);
            req.send();
            this.showModal = false;
            var index = this.items.indexOf(this.currentItem);
            if (index > -1) {
                this.items.splice(index, 1);
            }
        },
        rejectItem: function (id) {
            var req = new XMLHttpRequest();
            req.addEventListener("load", function () {
                console.log("Rejected ID " + id);
            });
            req.open("POST", "/admin/reject/" + id);
            req.send();
            this.showModal = false;
            var index = this.items.indexOf(this.currentItem);
            if (index > -1) {
                this.items.splice(index, 1);
            }
        }
    }
})

var exampleSocket = new WebSocket("ws://127.0.0.1:8000/ws");
exampleSocket.onopen = function (event) {
	console.log("WS: Connection open!");
	console.log("Proto: " + exampleSocket.protocol);
};
exampleSocket.onmessage = function (event) {
    item = JSON.parse(event.data);
    app.items.push(item);
}