From e06cc1bd2d0db3f980eb63c65c9a5a9b620ab865 Mon Sep 17 00:00:00 2001 From: Donald Cheng Hong Zou Date: Sat, 23 Apr 2022 00:34:11 -0400 Subject: [PATCH] Finally finished theme switching!!!! --- src/api.py | 12 ++++- src/dashboard.py | 15 ++++++ src/static/css/dashboard.css | 4 ++ src/static/css/theme/dark.css | 50 +++++++++++++++++++- src/static/css/theme/dark.css.map | 2 +- src/static/css/theme/dark.min.css | 2 +- src/static/css/theme/dark.min.css.map | 2 +- src/static/css/theme/dark.scss | 68 ++++++++++++++++++++++++++- src/static/js/configurationTool.js | 36 +++++++------- src/templates/header.html | 9 ++-- src/templates/navbar.html | 1 + src/templates/settings.html | 44 +++++++++++++++++ src/templates/sidebar.html | 9 +--- 13 files changed, 218 insertions(+), 36 deletions(-) diff --git a/src/api.py b/src/api.py index 8fe189a..442d675 100644 --- a/src/api.py +++ b/src/api.py @@ -181,4 +181,14 @@ class manageConfiguration: return ret(status=False, reason="No [Interface] in configuration file") return ret(data=dict(conf['Interface'])) except FileNotFoundError as err: - return ret(status=False, reason=str(err)) \ No newline at end of file + return ret(status=False, reason=str(err)) + + +class settings: + def setTheme(self, theme, config, setConfig): + themes = ['light', 'dark'] + if theme not in themes: + return ret(status=False, reason="Theme does not exist") + config['Server']['dashboard_theme'] = theme + setConfig(config) + return ret() \ No newline at end of file diff --git a/src/dashboard.py b/src/dashboard.py index 2d07e4d..464cfd1 100644 --- a/src/dashboard.py +++ b/src/dashboard.py @@ -694,6 +694,7 @@ def auth_req(): g.cur = g.db.cursor() conf = get_dashboard_conf() req = conf.get("Server", "auth_req") + session['theme'] = conf.get("Server", "dashboard_theme") session['update'] = UPDATE session['updateInfo'] = updateInfo session['dashboard_version'] = DASHBOARD_VERSION @@ -1571,6 +1572,7 @@ def switch_display_mode(mode): # APIs import api +# TODO: Add configuration prefix to all configuration API @app.route('/api/getPeerDataUsage', methods=['POST']) def getPeerDataUsage(): @@ -1674,6 +1676,17 @@ def getConfigurationInfo(): return jsonify(api.notEnoughParameter) else: return api.manageConfiguration.getConfigurationInfo(api.manageConfiguration, data['configName'], WG_CONF_PATH) + +@app.route('/api/settings/setTheme', methods=['POST']) +def setTheme(): + data = request.get_json() + required = ['theme'] + if not checkJSONAllParameter(required, data): + return jsonify(api.notEnoughParameter) + else: + return api.settings.setTheme(api.settings, data['theme'], get_dashboard_conf(), set_dashboard_conf) + + """ @@ -1913,6 +1926,8 @@ def init_dashboard(): config['Server']['dashboard_refresh_interval'] = '60000' if 'dashboard_sort' not in config['Server']: config['Server']['dashboard_sort'] = 'status' + if 'dashboard_theme' not in config['Server']: + config['Server']['dashboard_theme'] = 'light' # Default dashboard peers setting if "Peers" not in config: config['Peers'] = {} diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css index 54a5f9a..e23ec51 100644 --- a/src/static/css/dashboard.css +++ b/src/static/css/dashboard.css @@ -922,4 +922,8 @@ pre.index-alert { .list-group-item{ transition: all 0.1s ease-in; +} + +.theme-switch-btn{ + width: 100%; } \ No newline at end of file diff --git a/src/static/css/theme/dark.css b/src/static/css/theme/dark.css index e704947..f1a5388 100644 --- a/src/static/css/theme/dark.css +++ b/src/static/css/theme/dark.css @@ -47,6 +47,49 @@ body { border-color: hsl(120deg, 30%, 40%) !important; } +.list-group-item { + background-color: #272727; + border-color: #272727; + color: white; +} +.list-group-item:hover { + background-color: #333333; + border-color: #333333; + color: white; +} + +.delete-peer-bulk-badge.badge-danger { + background-color: hsl(0deg, 60%, 60%); +} +.delete-peer-bulk-badge.badge-danger:hover { + background-color: hsl(0deg, 60%, 50%); +} + +#delete_bulk_modal .list-group a.active { + background-color: hsl(0deg, 60%, 60%); + border: hsl(0deg, 60%, 60%); +} +#delete_bulk_modal .list-group a.active:hover { + background-color: hsl(0deg, 60%, 50%); + border: hsl(0deg, 60%, 50%); +} + +#available_ip_modal .list-group a.active { + background-color: hsl(235deg, 60%, 60%); + border: hsl(235deg, 60%, 60%); +} +#available_ip_modal .list-group a.active:hover { + background-color: hsl(235deg, 60%, 50%); + border: hsl(235deg, 60%, 50%); +} + +.available-ip-badge.badge-primary { + background-color: hsl(235deg, 60%, 60%); +} +.available-ip-badge.badge-primary:hover { + background-color: hsl(235deg, 60%, 50%); +} + .btn-outline-success { color: hsl(120deg, 30%, 50%) !important; border-color: hsl(120deg, 30%, 50%) !important; @@ -327,9 +370,12 @@ div.toast div.toast-progressbar { .bottomNav .bottomNavButton.active { color: hsl(235deg, 60%, 60%) !important; } - -.subNav { +.bottomNav .subNav { background-color: #272727 !important; } +.key:hover { + color: hsl(235deg, 60%, 60%); +} + /*# sourceMappingURL=dark.css.map */ diff --git a/src/static/css/theme/dark.css.map b/src/static/css/theme/dark.css.map index 4de8d02..ce5e2a6 100644 --- a/src/static/css/theme/dark.css.map +++ b/src/static/css/theme/dark.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAkBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAxMO;;AA0MT;EACE,cA3MO;;;AA+MX;AAAA;EAEE,OAxMS;;AA0MT;AAAA;EACE,YArOO;;;AAyOX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA/OS;;;AAkPX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAjRU;;;AAoRZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAzSS;;;AA4SX;EACE,kBAjTS;;;AAoTX;AAAA;EAEE,kBAvTS;EAwTT,cAnTS;;;AAsTX;EACE,OApSY;;;AAuSd;EACE,OArSS;EAsST;;AAEA;EACE,OAxSO;;;AA4SX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OA7WK;;AAgXT;EACE;;;AAIJ;EACE","file":"dark.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAkBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE,kBAtFS;EAuFT,cAvFS;EAwFT;;AAEA;EACE,kBAxFO;EAyFP,cAzFO;EA0FP;;;AAMJ;EACE,kBAxFQ;;AAyFR;EACE,kBA3FM;;;AAiGN;EACE,kBAjGI;EAkGJ,QAlGI;;AAoGJ;EACE,kBAtGE;EAuGF,QAvGE;;;AA+GN;EACE,kBA5GK;EA6GL,QA7GK;;AA+GL;EACE,kBAjHG;EAkHH,QAlHG;;;AAwHX;EACE,kBAxHS;;AAyHT;EACE,kBA3HO;;;AA+HX;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAhQO;;AAkQT;EACE,cAnQO;;;AAuQX;AAAA;EAEE,OAhQS;;AAkQT;AAAA;EACE,YA7RO;;;AAiSX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YAvSS;;;AA0SX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAzUU;;;AA4UZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAjWS;;;AAoWX;EACE,kBAzWS;;;AA4WX;AAAA;EAEE,kBA/WS;EAgXT,cA3WS;;;AA8WX;EACE,OA5VY;;;AA+Vd;EACE,OA7VS;EA8VT;;AAEA;EACE,OAhWO;;;AAoWX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OAraK;;AAyaT;EACE;;AAGF;EACE;;;AAKJ;EACE,OA/bS","file":"dark.css"} \ No newline at end of file diff --git a/src/static/css/theme/dark.min.css b/src/static/css/theme/dark.min.css index ffb8183..7d90d8b 100644 --- a/src/static/css/theme/dark.min.css +++ b/src/static/css/theme/dark.min.css @@ -1 +1 @@ -:root{--green: hsl(120deg, 30%, 50%) !important;--blue: hsl(235deg, 60%, 60%) !important;--red: hsl(0deg, 60%, 60%) !important;--magenta: hsl(315deg, 60%, 60%) !important}body{background:#222;color:#ccc}.btn-primary{color:#e6e6e6 !important;border-color:#5c66d6 !important;background:#5c66d6 !important}.btn-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-outline-primary{color:#5c66d6 !important;border-color:#5c66d6 !important;background:rgba(0,0,0,0) !important}.btn-outline-primary:hover,.btn-outline-primary.active{color:#e6e6e6 !important}.btn-outline-primary.active{background-color:#5c66d6 !important;border-color:#5c66d6 !important}.btn-outline-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-success{color:#e6e6e6 !important;border-color:#59a659 !important;background:#59a659 !important}.btn-success:hover{background-color:#478547 !important;border-color:#478547 !important}.btn-outline-success{color:#59a659 !important;border-color:#59a659 !important;background:rgba(0,0,0,0) !important}.btn-outline-success:hover,.btn-outline-success.active{color:#e6e6e6 !important}.btn-outline-success.active{background-color:#59a659 !important;border-color:#59a659 !important}.btn-outline-success:hover{background-color:#478547 !important;border-color:#478547 !important}.btn-danger{color:#e6e6e6 !important;border-color:#d65c5c !important;background:#d65c5c !important}.btn-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-outline-danger{color:#d65c5c !important;border-color:#d65c5c !important;background:rgba(0,0,0,0) !important}.btn-outline-danger:hover,.btn-outline-danger.active{color:#e6e6e6 !important}.btn-outline-danger.active{background-color:#d65c5c !important;border-color:#d65c5c !important}.btn-outline-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-secondary{color:#e6e6e6 !important;border-color:#424242 !important;background:#424242 !important}.btn-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-outline-secondary{color:#424242 !important;border-color:#424242 !important;background:rgba(0,0,0,0) !important}.btn-outline-secondary:hover,.btn-outline-secondary.active{color:#e6e6e6 !important}.btn-outline-secondary.active{background-color:#424242 !important;border-color:#424242 !important}.btn-outline-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-control.btn-lock-peer.lock{color:#d65c5c !important}.btn-control.btn-lock-peer.lock:hover{color:#c33 !important}.btn-control:hover{background-color:rgba(0,0,0,0) !important}.btn-control:hover.btn-outline-primary{color:#3340cc !important}.btn-control:hover.btn-outline-success{color:#478547 !important}.btn-control:hover.btn-outline-danger{color:#c33 !important}.btn-control:hover.btn-outline-secondary{color:#383838 !important}.form-control{background-color:#2c2c2c !important;border-color:rgba(0,0,0,0) !important;color:#ccc !important}.form-control:disabled{color:#777 !important}.card .form-control{background:#2c2c2c !important}.conf_card a{color:#5c66d6}.conf_card:hover{border-color:#5c66d6}.sidebar .nav-link,.bottomNavContainer .nav-link{color:#ccc}.sidebar .nav-link:hover,.bottomNavContainer .nav-link:hover{background:#222}nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,.navbar-brand,.bg-dark{background-color:#1e1e1e !important;background:#1e1e1e !important}.card{background:#272727}.text-muted{color:gray !important}.text-danger{color:#d65c5c !important}.text-success{color:#59a659 !important}.text-primary{color:#5c66d6 !important}.text-info{color:#5cc2d6 !important}a.text-success:focus,a.text-success:hover{color:#478547 !important}a.text-danger:focus,a.text-danger:hover{color:#c33 !important}a.text-info:focus,a.text-info:hover{color:#33b3cc !important}.dot-running{background-color:#59a659 !important}.card-running{border-color:#59a659}.toggle--switch:checked+.toggleLabel::before{background-color:#5c66d6 !important}.toggle--switch:checked+.toggleLabel{background-color:#2e336b !important;border-color:#5c66d6 !important}.sidebar .nav-link.active,.bottomNavContainer .nav-link.active{color:#5c66d6 !important}hr{border-color:#2e2e2e}.modal-content{background-color:#222}.modal-header,.modal-footer{background-color:#1e1e1e;border-color:#2e2e2e}code{color:#d65cb8}.close{color:#ccc;text-shadow:none}.close:hover{color:#b3b3b3}.chartContainer.fullScreen{background-color:#222 !important}.popover{background-color:#333 !important;border:none !important}.popover-body{color:#ccc !important}div.toast{background-color:#424242 !important}div.toast div.toast-header{background-color:#333 !important;color:#ccc !important;border-bottom-color:#424242 !important}div.toast div.toast-body{background-color:#383838 !important;color:#ccc !important}div.toast div.toast-progressbar{background-color:#5c66d6 !important}.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after{border-right-color:#333 !important}.btn-manage-group .setting_btn_menu{background-color:#2c2c2c !important}.setting_btn_menu a:hover{background-color:#333 !important}.table{color:#ccc !important}.table th,.table td{border-color:#333 !important}.btn-outline-primary.focus,.btn-outline-primary:focus,.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(144,153,255,.29) !important}.bottomNav{background-color:#272727 !important}.bottomNav .bottomNavButton{color:#999}.bottomNav .bottomNavButton.active{color:#5c66d6 !important}.subNav{background-color:#272727 !important}/*# sourceMappingURL=dark.min.css.map */ +:root{--green: hsl(120deg, 30%, 50%) !important;--blue: hsl(235deg, 60%, 60%) !important;--red: hsl(0deg, 60%, 60%) !important;--magenta: hsl(315deg, 60%, 60%) !important}body{background:#222;color:#ccc}.btn-primary{color:#e6e6e6 !important;border-color:#5c66d6 !important;background:#5c66d6 !important}.btn-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-outline-primary{color:#5c66d6 !important;border-color:#5c66d6 !important;background:rgba(0,0,0,0) !important}.btn-outline-primary:hover,.btn-outline-primary.active{color:#e6e6e6 !important}.btn-outline-primary.active{background-color:#5c66d6 !important;border-color:#5c66d6 !important}.btn-outline-primary:hover{background-color:#3340cc !important;border-color:#3340cc !important}.btn-success{color:#e6e6e6 !important;border-color:#59a659 !important;background:#59a659 !important}.btn-success:hover{background-color:#478547 !important;border-color:#478547 !important}.list-group-item{background-color:#272727;border-color:#272727;color:#fff}.list-group-item:hover{background-color:#333;border-color:#333;color:#fff}.delete-peer-bulk-badge.badge-danger{background-color:#d65c5c}.delete-peer-bulk-badge.badge-danger:hover{background-color:#c33}#delete_bulk_modal .list-group a.active{background-color:#d65c5c;border:#d65c5c}#delete_bulk_modal .list-group a.active:hover{background-color:#c33;border:#c33}#available_ip_modal .list-group a.active{background-color:#5c66d6;border:#5c66d6}#available_ip_modal .list-group a.active:hover{background-color:#3340cc;border:#3340cc}.available-ip-badge.badge-primary{background-color:#5c66d6}.available-ip-badge.badge-primary:hover{background-color:#3340cc}.btn-outline-success{color:#59a659 !important;border-color:#59a659 !important;background:rgba(0,0,0,0) !important}.btn-outline-success:hover,.btn-outline-success.active{color:#e6e6e6 !important}.btn-outline-success.active{background-color:#59a659 !important;border-color:#59a659 !important}.btn-outline-success:hover{background-color:#478547 !important;border-color:#478547 !important}.btn-danger{color:#e6e6e6 !important;border-color:#d65c5c !important;background:#d65c5c !important}.btn-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-outline-danger{color:#d65c5c !important;border-color:#d65c5c !important;background:rgba(0,0,0,0) !important}.btn-outline-danger:hover,.btn-outline-danger.active{color:#e6e6e6 !important}.btn-outline-danger.active{background-color:#d65c5c !important;border-color:#d65c5c !important}.btn-outline-danger:hover{background-color:#c33 !important;border-color:#c33 !important}.btn-secondary{color:#e6e6e6 !important;border-color:#424242 !important;background:#424242 !important}.btn-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-outline-secondary{color:#424242 !important;border-color:#424242 !important;background:rgba(0,0,0,0) !important}.btn-outline-secondary:hover,.btn-outline-secondary.active{color:#e6e6e6 !important}.btn-outline-secondary.active{background-color:#424242 !important;border-color:#424242 !important}.btn-outline-secondary:hover{background-color:#383838 !important;border-color:#383838 !important}.btn-control.btn-lock-peer.lock{color:#d65c5c !important}.btn-control.btn-lock-peer.lock:hover{color:#c33 !important}.btn-control:hover{background-color:rgba(0,0,0,0) !important}.btn-control:hover.btn-outline-primary{color:#3340cc !important}.btn-control:hover.btn-outline-success{color:#478547 !important}.btn-control:hover.btn-outline-danger{color:#c33 !important}.btn-control:hover.btn-outline-secondary{color:#383838 !important}.form-control{background-color:#2c2c2c !important;border-color:rgba(0,0,0,0) !important;color:#ccc !important}.form-control:disabled{color:#777 !important}.card .form-control{background:#2c2c2c !important}.conf_card a{color:#5c66d6}.conf_card:hover{border-color:#5c66d6}.sidebar .nav-link,.bottomNavContainer .nav-link{color:#ccc}.sidebar .nav-link:hover,.bottomNavContainer .nav-link:hover{background:#222}nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,.navbar-brand,.bg-dark{background-color:#1e1e1e !important;background:#1e1e1e !important}.card{background:#272727}.text-muted{color:gray !important}.text-danger{color:#d65c5c !important}.text-success{color:#59a659 !important}.text-primary{color:#5c66d6 !important}.text-info{color:#5cc2d6 !important}a.text-success:focus,a.text-success:hover{color:#478547 !important}a.text-danger:focus,a.text-danger:hover{color:#c33 !important}a.text-info:focus,a.text-info:hover{color:#33b3cc !important}.dot-running{background-color:#59a659 !important}.card-running{border-color:#59a659}.toggle--switch:checked+.toggleLabel::before{background-color:#5c66d6 !important}.toggle--switch:checked+.toggleLabel{background-color:#2e336b !important;border-color:#5c66d6 !important}.sidebar .nav-link.active,.bottomNavContainer .nav-link.active{color:#5c66d6 !important}hr{border-color:#2e2e2e}.modal-content{background-color:#222}.modal-header,.modal-footer{background-color:#1e1e1e;border-color:#2e2e2e}code{color:#d65cb8}.close{color:#ccc;text-shadow:none}.close:hover{color:#b3b3b3}.chartContainer.fullScreen{background-color:#222 !important}.popover{background-color:#333 !important;border:none !important}.popover-body{color:#ccc !important}div.toast{background-color:#424242 !important}div.toast div.toast-header{background-color:#333 !important;color:#ccc !important;border-bottom-color:#424242 !important}div.toast div.toast-body{background-color:#383838 !important;color:#ccc !important}div.toast div.toast-progressbar{background-color:#5c66d6 !important}.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after{border-right-color:#333 !important}.btn-manage-group .setting_btn_menu{background-color:#2c2c2c !important}.setting_btn_menu a:hover{background-color:#333 !important}.table{color:#ccc !important}.table th,.table td{border-color:#333 !important}.btn-outline-primary.focus,.btn-outline-primary:focus,.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(144,153,255,.29) !important}.bottomNav{background-color:#272727 !important}.bottomNav .bottomNavButton{color:#999}.bottomNav .bottomNavButton.active{color:#5c66d6 !important}.bottomNav .subNav{background-color:#272727 !important}.key:hover{color:#5c66d6}/*# sourceMappingURL=dark.min.css.map */ diff --git a/src/static/css/theme/dark.min.css.map b/src/static/css/theme/dark.min.css.map index 4cb79db..16d0bd8 100644 --- a/src/static/css/theme/dark.min.css.map +++ b/src/static/css/theme/dark.min.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAkBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAxMO,QA0MT,iBACE,aA3MO,QA+MX,iDAEE,MAxMS,KA0MT,6DACE,WArOO,KAyOX,8FAGE,oCACA,8BAGF,MACE,WA/OS,QAkPX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAjRU,QAoRZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aAzSS,QA4SX,eACE,iBAjTS,KAoTX,4BAEE,iBAvTS,QAwTT,aAnTS,QAsTX,KACE,MApSY,QAuSd,OACE,MArSS,KAsST,iBAEA,aACE,MAxSO,QA4SX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MA7WK,KAgXT,mCACE,yBAIJ,QACE","file":"dark.min.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAkBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,iBACE,iBAtFS,QAuFT,aAvFS,QAwFT,WAEA,uBACE,iBAxFO,KAyFP,aAzFO,KA0FP,WAMJ,qCACE,iBAxFQ,QAyFR,2CACE,iBA3FM,KAiGN,wCACE,iBAjGI,QAkGJ,OAlGI,QAoGJ,8CACE,iBAtGE,KAuGF,OAvGE,KA+GN,yCACE,iBA5GK,QA6GL,OA7GK,QA+GL,+CACE,iBAjHG,QAkHH,OAlHG,QAwHX,kCACE,iBAxHS,QAyHT,wCACE,iBA3HO,QA+HX,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAhQO,QAkQT,iBACE,aAnQO,QAuQX,iDAEE,MAhQS,KAkQT,6DACE,WA7RO,KAiSX,8FAGE,oCACA,8BAGF,MACE,WAvSS,QA0SX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAzUU,QA4UZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aAjWS,QAoWX,eACE,iBAzWS,KA4WX,4BAEE,iBA/WS,QAgXT,aA3WS,QA8WX,KACE,MA5VY,QA+Vd,OACE,MA7VS,KA8VT,iBAEA,aACE,MAhWO,QAoWX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MAraK,KAyaT,mCACE,yBAGF,mBACE,oCAKJ,WACE,MA/bS","file":"dark.min.css"} \ No newline at end of file diff --git a/src/static/css/theme/dark.scss b/src/static/css/theme/dark.scss index b0ecc8b..f6b6d97 100644 --- a/src/static/css/theme/dark.scss +++ b/src/static/css/theme/dark.scss @@ -86,6 +86,62 @@ body { } } +.list-group-item{ + background-color: $grey-400; + border-color: $grey-400; + color: white; + + &:hover{ + background-color: $grey-700; + border-color: $grey-700; + color: white; + } +} + + + +.delete-peer-bulk-badge.badge-danger{ + background-color: $red-500; + &:hover{ + background-color: $red-400; + } +} + +#delete_bulk_modal{ + .list-group{ + a.active{ + background-color: $red-500; + border: $red-500; + + &:hover{ + background-color: $red-400; + border: $red-400; + } + } + } +} + +#available_ip_modal{ + .list-group{ + a.active{ + background-color: $blue-500; + border: $blue-500; + + &:hover{ + background-color: $blue-400; + border: $blue-400; + } + } + } +} + +.available-ip-badge.badge-primary{ + background-color: $blue-500; + &:hover{ + background-color: $blue-400; + } +} + .btn-outline-success { color: $green-500 !important; border-color: $green-500 !important; @@ -395,11 +451,19 @@ div.toast { color: $text-400; } } + .bottomNavButton.active{ color: $blue-500 !important; } + + .subNav{ + background-color: $grey-400 !important; + } + } -.subNav{ - background-color: $grey-400 !important; +.key:hover{ + color: $blue-500; } + + diff --git a/src/static/js/configurationTool.js b/src/static/js/configurationTool.js index 355b95f..4eb59e9 100644 --- a/src/static/js/configurationTool.js +++ b/src/static/js/configurationTool.js @@ -55,24 +55,26 @@ function loadPeerDataUsageChartDone(res){ configurations.peerDataUsageChartObj().data.datasets[1].data = []; console.log(res); let data = res.data; - configurations.peerDataUsageChartObj().data.labels.push(data[data.length - 1].time); - configurations.peerDataUsageChartObj().data.datasets[0].data.push(0); - configurations.peerDataUsageChartObj().data.datasets[1].data.push(0); - - configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[data.length - 1].total_sent - configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[data.length - 1].total_receive - - - for(let i = data.length - 2; i >= 0; i--){ - let sent = data[i].total_sent - configurations.peerDataUsageChartObj().data.datasets[0].lastData; - let receive = data[i].total_receive - configurations.peerDataUsageChartObj().data.datasets[1].lastData; - configurations.peerDataUsageChartObj().data.datasets[0].data.push(sent); - configurations.peerDataUsageChartObj().data.datasets[1].data.push(receive); - configurations.peerDataUsageChartObj().data.labels.push(data[i].time); - configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[i].total_sent; - configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[i].total_receive; + if (data.length > 0){ + configurations.peerDataUsageChartObj().data.labels.push(data[data.length - 1].time); + configurations.peerDataUsageChartObj().data.datasets[0].data.push(0); + configurations.peerDataUsageChartObj().data.datasets[1].data.push(0); + + configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[data.length - 1].total_sent + configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[data.length - 1].total_receive + + + for(let i = data.length - 2; i >= 0; i--){ + let sent = data[i].total_sent - configurations.peerDataUsageChartObj().data.datasets[0].lastData; + let receive = data[i].total_receive - configurations.peerDataUsageChartObj().data.datasets[1].lastData; + configurations.peerDataUsageChartObj().data.datasets[0].data.push(sent); + configurations.peerDataUsageChartObj().data.datasets[1].data.push(receive); + configurations.peerDataUsageChartObj().data.labels.push(data[i].time); + configurations.peerDataUsageChartObj().data.datasets[0].lastData = data[i].total_sent; + configurations.peerDataUsageChartObj().data.datasets[1].lastData = data[i].total_receive; + } + configurations.peerDataUsageChartObj().update(); } - configurations.peerDataUsageChartObj().update(); } } diff --git a/src/templates/header.html b/src/templates/header.html index bfb8e4f..3834eb8 100644 --- a/src/templates/header.html +++ b/src/templates/header.html @@ -3,11 +3,10 @@ {{ title }} | WGDashboard - - - + + @@ -15,7 +14,9 @@ - + {% if session["theme"] == "dark" %} + + {% endif %} diff --git a/src/templates/navbar.html b/src/templates/navbar.html index 261dd19..d489243 100644 --- a/src/templates/navbar.html +++ b/src/templates/navbar.html @@ -4,6 +4,7 @@ data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> --> +
diff --git a/src/templates/settings.html b/src/templates/settings.html index c7e2ebc..881401a 100644 --- a/src/templates/settings.html +++ b/src/templates/settings.html @@ -16,6 +16,26 @@ {% endif %}

Settings

+
+
Dashboard Theme
+
+
+
+ +
+
+ +
+
+
+
+
{% if required_auth == "true" %}
Peer Default Settings
@@ -201,5 +221,29 @@ $(".bottomNavSettings").addClass("active"); + + $(".theme-switch-btn").on("click", function(){ + if (!$(this).hasClass("active")){ + let theme = $(this).data("theme"); + $(".theme-switch-btn").removeClass("active"); + $(this).addClass("active"); + $.ajax({ + method: "POST", + url: "/api/settings/setTheme", + headers: {"Content-Type": "application/json"}, + data: JSON.stringify({"theme": theme}) + }).done(function(res){ + if (res.status == true){ + if (theme == "light"){ + $("#darkThemeCSS").remove(); + }else{ + $("head").append(''); + } + } + }); + } + }); + + \ No newline at end of file diff --git a/src/templates/sidebar.html b/src/templates/sidebar.html index 3f24d2b..09d415f 100644 --- a/src/templates/sidebar.html +++ b/src/templates/sidebar.html @@ -1,11 +1,9 @@
- -