{% 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">
                        <md-button href="/" class="md-icon-button md-primary">
                            <md-icon>home</md-icon>
                        </md-button>
                        Diffido
                        <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="enabled" md-sort-by="enabled">
                                <md-icon v-if="item.enabled">check_box</md-icon>
                                <md-icon v-if="!item.enabled">check_box_outline_blank</md-icon>
                            </md-table-cell>
                            <md-table-cell md-label="schedule" md-sort-by="schedule">
                                <a :href="'/schedule.html?id=' + item.id"><strong>${ item.title }</strong></a>
                                <br />
                                <span>
                                    <md-icon>link</md-icon>
                                    <a :href="item.url" target="_new">${ prettifyLink(item) }</a>
                                    <md-tooltip md-direction="bottom">${ item.url }</md-tooltip>
                                </span>
                            </md-table-cell>
                            <md-table-cell md-label="trigger" md-sort-by="trigger">
                                ${ triggerString(item) }
                                <br />
                                last check: ${ prettifyLastCheck(item) }
                            </md-table-cell>
                            <md-table-cell md-label="actions" class="table-cell-left">
                                <div class="md-layout md-alignment-top-left">
                                    <div class="md-layout-item md-medium-size-10 md-small-size-50">
                                        <md-button :href="'/history.html?id=' + item.id" class="md-icon-button md-primary md-dense" :md-ripple="false">
                                            <md-icon>history</md-icon>
                                            <md-tooltip md-direction="bottom">show history</md-tooltip>
                                        </md-button>
                                    </div>
                                    <div class="md-layout-item md-medium-size-10 md-small-size-50">
                                        <md-button class="md-icon-button md-primary md-dense" @click="runSchedule(item.id)" :md-ripple="false">
                                            <md-icon>play_circle_outline</md-icon>
                                            <md-tooltip md-direction="bottom">run now</md-tooltip>
                                        </md-button>
                                    </div>
                                </div>
                            </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();
    },
    methods: {
        getSchedules: function() {
            var 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;
            });
        },
        prettifyLink: function(item) {
            var link = item.url;
            if (!link) {
                return '';
            }
            if (link.length > 40) {
                link = link.substring(0, 40) + "\u2026";
            }
            return link;
        },
        prettifyLastCheck: function(item) {
            var last = (item.last_history && item.last_history.message) || '';
            return last.substring(0, last.indexOf('.'));
        },
        triggerString: function(item) {
            if (item.trigger == 'cron') {
                return 'cron: ' + item.cron_crontab;
            }
            if (item.trigger == 'interval') {
                var text = 'interval: ';
                var pieces = [];
                _.each(['weeks', 'days', 'hours', 'minutes', 'seconds'], function(value, key) {
                    var int_val = item['interval_' + value];
                    if (int_val && parseInt(int_val)) {
                        var unit = value;
                        if (int_val == 1) {
                            unit = unit.slice(0, -1);
                        }
                        pieces.push('' + int_val + ' ' + unit);
                    }
                });
                text = text + _.join(pieces, ', ');
                return text;
            }
            return '';
        },
        runSchedule: function(id) {
            var self = this;
            var data = axios.post('/api/schedules/' + id + '/run').then(function(response) {
                setTimeout(self.getSchedules, 2500);
            });
        }
    }
});

</script>
{% end %}
{% block style %}

.table-cell-left > .md-table-cell-container {
    padding-left: 12px;
}

{% end %}