sebclem/hassio-nextcloud-backup
1
0
Fork 0
mirror of https://github.com/Sebclem/hassio-nextcloud-backup.git synced 2024-08-18 21:54:56 +02:00
Code Issues Projects Releases Wiki Activity

🔨 Switch navbar + header to bootstrap

Browse Source
This commit is contained in:
SebClem 2021-01-07 22:14:11 +01:00
parent 7bcce07c59
commit ae1cc25cb0
10 changed files with 887 additions and 817 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nextcloud_backup/rootfs/opt/nextcloud_backup/app.js
View File

@ -23,7 +23,8 @@ app.use(express.json());
app.use(express.urlencoded({ extended: false })); app.use(express.urlencoded({ extended: false }));
app.use(cookieParser()); app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public"))); app.use(express.static(path.join(__dirname, "public")));
app.use('/js/',express.static(path.join(__dirname, '/node_modules/bootstrap/dist/js')))
app.use('/font/',express.static(path.join(__dirname, '/node_modules/bootstrap-icons/font')))
app.use("/", indexRouter); app.use("/", indexRouter);
app.use("/api", apiRouter); app.use("/api", apiRouter);

5
nextcloud_backup/rootfs/opt/nextcloud_backup/package-lock.json generated
View File

@ -356,6 +356,11 @@
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta1.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta1.tgz",
"integrity": "sha512-UrHApw/WRmT7l2rlDdn5iXr7Jps/LlMZtJlLn9G41aGDfss48hyDeYyHtX1C6NHKVcmdUarGG+ve0LZB5iHyTQ==" "integrity": "sha512-UrHApw/WRmT7l2rlDdn5iXr7Jps/LlMZtJlLn9G41aGDfss48hyDeYyHtX1C6NHKVcmdUarGG+ve0LZB5iHyTQ=="
}, },
"bootstrap-icons": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.2.2.tgz",
"integrity": "sha512-7rFICA7E/CgYLvu8zYtd2wMZYhYPQ0GtogZtQyJz/3melCGeQ76qas5wItIEwiUNmtZWg2SP2p8Ekxy3Nk7vvg=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

1
nextcloud_backup/rootfs/opt/nextcloud_backup/package.json
View File

