From 6db2b31ef74ca814a20d771e185962681cd083a3 Mon Sep 17 00:00:00 2001
From: Andre Tabarra <tabarra@vexguard.net>
Date: Sun, 1 Sep 2019 07:09:13 -0300
Subject: [PATCH] server log autoupdate + version bump

---
 dev_roadmap.md             |  1 +
 src/webroutes/serverLog.js | 36 +++++++++++++----
 version.json               |  2 +-
 web/actionLog.html         |  5 ++-
 web/serverLog.html         | 82 +++++++++++++++++++++-----------------
 5 files changed, 78 insertions(+), 48 deletions(-)

diff --git a/dev_roadmap.md b/dev_roadmap.md
index f51daef57..2358e8844 100644
--- a/dev_roadmap.md
+++ b/dev_roadmap.md
@@ -11,6 +11,7 @@ Medium stuff:
 - [x] Let admins change their password
 - [ ] Create a init.cfg for the fxserver to execute containing all txAdmin commands
 - [ ] Revert txadminclient cl_logger.js back into lua and fix the mismatch of killer ID
+- [x] Improve server log page 
 
 Minor stuff:
 - [x] Remove del in favour of fs-extra.emptyDir https://github.com/jprichardson/node-fs-extra/blob/master/docs/emptyDir.md
diff --git a/src/webroutes/serverLog.js b/src/webroutes/serverLog.js
index e0d82b5c6..59476bb70 100644
--- a/src/webroutes/serverLog.js
+++ b/src/webroutes/serverLog.js
@@ -14,9 +14,31 @@ const isUndefined = (x) => { return (typeof x === 'undefined') };
  * @param {object} req
  */
 module.exports = async function action(res, req) {
-    let log = processLog(globals.intercomTempLog);
-    let out = await webUtils.renderMasterView('serverLog', req.session, {headerTitle: 'Server Log', log});
-    return res.send(out);
+    //If page
+    if(isUndefined(req.query.offset)){
+        let log = processLog(globals.intercomTempLog.slice(-100));
+        let renderData = {
+            headerTitle: 'Server Log',
+            offset: globals.intercomTempLog.length,
+            log
+        }
+        let out = await webUtils.renderMasterView('serverLog', req.session, renderData);
+        return res.send(out);
+
+    //If offset
+    }else if(parseInt(req.query.offset) !== NaN){
+        if(req.query.offset === globals.intercomTempLog.length){
+            return res.send({offset: globals.intercomTempLog.length, log : false});
+        }else{
+            let log = processLog(globals.intercomTempLog.slice(req.query.offset));
+            return res.send({offset: globals.intercomTempLog.length, log});
+        }
+
+    //If null
+    }else{
+        let log = processLog(globals.intercomTempLog.slice(-100));
+        return res.send({offset: globals.intercomTempLog.length, log});
+    }
 };
 
 
