143 lines
4.5 KiB
HTML
143 lines
4.5 KiB
HTML
{% 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 %}
|