-added back player history graphs (past 12 hours every 15 minutes)

-fixed issue with configurationmanager files and threading -servers on webfront listed in descending player count -fixed resolution of tempban times from console feedback -Added tests plugin to simulate functionality
2025-06-21 12:40:19 -05:00 · 2017-09-27 15:07:43 -05:00
parent 9227335d25
commit 8d52d7ddc5
21 changed files with 470 additions and 127 deletions
--- a/Admin/webfront/graph.html
+++ b/Admin/webfront/graph.html
@ -1,58 +0,0 @@
-<script type="text/javascript" src="//www.google.com/jsapi"></script>
-<script>
-
-google.load('visualization', '1', { callback: drawChart, packages: ['corechart'] });
-google.setOnLoadCallback(drawChart);
-
-function drawChart() {
-
-    var data = new google.visualization.DataTable();
-    data.addColumn('datetime', 'Time');
-    data.addColumn('number', 'Players');
- 
-    data.addRows(players);
-
-    var options = {
-    //curveType: 'function', still haven't decided on this
-    height: 300,
-    legend: {position: 'none'},
-    enableInteractivity: true,
-    chartArea: {
-      width: '93%'
-    },
-    vAxis: {
-        title: 'Players',
-        gridlines: { count: 7 },
-        viewWindowMode: 'explicit',
-        viewWindow: {
-            min: 0,
-            max: 18 // for iw4
-        },
-    },
-    hAxis: {
-      viewWindow: {
-        //min: players[0][0], no longer needed as timeline adjusts automatically
-        //max: players[players.length-1][0] // ditto
-      },
-      gridlines: {
-        count: 12,
-        units: {
-          days: {format: ["MMM dd"]},
-          hours: {format: ["HH:mm", "ha"]},
-        }
-      },
-      minorGridlines: {
-          count: 5,
-        units: {
-          hours: {format: ["hh:mm:ss a", "ha"]},
-          minutes: {format: ["HH:mm a Z", ":mm"]}
-        }
-      }
-    }
-  };
-
-  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
-  chart.draw(data, options);
-}
- </script>    
-{{GRAPH}}
--- a/Admin/webfront/header.html
+++ b/Admin/webfront/header.html
@ -8,6 +8,7 @@

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/9c581fe29b.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

    <link rel="stylesheet" type="text/css" href="/webfront/main.css"/>
    <link rel="stylesheet" type="text/css" href="/webfront/mobile.css"/>
--- a/Admin/webfront/main.css
+++ b/Admin/webfront/main.css
@ -15,7 +15,7 @@ div#header #navContainer .navEntry a {  padding: 1.2vw; width: 4vw; }
 div#header #navContainer .navEntry:hover { background-color: rgb(34, 34, 34); }

 div#content { margin: 3em 10%; }
-div#content .serverContainer { background-color: #191919; margin: 2em 0; font-size: 1.25vw; }
+div#content .serverContainer { background-color: #191919; margin-top 0; margin-bottom: 0; font-size: 1.25vw;  padding-bottom: 100px; }
 div#content hr { border-width: 0; height: 0.25em; background-color: #007ACC; }
 div#content .serverInfo { width: 100%; }
 div#content .serverInfo .tableCell { padding: 0 0.5em; }
@ -31,13 +31,15 @@ div#content .chatPlayerName { font-weight: bold; font-size: 1.1vw; color:#fff; p
 div#content .chatPlayerMessage {font-size: 1.1vw; color: #fff; opacity: 1; }

 div#content .playerPenalty, div#content .playerInfo { margin: 0 auto; padding: 1em 10px; background-color: #181818; width: calc(100% - 20px); }
-div#content .penaltyName { width: 14.28%; }
+div#content .penaltyName { width: 15%; }
 div#content .penaltyName a:link, div#content .penaltyName a:visited, div#content .playerInfo a:link, div#content .playerInfo a:visited  { color: rgb(0, 122, 204) !important; }
 div#content .penaltyName a:hover, div#content .playerInfo a:hover { color: rgb(255, 255, 255) !important; opacity: 0.75; }
-div#content .penaltyTime { text-align: right; width: 12.5%; }
+div#content .penaltyTime { text-align: left; width:8%; }
+div#content .penaltyOrigin {width: 12%;}
+div#content .penaltyRemaining { text-align: right; width: 10%:}
 div#content .playerPenalty .penaltyTime { opacity: 0.5; }
-div#content .penaltyType { width: 12.5%; }
-div#content .penaltyReason { width: 50%; }
+div#content .penaltyType { width: 10%; }
+div#content .penaltyReason { width: 45%; }
 div#content .playerPenalty .tableCell { }
 div#content .penaltyHeader, div#content .contentHeader { width: calc(100% - 20px); background-color: #007ACC; font-size: 15pt; padding: 0.5em 10px; }
 div#content .alternate_1 { background-color: rgb(34, 34, 34); }
