New darkmode theme

src/static/css/dashboard.css

@@ -173,6 +173,10 @@ body {
     margin: 0 1rem 0 0;
 }
 
+.btn-control:hover{
+    background-color: transparent !important;
+}
+
 .btn-control:active,
 .btn-control:focus {
     background-color: transparent !important;
@@ -914,4 +918,8 @@ pre.index-alert {
 
 .sb-update-url .dot-running{
     transform: translateX(10px);
+}
+
+.list-group-item{
+    transition: all 0.1s ease-in;
 }

src/static/css/theme/dark.css

@@ -0,0 +1,123 @@
+:root{
+    --blue: #3f9eff;
+    --dark1: #1C1C1E;
+    --dark2: #232323;
+    --dark3: #3f3f3f;
+}
+
+a{
+    color: var(--blue);
+}
+
+body{
+    background-color: var(--dark1);
+    color: #ffffff;
+}
+
+hr{
+    border-top: 1px solid rgb(255 255 255 / 10%);
+}
+
+/* Color */
+
+.bg-dark{
+    background-color: #232323!important;
+}
+
+.text-primary{
+    color: var(--blue) !important;
+}
+
+/* Form Related */
+
+.form-control{
+    color: #ffffff;
+    background-color: #232323;
+    border: 1px solid #686868;
+}
+
+.form-control:focus {
+    color: #ffffff;
+    background-color: #232323;
+    border-color: #686868;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.50);
+}
+
+.form-control:disabled, .form-control[readonly]{
+    background-color: #525252;
+    opacity: 1;
+    color: #a5a5a5;
+}
+
+.custom-control-label::before{
+    background-color: transparent;
+}
+
+/* Side Bar */
+
+.sidebar{
+    background-color: #232323 !important;
+}
+
+.sidebar .nav-link, .bottomNavContainer .nav-link{
+    color: #dddddd;
+}
+
+.sidebar .nav-link.active, .bottomNavContainer .nav-link.active{
+    color: var(--blue) !important;
+}
+
+.nav-link:hover{
+    background-color: #3f3f3f;
+}
+
+.card{
+    background-color: #232323;
+}
+
+
+/* Button Related */
+
+.btn-outline-primary{
+    color: var(--blue);
+    border-color: var(--blue);
+}
+
+.btn-outline-primary:hover {
+    color: #fff;
+    background-color: var(--blue);
+    border-color: var(--blue);
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle{
+    background-color: var(--blue);
+    border-color: var(--blue);
+}
+
+
+/* Configuration Card (index.html) */
+.conf_card:hover{
+    border-color: var(--blue);
+}
+
+/* Modal */
+.modal-content{
+    background-color: var(--dark1);
+}
+
+.modal-header, .modal-footer{
+    border-color:rgb(255 255 255 / 10%);;
+}
+
+/* List Group Item */
+.list-group-item{
+    background-color: var(--dark2);
+    color: white;
+}
+
+.list-group-item:hover{
+    color: white;
+    background-color: var(--dark3);
+    border-color: var(--dark3);
+}

src/static/js/configuration.js

@@ -8,7 +8,7 @@ let peers = [];
     /**
      * Definitions
      */
-    $(".bottomNavConfigs").addClass("active")
+    $(".bottomNavConfigs").addClass("active");
     let configuration_name;
     let configuration_interval;
     let configuration_timeout = window.localStorage.getItem("configurationTimeout");
@@ -38,6 +38,7 @@ let peers = [];
     let settingModal = new bootstrap.Modal(document.getElementById('setting_modal'), bootstrapModalConfig);
     let deleteModal = new bootstrap.Modal(document.getElementById('delete_modal'), bootstrapModalConfig);
     let configurationDeleteModal = new bootstrap.Modal(document.getElementById('configuration_delete_modal'), bootstrapModalConfig);
+    let configurationEditModal = new bootstrap.Modal(document.getElementById('editConfigurationModal'), bootstrapModalConfig);
     let peerDataUsageModal = new bootstrap.Modal(document.getElementById('peerDataUsage'), bootstrapModalConfig);
     $("[data-toggle='tooltip']").tooltip();
     $("[data-toggle='popover']").popover();
@@ -977,6 +978,13 @@ let peers = [];
         });
     }
 
+    function getConfigurationDetails() {
+        function done(res){
+            console.log(res);
+        }
+        ajaxGetJSON(`/api/getConfigurationInfo?configName=${configuration_name}`, done)
+    }
+
     configurations = {
         peerDataUsageChartObj: () => { return peerDataUsageChartObj },
         peerDataUsageModal: () => { return peerDataUsageModal },
@@ -987,6 +995,7 @@ let peers = [];
         ipModal: () => { return ipModal; },
         qrcodeModal: () => { return qrcodeModal; },
         settingModal: () => { return settingModal; },
+        configurationEditModal: () => { return configurationEditModal; },
         configurationTimeout: () => { return configuration_timeout; },
         updateDisplayMode: () => { display_mode = window.localStorage.getItem("displayMode"); },
         removeConfigurationInterval: () => { removeConfigurationInterval(); },
@@ -998,7 +1007,7 @@ let peers = [];
         parsePeers: (response) => { parsePeers(response); },
         toggleAccess: (peerID) => { toggleAccess(peerID); },
 
-
+        getConfigurationDetails: () => { getConfigurationDetails() },
         setConfigurationName: (confName) => { configuration_name = confName; },
         getConfigurationName: () => { return configuration_name; },
         setActiveConfigurationName: () => { setActiveConfigurationName(); },

src/static/js/configurationTool.js

@@ -1,5 +1,3 @@
-
-
 let $body = $("body");
 let available_ips = [];
 let $add_peer = document.getElementById("save_peer");
@@ -89,11 +87,6 @@ $body.on("click", ".btn-data-usage-peer", function(){
     ajaxPostJSON("/api/getPeerDataUsage", {"config": configurations.getConfigurationName(), "peerID":  configurations.peerDataUsageChartObj().data.peerID, "interval": window.localStorage.getItem("peerTimePeriod")}, loadPeerDataUsageChartDone); 
 });
 
-
-
-
-
-
 $('#peerDataUsage').on('shown.bs.modal', function() {
     configurations.peerDataUsageChartObj().resize();
 }).on('hidden.bs.modal', function() {
@@ -117,6 +110,17 @@ $(".switchTimePeriod").on("click", function(){
 })
 
 
+/**
+ * Edit Configuration
+ */
+
+$editConfiguration = $("#edit_configuration");
+$editConfiguration.on("click", function(){
+    configurations.getConfigurationDetails();
+    configurations.configurationEditModal().toggle();
+});
+
+
 /**
  * ==========
  * Add peers