@@ -26,9 +48,7 @@ module.exports = async function action(res, req) {
  * @param {array} resList
  */
 function processLog(logArray){
-    if(!logArray.length) return false;
-
-    let out = [];
+    let out = '';
     logArray.forEach(event => {
         if(
             isUndefined(event.timestamp) ||
@@ -41,10 +61,10 @@ function processLog(logArray){
         let time = new Date(parseInt(event.timestamp)*1000).toLocaleTimeString()
         let source = processPlayerData(event.source);
         let eventMessage = processEventTypes(event)
-        out.push(`[${time}] ${source} ${eventMessage}`)
+        out += `[${time}] ${source} ${eventMessage}\n`;
     });
 
-    return out.join('\n');
+    return out;
 }
 
 
diff --git a/version.json b/version.json
index 3b1a4e9af..03c3e8ac2 100644
--- a/version.json
+++ b/version.json
@@ -1,5 +1,5 @@
 {
-    "version": "1.11.6-mplus",
+    "version": "1.11.6-mplus2",
     "changelog": "Deprecated Message. Please Update.",
     "allVersions": [
         {
diff --git a/web/actionLog.html b/web/actionLog.html
index 1c13b030f..8370175fe 100644
--- a/web/actionLog.html
+++ b/web/actionLog.html
@@ -2,8 +2,9 @@
 
 
 <style>
-    .admin-log-content{
+    .pre-log-content{
         height: calc(100vh - 251px);
+        margin-bottom: 0;
     }
 </style>
 
@@ -13,7 +14,7 @@ <h3>Action Log</h3>
 </div>
 <div class="card border-primary">
     <div class="card-body">
-        <pre id="console" class="pre-scroll admin-log-content">{{log}}</pre>
+        <pre id="console" class="pre-scroll pre-log-content">{{log}}</pre>
     </div>
 </div>
 
diff --git a/web/serverLog.html b/web/serverLog.html
index 73ab7a2c7..0411f5740 100644
--- a/web/serverLog.html
+++ b/web/serverLog.html
@@ -2,8 +2,9 @@
 
 
 <style>
-    .admin-log-content{
+    .pre-log-content{
         height: calc(100vh - 326px); /* -251px */
+        margin-bottom: 0;
     }
 
     .event-source{
@@ -27,16 +28,7 @@ <h3>Server Log <span class="badge badge-light">BETA</span></h3>
 </div>
 <div class="card border-primary">
     <div class="card-body">
-        {{if(options.log === false)}}
-            <div style="display:flex;justify-content:center;align-items:center;" class="admin-log-content">
-                <h1 class="text-muted">
-                    &lt; empty log &gt;
-                </h1>
-            </div>
-        </div>
-        {{#else}}
-        <pre id="console" class="pre-scroll admin-log-content">{{log|safe}}</pre>
-        {{/if}}
+        <pre id="console" class="pre-scroll pre-log-content">{{log|safe}}</pre>
     </div>
 </div>
 
@@ -45,35 +37,51 @@ <h1 class="text-muted">
 
 
 <script>
-$(document).ready(function () {
-    $("#console").scrollTop($("#console")[0].scrollHeight);
-
-    //Player name click function
-    $('.event-source').click(function(e){
-        let ids = $(this).data('player-identifiers');
-        if(!ids) return;
-        let name = $(this).data('player-name') || 'unknown';
-
-        $("#modPlayerInfoTitle").html(name);
-        $("#modPlayerInfoIdentifiers").html(ids.split(';').join(', <br>\n'));
-        $("#modPlayerInfoButtons").html('<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>');
-        $('#modPlayerInfo').modal('show');
+    $(document).ready(function () {
+        scrollToBottom();
+        setupHovers();
     });
 
-    //Player name hover highlight (NOTE: Experiment)
-    $('.event-source').mouseenter(function(e){
-        let ids = $(this).data('player-identifiers');
-        if(!ids) return;
+    setInterval(getNewData, 5000);
 
-        $('.event-source').each(function(e){
-            if($(this).data('player-identifiers') !== ids) return;
-            $(this).addClass("highlight-player");
+    var currOffset = '{{offset}}';
+    function getNewData(){
+        $.ajax({
+            type: "GET",
+            url: `/serverLog?offset=${currOffset}`,
+            timeout: 2000,
+            success: function (data) {
+                //FIXME: temporary before database
+                if(typeof data.offset !== 'undefined') currOffset = data.offset;
+                if(typeof data.log !== 'undefined' && data.log !== false && data.log.length){
+                    $("#console").append(data.log);
+                    scrollToBottom();
+                    setupHovers();
+                }
+            },
+            error: function (xmlhttprequest, textstatus, message) {
+                console.log(`Error refreshing server log: ${message}`)
+            }
         });
-    });
-    $('.event-source').mouseleave(function(e){
-        $('.event-source').each(function(e){
-            $(this).removeClass("highlight-player");
+    }
+
+    function scrollToBottom(){
+        try {
+            $("#console").scrollTop($("#console")[0].scrollHeight);
+        } catch (error) {}
+    }
+
+    //Player name click function
+    function setupHovers(){
+        $('.event-source').click(function(e){
+            let ids = $(this).data('player-identifiers');
+            if(!ids) return;
+            let name = $(this).data('player-name') || 'unknown';
+
+            $("#modPlayerInfoTitle").html(name);
+            $("#modPlayerInfoIdentifiers").html(ids.split(';').join(', <br>\n'));
+            $("#modPlayerInfoButtons").html('<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>');
+            $('#modPlayerInfo').modal('show');
         });
-    });
-});
+    }
 </script>