add scroll-to-bottom and cleanup intervals

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 {

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() {