From c90b415c8bdabaa3f41ebcc3a4126a11c9167003 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sun, 19 Apr 2020 23:35:06 +0200
Subject: [PATCH] add scroll-to-bottom and cleanup intervals

---
 htdocs/css/openwebrx.css |  2 +-
 htdocs/lib/Js8Threads.js | 41 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 2ab29e3..9c939a0 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -966,7 +966,7 @@ img.openwebrx-mirror-img
     overflow: hidden;
     text-overflow: ellipsis;
     direction: rtl;
-    text-aligh: left;
+    text-align: left;
 }
 
 #openwebrx-panel-js8-message .decimal {
diff --git a/htdocs/lib/Js8Threads.js b/htdocs/lib/Js8Threads.js
index 07e3069..a9bc014 100644
--- a/htdocs/lib/Js8Threads.js
+++ b/htdocs/lib/Js8Threads.js
@@ -21,12 +21,18 @@ Js8Thread.prototype.render = function() {
     this.el.html(
         '<td>' + this.renderTimestamp(this.getLatestTimestamp()) + '</td>' +
         '<td class="decimal freq">' + Math.round(this.getAverageFrequency()) + '</td>' +
-        '<td class="message">' + this.renderMessages() + '</td>'
+        '<td class="message">&lrm;' + this.renderMessages() + '</td>'
     );
 }
 
-Js8Thread.prototype.getLatestTimestamp() {
-    return this.messages(this.messages.length - 1).timestamp;
+Js8Thread.prototype.getLatestTimestamp = function() {
+    var startingMessages = this.messages.filter(function(m){
+        return m.thread_type & 1;
+    });
+    if (startingMessages.length) {
+        return startingMessages[startingMessages.length - 1].timestamp;
+    }
+    return this.messages[0].timestamp;
 }
 
 Js8Thread.prototype.renderMessages = function() {
@@ -35,7 +41,7 @@ Js8Thread.prototype.renderMessages = function() {
         var msg = this.messages[i];
         if (msg.thread_type & 1) {
             res.push('[ ');
-        } else if (i > 0 && msg.timestamp - this.messages[i - 1].timestamp > 15000) {
+        } else if (i == 0 || msg.timestamp - this.messages[i - 1].timestamp > 15000) {
             res.push(' ... ');
         }
         res.push(msg.msg);
@@ -54,14 +60,38 @@ Js8Thread.prototype.renderTimestamp = function(timestamp) {
     return pad(t.getUTCHours()) + pad(t.getUTCMinutes()) + pad(t.getUTCSeconds());
 }
 
+Js8Thread.prototype.purgeOldMessages = function() {
+    var now = new Date().getTime();
+    this.messages = this.messages.filter(function(m) {
+        // keep messages around for 20 minutes
+        return now - m.timestamp < 20 * 60 * 1000;
+    });
+    if (!this.messages.length) {
+        this.el.remove();
+    } else {
+        this.render();
+    }
+    return this.messages.length;
+}
+
 Js8Threader = function(el){
     this.threads = [];
     this.tbody = $(el).find('tbody');
-    console.info(this.tbody);
+    var me = this;
+    this.interval = setInterval(function(){
+        me.purgeOldMessages();
+    }, 15000);
+};
+
+Js8Threader.prototype.purgeOldMessages = function() {
+    this.threads = this.threads.filter(function(t) {
+        return t.purgeOldMessages();
+    });
 };
 
 Js8Threader.prototype.findThread = function(freq) {
     var matching = this.threads.filter(function(thread) {
+        // max frequency deviation: 5 Hz. this may be a little tight.
         return Math.abs(thread.getAverageFrequency() - freq) <= 5;
     });
     return matching[0] || false;
@@ -76,6 +106,7 @@ Js8Threader.prototype.pushMessage = function(message) {
         this.threads.push(thread);
     }
     thread.pushMessage(message);
+    this.tbody.scrollTop(this.tbody[0].scrollHeight);
 }
 
 $.fn.js8 = function() {