123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- {% 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><a :href="settingsUrl(item)">${ item.id }</a></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 %}
|