72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
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"><a :href="settingsUrl(item)">${ item.title }</a></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();
|
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
|
settingsUrl: function(item) {
|
|
if (!(item && item.id !== undefined)) {
|
|
return '';
|
|
}
|
|
return '/schedule.html?id=' + item.id;
|
|
},
|
|
getSchedules: function() {
|
|
self = this;
|
|
var data = axios.get('/api/schedules').then(function(response) {
|
|
console.log(response);
|
|
var schedules = [];
|
|
_.forEach(response.data.schedules || {}, function(value, key) {
|
|
value.id = key;
|
|
schedules.push(value);
|
|
});
|
|
self.schedules = schedules;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
|
|
body {
|
|
background-color: white;
|
|
}
|
|
|
|
.md-table {
|
|
width: 60%;
|
|
min-height: 400px;
|
|
max-height: 800px;
|
|
}
|
|
|
|
</style>
|
|
{% end %}
|