diffido/dist/index.html

{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout">
        <div class="md-layout-item" md-card>
            <md-table id="schedules-table" v-model="schedules">
                <md-table-toolbar>
                    <h1 class="md-title">Schedules <a href="schedule.html">add new</a></h1>
                </md-table-toolbar>
                <md-table-row slot="md-table-row" slot-scope="{item}">
                    <md-table-cell md-label="#" md-sort-by="id" md-numeric>${ item.id }</md-table-cell>
                    <md-table-cell md-label="title" md-sort-by="title">${ item.title }</md-table-cell>
                    <md-table-cell md-label="url" md-sort-by="email">${ item.url }</md-table-cell>
                </md-table-row>
            </md-table>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        schedules: []
    },
    mounted: function() {
        this.getSchedules();
    },
    methods: {
        getSchedules: function() {
            self = this;
            var data = axios.get('/api/schedules').then(function(response) {
                console.log(response);
                self.schedules = response.data.schedules || [];
            });
        }
    }
});

</script>
<style>

body {
    background-color: white;
}

.md-table {
    width: 60%;
    min-height: 200px;
    max-height: 600px;
}

</style>
{% end %}