diff --git a/aprsd/cmds/webchat.py b/aprsd/cmds/webchat.py index 42d74c0..b58ff14 100644 --- a/aprsd/cmds/webchat.py +++ b/aprsd/cmds/webchat.py @@ -15,7 +15,6 @@ from flask.logging import default_handler from flask_httpauth import HTTPBasicAuth from flask_socketio import Namespace, SocketIO from oslo_config import cfg -from user_agents import parse as ua_parse from werkzeug.security import check_password_hash, generate_password_hash import wrapt @@ -217,20 +216,10 @@ def _get_transport(stats): @auth.login_required @flask_app.route("/") def index(): - ua_str = request.headers.get("User-Agent") - # this takes about 2 seconds :( - user_agent = ua_parse(ua_str) - LOG.debug(f"Is mobile? {user_agent.is_mobile}") stats = _stats() - if user_agent.is_mobile: - html_template = "mobile.html" - else: - html_template = "index.html" - # For development - # html_template = "mobile.html" - + html_template = "index.html" LOG.debug(f"Template {html_template}") transport, aprs_connection = _get_transport(stats) diff --git a/aprsd/stats.py b/aprsd/stats.py index 3c2517e..5c8380a 100644 --- a/aprsd/stats.py +++ b/aprsd/stats.py @@ -246,7 +246,6 @@ class APRSDStats: }, "plugins": plugin_stats, } - LOG.info("APRSD Stats: DONE") return stats def __str__(self): diff --git a/aprsd/web/chat/static/css/chat.css b/aprsd/web/chat/static/css/chat.css new file mode 100644 index 0000000..270d682 --- /dev/null +++ b/aprsd/web/chat/static/css/chat.css @@ -0,0 +1,97 @@ +input[type=search]::-webkit-search-cancel-button { + -webkit-appearance: searchfield-cancel-button; +} + +.speech-wrapper { + padding: 5px 30px; + border: 1px solid #ccc; + height: 450px; + overflow-y: scroll; + overflow-x: none; + background-color: #CCCCCC; +} + +.bubble-row { + display: flex; + width: 100%; + justify-content: flex-start; + &.alt { + justify-content: flex-end; + } +} + +.bubble { + /*width: 350px; */ + height: auto; + display: block; + background: #f5f5f5; + border-radius: 4px; + box-shadow: 2px 8px 5px #555; + position: relative; + margin: 0 0 15px; + &.alt { + margin: 0 0 15px; + } +} + +.bubble-text { + padding: 5px 5px 0px 8px; +} + +.bubble-name { + width: 280px; + font-weight: 600; + font-size: 12px; + margin: 0 0 4px; + color: #3498db; + display: flex; + align-items: center; + .material-symbols-rounded { + margin-left: auto; + font-weight: normal; + color: #808080; + } + &.alt { + color: #2ecc71; + } +} + +.bubble-timestamp { + margin-right: auto; + font-size: 11px; + text-transform: uppercase; + color: #bbb +} + +.bubble-message { + font-size: 16px; + margin: 0px; + padding: 0px 5px 5px 0px; + color: #2b2b2b; +} + +.bubble-arrow { + position: absolute; + width: 0; + bottom:30px; + left: -16px; + height: 0px; + &.alt{ + right: -2px; + bottom: 30px; + left: auto; + } +} +.bubble-arrow:after { + content: ""; + position: absolute; + border: 0 solid transparent; + border-top: 9px solid #f5f5f5; + border-radius: 0 20px 0; + width: 15px; + height: 30px; + transform: rotate(145deg); +} +.bubble-arrow.alt:after { + transform: rotate(45deg) scaleY(-1); +} diff --git a/aprsd/web/chat/static/css/index.css b/aprsd/web/chat/static/css/index.css index b39acab..3f99928 100644 --- a/aprsd/web/chat/static/css/index.css +++ b/aprsd/web/chat/static/css/index.css @@ -1,6 +1,6 @@ body { background: #eeeeee; - margin: 2em; + margin: 1em; text-align: center; font-family: system-ui, sans-serif; } @@ -11,34 +11,13 @@ footer { height: 10vh; } -.ui.segment { - background: #eeeeee; -} - -ul.list { - list-style-type: disc; -} -ul.list li { - list-style-position: outside; -} - -#left { - margin-right: 2px; - height: 300px; -} -#right { - height: 300px; -} -#center { - height: 300px; -} - #title { font-size: 4em; } #version{ font-size: .5em; } + #uptime, #aprsis { font-size: 1em; } @@ -66,29 +45,3 @@ ul.list li { width: 16px; height: 16px; } - -#msgsTabsDiv .ui.tab { - margin:0px; - padding:0px; - display: block; -} - -#msgsTabsDiv .header, .tiny.text, .content, .break, - .thumbs.down.outline.icon, - .phone.volume.icon - { - display: inline-block; - float: left; - position: relative; -} -#msgsTabsDiv .tiny.text { - width:100px; -} -#msgsTabsDiv .tiny.header { - width:100px; - text-align: left; -} -#msgsTabsDiv .break { - margin: 2px; - text-align: left; -} diff --git a/aprsd/web/chat/static/css/tabs.css b/aprsd/web/chat/static/css/tabs.css index 755c943..d7ad49c 100644 --- a/aprsd/web/chat/static/css/tabs.css +++ b/aprsd/web/chat/static/css/tabs.css @@ -37,5 +37,5 @@ border: 1px solid #ccc; height: 450px; overflow-y: scroll; - background-color: white; + background-color: #CCCCCC; } diff --git a/aprsd/web/chat/static/js/send-message-mobile.js b/aprsd/web/chat/static/js/send-message-mobile.js deleted file mode 100644 index b8e6c03..0000000 --- a/aprsd/web/chat/static/js/send-message-mobile.js +++ /dev/null @@ -1,246 +0,0 @@ -var cleared = false; -var callsign_list = {}; -var message_list = {}; -var from_msg_list = {}; -const socket = io("/sendmsg"); - -function size_dict(d){c=0; for (i in d) ++c; return c} - -function init_chat() { - socket.on('connect', function () { - console.log("Connected to socketio"); - }); - socket.on('connected', function(msg) { - console.log("Connected!"); - console.log(msg); - }); - - socket.on("sent", function(msg) { - if (cleared == false) { - var msgsdiv = $("#msgsTabsDiv"); - msgsdiv.html('') - cleared = true - } - sent_msg(msg); - }); - - socket.on("ack", function(msg) { - update_msg(msg); - }); - - socket.on("new", function(msg) { - if (cleared == false) { - var msgsdiv = $("#msgsTabsDiv"); - msgsdiv.html('') - cleared = true - } - from_msg(msg); - }); - - $("#sendform").submit(function(event) { - event.preventDefault(); - msg = {'to': $('#to_call').val().toUpperCase(), - 'message': $('#message').val(), - } - socket.emit("send", msg); - $('#message').val(''); - }); - - init_gps(); -} - - -function add_callsign(callsign) { - /* Ensure a callsign exists in the left hand nav */ - dropdown = $('#callsign_dropdown') - - if (callsign in callsign_list) { - console.log(callsign+' already in list.') - return false - } - - var callsignTabs = $("#callsignTabs"); - tab_name = tab_string(callsign); - tab_content = tab_content_name(callsign); - divname = content_divname(callsign); - - item_html = '
'+from+' '; + msg_html += 'thumb_up'; + } else { + msg_html += 'thumb_down'; + } + } + msg_html += "
"; + bubble_msg_class = "bubble-message" + if (ack_id) { + bubble_arrow_class = "bubble-arrow alt" + } else { + bubble_arrow_class = "bubble-arrow" + } + + msg_html += ' '; + if (ack_id) { + if (acked) { + msg_html += ''+message+'
'; + msg_html += ''; + msg_html += "