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. limitations under the License.
""" """
import os import os
import re import re
import io import io
@ -44,6 +43,7 @@ from tornado.options import define, options
import tornado.web import tornado.web
from tornado import gen, escape from tornado import gen, escape
JOBS_STORE = 'sqlite:///conf/jobs.db' JOBS_STORE = 'sqlite:///conf/jobs.db'
API_VERSION = '1.0' API_VERSION = '1.0'
SCHEDULES_FILE = 'conf/schedules.json' 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="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/vue-material.min.css">
<link rel="stylesheet" href="/static/css/themes/default.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/lodash.min.js"></script>
<script src="/static/js/vue.js"></script> <script src="/static/js/vue.js"></script>
<script src="/static/js/vue-material.min.js"></script> <script src="/static/js/vue-material.min.js"></script>
<script src="/static/js/axios.min.js"></script> <script src="/static/js/axios.min.js"></script>
<script src="/static/js/diff2html.js"></script> {% block head %}{% end %}
</head> </head>
<body> <body>
{% block body %}{% end %} {% block body %}{% end %}

5
dist/diff.html vendored
View file

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

170
dist/schedule.html vendored
View file

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