{% extends "base.html" %}

{% block body %}
<div id="app">
    <div class="md-layout">
        <div class="md-layout-item" md-card>
            <md-field>
                <label>title</label>
                <md-input v-model="schedule.title"></md-input>
            </md-field>
            <md-field>
                <label>url</label>
                <md-input v-model="schedule.url"></md-input>
            </md-field>

            <md-field>
                <label>trigger</label>
                <md-select v-model="schedule.trigger">
                    <md-option value="interval">interval</md-option>
                    <md-option value="cron">cron</md-option>
                </md-select>
            </md-field>

            <div v-if="schedule.trigger == 'interval'">
                <md-field>
                    <label>weeks</label>
                    <md-input v-model="schedule.interval_weeks" type="number"></md-input>
                </md-field>
                <md-field>
                    <label>days</label>
                    <md-input v-model="schedule.interval_days" type="number"></md-input>
                </md-field>
                <md-field>
                    <label>hours</label>
                    <md-input v-model="schedule.interval_hours" type="number"></md-input>
                </md-field>
                <md-field>
                    <label>minutes</label>
                    <md-input v-model="schedule.interval_minutes" type="number"></md-input>
                </md-field>
                <md-field>
                    <label>seconds</label>
                    <md-input v-model="schedule.interval_seconds" type="number"></md-input>
                </md-field>
            </div>

            <div v-if="schedule.trigger == 'cron'">
                <md-field>
                    <label>crontab</label>
                    <md-input v-model="schedule.cron_crontab"></md-input>
                </md-field>
            </div>

            <md-field>
                <label>notify email</label>
                <md-input v-model="schedule.email" type="email"></md-input>
            </md-field>
            <md-field>
                <label>XPath selector</label>
                <md-input v-model="schedule.xpath"></md-input>
            </md-field>
            <md-field>
                <label>minimum change</label>
                <md-input v-model="schedule.minimum_change"></md-input>
            </md-field>
            <md-switch v-model="schedule.enabled">enabled</md-switch>
            
            <br />
            <md-button class="md-raised md-primary" @click="saveSchedule()">save</md-button>
            <md-button class="md-raised md-accent" :disabled="!hasID()" @click="deleteSchedule()">delete</md-button>
            <md-button href="/">back</md-button>
        </div>
    </div>
</div>

<script>

Vue.use(VueMaterial.default);

var app = new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: {
        {% if isinstance(id, str) %}
        id: "{{id}}",
        {% else %}
        id: null,
        {% end %}
        schedule: {},
        empty_schedule: {enabled: true, trigger: 'interval'}
    },
    mounted: function() {
        this.getSchedule(this.id);
    },
    computed: {
    },
    methods: {
        hasID: function() {
            return !(this.id === undefined || this.id === null || this.id === '');
        },
        getSchedule: function() {
            if (!this.hasID()) {
                this.schedule = this.empty_schedule;
                return;
            }
            self = this;
            var data = axios.get('/api/schedules/' + this.id).then(function(response) {
                self.schedule = response.data.schedule || self.empty_schedule;
            });
        },
        saveSchedule: function() {
            var data = this.schedule;
            if (this.hasID()) {
                axios.put('/api/schedules/' + this.id, data).then(function(response) {
                    console.log(response);
                });
            } else {
                axios.post('/api/schedules', data).then(function(response) {
                    console.log(response);
                    window.location = '/schedule.html?id=' + response.data.id;
                });
            }
        },
        deleteSchedule: function() {
            if (!this.hasID()) {
                return;
            }
            axios.delete('/api/schedules/' + this.id).then(function(response) {
                window.location = '/';
            });
        }
    }
});

</script>
<style>

body {
    background-color: white;
}

</style>
{% end %}