auto update script executed

web/components/status.html

@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="column">
-            <div id="connections" class="ui yellow statustab inverted segment">
+            <div id="connections" class="ui statustab segment" style="background-color: #f0ece1; border: 0px solid transparent;">
                 <h4 class="ui header">
                     <i class="arrows alternate horizontal icon"></i>
                     <div class="content">
@@ -38,7 +38,7 @@
             </div>
         </div>
         <div class="column">
-            <div id="connections" class="ui pink statustab inverted segment">
+            <div id="connections" class="ui statustab inverted segment" style="background-color: #7d8e88;">
                 <h4 class="ui header">
                     <i class="map marker alternate icon"></i>
                     <div class="content">
@@ -85,29 +85,33 @@
 <div class="ui two column stackable grid">
     <div class="column">
       <p>Visitor Counts</p>
-      <table class="ui basic celled table">
+      <table class="ui basic unstackable table">
         <thead>
           <tr>
             <th>Country ISO Code</th>
-            <th>Visitor Count</th>
+            <th>Unique Visitors</th>
           </tr>
         </thead>
-        <tbody>
-          <!-- insert table rows here -->
+        <tbody id="countryCodetable">
+            <tr>
+                <td colspan="2">No Data</td>
+            </tr>
         </tbody>
       </table>
     </div>
     <div class="column">
       <p>Proxy Request Types</p>
-      <table class="ui basic celled table">
+      <table class="ui basic unstackable table">
         <thead>
           <tr>
             <th>Proxy Type</th>
             <th>Count</th>
           </tr>
         </thead>
-        <tbody>
-          <!-- insert table rows here -->
+        <tbody id="forwardTypeTable">
+            <tr>
+                <td colspan="2">No Data</td>
+            </tr>
         </tbody>
       </table>
     </div>
@@ -152,7 +156,7 @@
 
     function abbreviateNumber(value) {
         var newValue = value;
-        var suffixes = ["", "K", "M", "B", "T"];
+        var suffixes = ["", "k", "m", "b", "t"];
         var suffixNum = 0;
         while (newValue >= 1000 && suffixNum < suffixes.length - 1) {
             newValue /= 1000;
@@ -172,7 +176,7 @@
             
             // Sort array based on value of each pair
             entries.sort((a, b) => {
-                return a[1] - b[1];
+                return b[1] - a[1];
             });
             
             // Convert sorted array back to object
@@ -193,6 +197,22 @@
                 3. ${(Object.keys(data)[2])?Object.keys(data)[2]:"No Data"}
             </div>
             `);
+
+            //populate the table
+            $("#countryCodetable").html("");
+            for (const [key, value] of Object.entries(data)) {
+                $("#countryCodetable").append(`<tr>
+                    <td>${key}</td>
+                    <td>${value}</td>
+                </tr>`);
+            }
+
+            if (data.length == 0){
+                $("#countryCodetable").append(`<tr>
+                    <td colspan="2">No Data</td>
+                </tr>`);
+            }
+            
         });
 
         //Filter forward type
@@ -208,13 +228,27 @@
 
         $.get("/api/stats/summary", function(data){
             data = sortObjectByValue(data.ForwardTypes);
-            $("#forwardtype").html((Object.keys(data)[0])?fft(Object.keys(data)[0]):"No Data");
+            $("#forwardtype").html((Object.keys(data)[0])?fft(Object.keys(data)[0]) + ": " + abbreviateNumber(data[Object.keys(data)[0]]):"No Data");
             $("#forwardtypeList").html(`
-            <div style="color: white;">
-                ${(Object.keys(data)[1])?fft(Object.keys(data)[1]) + ": " +data[Object.keys(data)[1]]:"No Data"}<br>
-                ${(Object.keys(data)[2])?fft(Object.keys(data)[2]) + ": " +data[Object.keys(data)[2]]:"No Data"}
+            <div>
+                ${(Object.keys(data)[1])?fft(Object.keys(data)[1]) + ": " + abbreviateNumber(data[Object.keys(data)[1]]):"No Data"}<br>
+                ${(Object.keys(data)[2])?fft(Object.keys(data)[2]) + ": " + abbreviateNumber(data[Object.keys(data)[2]]):"No Data"}
             </div>
             `);
+
+            $("#forwardTypeTable").html("");
+            for (const [key, value] of Object.entries(data)) {
+                $("#forwardTypeTable").append(`<tr>
+                    <td>${key}</td>
+                    <td>${value}</td>
+                </tr>`);
+            }
+
+            if (data.length == 0){
+                $("#forwardTypeTable").append(`<tr>
+                    <td colspan="2">No Data</td>
+                </tr>`);
+            }
         });
     }
     getDailySummaryDetails();

web/index.html

@@ -20,6 +20,9 @@
                 <img class="logo" src="img/logo.svg">
             </div>
 
+            <div class="ui right floated buttons" style="padding-top: 2px;">
+                <button class="ui basic icon button" onclick="$('.toolbar').fadeToggle('fast');"><i class="content icon"></i></button>
+            </div>
             <div class="ui right floated buttons" style="padding-top: 2px;">
                 <button class="ui basic icon button" onclick="logout();"><i class="sign-out icon"></i></button>
             </div>
@@ -207,6 +210,11 @@
                     alert("Invalid tabid given");
                     return;
                 }
+                if (window.innerWidth < 750){
+                    //RWD mode, hide toolbar
+                    $(".toolbar").fadeOut('fast');
+                }
+
                 $("#mainmenu").find(".item").removeClass("active");
                 $(targetBtn).addClass("active");
                 $(".functiontab").hide();
@@ -215,6 +223,14 @@
                 window.location.hash = tabID;
             }
 
+            $(window).on("resize", function(){
+                if (window.innerWidth >= 750 && $(".toolbar").is(":visible") == false){
+                    $(".toolbar").show();
+                }else if (window.innerWidth < 750 && $(".toolbar").is(":visible") == true){
+                    $(".toolbar").hide();
+                }
+            });
+
 
         </script>
     </body>

web/main.css

@@ -50,9 +50,18 @@ body{
 
 @media screen and (max-width: 750px) {
     .toolbar {
+        position: fixed;
         display: inline-block;
-        width: 100%;
+        width: 50%;
+        background-color: white;
+        top: 3.6em;
+        right: 0;
+        height: 100%;
         margin-bottom: 1em;
+        z-index: 9;
+        padding: 1em;
+        display:none;
+        border-left: 1px solid rgb(206, 206, 206);
     }
 
     #mainmenu{
@@ -63,6 +72,8 @@ body{
         display: inline-block;
         width: 100%;
     }
+
+    
 }
 
 .menudivider{
@@ -95,7 +106,7 @@ body{
 }
 
 .statustab{
-    min-height: 5em;
+    min-height: 5.5em;
 }
 
 #summaryTotalCount{