123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- {% extends "base.html" %}
- {% block body %}
- <div id="app">
- <div class="md-layout md-gutter md-alignment-center">
- <div class="md-layout-item md-size-100">
- <div class="md-title">
- <span>
- <md-button href="/" class="md-icon-button md-primary home-icon">
- <md-icon>home</md-icon>
- </md-button>
- Diffido: ${(schedule && schedule.title) || 'new'} schedule
- </span>
- </div>
- </div>
- <div class="md-layout-item md-medium-size-60 md-small-size-100">
- <md-card id="main-card">
- <md-card-header>
- <div class="md-title">
- Settings
- </div>
- </md-card-header>
- <md-card-content>
- <div class="md-layout md-gutter">
- <div class="md-layout-item md-size-50">
- <md-field>
- <label>title</label>
- <md-input v-model="schedule.title" required></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-50">
- <md-field>
- <label>url</label>
- <md-input v-model="schedule.url" required></md-input>
- </md-field>
- </div>
- </div>
- <div class="md-layout md-gutter">
- <div class="md-layout-item md-size-33">
- <md-field>
- <label>notify email</label>
- <md-input v-model="schedule.email" type="email"></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-33">
- <md-field>
- <label>XPath selector</label>
- <md-input v-model="schedule.xpath"></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-33">
- <md-field>
- <label>minimum change</label>
- <md-input v-model="schedule.minimum_change"></md-input>
- </md-field>
- </div>
- </div>
- <md-switch v-model="schedule.enabled">enabled</md-switch>
- </md-card-content>
- </md-card>
- </div>
- <div class="md-layout-item md-medium-size-40 md-small-size-100">
- <md-card id="trigger-card">
- <md-card-header>
- <div class="md-title">
- Trigger
- </div>
- </md-card-header>
- <md-card-content>
- <div class="md-layout md-gutter">
- <div class="md-layout-item md-size-25">
- <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>
- </div>
- <div v-if="schedule.trigger == 'cron'" class="md-layout md-gutter">
- <div class="md-layout-item md-size-50">
- <md-field>
- <label>crontab</label>
- <md-input v-model="schedule.cron_crontab"></md-input>
- </md-field>
- </div>
- </div>
- <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
- <div class="md-layout-item md-size-20">
- <md-field>
- <label>weeks</label>
- <md-input v-model="schedule.interval_weeks" type="number"></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-20">
- <md-field>
- <label>days</label>
- <md-input v-model="schedule.interval_days" type="number"></md-input>
- </md-field>
- </div>
- </div>
- <div v-if="schedule.trigger == 'interval'" class="md-layout md-gutter">
- <div class="md-layout-item md-size-20">
- <md-field>
- <label>hours</label>
- <md-input v-model="schedule.interval_hours" type="number"></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-20">
- <md-field>
- <label>minutes</label>
- <md-input v-model="schedule.interval_minutes" type="number"></md-input>
- </md-field>
- </div>
- <div class="md-layout-item md-size-20">
- <md-field>
- <label>seconds</label>
- <md-input v-model="schedule.interval_seconds" type="number"></md-input>
- </md-field>
- </div>
- </div>
- </md-card-content>
- </md-card>
- </div>
- <div class="md-layout-item md-size-100">
- <div class="md-title">
- <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>
- </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) {
- window.location = '/';
- });
- } else {
- axios.post('/api/schedules', data).then(function(response) {
- window.location = '/';
- /* 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>
- {% end %}
- {% block style %}
- body {
- padding: 12px 20px 12px 20px !important;
- }
- .home-icon {
- margin-top: -6px;
- }
- .md-card-content {
- padding: 20px;
- }
- #trigger-card, #main-card {
- min-height: 350px;
- }
- {% end %}
|