🔨 Move loading modal and toast to bootstrap

This commit is contained in:
Sebastien Clement 2021-01-08 13:41:36 +01:00
parent 59afab1120
commit 8328786df8
9 changed files with 155 additions and 1858 deletions

View File

@ -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

View File

@ -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"
}
}

View File

@ -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

View File

@ -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;
}

View File

@ -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"

View File

@ -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>