hemna/aprsd
1
0
Fork 0
mirror of https://github.com/craigerl/aprsd.git synced 2024-11-18 06:11:49 -05:00
Code Issues Projects Releases Wiki Activity

Updated the webchat UI to look like iMessage

Browse Source
This commit is contained in:
Hemna 2023-09-06 11:20:59 -04:00
parent 7292744a78
commit 29f21a9469
4 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aprsd/cmds/webchat.py
View File

@ -229,7 +229,7 @@ def index():
html_template = "index.html" html_template = "index.html"
# For development # For development
# html_template = "mobile.html" html_template = "index.html"
LOG.debug(f"Template {html_template}") LOG.debug(f"Template {html_template}")

2
aprsd/web/chat/static/css/tabs.css
View File

@ -37,5 +37,5 @@
border: 1px solid #ccc; border: 1px solid #ccc;
height: 450px; height: 450px;
overflow-y: scroll; overflow-y: scroll;
background-color: white; background-color: #CCCCCC;
} }

74
aprsd/web/chat/static/js/send-message.js
View File

@ -117,13 +117,14 @@ function init_messages() {
msg = message_list[callsign][id]; msg = message_list[callsign][id];
info = time_ack_from_msg(msg); info = time_ack_from_msg(msg);
t = info['time']; t = info['time'];
d = info['date'];
ack_id = false; ack_id = false;
acked = false; acked = false;
if (msg['type'] == MSG_TYPE_TX) { if (msg['type'] == MSG_TYPE_TX) {
ack_id = info['ack_id']; ack_id = info['ack_id'];
acked = msg['ack']; acked = msg['ack'];
} }
msg_html = create_message_html(t, msg['from'], msg['to'], msg['message'], ack_id, msg, acked); msg_html = create_message_html(d, t, msg['from'], msg['to'], msg['message'], ack_id, msg, acked);
append_message_html(callsign, msg_html, new_callsign); append_message_html(callsign, msg_html, new_callsign);
new_callsign = false; new_callsign = false;
} }
@ -204,7 +205,7 @@ function append_message_html(callsign, msg_html, new_callsign) {
if (new_callsign) { if (new_callsign) {
// we have to add a new DIV // we have to add a new DIV
console.log("new callsign, create msg_div_html "); console.log("new callsign, create msg_div_html ");
msg_div_html = '<div class="tabcontent" id="'+divname_str+'" style="height:450px;">'+msg_html+'</div>'; msg_div_html = '<div class="speech-wrapper" id="'+divname_str+'">'+msg_html+'</div>';
console.log(msg_div_html); console.log(msg_div_html);
msgsTabs.append(msg_div_html); msgsTabs.append(msg_div_html);
} else { } else {
@ -218,30 +219,45 @@ function append_message_html(callsign, msg_html, new_callsign) {
console.log($(divname).length); console.log($(divname).length);
if ($(divname).length > 0) { if ($(divname).length > 0) {
$(divname).animate({scrollTop: $(divname)[0].scrollHeight}, "slow"); $(divname).animate({scrollTop: $(divname)[0].scrollHeight}, "fast");
} }
$(divname).trigger('click'); $(divname).trigger('click');
} }
function create_message_html(time, from, to, message, ack_id, msg, acked=false) { function create_message_html(date, time, from, to, message, ack_id, msg, acked=false) {
div_id = from + "_" + msg.id; div_id = from + "_" + msg.id;
msg_html = '<div class="item" id="'+div_id+'">'; if (ack_id) {
msg_html += '<div class="tiny text">'+time+'</div>'; bubble_class = "bubble alt"
msg_html += '<div class="middle aligned content">'; bubble_name_class = "bubble-name alt"
msg_html += '<div class="tiny red header">'+from+'</div>'; } else {
bubble_class = "bubble"
bubble_name_class = "bubble-name"
}
date_str = date + " " + time;
msg_html = '<div class="'+ bubble_class + '">';
msg_html += '<div class="bubble-text">';
msg_html += '<p class="'+ bubble_name_class +'">'+from+'&nbsp;&nbsp;';
msg_html += '<span class="bubble-timestamp">'+date_str+'</span>';
if (ack_id) { if (ack_id) {
if (acked) { if (acked) {
msg_html += '<div class="middle aligned content"><i class="thumbs up outline icon" id="' + ack_id + '" data-content="Message ACKed"></i></div>'; msg_html += '<span class="material-symbols-rounded" id="' + ack_id + '">thumb_up</span>';
} else { } else {
msg_html += '<div class="middle aligned content"><i class="thumbs down outline icon" id="' + ack_id + '" data-content="Waiting for ACK"></i></div>'; msg_html += '<span class="material-symbols-rounded" id="' + ack_id + '">thumb_down</span>';
} }
} else {
msg_html += '<i class="phone volume icon" data-content="Recieved Message"></i>';
} }
msg_html += '<div class="middle aligned content">>&nbsp;&nbsp;&nbsp;</div>'; msg_html += "</p>";
msg_html += '</div>'; bubble_msg_class = "bubble-message"
msg_html += '<div class="middle aligned content">'+message+'</div>'; if (ack_id) {
msg_html += '</div><br>'; bubble_arrow_class = "bubble-arrow alt"
} else {
bubble_arrow_class = "bubble-arrow"
}
msg_html += '<p class="' +bubble_msg_class+ '">'+message+'</p>';
msg_html += '<div class="'+ bubble_arrow_class + '"></div>';
msg_html += "</div></div>";
return msg_html return msg_html
} }
@ -257,9 +273,10 @@ function flash_message(msg) {
function sent_msg(msg) { function sent_msg(msg) {
info = time_ack_from_msg(msg); info = time_ack_from_msg(msg);
t = info['time']; t = info['time'];
d = info['date'];
ack_id = info['ack_id']; ack_id = info['ack_id'];
msg_html = create_message_html(t, msg['from'], msg['to'], msg['message'], ack_id, msg, false); msg_html = create_message_html(d, t, msg['from'], msg['to'], msg['message'], ack_id, msg, false);
append_message(msg['to'], msg, msg_html); append_message(msg['to'], msg, msg_html);
save_data(); save_data();
} }
@ -283,10 +300,11 @@ function from_msg(msg) {
info = time_ack_from_msg(msg); info = time_ack_from_msg(msg);
t = info['time']; t = info['time'];
d = info['date'];
ack_id = info['ack_id']; ack_id = info['ack_id'];
from = msg['from'] from = msg['from']
msg_html = create_message_html(t, from, false, msg['message'], false, msg, false); msg_html = create_message_html(d, t, from, false, msg['message'], false, msg, false);
append_message(from, msg, msg_html); append_message(from, msg, msg_html);
save_data(); save_data();
} }
@ -324,8 +342,9 @@ function ack_msg(msg) {
if (msg['ack'] == true) { if (msg['ack'] == true) {
var ack_div = $('#' + ack_id); var ack_div = $('#' + ack_id);
//ack_div.removeClass('thumbs up outline icon'); //ack_div.removeClass('thumbs up outline icon');
ack_div.removeClass('thumbs down outline icon'); ack_div.html('thumb_up');
ack_div.addClass('thumbs up outline icon'); //ack_div.removeClass('thumbs down outline icon');
//ack_div.addClass('thumbs up outline icon');
} }
$('.ui.accordion').accordion('refresh'); $('.ui.accordion').accordion('refresh');
@ -338,30 +357,31 @@ function callsign_select(callsign) {
} }
function reset_Tabs() { function reset_Tabs() {
tabcontent = document.getElementsByClassName("tabcontent"); tabcontent = document.getElementsByClassName("speech-wrapper");
for (i = 0; i < tabcontent.length; i++) { for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none"; tabcontent[i].style.display = "none";
} }
} }
function openCallsign(evt, callsign) { function openCallsign(evt, callsign) {
// This is called when a callsign tab is clicked // This is called when a callsign tab is clicked
var i, tabcontent, tablinks; var i, tabcontent, tablinks;
tab_content = tab_content_name(callsign); tab_content = tab_content_name(callsign);
console.log("openCallsign " + tab_content);
tabcontent = document.getElementsByClassName("tabcontent"); tabs = document.getElementsByClassName("speech-wrapper");
console.log(tabcontent); console.log(tabs);
for (i = 0; i < tabcontent.length; i++) { for (i = 0; i < tabs.length; i++) {
tabcontent[i].style.display = "none"; tabs[i].style.display = "none";
} }
tablinks = document.getElementsByClassName("tablinks"); tablinks = document.getElementsByClassName("tablinks");
console.log(tablinks); console.log(tablinks);
for (i = 0; i < tablinks.length; i++) { for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", ""); tablinks[i].className = tablinks[i].className.replace(" active", "");
} }
//$(tab_content).style.display = "block";
document.getElementById(tab_content).style.display = "block"; document.getElementById(tab_content).style.display = "block";
evt.target.className += " active"; evt.target.className += " active";
callsign_select(callsign); callsign_select(callsign);

7
aprsd/web/chat/templates/index.html
View File

@ -15,6 +15,9 @@
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js"></script> -->
<script src="/static/js/upstream/semantic.min.js"></script> <script src="/static/js/upstream/semantic.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,1,200">
<link rel="stylesheet" href="/static/css/chat2.css">
<link rel="stylesheet" href="/static/css/index.css"> <link rel="stylesheet" href="/static/css/index.css">
<link rel="stylesheet" href="/static/css/tabs.css"> <link rel="stylesheet" href="/static/css/tabs.css">
<script src="/static/js/main.js"></script> <script src="/static/js/main.js"></script>
@ -91,10 +94,10 @@
</div> </div>
<div class="ui grid"> <div class="ui grid">
<div class="three wide column"> <div class="two wide column">
<div class="tab" id="callsignTabs"></div> <div class="tab" id="callsignTabs"></div>
</div> </div>
<div class="ten wide column ui raised segment" id="msgsTabsDiv" style="height:450px;padding:0px;"> <div class="seven wide column ui raised segment" id="msgsTabsDiv" style="height:450px;padding:0px;">
</div> </div>
</div> </div>