kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 07:50:13 +01:00
Code

Finally finished theme switching!!!!

Browse Source
This commit is contained in:
Donald Cheng Hong Zou 2022-04-23 00:34:11 -04:00
parent 36e33a4c10
commit e06cc1bd2d
13 changed files with 218 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api.py
View File

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

15
src/dashboard.py
View File

@ -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'] = {}

4
src/static/css/dashboard.css
View File

@ -922,4 +922,8 @@ pre.index-alert {
.list-group-item{
transition: all 0.1s ease-in;
}
.theme-switch-btn{
width: 100%;
}

50
src/static/css/theme/dark.css
View File

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

2
src/static/css/theme/dark.css.map
View File

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

2
src/static/css/theme/dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/static/css/theme/dark.min.css.map
View File

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

68
src/static/css/theme/dark.scss
View File

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

36
src/static/js/configurationTool.js
View File

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

9
src/templates/header.html
View File

@ -3,11 +3,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ title }} | WGDashboard</title>
<link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="e">
<meta name="apple-mobile-web-app-title" content="e">
<meta name="application-name" content="WGDashboard">
<meta name="apple-mobile-web-app-title" content="WGDashboard">
<meta name="msapplication-starturl" content="/">
<link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -15,7 +14,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
<!-- THEME APPLY HERE -->
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.min.css') }}">
{% if session["theme"] == "dark" %}
<link rel= "stylesheet" type= "text/css" href="{{ url_for('static',filename='css/theme/dark.min.css') }}" id="darkThemeCSS">
{% endif %}
<!-- THEME APPLY HERE -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

1
src/templates/navbar.html
View File

@ -4,6 +4,7 @@
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
</nav>
<div class="progress" style="height: 3px; position: fixed; width: 100%; z-index: 10000; background-color: transparent">
<div class="progress-bar" role="progressbar" style="z-index: 10000; width: 0%"></div>

44
src/templates/settings.html
View File

@ -16,6 +16,26 @@
{% endif %}
<h1 class="">Settings</h1>
<hr>
<div class="card mb-3">
<h6 class="card-header">Dashboard Theme</h6>
<div class="card-body">
<div class="row">
<div class="col-6">
<button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "light" %} {{ "active" }} {% endif %}' data-theme="light">
<i class="bi bi-sun-fill"></i>
Light
</button>
</div>
<div class="col-6">
<button class='btn btn-outline-primary theme-switch-btn {% if session["theme"] == "dark" %} {{ "active" }} {% endif %}' data-theme="dark">
<i class="bi bi-moon-fill"></i>
Dark
</button>
</div>
</div>
</div>
</div>
<hr>
{% if required_auth == "true" %}
<div class="card mb-3">
<h6 class="card-header">Peer Default Settings</h6>
@ -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('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');
}
}
});
}
});
</script>
</html>

9
src/templates/sidebar.html
View File

@ -1,11 +1,9 @@
<div class="bottomNavWrapper"></div>
<div class="bottom">
<nav class="navbar navbar-dark fixed-bottom bg-light flex-md-nowrap p-0 bottomNav">
<div class="bottomNavContainer" style="z-index: 1000;">
<div class="bottomNavButton bottomNavHome">
<i class="bi bi-house"></i>
Home
<i class="bi bi-house"></i>Home
</div>
<div class="bottomNavButton bottomNavConfigs">
<i class="bi bi-files"></i>
@ -27,8 +25,7 @@
Settings
</div>
<div class="bottomNavButton bottomNavMore">
<i class="bi bi-justify"></i>
More
<i class="bi bi-justify"></i>More
<div class="subNav bg-light animate__animated">
<ul class="nav flex-column">
{% if session['update'] == "true" %}
@ -68,8 +65,6 @@
</nav>
</div>
<div class="row">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">