sebclem/hassio-nextcloud-backup
1
0
Fork 0
mirror of https://github.com/Sebclem/hassio-nextcloud-backup.git synced 2024-07-14 23:31:24 +02:00
Code Issues Projects Releases Wiki Activity

🔨 Edit frontend for Restore function

Browse Source
This commit is contained in:
Sebastien Clement 2020-11-04 14:51:13 +01:00
parent 2c506c2e69
commit 88cd6f2c45
4 changed files with 255 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nextcloud_backup/rootfs/opt/nextcloud_backup/views/backupSnaps.ejs
View File

@ -1,7 +1,7 @@
<% if (locals.backups) { %> <% if (locals.backups) { %>
<div class="collection"> <div class="collection">
<% for(const index in backups) { %> <% for(const index in backups) { %>
<a class="collection-item local-snap-listener modal-trigger" href="#modal-<%=backups[index].etag%>" <a class="collection-item modal-trigger" href="#modal-<%=backups[index].etag%>"
data-id="<%= backups[index].etag %>"> data-id="<%= backups[index].etag %>">
<div><%= backups[index].basename%><div class="secondary-content hide-on-small-and-down"> <div><%= backups[index].basename%><div class="secondary-content hide-on-small-and-down">
<%= moment(backups[index].lastmod).format('MMM D, YYYY HH:mm') %></div> <%= moment(backups[index].lastmod).format('MMM D, YYYY HH:mm') %></div>
@ -40,6 +40,7 @@
</div> </div>
</div> </div>
<div class="modal-footer blue-grey darken-4"> <div class="modal-footer blue-grey darken-4">
<a href="#!" class="waves-effect waves-green btn green restore modal-close" data-id="<%=backups[index].filename%>" data-name='<%= backups[index].basename ? backups[index].basename : backups[index].etag %>'>Backup now</a>
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a> <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
</div> </div>
</div> </div>

422
nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs
View File

@ -5,9 +5,9 @@
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nextcloud Backup</title> <title>Nextcloud Backup</title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' /> --> <!-- <link rel='stylesheet' href='/stylesheets/style.css' /> -->
<link rel="stylesheet" href="./css/materialize.min.css"> <link rel="stylesheet" href="./css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@ -16,50 +16,50 @@
color: #757575 !important; color: #757575 !important;
border-color: #616161 !important; border-color: #616161 !important;
} }
.modal .input-field span.helper-text { .modal .input-field span.helper-text {
color: #9e9e9e; color: #9e9e9e;
} }
.modal div.row:last-child { .modal div.row:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.modal div.col:last-child { .modal div.col:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@media (min-width: 601px) { @media (min-width: 601px) {
.header-box { .header-box {
height: 150px; height: 150px;
} }
} }
.header-box .col { .header-box .col {
height: 100%; height: 100%;
} }
.header-box .col .card { .header-box .col .card {
height: 100%; height: 100%;
} }
.header-box .card-content { .header-box .card-content {
padding-top: 10px; padding-top: 10px;
} }
.header-box .card-content h5 { .header-box .card-content h5 {
margin-top: 10px; margin-top: 10px;
} }
ul.dropdown-content a:hover { ul.dropdown-content a:hover {
background-color: #101619 !important; background-color: #101619 !important;
} }
ul.dropdown-content li:hover { ul.dropdown-content li:hover {
background-color: #101619 !important; background-color: #101619 !important;
} }
/* change autocomplete color */ /* change autocomplete color */
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
@ -68,23 +68,27 @@
-webkit-box-shadow: 0 0 0 30px #263238 inset !important; -webkit-box-shadow: 0 0 0 30px #263238 inset !important;
-webkit-text-fill-color: white !important; -webkit-text-fill-color: white !important;
} }
.select-dropdown { .select-dropdown {
color: white; color: white;
} }
</style> </style>
</head> </head>
<body class="blue-grey darken-4"> <body class="blue-grey darken-4">
<nav class=" light-blue accent-4"> <nav class=" light-blue accent-4">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a href="#" class="brand-logo"><img src="./images/Nextcloud_Logo.svg" height="54" <a href="#" class="brand-logo"><img src="./images/Nextcloud_Logo.svg" height="54"
style="margin: 5px"></a> style="margin: 5px">
</a>
<ul class="right"> <ul class="right">
<li id="setting-trigger"><a class="dropdown-trigger" href="#" data-target="dropdown-settings"><i <li id="setting-trigger">
class="material-icons">settings</i></a></li> <a class="dropdown-trigger" href="#" data-target="dropdown-settings">
<i class="material-icons">settings</i>
</a>
</li>
</ul> </ul>
<div style="height: 64px; display: table; margin-left: 130px;" class="hide-on-med-and-down"> <div style="height: 64px; display: table; margin-left: 130px;" class="hide-on-med-and-down">
<h4 style="display: table-cell; vertical-align: middle;">Nextcloud Backup</h4> <h4 style="display: table-cell; vertical-align: middle;">Nextcloud Backup</h4>
@ -97,7 +101,7 @@
<li><a href="#modal-settings-backup" id="trigger-backup-settings" class="modal-trigger center">Backup</a></li> <li><a href="#modal-settings-backup" id="trigger-backup-settings" class="modal-trigger center">Backup</a></li>
</ul> </ul>
<div class="container "> <div class="container ">
<div class="row header-box"> <div class="row header-box">
<div class="col s12 m3"> <div class="col s12 m3">
<div class="card cyan darken-3"> <div class="card cyan darken-3">
@ -112,7 +116,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m3"> <div class="col s12 m3">
<div class="card cyan darken-3"> <div class="card cyan darken-3">
<div class="card-content"> <div class="card-content">
@ -138,18 +142,18 @@
<div class="divider"></div> <div class="divider"></div>
<div style="width: 100%;" class="center"> <div style="width: 100%;" class="center">
<a class="btn green center waves-effect waves-light" id="btn-backup-now" <a class="btn green center waves-effect waves-light" id="btn-backup-now"
style="margin-top: 7px; display: block;">Backup style="margin-top: 7px; display: block;">Backup
Now</a> Now</a>
<a class="btn center teal darken-4 waves-effect waves-light" id="btn-clean-now" <a class="btn center teal darken-4 waves-effect waves-light" id="btn-clean-now"
style="margin-top: 7px; display: block;">Clean Now</a> style="margin-top: 7px; display: block;">Clean Now</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col s12 m12 l6 "> <div class="col s12 m12 l6 ">
<div class="card cyan darken-3"> <div class="card cyan darken-3">
@ -172,16 +176,17 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<%- include('modals/nextcloud-settings-modal') %> <%- include('modals/nextcloud-settings-modal') %>
<%- include('modals/backup-settings-modal') %> <%- include('modals/backup-settings-modal') %>
<%- include('modals/restore-modal.ejs') %>
<div id="modal-loading" class="modal blue-grey darken-4 white-text"> <div id="modal-loading" class="modal blue-grey darken-4 white-text">
<div class="modal-content "> <div class="modal-content ">
<div class="row"> <div class="row">
@ -203,7 +208,7 @@
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
<div class="spinner-layer spinner-red"> <div class="spinner-layer spinner-red">
<div class="circle-clipper left"> <div class="circle-clipper left">
<div class="circle"></div> <div class="circle"></div>
@ -215,7 +220,7 @@
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
<div class="spinner-layer spinner-yellow"> <div class="spinner-layer spinner-yellow">
<div class="circle-clipper left"> <div class="circle-clipper left">
<div class="circle"></div> <div class="circle"></div>
@ -227,7 +232,7 @@
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
<div class="spinner-layer spinner-green"> <div class="spinner-layer spinner-green">
<div class="circle-clipper left"> <div class="circle-clipper left">
<div class="circle"></div> <div class="circle"></div>
@ -244,7 +249,8 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script src="./js/materialize.min.js"></script> <script src="./js/materialize.min.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/jquery-3.4.1.min.js"></script>
@ -254,7 +260,9 @@
var last_local_snap = ""; var last_local_snap = "";
var last_manu_back = ""; var last_manu_back = "";
var last_auto_back = ""; var last_auto_back = "";
var to_restore = "";
var loadingModal = null; var loadingModal = null;
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
updateLocalSnaps(); updateLocalSnaps();
@ -263,22 +271,22 @@
M.Tooltip.init(tooltips, {}); M.Tooltip.init(tooltips, {});
let drops = document.querySelectorAll('.dropdown-trigger'); let drops = document.querySelectorAll('.dropdown-trigger');
M.Dropdown.init(drops, { constrainWidth: false, coverTrigger: false, alignment: 'right', onOpenStart: () => $('#setting-trigger').addClass('active'), onCloseEnd: () => $('#setting-trigger').removeClass('active') }); M.Dropdown.init(drops, { constrainWidth: false, coverTrigger: false, alignment: 'right', onOpenStart: () => $('#setting-trigger').addClass('active'), onCloseEnd: () => $('#setting-trigger').removeClass('active') });
setInterval(update_status, 500); setInterval(update_status, 500);
setInterval(updateLocalSnaps, 2000); setInterval(updateLocalSnaps, 2000);
listeners(); listeners();
}); });
function updateDynamicListeners() { function updateDynamicListeners() {
var elems = document.querySelectorAll('.collapsible'); var elems = document.querySelectorAll('.collapsible');
M.Collapsible.init(elems, { accordion: true }); M.Collapsible.init(elems, { accordion: true });
var modals = document.querySelectorAll('.modal:not(#modal-loading)'); var modals = document.querySelectorAll('.modal:not(#modal-loading)');
M.Modal.init(modals, { dismissible: false }); M.Modal.init(modals, { dismissible: true });
let loadingModals = document.querySelectorAll('#modal-loading'); let loadingModals = document.querySelectorAll('#modal-loading');
M.Modal.init(loadingModals, { dismissible: false }); M.Modal.init(loadingModals, { dismissible: false });
loadingModal = M.Modal.getInstance(document.querySelector('#modal-loading')); loadingModal = M.Modal.getInstance(document.querySelector('#modal-loading'));
$('.local-snap-listener').click(function() { $('.local-snap-listener').click(function() {
let id = this.getAttribute('data-id'); let id = this.getAttribute('data-id');
@ -290,13 +298,20 @@
let name = this.getAttribute('data-name'); let name = this.getAttribute('data-name');
manualBackup(id, name); manualBackup(id, name);
}) })
$('.restore').click(function(){
to_restore = this.getAttribute('data-id');
console.log(to_restore)
let restore_modal = M.Modal.getInstance(document.querySelector('#modal-restore'));
restore_modal.open();
})
} }
function updateLocalSnaps() { function updateLocalSnaps() {
let needUpdate = false; let needUpdate = false;
$.get('./api/formated-local-snap', (data) => { $.get('./api/formated-local-snap', (data) => {
if (JSON.stringify(data) === last_local_snap) if (JSON.stringify(data) === last_local_snap)
return; return;
last_local_snap = JSON.stringify(data); last_local_snap = JSON.stringify(data);
needUpdate = true; needUpdate = true;
$('#local_snaps').empty(); $('#local_snaps').empty();
@ -305,17 +320,17 @@
updateManuBackup(needUpdate); updateManuBackup(needUpdate);
}); });
} }
function updateManuBackup(prevUpdate) { function updateManuBackup(prevUpdate) {
let needUpdate = false; let needUpdate = false;
$.get('./api/formated-backup-manual', (data) => { $.get('./api/formated-backup-manual', (data) => {
if (JSON.stringify(data) === last_manu_back) if (JSON.stringify(data) === last_manu_back)
return; return;
last_manu_back = JSON.stringify(data); last_manu_back = JSON.stringify(data);
needUpdate = true; needUpdate = true;
$('#manual_backups').empty(); $('#manual_backups').empty();
$('#manual_backups').html(data); $('#manual_backups').html(data);
}).always(() => { }).always(() => {
updateAutoBackup(prevUpdate || needUpdate); updateAutoBackup(prevUpdate || needUpdate);
}); });
@ -324,59 +339,59 @@
let needUpdate = false; let needUpdate = false;
$.get('./api/formated-backup-auto', (data) => { $.get('./api/formated-backup-auto', (data) => {
if (JSON.stringify(data) === last_auto_back) if (JSON.stringify(data) === last_auto_back)
return; return;
needUpdate = true; needUpdate = true;
last_auto_back = JSON.stringify(data); last_auto_back = JSON.stringify(data);
$('#auto_backups').empty(); $('#auto_backups').empty();
$('#auto_backups').html(data); $('#auto_backups').html(data);
}).always(() => { }).always(() => {
if (prevUpdate || needUpdate) if (prevUpdate || needUpdate)
updateDynamicListeners(); updateDynamicListeners();
}); });
} }
function update_status() { function update_status() {
$.get('./api/status', (data) => { $.get('./api/status', (data) => {
if (JSON.stringify(data) !== last_status) { if (JSON.stringify(data) !== last_status) {
last_status = JSON.stringify(data); last_status = JSON.stringify(data);
switch (data.status) { switch (data.status) {
case "error": case "error":
printStatus('Error', data.message); printStatus('Error', data.message);
$('#btn-backup-now, #btn-clean-now').removeClass("disabled"); $('#btn-backup-now, #btn-clean-now').removeClass("disabled");
break; break;
case "idle": case "idle":
printStatus('Idle', "Waiting for next backup."); printStatus('Idle', "Waiting for next backup.");
$('#btn-backup-now, #btn-clean-now').removeClass("disabled"); $('#btn-backup-now, #btn-clean-now').removeClass("disabled");
break; break;
case "download": case "download":
printStatusWithBar('Downloading Snapshot', data.progress); printStatusWithBar('Downloading Snapshot', data.progress);
$('#btn-backup-now, #btn-clean-now').addClass("disabled"); $('#btn-backup-now, #btn-clean-now').addClass("disabled");
break; break;
case "upload": case "upload":
printStatusWithBar('Uploading Snapshot', data.progress); printStatusWithBar('Uploading Snapshot', data.progress);
$('#btn-backup-now, #btn-clean-now').addClass("disabled"); $('#btn-backup-now, #btn-clean-now').addClass("disabled");
break; break;
case "creating": case "creating":
printStatusWithBar('Creating Snapshot', data.progress); printStatusWithBar('Creating Snapshot', data.progress);
$('#btn-backup-now, #btn-clean-now').addClass("disabled"); $('#btn-backup-now, #btn-clean-now').addClass("disabled");
break; break;
} }
if (data.last_backup != null) { if (data.last_backup != null) {
if ($('#last_back_status').html() != data.last_backup) if ($('#last_back_status').html() != data.last_backup)
$('#last_back_status').html(data.last_backup); $('#last_back_status').html(data.last_backup);
} }
if (data.next_backup != null) { if (data.next_backup != null) {
if ($('#next_back_status').html() != data.next_backup) if ($('#next_back_status').html() != data.next_backup)
$('#next_back_status').html(data.next_backup); $('#next_back_status').html(data.next_backup);
} }
} }
}); });
} }
function printStatus(status, secondLine) { function printStatus(status, secondLine) {
$('#status').empty(); $('#status').empty();
$('#status').html(status); $('#status').html(status);
@ -386,7 +401,7 @@
$('#status-second-line').attr('data-tooltip', secondLine) $('#status-second-line').attr('data-tooltip', secondLine)
$('#progress').addClass("hide"); $('#progress').addClass("hide");
} }
function printStatusWithBar(status, progress) { function printStatusWithBar(status, progress) {
$('#status').empty(); $('#status').empty();
$('#status').html(status); $('#status').html(status);
@ -395,7 +410,7 @@
secondLine.html(progress == -1 ? "Waiting..." : (Math.round(progress * 100) + "%")); secondLine.html(progress == -1 ? "Waiting..." : (Math.round(progress * 100) + "%"));
secondLine.addClass("center"); secondLine.addClass("center");
secondLine.attr('data-tooltip', Math.round(progress * 100) + "%"); secondLine.attr('data-tooltip', Math.round(progress * 100) + "%");
let progressDiv = $('#progress'); let progressDiv = $('#progress');
progressDiv.removeClass("hide"); progressDiv.removeClass("hide");
if (progress == -1) { if (progress == -1) {
@ -407,44 +422,60 @@
progressDiv.children().addClass('determinate'); progressDiv.children().addClass('determinate');
progressDiv.children().css('width', (progress * 100) + "%"); progressDiv.children().css('width', (progress * 100) + "%");
} }
} }
function listeners() { function listeners() {
$('#save-nextcloud-settings').click(sendNextcloudSettings); $('#save-nextcloud-settings').click(sendNextcloudSettings);
$('#trigger-nextcloud-settings').click(getNextcloudSettings); $('#trigger-nextcloud-settings').click(getNextcloudSettings);
$('#trigger-backup-settings').click(getBackupSettings); $('#trigger-backup-settings').click(getBackupSettings);
$('#btn-backup-now').click(backupNow); $('#btn-backup-now').click(backupNow);
$('#btn-clean-now').click(cleanNow); $('#btn-clean-now').click(cleanNow);
$('#save-backup-settings').click(sendBackupSettings); $('#save-backup-settings').click(sendBackupSettings);
$('#cron-drop-day-month').on('input', function() { $('#cron-drop-day-month').on('input', function() {
$('#cron-drop-day-month-read').val($(this).val()); $('#cron-drop-day-month-read').val($(this).val());
}); });
$('#local-snap-keep').on('input', function() { $('#local-snap-keep').on('input', function() {
$('#local-snap-keep-read').val($(this).val()); $('#local-snap-keep-read').val($(this).val());
}); });
$('#backup-snap-keep').on('input', function() { $('#backup-snap-keep').on('input', function() {
$('#backup-snap-keep-read').val($(this).val()); $('#backup-snap-keep-read').val($(this).val());
}); });
$('#ssl').change(function(){ $('#ssl').change(function(){
let div = $('#self_signed').parent().parent().parent(); let div = $('#self_signed').parent().parent().parent();
if($('#ssl').is(':checked')) if($('#ssl').is(':checked'))
div.removeClass("hide") div.removeClass("hide")
else else
div.addClass("hide"); div.addClass("hide");
}) });
$('#confirm-restore').click(function(){
restore(to_restore);
});
} }
function restore(id){
loadingModal.open();
$.post('./api/restore', {path: id})
.done((data)=>{
console.log("Restore cmd send !");
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
}).fail((error) => {
console.log(error);
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
})
.always(()=> loadingModal.close())
}
function sendNextcloudSettings() { function sendNextcloudSettings() {
loadingModal.open(); loadingModal.open();
let ssl = $('#ssl').is(':checked') let ssl = $('#ssl').is(':checked')
@ -454,37 +485,44 @@
let password = $('#password').val(); let password = $('#password').val();
let back_dir = $('#back-dir').val(); let back_dir = $('#back-dir').val();
$.post('./api/nextcloud-settings', { ssl: ssl, host: hostname, username: username, password: password, back_dir: back_dir, self_signed: self_signed }) $.post('./api/nextcloud-settings', { ssl: ssl, host: hostname, username: username, password: password, back_dir: back_dir, self_signed: self_signed })
.done((data) => { .done((data) => {
console.log('Saved'); console.log('Saved');
$('#nextcloud_settings_message').parent().addClass("hide"); $('#nextcloud_settings_message').parent().addClass("hide");
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Nextcloud settings saved !', classes: "green" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Nextcloud settings saved !', classes: "green" });
M.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close(); M.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close();
}).fail((data) => { }).fail((data) => {
debugger; debugger;
if (data.status == 406) { if (data.status == 406) {
console.log(data.responseJSON.message); console.log(data.responseJSON.message);
$('#nextcloud_settings_message').html(data.responseJSON.message); $('#nextcloud_settings_message').html(data.responseJSON.message);
} }
else { else {
$('#nextcloud_settings_message').html("Invalid Settings."); $('#nextcloud_settings_message').html("Invalid Settings.");
} }
$('#nextcloud_settings_message').parent().removeClass("hide"); $('#nextcloud_settings_message').parent().removeClass("hide");
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Invalid Nextcloud settings !', classes: "red" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Invalid Nextcloud settings !', classes: "red" });
console.log('Fail'); console.log('Fail');
}).always(() => { }).always(() => {
loadingModal.close(); loadingModal.close();
}) })
} }
function manualBackup(id, name) { function manualBackup(id, name) {
$.post('./api/manual-backup?id=' + id + '&name=' + name); $.post('./api/manual-backup?id=' + id + '&name=' + name)
.done((data)=>{
console.log("manual bk cmd send !");
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
}).fail((error) => {
console.log(error);
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
})
} }
function getNextcloudSettings() { function getNextcloudSettings() {
loadingModal.open(); loadingModal.open();
$.get('./api/nextcloud-settings', (data) => { $.get('./api/nextcloud-settings', (data) => {
@ -509,33 +547,33 @@
loadingModal.close(); loadingModal.close();
}); });
} }
function backupNow() { function backupNow() {
loadingModal.open(); loadingModal.open();
$.post('./api/new-backup') $.post('./api/new-backup')
.done(() => { .done(() => {
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
}).fail((error) => { }).fail((error) => {
console.log(error); console.log(error);
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
}) })
.always(() => { .always(() => {
loadingModal.close(); loadingModal.close();
}) })
} }
function cleanNow() { function cleanNow() {
loadingModal.open(); loadingModal.open();
$.post('./api/clean-now') $.post('./api/clean-now')
.done(() => { .done(() => {
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Command send !', classes: "green" });
}).fail((error) => { }).fail((error) => {
console.log(error); console.log(error);
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !', classes: "red" });
}) })
.always(() => { .always(() => {
loadingModal.close(); loadingModal.close();
}) })
} }
function getBackupSettings() { function getBackupSettings() {
loadingModal.open(); loadingModal.open();
@ -552,70 +590,70 @@
auto_clean_backup_keep: 5, auto_clean_backup_keep: 5,
} }
} }
changeSelect('#cron-drop-settings', data.cron_base); changeSelect('#cron-drop-settings', data.cron_base);
$('#cron-drop-settings').change(updateDropVisibility); $('#cron-drop-settings').change(updateDropVisibility);
let timepicker = document.querySelector('#timepicker'); let timepicker = document.querySelector('#timepicker');
$('#timepicker').val(data.cron_hour); $('#timepicker').val(data.cron_hour);
$('#timepicker + label').removeClass("active"); $('#timepicker + label').removeClass("active");
$('#timepicker + label').addClass("active"); $('#timepicker + label').addClass("active");
if (M.Timepicker.getInstance(timepicker) != null) if (M.Timepicker.getInstance(timepicker) != null)
M.Timepicker.getInstance(timepicker).destroy(); M.Timepicker.getInstance(timepicker).destroy();
M.Timepicker.init(timepicker, { defaultTime: data.cron_hour, twelveHour: false, container: 'body' }); M.Timepicker.init(timepicker, { defaultTime: data.cron_hour, twelveHour: false, container: 'body' });
$('#cron-drop-day-month-read').val(data.cron_month_day); $('#cron-drop-day-month-read').val(data.cron_month_day);
$('#cron-drop-day-month').val(data.cron_month_day); $('#cron-drop-day-month').val(data.cron_month_day);
$('#cron-drop-day-month-read + label').removeClass("active"); $('#cron-drop-day-month-read + label').removeClass("active");
$('#cron-drop-day-month-read + label').addClass("active"); $('#cron-drop-day-month-read + label').addClass("active");
$('#auto_clean_local').prop('checked', data.auto_clean_local == "true"); $('#auto_clean_local').prop('checked', data.auto_clean_local == "true");
$('#local-snap-keep-read, #local-snap-keep').val(data.auto_clean_local_keep); $('#local-snap-keep-read, #local-snap-keep').val(data.auto_clean_local_keep);
$('#auto_clean_backup').prop('checked', data.auto_clean_backup == "true"); $('#auto_clean_backup').prop('checked', data.auto_clean_backup == "true");
$('#backup-snap-keep-read, #backup-snap-keep').val(data.auto_clean_backup_keep); $('#backup-snap-keep-read, #backup-snap-keep').val(data.auto_clean_backup_keep);
$('#backup-snap-keep-read + label').removeClass("active"); $('#backup-snap-keep-read + label').removeClass("active");
$('#backup-snap-keep-read + label').addClass("active"); $('#backup-snap-keep-read + label').addClass("active");
$('#local-snap-keep-read + label').removeClass("active"); $('#local-snap-keep-read + label').removeClass("active");
$('#local-snap-keep-read + label').addClass("active"); $('#local-snap-keep-read + label').addClass("active");
changeSelect('#cron-drop-day', data.cron_weekday); changeSelect('#cron-drop-day', data.cron_weekday);
updateDropVisibility(); updateDropVisibility();
loadingModal.close(); loadingModal.close();
}); });
} }
function updateDropVisibility() { function updateDropVisibility() {
let cronBase = $("#cron-drop-settings").val(); let cronBase = $("#cron-drop-settings").val();
switch (cronBase) { switch (cronBase) {
case "3": case "3":
$('#timepicker').parent().parent().removeClass("hide"); $('#timepicker').parent().parent().removeClass("hide");
$('#cron-drop-day').parent().parent().parent().addClass("hide"); $('#cron-drop-day').parent().parent().parent().addClass("hide");
$('#cron-drop-day-month').parent().parent().parent().removeClass("hide"); $('#cron-drop-day-month').parent().parent().parent().removeClass("hide");
break; break;
case "2": case "2":
$('#timepicker').parent().parent().removeClass("hide"); $('#timepicker').parent().parent().removeClass("hide");
$('#cron-drop-day').parent().parent().parent().removeClass("hide"); $('#cron-drop-day').parent().parent().parent().removeClass("hide");
$('#cron-drop-day-month').parent().parent().parent().addClass("hide"); $('#cron-drop-day-month').parent().parent().parent().addClass("hide");
break; break;
case "1": case "1":
$('#timepicker').parent().parent().removeClass("hide"); $('#timepicker').parent().parent().removeClass("hide");
$('#cron-drop-day').parent().parent().parent().addClass("hide"); $('#cron-drop-day').parent().parent().parent().addClass("hide");
$('#cron-drop-day-month').parent().parent().parent().addClass("hide"); $('#cron-drop-day-month').parent().parent().parent().addClass("hide");
break; break;
case "0": case "0":
$('#timepicker').parent().parent().addClass("hide"); $('#timepicker').parent().parent().addClass("hide");
$('#cron-drop-day').parent().parent().parent().addClass("hide"); $('#cron-drop-day').parent().parent().parent().addClass("hide");
$('#cron-drop-day-month').parent().parent().parent().addClass("hide"); $('#cron-drop-day-month').parent().parent().parent().addClass("hide");
break; break;
} }
} }
function sendBackupSettings() { function sendBackupSettings() {
let cron_month_day = $('#cron-drop-day-month').val(); let cron_month_day = $('#cron-drop-day-month').val();
let cron_weekday = $('#cron-drop-day').val(); let cron_weekday = $('#cron-drop-day').val();
@ -627,31 +665,31 @@
let auto_clean_backup_keep = $("#backup-snap-keep").val(); let auto_clean_backup_keep = $("#backup-snap-keep").val();
loadingModal.open(); loadingModal.open();
$.post('./api/backup-settings', $.post('./api/backup-settings',
{ {
cron_base: cron_base, cron_base: cron_base,
cron_hour: cron_hour, cron_hour: cron_hour,
cron_weekday: cron_weekday, cron_weekday: cron_weekday,
cron_month_day: cron_month_day, cron_month_day: cron_month_day,
auto_clean_local: auto_clean_local, auto_clean_local: auto_clean_local,
auto_clean_local_keep: auto_clean_local_keep, auto_clean_local_keep: auto_clean_local_keep,
auto_clean_backup: auto_clean_backup, auto_clean_backup: auto_clean_backup,
auto_clean_backup_keep: auto_clean_backup_keep, auto_clean_backup_keep: auto_clean_backup_keep,
}) })
.done(() => { .done(() => {
M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Backup settings saved !', classes: "green" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">check_box</i> Backup settings saved !', classes: "green" });
M.Modal.getInstance(document.querySelector('#modal-settings-backup')).close(); M.Modal.getInstance(document.querySelector('#modal-settings-backup')).close();
}).fail(() => { }).fail(() => {
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t save backup settings !', classes: "red" }); M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t save backup settings !', classes: "red" });
}).always(() => { }).always(() => {
loadingModal.close(); loadingModal.close();
}); });
} }
function changeSelect(selector, value) { function changeSelect(selector, value) {
let selectBaseRaw = document.querySelector(selector); let selectBaseRaw = document.querySelector(selector);
if (M.FormSelect.getInstance(selectBaseRaw) != null) if (M.FormSelect.getInstance(selectBaseRaw) != null)
M.FormSelect.getInstance(selectBaseRaw).destroy(); M.FormSelect.getInstance(selectBaseRaw).destroy();
$(selector + ' option[selected]').removeAttr('selected'); $(selector + ' option[selected]').removeAttr('selected');
$(selector + ' option[value=' + value + ']').attr('selected', "true"); $(selector + ' option[value=' + value + ']').attr('selected', "true");
M.FormSelect.init(selectBaseRaw, {}); M.FormSelect.init(selectBaseRaw, {});

2
nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs
View File

@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div class="modal-footer blue-grey darken-4"> <div class="modal-footer blue-grey darken-4">
<a href="#!" class="waves-effect waves-green btn light-blue accent-4 manual-back-list modal-close" data-id="<%=snaps[index].slug%>" data-name='<%= snaps[index].name ? snaps[index].name : snaps[index].slug %>'</a>Backup now</a> <a href="#!" class="waves-effect waves-green btn green manual-back-list modal-close" data-id="<%=snaps[index].slug%>" data-name='<%= snaps[index].name ? snaps[index].name : snaps[index].slug %>'</a>Backup now</a>
<a href="#!" class="modal-close waves-effect waves-green btn red">Close</a> <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
</div> </div>

22
nextcloud_backup/rootfs/opt/nextcloud_backup/views/modals/restore-modal.ejs Normal file
View File

@ -0,0 +1,22 @@
<div id="modal-restore" class="modal blue-grey darken-4 white-text">
<div class="modal-content">
<div class="row">
<div class="col s12 center">
<h4>Restore snapshot</h2>
</div>
</div>
<div class="row">
<div class="col s12 center divider">
</div>
</div>
<div class="row" style="margin-top: 40px;">
<h5 class="center">Are you sure you want to restore this snapshot ?</h5>
<h6 class="center">This will remplace all your data !</h6>
</div>
</div>
<div class="modal-footer blue-grey darken-4">
<a href="#!" id="confirm-restore" class="waves-effect waves-green btn green modal-close">Confirm</a>
<a href="#!" class="modal-close waves-effect waves-green btn red">Cancel</a>
</div>
</div>