mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-07-14 23:31:24 +02:00
🔨 Edit frontend for Restore function
This commit is contained in:
Sebastien Clement
parent
2c506c2e69
commit
88cd6f2c45
@ -1,7 +1,7 @@
|
||||
<% if (locals.backups) { %>
|
||||
<div class="collection">
|
||||
<% 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 %>">
|
||||
<div><%= backups[index].basename%><div class="secondary-content hide-on-small-and-down">
|
||||
<%= moment(backups[index].lastmod).format('MMM D, YYYY HH:mm') %></div>
|
||||
@ -40,6 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -81,10 +81,14 @@
|
||||
<nav class=" light-blue accent-4">
|
||||
<div class="nav-wrapper container">
|
||||
<a href="#" class="brand-logo"><img src="./images/Nextcloud_Logo.svg" height="54"
|
||||
style="margin: 5px"></a>
|
||||
style="margin: 5px">
|
||||
</a>
|
||||
<ul class="right">
|
||||
<li id="setting-trigger"><a class="dropdown-trigger" href="#" data-target="dropdown-settings"><i
|
||||
class="material-icons">settings</i></a></li>
|
||||
<li id="setting-trigger">
|
||||
<a class="dropdown-trigger" href="#" data-target="dropdown-settings">
|
||||
<i class="material-icons">settings</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
@ -138,10 +142,10 @@
|
||||
<div class="divider"></div>
|
||||
<div style="width: 100%;" class="center">
|
||||
<a class="btn green center waves-effect waves-light" id="btn-backup-now"
|
||||
style="margin-top: 7px; display: block;">Backup
|
||||
Now</a>
|
||||
style="margin-top: 7px; display: block;">Backup
|
||||
Now</a>
|
||||
<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>
|
||||
@ -181,6 +185,7 @@
|
||||
|
||||
<%- include('modals/backup-settings-modal') %>
|
||||
|
||||
<%- include('modals/restore-modal.ejs') %>
|
||||
|
||||
<div id="modal-loading" class="modal blue-grey darken-4 white-text">
|
||||
<div class="modal-content ">
|
||||
@ -245,6 +250,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
<script src="./js/materialize.min.js"></script>
|
||||
<script src="./js/jquery-3.4.1.min.js"></script>
|
||||
@ -255,6 +261,8 @@
|
||||
var last_manu_back = "";
|
||||
var last_auto_back = "";
|
||||
|
||||
var to_restore = "";
|
||||
|
||||
var loadingModal = null;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateLocalSnaps();
|
||||
@ -274,7 +282,7 @@
|
||||
var elems = document.querySelectorAll('.collapsible');
|
||||
M.Collapsible.init(elems, { accordion: true });
|
||||
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');
|
||||
M.Modal.init(loadingModals, { dismissible: false });
|
||||
@ -290,13 +298,20 @@
|
||||
let name = this.getAttribute('data-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() {
|
||||
let needUpdate = false;
|
||||
$.get('./api/formated-local-snap', (data) => {
|
||||
if (JSON.stringify(data) === last_local_snap)
|
||||
return;
|
||||
return;
|
||||
last_local_snap = JSON.stringify(data);
|
||||
needUpdate = true;
|
||||
$('#local_snaps').empty();
|
||||
@ -310,7 +325,7 @@
|
||||
let needUpdate = false;
|
||||
$.get('./api/formated-backup-manual', (data) => {
|
||||
if (JSON.stringify(data) === last_manu_back)
|
||||
return;
|
||||
return;
|
||||
last_manu_back = JSON.stringify(data);
|
||||
needUpdate = true;
|
||||
$('#manual_backups').empty();
|
||||
@ -324,7 +339,7 @@
|
||||
let needUpdate = false;
|
||||
$.get('./api/formated-backup-auto', (data) => {
|
||||
if (JSON.stringify(data) === last_auto_back)
|
||||
return;
|
||||
return;
|
||||
needUpdate = true;
|
||||
last_auto_back = JSON.stringify(data);
|
||||
$('#auto_backups').empty();
|
||||
@ -332,7 +347,7 @@
|
||||
|
||||
}).always(() => {
|
||||
if (prevUpdate || needUpdate)
|
||||
updateDynamicListeners();
|
||||
updateDynamicListeners();
|
||||
});
|
||||
}
|
||||
|
||||
@ -342,33 +357,33 @@
|
||||
last_status = JSON.stringify(data);
|
||||
switch (data.status) {
|
||||
case "error":
|
||||
printStatus('Error', data.message);
|
||||
$('#btn-backup-now, #btn-clean-now').removeClass("disabled");
|
||||
break;
|
||||
printStatus('Error', data.message);
|
||||
$('#btn-backup-now, #btn-clean-now').removeClass("disabled");
|
||||
break;
|
||||
case "idle":
|
||||
printStatus('Idle', "Waiting for next backup.");
|
||||
$('#btn-backup-now, #btn-clean-now').removeClass("disabled");
|
||||
break;
|
||||
printStatus('Idle', "Waiting for next backup.");
|
||||
$('#btn-backup-now, #btn-clean-now').removeClass("disabled");
|
||||
break;
|
||||
case "download":
|
||||
printStatusWithBar('Downloading Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
printStatusWithBar('Downloading Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
case "upload":
|
||||
printStatusWithBar('Uploading Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
printStatusWithBar('Uploading Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
case "creating":
|
||||
printStatusWithBar('Creating Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
printStatusWithBar('Creating Snapshot', data.progress);
|
||||
$('#btn-backup-now, #btn-clean-now').addClass("disabled");
|
||||
break;
|
||||
}
|
||||
if (data.last_backup != null) {
|
||||
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 ($('#next_back_status').html() != data.next_backup)
|
||||
$('#next_back_status').html(data.next_backup);
|
||||
$('#next_back_status').html(data.next_backup);
|
||||
}
|
||||
}
|
||||
|
||||
@ -435,15 +450,31 @@
|
||||
let div = $('#self_signed').parent().parent().parent();
|
||||
|
||||
if($('#ssl').is(':checked'))
|
||||
div.removeClass("hide")
|
||||
div.removeClass("hide")
|
||||
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() {
|
||||
loadingModal.open();
|
||||
@ -454,33 +485,40 @@
|
||||
let password = $('#password').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 })
|
||||
.done((data) => {
|
||||
console.log('Saved');
|
||||
$('#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.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close();
|
||||
.done((data) => {
|
||||
console.log('Saved');
|
||||
$('#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.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close();
|
||||
|
||||
}).fail((data) => {
|
||||
debugger;
|
||||
if (data.status == 406) {
|
||||
console.log(data.responseJSON.message);
|
||||
$('#nextcloud_settings_message').html(data.responseJSON.message);
|
||||
}).fail((data) => {
|
||||
debugger;
|
||||
if (data.status == 406) {
|
||||
console.log(data.responseJSON.message);
|
||||
$('#nextcloud_settings_message').html(data.responseJSON.message);
|
||||
|
||||
}
|
||||
else {
|
||||
$('#nextcloud_settings_message').html("Invalid Settings.");
|
||||
}
|
||||
else {
|
||||
$('#nextcloud_settings_message').html("Invalid Settings.");
|
||||
|
||||
}
|
||||
$('#nextcloud_settings_message').parent().removeClass("hide");
|
||||
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Invalid Nextcloud settings !', classes: "red" });
|
||||
console.log('Fail');
|
||||
}).always(() => {
|
||||
loadingModal.close();
|
||||
})
|
||||
}
|
||||
$('#nextcloud_settings_message').parent().removeClass("hide");
|
||||
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Invalid Nextcloud settings !', classes: "red" });
|
||||
console.log('Fail');
|
||||
}).always(() => {
|
||||
loadingModal.close();
|
||||
})
|
||||
}
|
||||
|
||||
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" });
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@ -513,29 +551,29 @@
|
||||
function backupNow() {
|
||||
loadingModal.open();
|
||||
$.post('./api/new-backup')
|
||||
.done(() => {
|
||||
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();
|
||||
})
|
||||
.done(() => {
|
||||
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 cleanNow() {
|
||||
loadingModal.open();
|
||||
$.post('./api/clean-now')
|
||||
.done(() => {
|
||||
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();
|
||||
})
|
||||
.done(() => {
|
||||
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 getBackupSettings() {
|
||||
loadingModal.open();
|
||||
@ -561,7 +599,7 @@
|
||||
$('#timepicker + label').removeClass("active");
|
||||
$('#timepicker + label').addClass("active");
|
||||
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' });
|
||||
$('#cron-drop-day-month-read').val(data.cron_month_day);
|
||||
$('#cron-drop-day-month').val(data.cron_month_day);
|
||||
@ -593,26 +631,26 @@
|
||||
|
||||
switch (cronBase) {
|
||||
case "3":
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().removeClass("hide");
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().removeClass("hide");
|
||||
|
||||
break;
|
||||
break;
|
||||
case "2":
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
case "1":
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
$('#timepicker').parent().parent().removeClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
case "0":
|
||||
$('#timepicker').parent().parent().addClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
$('#timepicker').parent().parent().addClass("hide");
|
||||
$('#cron-drop-day').parent().parent().parent().addClass("hide");
|
||||
$('#cron-drop-day-month').parent().parent().parent().addClass("hide");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -627,31 +665,31 @@
|
||||
let auto_clean_backup_keep = $("#backup-snap-keep").val();
|
||||
loadingModal.open();
|
||||
$.post('./api/backup-settings',
|
||||
{
|
||||
cron_base: cron_base,
|
||||
cron_hour: cron_hour,
|
||||
cron_weekday: cron_weekday,
|
||||
cron_month_day: cron_month_day,
|
||||
auto_clean_local: auto_clean_local,
|
||||
auto_clean_local_keep: auto_clean_local_keep,
|
||||
auto_clean_backup: auto_clean_backup,
|
||||
auto_clean_backup_keep: auto_clean_backup_keep,
|
||||
})
|
||||
.done(() => {
|
||||
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();
|
||||
}).fail(() => {
|
||||
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t save backup settings !', classes: "red" });
|
||||
}).always(() => {
|
||||
loadingModal.close();
|
||||
});
|
||||
{
|
||||
cron_base: cron_base,
|
||||
cron_hour: cron_hour,
|
||||
cron_weekday: cron_weekday,
|
||||
cron_month_day: cron_month_day,
|
||||
auto_clean_local: auto_clean_local,
|
||||
auto_clean_local_keep: auto_clean_local_keep,
|
||||
auto_clean_backup: auto_clean_backup,
|
||||
auto_clean_backup_keep: auto_clean_backup_keep,
|
||||
})
|
||||
.done(() => {
|
||||
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();
|
||||
}).fail(() => {
|
||||
M.toast({ html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t save backup settings !', classes: "red" });
|
||||
}).always(() => {
|
||||
loadingModal.close();
|
||||
});
|
||||
}
|
||||
|
||||
function changeSelect(selector, value) {
|
||||
let selectBaseRaw = document.querySelector(selector);
|
||||
|
||||
if (M.FormSelect.getInstance(selectBaseRaw) != null)
|
||||
M.FormSelect.getInstance(selectBaseRaw).destroy();
|
||||
M.FormSelect.getInstance(selectBaseRaw).destroy();
|
||||
$(selector + ' option[selected]').removeAttr('selected');
|
||||
$(selector + ' option[value=' + value + ']').attr('selected', "true");
|
||||
M.FormSelect.init(selectBaseRaw, {});
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user