123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- {% extends "base.html" %}
- {% block body %}
- <div id="app">
- <div class="md-layout">
- <div class="md-layout-item">
- <md-card id="main-card">
- <md-card-header>
- <div class="md-title">
- Card without hover effect
- <md-button href="/schedule.html" class="md-icon-button md-primary">
- <md-icon>add_circle_outline</md-icon>
- </md-button>
- </div>
- </md-card-header>
-
- <md-card-content>
- <md-table id="schedules-table" v-model="schedules">
- <md-table-row slot="md-table-row" slot-scope="{item}">
- <md-table-cell md-label="#" md-sort-by="id" md-numeric><a :href="'/schedule.html?id=' + item.id">${ item.id }</a></md-table-cell>
- <md-table-cell md-label="title" md-sort-by="title"><a :href="'/schedule.html?id=' + item.id">${ item.title }</a></md-table-cell>
- <md-table-cell md-label="url" md-sort-by="email"><a :href="item.url" target="_new">${ item.url }</a></md-table-cell>
- <md-table-cell md-label="history" md-sort-by="email"><a :href="'/history.html?id=' + item.id">history</a></md-table-cell>
- </md-table-row>
- </md-table>
- </md-card-content>
- </md-card>
- </div>
- </div>
- </div>
- <script>
- Vue.use(VueMaterial.default);
- var app = new Vue({
- el: '#app',
- delimiters: ['${', '}'],
- data: {
- schedules: []
- },
- mounted: function() {
- this.getSchedules();
- },
- computed: {
- },
- methods: {
- getSchedules: function() {
- self = this;
- var data = axios.get('/api/schedules').then(function(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;
- padding: 6px;
- }
- .md-table {
- height: 80%;
- }
- </style>
- {% end %}
|