function create() {
    this.ready = false;
    fetch('/v1/button', {method: 'POST'}).then(response => {
        if (response.ok) {
            response.json().then(button => {
                this.buttons.push(button);
                this.ready = true;
            });
        }
    });
}

function update(index) {
    var button = this.buttons[index];

    this.ready = false;
    var payload = new FormData();
    payload.append('id', button.id);
    payload.append('status', button.status);

    fetch('/v1/button/', {
        method: 'PUT',
        body: payload
    }).then(response => {
        this.ready = true;
    })
};

function remove(index) {
    var button = this.buttons[index];

    this.ready = false;
    fetch('/v1/button/' + button.id, {method: 'DELETE'}).then(response => {
        if (response.ok) {
            response.json().then(ok => {
                this.buttons.splice(index, 1);
                this.ready = true;
            });
        }
    });
}

const $app = new Vue({
    el: '#container',
    data: {
        ready: false,
        buttons: []
    },
    methods: {
        create,
        remove,
        update
    }
});

// GET /button
fetch('/v1/button').then(response => {
    if (response.ok) {
        response.json().then(buttons => {
            $app.buttons = buttons;
            $app.ready = true;
        })
    }
});