mirror of
https://github.com/linuxserver/davos.git
synced 2026-02-05 10:28:02 +08:00
Updated UI to be more mobile friendly
This commit is contained in:
Josh Stark
parent
920b9b5a81
commit
fccef4298e
@ -26,7 +26,7 @@ def version() {
|
||||
|
||||
jar {
|
||||
baseName = 'davos'
|
||||
version = version()
|
||||
version = '0.0.1-SNAPSHOT'
|
||||
}
|
||||
|
||||
sourceCompatibility = 1.8
|
||||
|
||||
@ -1,52 +1,19 @@
|
||||
#main-nav {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 250px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
#logo {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
#navigation ul li {
|
||||
line-height: 50px;
|
||||
margin: 5px 0;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
}
|
||||
#navigation ul li a {
|
||||
display: block;
|
||||
padding-left: 45px;
|
||||
color: #666;
|
||||
}
|
||||
#navigation ul li.active,
|
||||
#navigation ul li.active:hover {
|
||||
background-color: #80cbc4;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
#navigation ul li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
#navigation ul li i.material-icons {
|
||||
position: absolute;
|
||||
font-size: 25px;
|
||||
margin: auto;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
}
|
||||
#navigation ul li:hover {
|
||||
background-color: #efefef;
|
||||
}
|
||||
html {
|
||||
color: #666;
|
||||
}
|
||||
nav ul li {
|
||||
padding: 0 15px;
|
||||
}
|
||||
nav ul li.active {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
nav ul a {
|
||||
padding: 0 15px 0 0;
|
||||
}
|
||||
nav .brand-logo {
|
||||
padding: 0 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
#logo-text {
|
||||
font-size: 40px;
|
||||
color: #666;
|
||||
@ -57,20 +24,12 @@ html {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
main {
|
||||
padding-left: 250px;
|
||||
}
|
||||
h1.header {
|
||||
color: #fff;
|
||||
}
|
||||
h2.header {
|
||||
color: #80cbc4;
|
||||
}
|
||||
@media only screen and (min-width: 993px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
span.badge.info {
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
@ -83,15 +42,12 @@ span.badge.info.idle {
|
||||
span.badge.info.idle:after {
|
||||
content: "Idle";
|
||||
}
|
||||
|
||||
span.badge.info.in-progress:after {
|
||||
content: "Download in Progress";
|
||||
}
|
||||
|
||||
span.badge.info.in-progress {
|
||||
background-color: #26a69a;
|
||||
}
|
||||
|
||||
a.collection-item.schedule {
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
@ -99,26 +55,40 @@ a.collection-item.schedule {
|
||||
.collapsible-body {
|
||||
padding: 40px
|
||||
}
|
||||
|
||||
.collapsible-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 12px;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.chip {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.action_type {
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.remove_action {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.card-image i {
|
||||
font-size: 250px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -50px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.side-nav i {
|
||||
color: #666;
|
||||
}
|
||||
a.button-collapse > i {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.card.small {
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
@ -61,22 +61,22 @@ var action = (function ($) {
|
||||
|
||||
addMove = function () {
|
||||
|
||||
var newAction = $('<div class="valign-wrapper row action action_move"><div class="input-field col s4 action_type">move</div><div class="input-field col s6"><input type="text" placeholder="Move To.." class="f1" /></div><div class="col s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
var newAction = $('<div class="row action action_move"><div class="input-field col m4 s12 action_type">move</div><div class="input-field col m6 s10"><input type="text" placeholder="Move To.." class="f1" /></div><div class="col m2 s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
$('#download_actions').append(newAction);
|
||||
};
|
||||
|
||||
addPushbullet = function () {
|
||||
|
||||
var newAction = $('<div class="valign-wrapper row action action_pushbullet"><div class="input-field col s4 action_type">pushbullet</div><div class="input-field col s6"><input type="text" placeholder="API Key" class="f1" /></div><div class="col s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
var newAction = $('<div class="row action action_pushbullet"><div class="input-field col m4 s12 action_type">pushbullet</div><div class="input-field col m6 s10"><input type="text" placeholder="API Key" class="f1" /></div><div class="col m2 s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
$('#download_actions').append(newAction);
|
||||
};
|
||||
|
||||
addApi = function () {
|
||||
|
||||
|
||||
var newAction = $('<div class="valign-wrapper row action action_api"><div class="input-field col s4 action_type">api</div><div class="input-field col s6"><input type="text" placeholder="URL" class="f1" /><br />' +
|
||||
var newAction = $('<div class="row action action_api"><div class="input-field col m4 s12 action_type">api</div><div class="input-field col m6 s10"><input type="text" placeholder="URL" class="f1" /><br />' +
|
||||
'<input type="text" placeholder="Method (e.g. POST, GET)" class="f2" /><br /><input type="text" placeholder="Content Type (e.g. application/json)" class="f3" /><br /><input type="text"' +
|
||||
' placeholder="Message body" class="f4" /><br /></div><div class="col s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
' placeholder="Message body" class="f4" /><br /></div><div class="col m2 s2"><i class="material-icons remove_action">close</i></div></div>');
|
||||
|
||||
$('#download_actions').append(newAction);
|
||||
};
|
||||
|
||||
@ -13,21 +13,26 @@
|
||||
|
||||
<header>
|
||||
|
||||
<div id="main-nav">
|
||||
<nav>
|
||||
<div class="nav-wrapper teal lighten-2">
|
||||
|
||||
<div id="logo">
|
||||
<div id="logo-text" class="center">davos</div>
|
||||
</div>
|
||||
|
||||
<div id="navigation">
|
||||
<ul>
|
||||
<li class="active"><i class="material-icons">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li><i class="material-icons">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
<a href="@{/}" class="brand-logo">davos</a>
|
||||
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
<ul class="right hide-on-med-and-down">
|
||||
<li class="active"><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
<ul class="side-nav" id="mobile-demo">
|
||||
<li class="valign-wrapper"><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
@ -43,6 +48,11 @@
|
||||
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/materialize.min.js}"></script>
|
||||
|
||||
<script type="text/javascript" th:inline="text">
|
||||
$(document).ready(function() {
|
||||
$(".button-collapse").sideNav();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
<link type="text/css" rel="stylesheet" th:href="@{/css/materialize.min.css}" media="screen,projection" />
|
||||
<link type="text/css" rel="stylesheet" th:href="@{/css/davos.css}" media="screen" />
|
||||
|
||||
<title>Scheduling</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</head>
|
||||
|
||||
@ -13,49 +15,54 @@
|
||||
|
||||
<header>
|
||||
|
||||
<div id="main-nav">
|
||||
|
||||
<div id="logo">
|
||||
<div id="logo-text" class="center">davos</div>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="nav-wrapper teal lighten-2">
|
||||
|
||||
<div id="navigation">
|
||||
<ul>
|
||||
<li><i class="material-icons">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="active"><i class="material-icons">schedule</i><a th:href="@{/scheduling/edit}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
<a href="@{/}" class="brand-logo">davos</a>
|
||||
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
<ul class="right hide-on-med-and-down">
|
||||
<li><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="active"><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
<ul class="side-nav" id="mobile-demo">
|
||||
<li class="valign-wrapper"><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<div class="section teal lighten-3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12 m9">
|
||||
<h1 class="header light center-on-small-only">Scheduling</h1>
|
||||
<h4 class="light teal-text text-lighten-5 center-on-small-only">Create and configure automated downloads</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="scheduling">
|
||||
|
||||
<div class="section">
|
||||
<p class="caption">A schedule allows you to create automated processes that poll a given FTP server based on a pre-defined interval. Schedules are especially useful when you need to download files on a regular basis from any given server. They are highly configurable, with the ability to filter down the kinds of files the schedule pulls down, as well
|
||||
as <strong>completion hooks</strong> which allow you to define what happens when a file has successfully finished downloading.</p>
|
||||
<p class="caption">A schedule allows you to create automated processes that poll a given FTP server based on a pre-defined interval. Schedules are especially useful when you need to download files on a regular basis from any given server. They are highly configurable, with the ability to filter down the kinds of files the schedule pulls down, as well as <strong>completion hooks</strong> which allow you to define what happens when a file has successfully finished downloading.</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h4 class="light">Current Schedules</h4>
|
||||
|
||||
<div class="collection">
|
||||
<a th:each="schedule : ${schedules}" th:href="@{/scheduling/} + ${schedule.id}" class="collection-item schedule" th:text="${schedule.name}"></a>
|
||||
<div class="row">
|
||||
<div th:each="schedule : ${schedules}" class="col s12 m6">
|
||||
|
||||
<div class="card small">
|
||||
<div class="card-image teal lighten-2">
|
||||
<i class="material-icons">schedule</i>
|
||||
<span class="card-title" th:text="${schedule.name}"></span>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a th:href="@{/scheduling/} + ${schedule.id}">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -76,9 +83,10 @@
|
||||
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
|
||||
<script type="text/javascript" th:src="@{/js/materialize.min.js}"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
<script type="text/javascript" th:inline="text">
|
||||
$(document).ready(function() {
|
||||
$(".button-collapse").sideNav();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@ -15,35 +15,31 @@
|
||||
|
||||
<header>
|
||||
|
||||
<div id="main-nav">
|
||||
|
||||
<div id="logo">
|
||||
<div id="logo-text" class="center">davos</div>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="nav-wrapper teal lighten-2">
|
||||
|
||||
<div id="navigation">
|
||||
<ul>
|
||||
<li><i class="material-icons">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="active"><i class="material-icons">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
<a href="@{/}" class="brand-logo">davos</a>
|
||||
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
<ul class="right hide-on-med-and-down">
|
||||
<li><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="active"><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
<ul class="side-nav" id="mobile-demo">
|
||||
<li class="valign-wrapper"><i class="material-icons left">home</i><a th:href="@{/}" class="waves-effect waves-teal">Home</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">web</i><a th:href="@{/}" class="waves-effect waves-teal">File Manager</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">schedule</i><a th:href="@{/scheduling}" class="waves-effect waves-teal">Scheduling</a></li>
|
||||
<li class="valign-wrapper"><i class="material-icons left">settings</i><a class="waves-effect waves-teal">App Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="section teal lighten-3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12 m9">
|
||||
<h1 class="header light center-on-small-only">Edit</h1>
|
||||
<h4 class="light teal-text text-lighten-5 center-on-small-only">Configure your schedule</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
@ -51,243 +47,231 @@
|
||||
<h4 class="light" th:text="${schedule.name}"></h4>
|
||||
<input type="hidden" id="schedule_id" th:attr="value=${schedule.id}" />
|
||||
<input type="hidden" id="schedule_lastrun" th:attr="value=${schedule.lastRun}" />
|
||||
<p class="caption light">Click on the list items below to edit the schedule</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section heading">
|
||||
<h5 class="light valign-wrapper"><i class="material-icons left">settings_applications</i>General</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="input-field col m4 s12">
|
||||
<input id="schedule_name" placeholder="Please choose a name for this schedule" th:attr="value=${schedule.name}" type="text" />
|
||||
<label for="schedule_name">Schedule name</label>
|
||||
</div>
|
||||
<div class="col m8 s12">
|
||||
<p class="subtext">
|
||||
Give this schedule a meaningful name so you know what its purpose is.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="switch col m4 s12">
|
||||
<label>
|
||||
<input id="start_automatically" type="checkbox" th:checked="${schedule.startAutomatically}" />
|
||||
<span class="lever"></span>
|
||||
</label>
|
||||
Start Automatically
|
||||
</div>
|
||||
<div class="col m8 s12">
|
||||
<p class="subtext">
|
||||
Select this if you want this schedule to automatically start when davos starts. This is a useful option if davos needs to restart and you don't want to have to manually kick off this process.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<ul class="collapsible" data-collapsible="expandable">
|
||||
<li>
|
||||
<div class="collapsible-header active"><i class="material-icons">settings_applications</i>General</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="input-field col m4 s12">
|
||||
<select class="browser-default" id="interval">
|
||||
<option th:selected="${schedule.interval == 15}" th:value="15">Every 15 minutes</option>
|
||||
<option th:selected="${schedule.interval == 30}" th:value="30">Every 30 minutes</option>
|
||||
<option th:selected="${schedule.interval == 60}" selected="selected" th:value="60">Every hour</option>
|
||||
<option th:selected="${schedule.interval == 120}" th:value="120">Every 2 hours</option>
|
||||
<option th:selected="${schedule.interval == 720}" th:value="720">Twice a day</option>
|
||||
<option th:selected="${schedule.interval == 1440}" th:value="1440">Once a day</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col s12 m8">
|
||||
<p class="subtext">
|
||||
The interval that defines how often this schedule will poll the server to check for new files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row valign-wrapper">
|
||||
<div class="section heading">
|
||||
<h5 class="light valign-wrapper"><i class="material-icons left">business</i>Server</h5>
|
||||
</div>
|
||||
|
||||
<div class="input-field col s4">
|
||||
<input id="schedule_name" placeholder="Please choose a name for this schedule" th:attr="value=${schedule.name}" type="text" class="validate" />
|
||||
<label for="schedule_name">Schedule name</label>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<p class="subtext">
|
||||
Give this schedule a meaningful name so you know what its purpose is.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row valign-wrapper">
|
||||
<div class="switch col m2 s6">
|
||||
<input name="protocol_type" value="FTP" type="radio" id="protocol_ftp" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'FTP'}" />
|
||||
<label for="protocol_ftp">FTP</label>
|
||||
</div>
|
||||
<div class="switch col m2 s6">
|
||||
<input name="protocol_type" value="FTPS" type="radio" id="protocol_ftps" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'FTPS'}" />
|
||||
<label for="protocol_ftps">FTPS</label>
|
||||
</div>
|
||||
<div class="switch col m2 s6">
|
||||
<input name="protocol_type" value="SFTP" type="radio" id="protocol_sftp" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'SFTP'}" />
|
||||
<label for="protocol_sftp">SFTP</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row valign-wrapper">
|
||||
<div class="switch col s4 ">
|
||||
<label>
|
||||
<input id="start_automatically" type="checkbox" th:checked="${schedule.startAutomatically}" />
|
||||
<span class="lever"></span>
|
||||
</label>
|
||||
Start Automatically
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<p class="subtext">
|
||||
Select this if you want this schedule to automatically start when davos starts. This is a useful option if davos needs to restart and you don't want to have to manually kick off this process.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col m6 s12">
|
||||
<i class="material-icons prefix">business</i>
|
||||
<input id="server_name" type="text" th:attr="value=${schedule.hostName}" />
|
||||
<label for="server_name">Server Name (or IP address)</label>
|
||||
</div>
|
||||
<div class="input-field col m2 s12">
|
||||
<i class="material-icons prefix">settings_input_svideo</i>
|
||||
<input id="server_port" type="number" th:attr="value=${schedule.port}" />
|
||||
<label for="server_port">Port</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-field col m6 s12">
|
||||
<i class="material-icons prefix">perm_identity</i>
|
||||
<input id="username" type="text" th:attr="value=${schedule.username}" />
|
||||
<label for="username">Username</label>
|
||||
</div>
|
||||
<div class="input-field col m6 s12">
|
||||
<i class="material-icons prefix">vpn_key</i>
|
||||
<input id="password" type="password" th:attr="value=${schedule.password}" />
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-field col m6 s12">
|
||||
<i class="material-icons prefix">track_changes</i>
|
||||
<input id="remote_path" type="text" th:attr="value=${schedule.remoteFilePath}" />
|
||||
<label for="remote-path">Remote folder to scan</label>
|
||||
</div>
|
||||
<div class="input-field col m6 s12">
|
||||
<i class="material-icons prefix">play_for_work</i>
|
||||
<input id="local_path" type="text" th:attr="value=${schedule.localFilePath}" />
|
||||
<label for="local-path">Local destination folder</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field col s4">
|
||||
<select class="browser-default" id="interval">
|
||||
<option th:selected="${schedule.interval == 15}" th:value="15">Every 15 minutes</option>
|
||||
<option th:selected="${schedule.interval == 30}" th:value="30">Every 30 minutes</option>
|
||||
<option th:selected="${schedule.interval == 60}" selected="selected" th:value="60">Every hour</option>
|
||||
<option th:selected="${schedule.interval == 120}" th:value="120">Every 2 hours</option>
|
||||
<option th:selected="${schedule.interval == 720}" th:value="720">Twice a day</option>
|
||||
<option th:selected="${schedule.interval == 1440}" th:value="1440">Once a day</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col s8">
|
||||
<p class="subtext">
|
||||
The interval that defines how often this schedule will poll the server to check for new files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section heading">
|
||||
<h5 class="light valign-wrapper"><i class="material-icons left">swap_vert</i>File Transfers</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="switch col m2 s12">
|
||||
<input name="scan_type" value="FILE" type="radio" id="scan_files_only" th:checked="${schedule.transferType != null and schedule.transferType.name() == 'FILE'}" />
|
||||
<label for="scan_files_only">Files only</label>
|
||||
</div>
|
||||
<div class="col s12 m10">
|
||||
<p class="subtext">
|
||||
Only download files in the remote folder. Ignore sub-folders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="switch col m2 s12">
|
||||
<input name="scan_type" value="RECURSIVE" type="radio" id="scan_recursive" th:checked="${schedule.transferType != null and schedule.transferType.name() == 'RECURSIVE'}" />
|
||||
<label for="scan_recursive">Recursive</label>
|
||||
</div>
|
||||
<div class="col m10 s12">
|
||||
<p class="subtext">
|
||||
Look inside any sub-folders in the remote folder. If any files are found, download them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section heading">
|
||||
<h5 class="light valign-wrapper"><i class="material-icons left">sort_by_alpha</i>Filters</h5>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12 m12">
|
||||
<p class="subtext">
|
||||
If you do not want davos to pull down all recent files from the server during the next scheduled run, please define a filter (or more). A filter works by telling davos that a file must adhere to a particular naming structure (file name or extension) before it decides to download it. For example, if you only want the schedule to download <i>.doc</i> files, you should enter a filter of <strong>*.doc</strong>. You may use a question mark (<strong>?</strong>) to denote a single wildcard character, or an asterisk (<strong>*</strong>) to denote any number of wildcard characters.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col m6 s12">
|
||||
<input id="new_filter" type="text" />
|
||||
<label for="new_filter">Add filter</label>
|
||||
</div>
|
||||
<div class="input-field col m6 s12">
|
||||
<button class="btn waves-effect waves-light" type="button" id="add_new_filter">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col m12 s12" id="filter_chips">
|
||||
|
||||
<div class="chip" th:each="filter : ${schedule.filters}">
|
||||
<input type="hidden" class="filter_id" th:attr="value=${filter.id}" />
|
||||
<span class="filter_value" th:text="${filter.value}"></span>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapsible-header active"><i class="material-icons">business</i>Server</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="row valign-wrapper">
|
||||
<div class="switch col s2">
|
||||
<input name="protocol_type" value="FTP" type="radio" id="protocol_ftp" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'FTP'}" />
|
||||
<label for="protocol_ftp">FTP</label>
|
||||
</div>
|
||||
<div class="switch col s2">
|
||||
<input name="protocol_type" value="FTPS" type="radio" id="protocol_ftps" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'FTPS'}" />
|
||||
<label for="protocol_ftps">FTPS</label>
|
||||
</div>
|
||||
<div class="switch col s2">
|
||||
<input name="protocol_type" value="SFTP" type="radio" id="protocol_sftp" th:checked="${schedule.connectionType != null and schedule.connectionType.name() == 'SFTP'}" />
|
||||
<label for="protocol_sftp">SFTP</label>
|
||||
</div>
|
||||
<div class="switch col s6"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field col s6">
|
||||
<i class="material-icons prefix">business</i>
|
||||
<input id="server_name" type="text" th:attr="value=${schedule.hostName}" />
|
||||
<label for="server_name">Server Name (or IP address)</label>
|
||||
</div>
|
||||
<div class="input-field col s2">
|
||||
<i class="material-icons prefix">settings_input_svideo</i>
|
||||
<input id="server_port" type="number" th:attr="value=${schedule.port}" />
|
||||
<label for="server_port">Port</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<i class="material-icons prefix">perm_identity</i>
|
||||
<input id="username" type="text" th:attr="value=${schedule.username}" />
|
||||
<label for="username">Username</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<i class="material-icons prefix">vpn_key</i>
|
||||
<input id="password" type="password" th:attr="value=${schedule.password}" />
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<i class="material-icons prefix">track_changes</i>
|
||||
<input id="remote_path" type="text" th:attr="value=${schedule.remoteFilePath}" />
|
||||
<label for="remote-path">Remote folder to scan</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<i class="material-icons prefix">play_for_work</i>
|
||||
<input id="local_path" type="text" th:attr="value=${schedule.localFilePath}" />
|
||||
<label for="local-path">Local destination folder</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section heading">
|
||||
<h5 class="light valign-wrapper"><i class="material-icons left">code</i>Post-Download Actions</h5>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapsible-header active"><i class="material-icons">swap_vert</i>File Transfers</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="row valign-wrapper">
|
||||
<div class="switch col s2">
|
||||
<input name="scan_type" value="FILE" type="radio" id="scan_files_only" th:checked="${schedule.transferType != null and schedule.transferType.name() == 'FILE'}" />
|
||||
<label for="scan_files_only">Files only</label>
|
||||
</div>
|
||||
<div class="col s10">
|
||||
<p class="subtext">
|
||||
Only download files in the remote folder. Ignore sub-folders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row valign-wrapper">
|
||||
<div class="switch col s2">
|
||||
<input name="scan_type" value="RECURSIVE" type="radio" id="scan_recursive" th:checked="${schedule.transferType != null and schedule.transferType.name() == 'RECURSIVE'}" />
|
||||
<label for="scan_recursive">Recursive</label>
|
||||
</div>
|
||||
<div class="col s10">
|
||||
<p class="subtext">
|
||||
Look inside any sub-folders in the remote folder. If any files are found, download them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapsible-header active"><i class="material-icons">sort_by_alpha</i>Filters</div>
|
||||
<div class="collapsible-body">
|
||||
<div class="row">
|
||||
<form class="col s12">
|
||||
<div class="col s12">
|
||||
<p class="subtext">
|
||||
If you do not want davos to pull down all recent files from the server during the next scheduled run, please define a filter (or more). A filter works by telling davos that a file must adhere to a particular naming structure (file name or extension) before it decides to download it. For example, if you only want the schedule to download <i>.doc</i> files, you should enter a filter of <strong>*.doc</strong>. You may use a question mark (<strong>?</strong>) to denote a single wildcard character, or an asterisk (<strong>*</strong>) to denote any number of wildcard characters.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<p class="subtext">
|
||||
Add actions for davos to perform after each file has been successfully downloaded.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="new_filter" type="text" />
|
||||
<label for="new_filter">Add filter</label>
|
||||
</div>
|
||||
<div class="input-field col s6">
|
||||
<button class="btn waves-effect waves-light" type="button" id="add_new_filter">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field col m4 s12">
|
||||
<select id="select_download_action" class="browser-default">
|
||||
<option value="choose" disabled="disabled" selected="selected">Add action...</option>
|
||||
<option value="pushbullet">Pushbullet Notification</option>
|
||||
<option value="move">Move Downloaded File</option>
|
||||
<option value="api">Generic HTTP API Call</option>
|
||||
</select>
|
||||
|
||||
<div class="row">
|
||||
<div class="input-field col s12" id="filter_chips">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chip" th:each="filter : ${schedule.filters}">
|
||||
<input type="hidden" class="filter_id" th:attr="value=${filter.id}" />
|
||||
<span class="filter_value" th:text="${filter.value}"></span>
|
||||
<i class="material-icons">close</i>
|
||||
</div>
|
||||
<div id="download_actions">
|
||||
<div th:each="action : ${schedule.actions}" th:switch="${action.actionType}" th:attr="data-action-id=${action.id}, class='row action action_' + ${action.actionType}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapsible-header active"><i class="material-icons">code</i>Post-download Actions</div>
|
||||
<div class="collapsible-body" id="download_actions">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<p class="subtext">
|
||||
Add actions for davos to perform after each file has been successfully downloaded.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field col m4 s12 action_type" th:text="${action.actionType}"></div>
|
||||
|
||||
<div class="row">
|
||||
<div th:case="'move'" class="action_name input-field col m6 s10">
|
||||
<input type="text" placeholder="Move To..." class="f1" th:attr="value=${action.f1}" />
|
||||
</div>
|
||||
|
||||
<div class="input-field col s4">
|
||||
<select id="select_download_action" class="browser-default">
|
||||
<option value="choose" disabled="disabled" selected="selected">Add action...</option>
|
||||
<option value="pushbullet">Pushbullet Notification</option>
|
||||
<option value="move">Move Downloaded File</option>
|
||||
<option value="api">Generic HTTP API Call</option>
|
||||
</select>
|
||||
<div th:case="'pushbullet'" class="action_name input-field col m6 s10">
|
||||
<input type="text" placeholder="API Key" class="f1" th:attr="value=${action.f1}" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div th:case="'api'" class="action_name input-field col m6 s10">
|
||||
<input type="text" placeholder="URL" class="f1" th:attr="value=${action.f1}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Method (e.g. POST, GET)" class="f2" th:attr="value=${action.f2}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Content Type (e.g. application/json)" class="f3" th:attr="value=${action.f3}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Message body" class="f4" th:attr="value=${action.f4}" />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div th:each="action : ${schedule.actions}" th:switch="${action.actionType}" th:attr="data-action-id=${action.id}, class='valign-wrapper row action action_' + ${action.actionType}">
|
||||
|
||||
<div class="input-field col s4 action_type" th:text="${action.actionType}"></div>
|
||||
|
||||
<div th:case="'move'" class="action_name input-field col s6">
|
||||
<input type="text" placeholder="Move To..." class="f1" th:attr="value=${action.f1}" />
|
||||
</div>
|
||||
|
||||
<div th:case="'pushbullet'" class="action_name input-field col s6">
|
||||
<input type="text" placeholder="API Key" class="f1" th:attr="value=${action.f1}" />
|
||||
</div>
|
||||
|
||||
<div th:case="'api'" class="action_name input-field col s6">
|
||||
<input type="text" placeholder="URL" class="f1" th:attr="value=${action.f1}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Method (e.g. POST, GET)" class="f2" th:attr="value=${action.f2}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Content Type (e.g. application/json)" class="f3" th:attr="value=${action.f3}" />
|
||||
<br />
|
||||
<input type="text" placeholder="Message body" class="f4" th:attr="value=${action.f4}" />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div class="col s2"><i class="material-icons remove_action">close</i></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col m2 s2"><i class="material-icons remove_action">close</i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@ -309,7 +293,9 @@
|
||||
<script type="text/javascript" th:src="@{/js/davos.js}"></script>
|
||||
|
||||
<script type="text/javascript" th:inline="text">
|
||||
var base = "[[@{/}]]"
|
||||
$(document).ready(function() {
|
||||
$(".button-collapse").sideNav();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user