1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- {% 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 %}
|