From 1821c29a56a5c6f335a99813c996f9c42351a331 Mon Sep 17 00:00:00 2001
From: Mark Jessop <vk5qi@rfhead.net>
Date: Fri, 27 Jul 2018 22:32:20 +0930
Subject: [PATCH] Add log messages to sidebar.

---
 horusmapper.py             | 29 ++++++++++++++++++++++++++---
 static/css/chasemapper.css |  4 ++++
 templates/index.html       |  6 +++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/horusmapper.py b/horusmapper.py
index 0046193..4f1df80 100644
--- a/horusmapper.py
+++ b/horusmapper.py
@@ -446,7 +446,6 @@ def ozi_listener_callback(data):
     """ Handle a OziMux input message """
     # OziMux message contains:
     # {'lat': -34.87915, 'comment': 'Telemetry Data', 'alt': 26493.0, 'lon': 139.11883, 'time': datetime.datetime(2018, 7, 16, 10, 55, 49, tzinfo=tzutc())}
-    logging.info("OziMux Data:" + str(data))
     output = {}
     output['lat'] = data['lat']
     output['lon'] = data['lon']
@@ -454,13 +453,14 @@ def ozi_listener_callback(data):
     output['callsign'] = "Payload"
     output['time_dt'] = data['time']
 
+    logging.info("OziMux Data: %.5f, %.5f %.1f" % (data['lat'], data['lon'], data['alt']))
+
     handle_new_payload_position(output)
 
 
 def udp_listener_summary_callback(data):
     ''' Handle a Payload Summary Message from UDPListener '''
     # Extract the fields we need.
-    logging.info("Payload Summary Data: " + str(data))
 
     # Convert to something generic we can pass onwards.
     output = {}
@@ -469,6 +469,8 @@ def udp_listener_summary_callback(data):
     output['alt'] = data['altitude']
     output['callsign'] = data['callsign']
 
+    logging.info("Horus UDP Data: %.5f, %.5f %.1f" % (output['lat'], output['lon'], output['alt']))
+
     # Process the 'short time' value if we have been provided it.
     if 'time' in data.keys():
         _full_time = datetime.utcnow().strftime("%Y-%m-%dT") + data['time'] + "Z"
@@ -485,13 +487,14 @@ def udp_listener_car_callback(data):
     # TODO: Make a generic car position function, and have this function pass data into it
     # so we can add support for other chase car position inputs.
     global car_track
-    logging.debug("Car Position:" + str(data))
     _lat = data['latitude']
     _lon = data['longitude']
     _alt = data['altitude']
     _comment = "CAR"
     _time_dt = datetime.utcnow()
 
+    logging.debug("Car Position: %.5f, %.5f" % (_lat, _lon))
+
     _car_position_update = {
         'time'  :   _time_dt,
         'lat'   :   _lat,
@@ -627,6 +630,23 @@ def profile_change(data):
     flask_emit_event('server_settings_update', chasemapper_config)
 
 
+class WebHandler(logging.Handler):
+    """ Logging Handler for sending log messages via Socket.IO to a Web Client """
+
+    def emit(self, record):
+        """ Emit a log message via SocketIO """
+        if 'socket.io' not in record.msg:
+            # Convert log record into a dictionary
+            log_data = {
+                'level': record.levelname,
+                'timestamp': datetime.utcnow().strftime('%Y-%m-%dT%H:%M:%SZ'),
+                'msg': record.msg
+            }
+            # Emit to all socket.io clients
+            socketio.emit('log_event', log_data, namespace='/chasemapper')
+
+
+
 if __name__ == "__main__":
     import argparse
     parser = argparse.ArgumentParser()
@@ -648,6 +668,9 @@ if __name__ == "__main__":
     logging.getLogger('socketio').setLevel(logging.ERROR)
     logging.getLogger('engineio').setLevel(logging.ERROR)
 
+    web_handler = WebHandler()
+    logging.getLogger().addHandler(web_handler)
+
     # Attempt to read in config file.
     chasemapper_config = read_config(args.config)
     # Die if we cannot read a valid config file.
diff --git a/static/css/chasemapper.css b/static/css/chasemapper.css
index 903bf6b..769bf39 100644
--- a/static/css/chasemapper.css
+++ b/static/css/chasemapper.css
@@ -78,6 +78,10 @@ html, body, #map {
 	font-size:200%;
 }
 
+.logText {
+	font-size:70%;
+}
+
 #followPayloadButton {
 	width:45px;
 	height:45px;
diff --git a/templates/index.html b/templates/index.html
index 48831d8..b23d29c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -180,7 +180,7 @@
             // Event handler for Log data.
             socket.on('log_event', function(msg) {
 
-                $('#log_data').append('<br>' + $('<div/>').text(msg.timestamp + ": " + msg.msg).html());
+                $('#log_data').prepend('<br>' + $('<div/>').text(msg.timestamp + " [" + msg.level + "]: " + msg.msg).html());
                 // Scroll to the bottom of the log table
                 $("#log_data").scrollTop($("#log_data")[0].scrollHeight);
             });
@@ -771,11 +771,11 @@
         <div class="sidebar-content">
             <div class="sidebar-pane" id="home">
                 <h1 class="sidebar-header">
-                    sidebar-v2
+                    Log Messages
                     <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
                 </h1>
 
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+                <div id="log_data" class="logText"></div>
 
             </div>