improve schedule layout

This commit is contained in:
Davide Alberani 2018-01-25 23:53:09 +01:00
parent 7e94cfb43f
commit caf2c88ae1
4 changed files with 110 additions and 70 deletions

View file

@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License.
"""
import os
import re
import io
@ -44,6 +43,7 @@ from tornado.options import define, options
import tornado.web
from tornado import gen, escape
JOBS_STORE = 'sqlite:///conf/jobs.db'
API_VERSION = '1.0'
SCHEDULES_FILE = 'conf/schedules.json'

3
dist/base.html vendored
View file

@ -6,12 +6,11 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="/static/css/vue-material.min.css">
<link rel="stylesheet" href="/static/css/themes/default.css">
<link rel="stylesheet" href="/static/css/diff2html.css">
<script src="/static/js/lodash.min.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-material.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/diff2html.js"></script>
{% block head %}{% end %}
</head>
<body>
{% block body %}{% end %}

5
dist/diff.html vendored
View file

@ -1,5 +1,10 @@
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="/static/css/diff2html.css">
<script src="/static/js/diff2html.js"></script>
{% end %}
{% block body %}
<div id="app">
<div class="md-layout">

162
dist/schedule.html vendored
View file

@ -2,27 +2,35 @@
{% 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-layout md-gutter">
<div class="md-layout-item md-size-100">
<div class="md-title">
<md-button href="/" class="md-icon-button md-primary">
<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-size-60">
<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">
<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">
<div class="md-layout-item md-size-50">
<md-field>
<label>url</label>
<md-input v-model="schedule.url" required></md-input>
@ -30,59 +38,6 @@
</div>
</div>
<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 class="md-layout-item md-size-25">
<div v-if="schedule.trigger == 'cron'">
<md-field>
<label>crontab</label>
<md-input v-model="schedule.cron_crontab"></md-input>
</md-field>
</div>
</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 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>
<div class="md-layout md-gutter">
<div class="md-layout-item md-size-33">
<md-field>
@ -104,13 +59,83 @@
</div>
</div>
<md-switch v-model="schedule.enabled">enabled</md-switch>
</md-card-content>
</md-card>
</div>
<div class="md-layout-item">
<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>
</md-card-content>
</md-card>
</div>
</div>
</div>
</div>
@ -179,13 +204,24 @@ var app = new Vue({
body {
background-color: white;
padding: 6px;
padding: 12px 20px 12px 20px;
}
.md-table {
height: 80%;
}
.home-icon {
margin-top: -6px;
}
.md-card-content {
padding: 20px;
}
#trigger-card, #main-card {
min-height: 350px;
}
</style>
{% end %}