@ -8,6 +8,7 @@
"dependencies": { "dependencies": {
"app-root-path": "^3.0.0", "app-root-path": "^3.0.0",
"bootstrap": "^5.0.0-beta1", "bootstrap": "^5.0.0-beta1",
"bootstrap-icons": "^1.2.2",
"cookie-parser": "^1.4.5", "cookie-parser": "^1.4.5",
"cron": "^1.8.2", "cron": "^1.8.2",
"debug": "~2.6.9", "debug": "~2.6.9",

196
nextcloud_backup/rootfs/opt/nextcloud_backup/public/css/custom_bootstrap.css
View File

@ -20,13 +20,13 @@
--bs-gray: #6c757d; --bs-gray: #6c757d;
--bs-gray-dark: #343a40; --bs-gray-dark: #343a40;
--bs-primary: #0d6efd; --bs-primary: #0d6efd;
--bs-secondary: #6c757d; --bs-secondary: #343a40;
--bs-success: #198754; --bs-success: #198754;
--bs-info: #0dcaf0; --bs-info: #0dcaf0;
--bs-warning: #ffc107; --bs-warning: #ffc107;
--bs-danger: #dc3545; --bs-danger: #dc3545;
--bs-light: #f8f9fa; --bs-light: #f8f9fa;
--bs-dark: #212529; --bs-dark: #292929;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
@ -51,7 +51,7 @@ body {
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: #212529; color: #212529;
background-color: #fff; background-color: #222222;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
@ -569,7 +569,7 @@ progress {
.img-thumbnail { .img-thumbnail {
padding: 0.25rem; padding: 0.25rem;
background-color: #fff; background-color: #222222;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-radius: 0.25rem; border-radius: 0.25rem;
max-width: 100%; max-width: 100%;
@ -1997,15 +1997,15 @@ progress {
} }
.table-secondary { .table-secondary {
--bs-table-bg: #e2e3e5; --bs-table-bg: #d6d8d9;
--bs-table-striped-bg: #d7d8da; --bs-table-striped-bg: #cbcdce;
--bs-table-striped-color: #000; --bs-table-striped-color: #000;
--bs-table-active-bg: #cbccce; --bs-table-active-bg: #c1c2c3;
--bs-table-active-color: #000; --bs-table-active-color: #000;
--bs-table-hover-bg: #d1d2d4; --bs-table-hover-bg: #c6c8c9;
--bs-table-hover-color: #000; --bs-table-hover-color: #000;
color: #000; color: #000;
border-color: #cbccce; border-color: #c1c2c3;
} }
.table-success { .table-success {
@ -2069,15 +2069,15 @@ progress {
} }
.table-dark { .table-dark {
--bs-table-bg: #212529; --bs-table-bg: #292929;
--bs-table-striped-bg: #2c3034; --bs-table-striped-bg: #343434;
--bs-table-striped-color: #fff; --bs-table-striped-color: #fff;
--bs-table-active-bg: #373b3e; --bs-table-active-bg: #3e3e3e;
--bs-table-active-color: #fff; --bs-table-active-color: #fff;
--bs-table-hover-bg: #323539; --bs-table-hover-bg: #393939;
--bs-table-hover-color: #fff; --bs-table-hover-color: #fff;
color: #fff; color: #fff;
border-color: #373b3e; border-color: #3e3e3e;
} }
.table-responsive { .table-responsive {
@ -2377,7 +2377,7 @@ textarea.form-control-lg {
height: 1em; height: 1em;
margin-top: 0.25em; margin-top: 0.25em;
vertical-align: top; vertical-align: top;
background-color: #fff; background-color: #222222;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
@ -2474,10 +2474,10 @@ textarea.form-control-lg {
outline: none; outline: none;
} }
.form-range:focus::-webkit-slider-thumb { .form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} }
.form-range:focus::-moz-range-thumb { .form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25); box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} }
.form-range::-moz-focus-outer { .form-range::-moz-focus-outer {
border: 0; border: 0;
@ -2893,32 +2893,32 @@ textarea.form-control-lg {
.btn-secondary { .btn-secondary {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #343a40;
border-color: #6c757d; border-color: #343a40;
} }
.btn-secondary:hover { .btn-secondary:hover {
color: #fff; color: #fff;
background-color: #5c636a; background-color: #2c3136;
border-color: #565e64; border-color: #2a2e33;
} }
.btn-check:focus + .btn-secondary, .btn-secondary:focus { .btn-check:focus + .btn-secondary, .btn-secondary:focus {
color: #fff; color: #fff;
background-color: #5c636a; background-color: #2c3136;
border-color: #565e64; border-color: #2a2e33;
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
} }
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
color: #fff; color: #fff;
background-color: #565e64; background-color: #2a2e33;
border-color: #51585e; border-color: #272c30;
} }
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus { .btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5); box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
} }
.btn-secondary:disabled, .btn-secondary.disabled { .btn-secondary:disabled, .btn-secondary.disabled {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #343a40;
border-color: #6c757d; border-color: #343a40;
} }
.btn-success { .btn-success {
@ -3073,32 +3073,32 @@ textarea.form-control-lg {
.btn-dark { .btn-dark {
color: #fff; color: #fff;
background-color: #212529; background-color: #292929;
border-color: #212529; border-color: #292929;
} }
.btn-dark:hover { .btn-dark:hover {
color: #fff; color: #fff;
background-color: #1c1f23; background-color: #232323;
border-color: #1a1e21; border-color: #212121;
} }
.btn-check:focus + .btn-dark, .btn-dark:focus { .btn-check:focus + .btn-dark, .btn-dark:focus {
color: #fff; color: #fff;
background-color: #1c1f23; background-color: #232323;
border-color: #1a1e21; border-color: #212121;
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); box-shadow: 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
} }
.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle { .btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
color: #fff; color: #fff;
background-color: #1a1e21; background-color: #212121;
border-color: #191c1f; border-color: #1f1f1f;
} }
.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus { .btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); box-shadow: 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
} }
.btn-dark:disabled, .btn-dark.disabled { .btn-dark:disabled, .btn-dark.disabled {
color: #fff; color: #fff;
background-color: #212529; background-color: #292929;
border-color: #212529; border-color: #292929;
} }
.btn-outline-primary { .btn-outline-primary {
@ -3127,27 +3127,27 @@ textarea.form-control-lg {
} }
.btn-outline-secondary { .btn-outline-secondary {
color: #6c757d; color: #343a40;
border-color: #6c757d; border-color: #343a40;
} }
.btn-outline-secondary:hover { .btn-outline-secondary:hover {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #343a40;
border-color: #6c757d; border-color: #343a40;
} }
.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus { .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5);
} }
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show { .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
color: #fff; color: #fff;
background-color: #6c757d; background-color: #343a40;
border-color: #6c757d; border-color: #343a40;
} }
.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus { .btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5);
} }
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled { .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
color: #6c757d; color: #343a40;
background-color: transparent; background-color: transparent;
} }
@ -3277,27 +3277,27 @@ textarea.form-control-lg {
} }
.btn-outline-dark { .btn-outline-dark {
color: #212529; color: #292929;
border-color: #212529; border-color: #292929;
} }
.btn-outline-dark:hover { .btn-outline-dark:hover {
color: #fff; color: #fff;
background-color: #212529; background-color: #292929;
border-color: #212529; border-color: #292929;
} }
.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus { .btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); box-shadow: 0 0 0 0.25rem rgba(41, 41, 41, 0.5);
} }
.btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show { .btn-check:checked + .btn-outline-dark, .btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-dark.dropdown-toggle.show {
color: #fff; color: #fff;
background-color: #212529; background-color: #292929;
border-color: #212529; border-color: #292929;
} }
.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus { .btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); box-shadow: 0 0 0 0.25rem rgba(41, 41, 41, 0.5);
} }
.btn-outline-dark:disabled, .btn-outline-dark.disabled { .btn-outline-dark:disabled, .btn-outline-dark.disabled {
color: #212529; color: #292929;
background-color: transparent; background-color: transparent;
} }
@ -3775,8 +3775,8 @@ textarea.form-control-lg {
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: #495057; color: #495057;
background-color: #fff; background-color: #222222;
border-color: #dee2e6 #dee2e6 #fff; border-color: #dee2e6 #dee2e6 #222222;
} }
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
margin-top: -1px; margin-top: -1px;
@ -4185,6 +4185,10 @@ textarea.form-control-lg {
margin-left: -0.5rem; margin-left: -0.5rem;
border-bottom: 0; border-bottom: 0;
} }
.card-header-tabs .nav-link.active {
background-color: #fff;
border-bottom-color: #fff;
}
.card-header-pills { .card-header-pills {
margin-right: -0.5rem; margin-right: -0.5rem;
@ -4532,12 +4536,12 @@ textarea.form-control-lg {
} }
.alert-secondary { .alert-secondary {
color: #41464b; color: #1f2326;
background-color: #e2e3e5; background-color: #d6d8d9;
border-color: #d3d6d8; border-color: #c2c4c6;
} }
.alert-secondary .alert-link { .alert-secondary .alert-link {
color: #34383c; color: #191c1e;
} }
.alert-success { .alert-success {
@ -4586,12 +4590,12 @@ textarea.form-control-lg {
} }
.alert-dark { .alert-dark {
color: #141619; color: #191919;
background-color: #d3d3d4; background-color: #d4d4d4;
border-color: #bcbebf; border-color: #bfbfbf;
} }
.alert-dark .alert-link { .alert-dark .alert-link {
color: #101214; color: #141414;
} }
@keyframes progress-bar-stripes { @keyframes progress-bar-stripes {
@ -4866,17 +4870,17 @@ textarea.form-control-lg {
} }
.list-group-item-secondary { .list-group-item-secondary {
color: #41464b; color: #1f2326;
background-color: #e2e3e5; background-color: #d6d8d9;
} }
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
color: #41464b; color: #1f2326;
background-color: #cbccce; background-color: #c1c2c3;
} }
.list-group-item-secondary.list-group-item-action.active { .list-group-item-secondary.list-group-item-action.active {
color: #fff; color: #fff;
background-color: #41464b; background-color: #1f2326;
border-color: #41464b; border-color: #1f2326;
} }
.list-group-item-success { .list-group-item-success {
@ -4950,17 +4954,17 @@ textarea.form-control-lg {
} }
.list-group-item-dark { .list-group-item-dark {
color: #141619; color: #191919;
background-color: #d3d3d4; background-color: #d4d4d4;
} }
.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus { .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
color: #141619; color: #191919;
background-color: #bebebf; background-color: #bfbfbf;
} }
.list-group-item-dark.list-group-item-action.active { .list-group-item-dark.list-group-item-action.active {
color: #fff; color: #fff;
background-color: #141619; background-color: #191919;
border-color: #141619; border-color: #191919;
} }
.btn-close { .btn-close {
@ -5850,10 +5854,10 @@ textarea.form-control-lg {
} }
.link-secondary { .link-secondary {
color: #6c757d; color: #343a40;
} }
.link-secondary:hover, .link-secondary:focus { .link-secondary:hover, .link-secondary:focus {
color: #565e64; color: #2a2e33;
} }
.link-success { .link-success {
@ -5892,10 +5896,10 @@ textarea.form-control-lg {
} }
.link-dark { .link-dark {
color: #212529; color: #292929;
} }
.link-dark:hover, .link-dark:focus { .link-dark:hover, .link-dark:focus {
color: #1a1e21; color: #212121;
} }
.ratio { .ratio {
@ -6250,7 +6254,7 @@ textarea.form-control-lg {
} }
.border-secondary { .border-secondary {
border-color: #6c757d !important; border-color: #343a40 !important;
} }
.border-success { .border-success {
@ -6274,7 +6278,7 @@ textarea.form-control-lg {
} }
.border-dark { .border-dark {
border-color: #212529 !important; border-color: #292929 !important;
} }
.border-white { .border-white {
@ -7036,7 +7040,7 @@ textarea.form-control-lg {
} }
.text-secondary { .text-secondary {
color: #6c757d !important; color: #343a40 !important;
} }
.text-success { .text-success {
@ -7060,7 +7064,7 @@ textarea.form-control-lg {
} }
.text-dark { .text-dark {
color: #212529 !important; color: #292929 !important;
} }
.text-white { .text-white {
@ -7108,7 +7112,7 @@ textarea.form-control-lg {
} }
.bg-secondary { .bg-secondary {
background-color: #6c757d !important; background-color: #343a40 !important;
} }
.bg-success { .bg-success {
@ -7132,11 +7136,11 @@ textarea.form-control-lg {
} }
.bg-dark { .bg-dark {
background-color: #212529 !important; background-color: #292929 !important;
} }
.bg-body { .bg-body {
background-color: #fff !important; background-color: #222222 !important;
} }
.bg-white { .bg-white {
@ -10619,8 +10623,12 @@ textarea.form-control-lg {
display: none !important; display: none !important;
} }
} }
:root { .bg-accent {
--bs-primary: var(--primary-color, #0d6efd) !important; background-color: #b58e51;
}
.text-accent {
color: #b58e51;
} }
/*# sourceMappingURL=custom_bootstrap.css.map */ /*# sourceMappingURL=custom_bootstrap.css.map */

2
nextcloud_backup/rootfs/opt/nextcloud_backup/public/css/custom_bootstrap.css.map
View File

File diff suppressed because one or more lines are too long

13
nextcloud_backup/rootfs/opt/nextcloud_backup/public/css/materialize.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
nextcloud_backup/rootfs/opt/nextcloud_backup/public/css/style.css Normal file
View File

@ -0,0 +1,7 @@
.navbar{
background-color: #0091ea ;
}
#header-box{
height: 150px;
}

1
nextcloud_backup/rootfs/opt/nextcloud_backup/public/css/variable.css.map
View File

File diff suppressed because one or more lines are too long

15
nextcloud_backup/rootfs/opt/nextcloud_backup/scss/custom_bootstrap.scss
View File

@ -1,4 +1,15 @@
$body-bg: #222222;
$dark: #292929;
$secondary: #343a40;
$accent: #b58e51;
@import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap/scss/bootstrap";
:root{
--bs-primary: var(--primary-color, #{$primary}) !important;
.bg-accent{
background-color: $accent;
}
.text-accent{
color: $accent
} }

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

@ -8,143 +8,142 @@
<title>Nextcloud Backup</title> <title>Nextcloud Backup</title>
<!-- <link rel='stylesheet' href='/stylesheets/style.css' /> --> <link rel='stylesheet' href='./css/style.css'/>
<link rel="stylesheet" href="./css/materialize.min.css"> <link rel="stylesheet" href="./css/custom_bootstrap.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="./font/bootstrap-icons.css">
<style> <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
.modal input[disabled] { <!-- <style>-->
color: #757575 !important; <!-- .modal input[disabled] {-->
border-color: #616161 !important; <!-- color: #757575 !important;-->
} <!-- border-color: #616161 !important;-->
<!-- }-->
.modal .input-field span.helper-text { <!-- -->
color: #9e9e9e; <!-- .modal .input-field span.helper-text {-->
<!-- color: #9e9e9e;-->
} <!-- -->
<!-- }-->
.modal div.row:last-child { <!-- -->
margin-bottom: 0; <!-- .modal div.row:last-child {-->
} <!-- margin-bottom: 0;-->
<!-- }-->
.modal div.col:last-child { <!-- -->
margin-bottom: 0; <!-- .modal div.col:last-child {-->
} <!-- margin-bottom: 0;-->
<!-- }-->
@media (min-width: 601px) { <!-- -->
.header-box { <!-- @media (min-width: 601px) {-->
height: 150px; <!-- .header-box {-->
} <!-- height: 150px;-->
} <!-- }-->
<!-- }-->
.header-box .col { <!-- -->
height: 100%; <!-- .header-box .col {-->
} <!-- height: 100%;-->
<!-- }-->
.header-box .col .card { <!-- -->
height: 100%; <!-- .header-box .col .card {-->
} <!-- height: 100%;-->
<!-- }-->
.header-box .card-content { <!-- -->
padding-top: 10px; <!-- .header-box .card-content {-->
} <!-- padding-top: 10px;-->
<!-- }-->
.header-box .card-content h5 { <!-- -->
margin-top: 10px; <!-- .header-box .card-content h5 {-->
} <!-- margin-top: 10px;-->
<!-- }-->
ul.dropdown-content a:hover { <!-- -->
background-color: #101619 !important; <!-- ul.dropdown-content a:hover {-->
} <!-- background-color: #101619 !important;-->
<!-- }-->
ul.dropdown-content li:hover { <!-- -->
background-color: #101619 !important; <!-- ul.dropdown-content li:hover {-->
} <!-- background-color: #101619 !important;-->
<!-- }-->
/* change autocomplete color */ <!-- -->
input:-webkit-autofill, <!-- /* change autocomplete color */-->
input:-webkit-autofill:hover, <!-- input:-webkit-autofill,-->
input:-webkit-autofill:focus, <!-- input:-webkit-autofill:hover,-->
input:-webkit-autofill:active { <!-- input:-webkit-autofill:focus,-->
-webkit-box-shadow: 0 0 0 30px #263238 inset !important; <!-- input:-webkit-autofill:active {-->
-webkit-text-fill-color: white !important; <!-- -webkit-box-shadow: 0 0 0 30px #263238 inset !important;-->
} <!-- -webkit-text-fill-color: white !important;-->
<!-- }-->
.select-dropdown { <!-- -->
color: white; <!-- .select-dropdown {-->
} <!-- color: white;-->
</style> <!-- }-->
<!-- </style>-->
</head> </head>
<body class="blue-grey darken-4"> <body class="">
<nav class=" light-blue accent-4"> <nav class="navbar navbar-dark navbar-expand-lg">
<div class="nav-wrapper container"> <div class="container">
<a href="#" class="brand-logo"><img src="./images/Nextcloud_Logo.svg" height="54" <a href="#" class="navbar-brand p-0">
style="margin: 5px"> <img src="./images/Nextcloud_Logo.svg" height="40">
<span class="align-middle">Nextcloud Backup</span>
</a> </a>
<ul class="right"> <ul class="navbar-nav">
<li id="setting-trigger"> <li class="nav-item dropdown" id="setting-trigger">
<a class="dropdown-trigger" href="#" data-target="dropdown-settings"> <a class="nav-link active dropdown-toggle" href="#" id="dropdown-settings" role="button"
<i class="material-icons">settings</i> data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-gear-fill"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdown-settings">
<li><a href="#modal-settings-nextcloud" id="trigger-nextcloud-settings"
class="modal-trigger dropdown-item">Nextcloud</a>
</li>
<li><a href="#" id="trigger-backup-settings" class="dropdown-item">Backup</a></li>
</ul>
</li> </li>
</ul> </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>
</div>
</div> </div>
</nav> </nav>
<ul id="dropdown-settings" class="dropdown-content blue-grey darken-4">
<li><a href="#modal-settings-nextcloud" id="trigger-nextcloud-settings" class="modal-trigger center">Nextcloud</a>
</li>
<li><a href="#" id="trigger-backup-settings" class="center">Backup</a></li>
</ul>
<div class="container"> <div class="container">
<div class="row mt-3 mb-3" id="header-box">
<div class="row header-box"> <div class="col-12 col-md-3">
<div class="col s12 m3"> <div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card cyan darken-3"> <div class="card-header fw-bold h5">Status</div>
<div class="card-content"> <div class="card-body">
<span class="card-title white-text" style="font-weight: bold;">Status </span>
<div class="divider"></div>
<h6 id="status" class="white-text"></h6> <h6 id="status" class="white-text"></h6>
<div id="status-second-line" class="truncate tooltipped" data-position="bottom" data-tooltip=""></div> <div id="status-second-line" class="truncate mb-2 text-accent"></div>
<div class="progress hide" id="progress"> <div class="progress bg-secondary" id="progress">
<div class="determinate light-green darken-2" style="width: 0%"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m3"> <div class="col-12 col-md-3">
<div class="card cyan darken-3"> <div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card-content"> <div class="card-header fw-bold h5">Last Backup</div>
<span class="card-title white-text" style="font-weight: bold;">Last Backup</span> <div class="card-body">
<div class="divider"></div>
<h6 class="white-text" id="last_back_status"></h6> <h6 class="white-text" id="last_back_status"></h6>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m3"> <div class="col-12 col-md-3">
<div class="card cyan darken-3 "> <div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card-content"> <div class="card-header fw-bold h5">Next Backup </div>
<span class="card-title white-text" style="font-weight: bold;">Next Backup </span> <div class="card-body">
<div class="divider"></div>
<h6 class="white-text" id="next_back_status"></h6> <h6 class="white-text" id="next_back_status"></h6>
</div> </div>
</div> </div>
</div> </div>
<div class="col s12 m3"> <div class="col-12 col-md-3">
<div class="card cyan darken-3"> <div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card-content"> <div class="card-header fw-bold h5">Manual</div>
<span class="card-title white-text" style="font-weight: bold;">Manual </span> <div class="card-body py-2">
<div class="divider"></div> <div class="center w-100">
<div style="width: 100%;" class="center"> <a class="btn btn-success" 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 btn-danger" id="btn-clean-now" "
style="margin-top: 7px; display: block;">Clean Now</a> style="margin-top: 7px; display: block;">Clean Now</a>
</div> </div>
@ -252,7 +251,7 @@
</body> </body>
<script src="./js/materialize.min.js"></script> <script src="./js/bootstrap.min.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script> <script>
@ -269,7 +268,13 @@
let tooltips = document.querySelectorAll('.tooltipped'); let tooltips = document.querySelectorAll('.tooltipped');
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, 5000); setInterval(updateLocalSnaps, 5000);
@ -333,6 +338,7 @@
updateAutoBackup(prevUpdate || needUpdate); updateAutoBackup(prevUpdate || needUpdate);
}); });
} }
function updateAutoBackup(prevUpdate) { function updateAutoBackup(prevUpdate) {
let needUpdate = false; let needUpdate = false;
$.get('./api/formated-backup-auto', (data) => { $.get('./api/formated-backup-auto', (data) => {
@ -422,8 +428,7 @@
if (progress == -1) { if (progress == -1) {
progressDiv.children().removeClass('determinate'); progressDiv.children().removeClass('determinate');
progressDiv.children().addClass('indeterminate'); progressDiv.children().addClass('indeterminate');
} } else {
else {
progressDiv.children().removeClass('indeterminate'); progressDiv.children().removeClass('indeterminate');
progressDiv.children().addClass('determinate'); progressDiv.children().addClass('determinate');
progressDiv.children().css('width', (progress * 100) + "%"); progressDiv.children().css('width', (progress * 100) + "%");
@ -466,7 +471,6 @@
}); });
} }
function restore(id) { function restore(id) {
@ -474,10 +478,16 @@
$.post('./api/restore', { path: id }) $.post('./api/restore', { path: id })
.done((data) => { .done((data) => {
console.log("Restore cmd send !"); console.log("Restore cmd send !");
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(() => loadingModal.close()) .always(() => loadingModal.close())
} }
@ -490,11 +500,21 @@
let username = $('#username').val(); let username = $('#username').val();
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) => {
@ -503,13 +523,15 @@
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();
@ -520,10 +542,16 @@
$.post('./api/manual-backup?id=' + id + '&name=' + name) $.post('./api/manual-backup?id=' + id + '&name=' + name)
.done((data) => { .done((data) => {
console.log("manual bk cmd send !"); console.log("manual bk cmd send !");
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"
});
}) })
} }
@ -558,10 +586,16 @@
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();
@ -572,15 +606,22 @@
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();
$.get('./api/backup-settings', (data) => { $.get('./api/backup-settings', (data) => {
@ -609,7 +650,11 @@
$('#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.settings.cron_hour, twelveHour: false, container: 'body' }); M.Timepicker.init(timepicker, {
defaultTime: data.settings.cron_hour,
twelveHour: false,
container: 'body'
});
$('#cron-drop-day-month-read').val(data.settings.cron_month_day); $('#cron-drop-day-month-read').val(data.settings.cron_month_day);
$('#cron-drop-day-month').val(data.settings.cron_month_day); $('#cron-drop-day-month').val(data.settings.cron_month_day);
@ -719,10 +764,16 @@
exclude_folder: exclude_folder exclude_folder: exclude_folder
}) })
.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();
}); });