mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-11-22 09:12:58 +01:00
🔨 Move loading modal and toast to bootstrap
This commit is contained in:
Sebastien Clement
parent
59afab1120
commit
8328786df8
@ -24,16 +24,31 @@ app.use(express.urlencoded({ extended: false }));
|
||||
app.use(cookieParser());
|
||||
app.use(express.static(path.join(__dirname, "public")));
|
||||
|
||||
// Boootstrap JS Files
|
||||
app.use('/js/', express.static(path.join(__dirname, '/node_modules/bootstrap/dist/js')))
|
||||
// Fontawesome files
|
||||
app.use('/css/', express.static(path.join(__dirname, '/node_modules/@fortawesome/fontawesome-free/css')))
|
||||
app.use('/webfonts/', express.static(path.join(__dirname, '/node_modules/@fortawesome/fontawesome-free/webfonts')))
|
||||
|
||||
|
||||
app.use("/", indexRouter);
|
||||
app.use("/api", apiRouter);
|
||||
|
||||
/*
|
||||
-----------------------------------------------------------
|
||||
Library statics
|
||||
----------------------------------------------------------
|
||||
*/
|
||||
|
||||
// Boootstrap JS Files
|
||||
app.use('/js/bootstrap.min.js', express.static(path.join(__dirname, '/node_modules/bootstrap/dist/js/bootstrap.min.js')))
|
||||
|
||||
|
||||
// Fontawesome Files
|
||||
app.use('/css/fa-all.min.css', express.static(path.join(__dirname, '/node_modules/@fortawesome/fontawesome-free/css/all.min.css')))
|
||||
app.use('/webfonts/', express.static(path.join(__dirname, '/node_modules/@fortawesome/fontawesome-free/webfonts')))
|
||||
|
||||
// Jquery JS Files
|
||||
app.use('/js/jquery.min.js', express.static(path.join(__dirname, '/node_modules/jquery/dist/jquery.min.js')))
|
||||
|
||||
/*
|
||||
-----------------------------------------------------------
|
||||
Error handler
|
||||
----------------------------------------------------------
|
||||
*/
|
||||
// catch 404 and forward to error handler
|
||||
app.use(function (req, res, next) {
|
||||
next(createError(404));
|
||||
@ -50,6 +65,12 @@ app.use(function (err, req, res, next) {
|
||||
res.render("error");
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
-----------------------------------------------------------
|
||||
Init app
|
||||
----------------------------------------------------------
|
||||
*/
|
||||
const fs = require("fs");
|
||||
const newlog = require("./config/winston");
|
||||
if (!fs.existsSync("/data")) fs.mkdirSync("/data");
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -17,16 +17,10 @@
|
||||
"form-data": "^3.0.0",
|
||||
"got": "^11.8.1",
|
||||
"http-errors": "~1.6.3",
|
||||
"jquery": "^3.5.1",
|
||||
"moment": "^2.29.1",
|
||||
"morgan": "~1.9.1",
|
||||
"webdav": "^3.6.2",
|
||||
"winston": "^3.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-eslint": "^6.0.0",
|
||||
"eslint-config-prettier": "^6.15.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-node": "^11.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,18 @@
|
||||
background-color: #0091ea ;
|
||||
}
|
||||
#header-box{
|
||||
min-height: 150px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.btn .bi::before{
|
||||
vertical-align: middle ;
|
||||
}
|
||||
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
z-index: 1055;
|
||||
margin: 5px;
|
||||
top: 58px;
|
||||
right: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,30 @@
|
||||
function create_toast(type, message, delay) {
|
||||
let toast_class;
|
||||
let icon_class;
|
||||
switch (type) {
|
||||
case 'error':
|
||||
toast_class = 'bg-danger';
|
||||
icon_class = 'fa-exclamation-triangle'
|
||||
break;
|
||||
|
||||
default:
|
||||
toast_class = `bg-${type}`
|
||||
icon_class = 'fa-check'
|
||||
}
|
||||
let toast_id = Date.now().toString();
|
||||
let toast_html = `<div id="${toast_id}" class="toast d-flex align-items-center text-white ${toast_class}" role="alert" aria-live="assertive" aria-atomic="true">`
|
||||
toast_html += `<div class="toast-body h5 mb-0"><i class="fas ${icon_class} me-2"></i> ${message}</div>`
|
||||
toast_html += `<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button></div>`
|
||||
$('#toast-container').prepend(toast_html);
|
||||
let toast_dom = document.getElementById(toast_id)
|
||||
let toast = new bootstrap.Toast(toast_dom, {
|
||||
animation: true,
|
||||
autohide: delay !== -1,
|
||||
delay: delay
|
||||
});
|
||||
toast_dom.addEventListener('hidden.bs.toast', function () {
|
||||
this.remove();
|
||||
});
|
||||
toast.show();
|
||||
return toast;
|
||||
}
|
||||
@ -10,7 +10,8 @@
|
||||
|
||||
<link rel='stylesheet' href='./css/style.css'/>
|
||||
<link rel="stylesheet" href="./css/custom_bootstrap.css">
|
||||
<link rel="stylesheet" href="./css/all.css">
|
||||
<link rel="stylesheet" href="./css/fa-all.min.css">
|
||||
<!-- <link rel="stylesheet" href="./css/toast.min.css">-->
|
||||
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
|
||||
<!-- <style>-->
|
||||
<!-- .modal input[disabled] {-->
|
||||
@ -140,12 +141,12 @@
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="card text-white bg-dark h-100 shadow border-secondary">
|
||||
<div class="card-header fw-bold h5 border-secondary border-bottom">Manual</div>
|
||||
<div class="card-body py-2">
|
||||
<div class="center w-100">
|
||||
<a class="btn btn-success" id="btn-backup-now" style="margin-top: 7px; display: block;">
|
||||
<div class="card-body">
|
||||
<div class="w-100">
|
||||
<a class="btn btn-success d-block mb-2" id="btn-backup-now">
|
||||
Backup Now
|
||||
</a>
|
||||
<a class="btn btn-danger" id="btn-clean-now" style="margin-top: 7px; display: block;">
|
||||
<a class="btn btn-danger d-block" id="btn-clean-now"">
|
||||
Clean Now
|
||||
</a>
|
||||
</div>
|
||||
@ -167,7 +168,8 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-12 col-lg-6 ">
|
||||
<div class="card text-white bg-dark h-100 shadow border-secondary">
|
||||
<div class="card-header fw-bold h4 text-center border-secondary border-bottom">Snapshots in Nextcloud</div>
|
||||
<div class="card-header fw-bold h4 text-center border-secondary border-bottom">Snapshots in Nextcloud
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-center fw-bold border-bottom border-secondary pb-3">Auto</h5>
|
||||
<div id="auto_backups"></div>
|
||||
@ -183,95 +185,31 @@
|
||||
|
||||
<%- include('modals/nextcloud-settings-modal') %>
|
||||
<%- include('modals/backup-settings-modal') %>
|
||||
|
||||
<div id="modal-loading" class="modal blue-grey darken-4 white-text">
|
||||
<div class="modal-content ">
|
||||
<div class="row">
|
||||
<div class="col s12 center">
|
||||
<h4>Loading</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row valign-wrapper" style="height: 150px;">
|
||||
<div class="col s12 center">
|
||||
<div class="preloader-wrapper big active">
|
||||
<div class="spinner-layer spinner-blue">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-red">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-yellow">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer spinner-green">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('modals/loading-modal') %>
|
||||
<div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true">
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
<script src="./js/bootstrap.min.js"></script>
|
||||
<script src="./js/jquery-3.4.1.min.js"></script>
|
||||
<script src="./js/jquery.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<script src="./js/toast.js"></script>
|
||||
<script>
|
||||
var last_status = "";
|
||||
var last_local_snap = "";
|
||||
var last_manu_back = "";
|
||||
var last_auto_back = "";
|
||||
|
||||
const default_toast_timeout = 10000;
|
||||
var loadingModal = null;
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
$.ajaxSetup({ traditional: true });
|
||||
updateLocalSnaps();
|
||||
update_status();
|
||||
let tooltips = document.querySelectorAll('.tooltipped');
|
||||
M.Tooltip.init(tooltips, {});
|
||||
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')
|
||||
loadingModal = new bootstrap.Modal(document.getElementById('loading-modal'), {
|
||||
keyboard: false,
|
||||
backdrop: 'static'
|
||||
});
|
||||
|
||||
setInterval(update_status, 500);
|
||||
@ -281,15 +219,6 @@
|
||||
});
|
||||
|
||||
function updateDynamicListeners() {
|
||||
var elems = document.querySelectorAll('.collapsible');
|
||||
M.Collapsible.init(elems, { accordion: true });
|
||||
var modals = document.querySelectorAll('.modal:not(#modal-loading)');
|
||||
M.Modal.init(modals, { dismissible: true });
|
||||
|
||||
let loadingModals = document.querySelectorAll('#modal-loading');
|
||||
M.Modal.init(loadingModals, { dismissible: false });
|
||||
|
||||
loadingModal = M.Modal.getInstance(document.querySelector('#modal-loading'));
|
||||
$('.local-snap-listener').click(function () {
|
||||
let id = this.getAttribute('data-id');
|
||||
console.log(id);
|
||||
@ -476,16 +405,11 @@
|
||||
$.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) => {
|
||||
create_toast("success", "Command send !", default_toast_timeout);
|
||||
})
|
||||
.fail((error) => {
|
||||
console.log(error);
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !',
|
||||
classes: "red"
|
||||
});
|
||||
create_toast("error", "Can't send command !", default_toast_timeout);
|
||||
})
|
||||
.always(() => loadingModal.close())
|
||||
}
|
||||
@ -509,13 +433,11 @@
|
||||
.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"
|
||||
});
|
||||
create_toast("success", "Nextcloud settings saved !", default_toast_timeout);
|
||||
M.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close();
|
||||
|
||||
}).fail((data) => {
|
||||
})
|
||||
.fail((data) => {
|
||||
debugger;
|
||||
if (data.status == 406) {
|
||||
console.log(data.responseJSON.message);
|
||||
@ -526,10 +448,7 @@
|
||||
|
||||
}
|
||||
$('#nextcloud_settings_message').parent().removeClass("hide");
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Invalid Nextcloud settings !',
|
||||
classes: "red"
|
||||
});
|
||||
create_toast("error", "Invalid Nextcloud settings !", default_toast_timeout);
|
||||
console.log('Fail');
|
||||
}).always(() => {
|
||||
loadingModal.close();
|
||||
@ -540,16 +459,11 @@
|
||||
$.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) => {
|
||||
create_toast("success", "Command send !", default_toast_timeout);
|
||||
})
|
||||
.fail((error) => {
|
||||
console.log(error);
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !',
|
||||
classes: "red"
|
||||
});
|
||||
create_toast("error", "Can't send command !", default_toast_timeout);
|
||||
})
|
||||
|
||||
}
|
||||
@ -584,16 +498,11 @@
|
||||
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) => {
|
||||
create_toast("success", "Command send !", default_toast_timeout);
|
||||
})
|
||||
.fail((error) => {
|
||||
console.log(error);
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !',
|
||||
classes: "red"
|
||||
});
|
||||
create_toast("error", "Can't send command !", default_toast_timeout);
|
||||
})
|
||||
.always(() => {
|
||||
loadingModal.close();
|
||||
@ -604,16 +513,11 @@
|
||||
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) => {
|
||||
create_toast("success", "Command send !", default_toast_timeout);
|
||||
})
|
||||
.fail((error) => {
|
||||
console.log(error);
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t send command !',
|
||||
classes: "red"
|
||||
});
|
||||
create_toast("error", "Can't send command !", default_toast_timeout);
|
||||
})
|
||||
.always(() => {
|
||||
loadingModal.close();
|
||||
@ -762,12 +666,11 @@
|
||||
exclude_folder: exclude_folder
|
||||
})
|
||||
.done(() => {
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">check_box</i> Backup settings saved !',
|
||||
classes: "green"
|
||||
});
|
||||
create_toast("success", "Backup settings saved !", default_toast_timeout);
|
||||
M.Modal.getInstance(document.querySelector('#modal-settings-backup')).close();
|
||||
}).fail(() => {
|
||||
})
|
||||
.fail(() => {
|
||||
create_toast("error", "Can't save backup settings !", default_toast_timeout);
|
||||
M.toast({
|
||||
html: '<i class="material-icons" style="margin-right:10px">warning</i> Can\'t save backup settings !',
|
||||
classes: "red"
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="modal" id="loading-modal" tabindex="-1"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog border-secondary">
|
||||
<div class="modal-content bg-dark text-white">
|
||||
<div class="modal-header border-secondary d-flex justify-content-center">
|
||||
<h3 class="modal-title fw-bold">Loading</h4>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<div class="spinner-border text-accent border-5" style="width: 5rem; height: 5rem" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user