@ -199,3 +201,5 @@ div#footer { position: fixed; bottom: 0.5em; right: 0.5em; opacity: 0.5; }
 .admin-name a { font-size: 14pt; color: #007ACC !important; }
 .admin-name a:hover { color: #fff !important; }
 .clients { margin: 0.5em; }
+.canvasjs-chart-credit { display: none; }
+.player-history { margin-top: -100px;  height: 100px; }
--- a/Admin/webfront/main.html
+++ b/Admin/webfront/main.html
@ -1,31 +1,101 @@
 <script>
-function getServers()
-{
-  $.getJSON("/_servers", function(result){
-    $("#serverList").html("");
-         $.each(result, function(i, server){
-           $("#serverList").append("<div class=serverContainer> \
+    var chartsRendered = false;
+
+    function renderPlayerHistory(id) {
+        $.getJSON("/_playerhistory?server=" + id, function (playerHistory) {
+
+            var i = id;
+            if ($("#server-" + i).children().length > 1)
+                return false;
+
+            $("#server-" + i).append("<div class='player-history' id='graph-player-history-" + i + "'></div><hr/><br/><br/>");
+
+            ///////////////////////////////////////
+            var chart = new CanvasJS.Chart("graph-player-history-" + i,
+              {
+                  backgroundColor: "#191919",
+                  height: 100,
+                  animationEnabled: true,
+
+                  toolTip: {
+                      contentFormatter: function (e) {
+                          var date = new Date(e.entries[0].dataPoint.x * 1000);
+                          return date.toLocaleTimeString('en-US', { timeZone: 'America/New_York', hour12: true }) + " - " + e.entries[0].dataPoint.y + " players";
+                      }
+                  },
+
+                  axisX: {
+                      interval: 1,
+                      gridThickness: 0,
+                      lineThickness: 0,
+                      tickThickness: 0,
+                      margin: 0,
+                      valueFormatString: " ",
+                  },
+
+                  axisY: {
+                      gridThickness: 0,
+                      lineThickness: 0,
+                      tickThickness: 0,
+                      minimum: 0,
+                      margin: 0,
+                      valueFormatString: " ",
+                      labelMaxWidth: 0,
+                  },
+
+                  legend: {
+                      maxWidth: 0,
+                      maxHeight: 0,
+                      dockInsidePlotArea: true,
+                  },
+
+                  data: [{
+                      showInLegend: false,
+                      type: "splineArea",
+                      color: "rgba(0, 122, 204, 0.432)",
+                      markerSize: 0,
+                      dataPoints: playerHistory,
+                  }]
+              });
+            chart.render();
+            //////////////////////////////////////
+        });
+    }
+
+    function getServers() {
+        $.getJSON("/_servers", function (result) {
+            result = result.sort(function (a, b) { return a.currentPlayers < b.currentPlayers });
+            $.each(result, function (i, server) {
+
+                if ($('#server-' + i).length < 1)
+                    $('#serverList').append("<div id='server-" + i + "'></div>")
+
+                $('#server-' + i + ' .serverContainer').remove();
+
+                $('#server-' + i).prepend("<div class='serverContainer'> \
             <div class='serverInfo table'> \
               <div class='serverTitle tableCell'>" + server['serverName'] + "</div> \
               <div class='serverMap tableCell'>" + server['mapName'] + "</div> \
               <div class='serverPlayers tableCell'>" + server['currentPlayers'] + "/" + server['maxPlayers'] + "</div> \
             </div>  \
             <div class='serverChatList table'>" +
-               formatMessages(server['chatHistory'])
-             + "</div> \
+        formatMessages(server['chatHistory'])
+      + "</div> \
             <div class='serverPlayerList table'>" +
-                formatPlayers(server['players'])
-             + "</div> \
-             <div style='clear: both;'></div><hr/></div>"
-           );
-         });
-     });
-}
+         formatPlayers(server['players'])
+      + "</div> \
+             <div style='clear: both;'></div><hr/></div> \
+          </div>"
+     );
+                renderPlayerHistory(i);
+            });
+        });
+    }

-$( document ).ready(function() {
-    getServers();
-    setInterval(getServers, 1000)
-});
+    $(document).ready(function () {
+        getServers();
+        setInterval(getServers, 1000)
+    });
 </script>
 <div id="serverList">
 </div>
--- a/Admin/webfront/penalties.html
+++ b/Admin/webfront/penalties.html
@ -34,6 +34,7 @@ function getPenalties(from)
             <div class=\"penaltyReason tableCell\">"+ penalty['penaltyReason'] + "</div> \
             <div class=\"penaltyOrigin tableCell\">"+ getColorForLevel(penalty['adminLevel'], penalty['adminName']) + "</div> \
             <div class=\"penaltyTime tableCell\">"+ penalty['penaltyTime'] + "</div> \
+            <div class=\" penaltyRemaining tableCell\">" + penalty['Expires'] + "</div> \
          </div>"
        )
      });
@ -51,6 +52,7 @@ $( document ).ready(function() {
  <div class="penaltyReason tableCell">Reason</div>
  <div class="penaltyOrigin tableCell">Admin</div>
  <div class="penaltyTime tableCell">Time</div>
+  <div class="penaltyRemaining tableCell">Remaining</div>
 </div>
 <div id="penaltyList">
 </div>