ui improvements

ts3-viewer/ajax.php

@@ -11,7 +11,7 @@
     WHERE server.uid = ? 
     ORDER BY date DESC LIMIT 10000");
   $stmtEvents->execute(Array($serverUid));
-  $stmtChannel = $pdo->prepare("SELECT channel.id as id, channel.name as name, channel.channelId as channelId, channel.parentId as parentId, channel.position as position, server.name as serverName, server.id as serverId FROM channel 
+  $stmtChannel = $pdo->prepare("SELECT channel.id, channel.name, channel.channelId, channel.parentId, channel.position, channel.description, server.name as serverName, server.id as serverId FROM channel 
     LEFT JOIN server ON server.id = channel.serverId
     WHERE server.uid = ?");
   $stmtChannel->execute(Array($serverUid));

ts3-viewer/index.php

@@ -47,7 +47,8 @@
     function update(init = false) {
       fetch("ajax.php").then(res=>res.json()).then(function(json) {
         console.log(json);
-        let channelTree = {channelId: 0, name: 'Server', id: 0};
+        const serverName = json.channels ? json.channels[0].serverName : "Server";
+        let channelTree = {channelId: 0, name: serverName, id: 0};
         eventTimeRange[0] = json.events.reduce((min, e) => min && (min < e[1]) ? min : e[1]) * 1000 - 12*3600000;
         eventTimeRange[1] = json.events.reduce((max, e) => max && (max > e[1]) ? max : e[1]) * 1000 + 12*3600000;
         var dateInp = document.getElementById('date');
@@ -82,7 +83,9 @@
       }
       tree.children = channels.filter((ch) => ch.parentId == tree.channelId).sort((a, b) => a.position - b.position);
       tree.clientCount = tree.events.reduce((sum, e) => sum+e[2], 0) / (tree.events.length > 0 ? tree.events.length : 1);
-      tree.activeCount = tree.events.length > 0 ? tree.events[0][2] : 0;
+
+      const recentActivity = tree.events.filter(e => e[1] > (new Date()).getTime()/1000 - 3600*24);
+      tree.activeCount = recentActivity.length > 2 ? recentActivity.reduce((acc, val) => val[2] > acc ? val[2] : acc, 0) : 0;
       for(const child of tree.children) {
         makeTree(child, channels.filter( ch => ch.parentId != tree.channelId), events.filter( e => e[0] != tree.id));
         tree.clientCount += child.clientCount;
@@ -135,6 +138,7 @@
         if(!li) {
           li = document.createElement('li');
           li.id = `li_${channel.channelId}`;
+          li.title = channel.description.replace(/\[\/?[^\]]+\]/g, "");
           if(prevLi.nextSibling) 
             ul.insertBefore(li, prevLi.nextSibling);
           else
@@ -196,7 +200,8 @@
           data[i][1] = data[i+1][1];
         }
         const name = prefix + formatHeadings(tree.name, false);
-        if(data.length > 0 && (data.length != 2 || data[0][1] != 0)) {
+        const maxClients = data.reduce((acc, val) => val[1] > acc ? val[1] : acc, 0);
+        if(data.length > 0 && maxClients > 0) {
           series.push({
             label: name,
             data: data,
@@ -208,7 +213,7 @@
           });
         }
         for(const channel of tree.children) {
-          iterChilds(channel, name + ' / ');
+          iterChilds(channel, formatHeadings(tree.name, false) + ' / ');
         }
       }
       iterChilds(tree);
@@ -237,6 +242,17 @@
             position: 'nw'
           }
         });
+        plots[tree.channelId].hooks.drawOverlay.push(function(plot, cvs) {
+          if(!plot) { return; }
+          var cvsWidth = plot.width() / 2;
+
+          var text = tree.name.replace(/\[\/?[^\]]+\]/g, "");
+          cvs.font = "bold 16px Arial";
+          cvs.fillStyle = "#666666";
+          cvs.textAlign = 'center';
+          cvs.fillText(text, cvsWidth, 30);
+          return cvs;
+        });
         $(placeholder).bind("plotpan plotzoom", function (event, plot) {
           var axes = plot.getAxes();
           viewMin = axes.xaxis.min;

ts3-viewer/stylesheet.css

@@ -1,5 +1,6 @@
 body {
-
+  font-family: Arial;
+  margin: 0;
 }
 .wrapper {
 	display: grid;
@@ -14,10 +15,16 @@ body {
 }
 .main-head {
 	grid-area: header;
+  padding: 60px;
+  text-align: center;
+  background: #1abc9c;
+  color: white;
+  font-size: 48pt;
 }
 #tree {
 	grid-area: tree;
 	clear: both;
+  margin-left: 10px;
 }
 #tree li {
   width: 100%;
@@ -52,6 +59,7 @@ ul {
 	flex-wrap: wrap;
 	align-content: flex-start;
 	align-items: stretch;
+  margin-right: 10px;
 }
 .demo-container {
 	box-sizing: border-box;
@@ -77,4 +85,5 @@ ul {
 
 #settings {
 	grid-area: settings;
+  margin-right: 10px;
 }