small user info adjustments

This commit is contained in:
DJ2LS 2023-02-28 09:07:38 +01:00
parent fd717e2e97
commit 3f0312a672

View file

@ -885,8 +885,6 @@ update_chat = function (obj) {
//document.getElementById('chatModuleDxCall').value = dxcallsign; //document.getElementById('chatModuleDxCall').value = dxcallsign;
selected_callsign = dxcallsign; selected_callsign = dxcallsign;
//get user information
getSetUserInformation(selected_callsign);
} }
getSetUserInformation(dxcallsign); getSetUserInformation(dxcallsign);
@ -895,11 +893,11 @@ update_chat = function (obj) {
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<div class="rounded-circle p-0"> <div class="rounded-circle p-0">
<img id="user-image-${dxcallsign}" class="p-1 rounded-circle w-50" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWNpcmNsZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTEgNmEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCA4YTggOCAwIDEgMSAxNiAwQTggOCAwIDAgMSAwIDh6bTgtN2E3IDcgMCAwIDAtNS40NjggMTEuMzdDMy4yNDIgMTEuMjI2IDQuODA1IDEwIDggMTBzNC43NTcgMS4yMjUgNS40NjggMi4zN0E3IDcgMCAwIDAgOCAxeiIvPgo8L3N2Zz4="></img> <img id="user-image-${dxcallsign}" class="p-1 rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWNpcmNsZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTEgNmEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCA4YTggOCAwIDEgMSAxNiAwQTggOCAwIDAgMSAwIDh6bTgtN2E3IDcgMCAwIDAtNS40NjggMTEuMzdDMy4yNDIgMTEuMjI2IDQuODA1IDEwIDggMTBzNC43NTcgMS4yMjUgNS40NjggMi4zN0E3IDcgMCAwIDAgOCAxeiIvPgo8L3N2Zz4="></img>
<!--<i class="bi bi-person-circle p-1" style="font-size:2rem;"></i>--> <!--<i class="bi bi-person-circle p-1" style="font-size:2rem;"></i>-->
</div> </div>
<h5 class="mb-1">${dxcallsign}</h5> <span style="font-size:1.2rem;"><strong>${dxcallsign}</strong></span>
<span class="badge bg-secondary text-white p-1 h-100" id="chat-${dxcallsign}-list-dxgrid"><small>${dxgrid}</small></span> <span class="badge bg-secondary text-white p-1 h-100" id="chat-${dxcallsign}-list-dxgrid"><small>${dxgrid}</small></span>
<span style="font-size:0.8rem;" id="chat-${dxcallsign}-list-time">${timestampHours}</span> <span style="font-size:0.8rem;" id="chat-${dxcallsign}-list-time">${timestampHours}</span>
<span class="position-absolute m-2 bottom-0 end-0" style="font-size:0.8rem;" id="chat-${dxcallsign}-list-shortmsg">${shortmsg}</span> <span class="position-absolute m-2 bottom-0 end-0" style="font-size:0.8rem;" id="chat-${dxcallsign}-list-shortmsg">${shortmsg}</span>
@ -919,6 +917,12 @@ update_chat = function (obj) {
.getElementById("nav-tabContent") .getElementById("nav-tabContent")
.insertAdjacentHTML("beforeend", message_area); .insertAdjacentHTML("beforeend", message_area);
// finally get and set user information to first selected item
getSetUserInformation(selected_callsign);
// create eventlistener for listening on clicking on a callsign // create eventlistener for listening on clicking on a callsign
document document
.getElementById("chat-" + dxcallsign + "-list") .getElementById("chat-" + dxcallsign + "-list")
@ -1718,6 +1722,14 @@ function getSetUserInformation(selected_callsign) {
returnObjFromCallsign(users, selected_callsign) returnObjFromCallsign(users, selected_callsign)
.then(function (data) { .then(function (data) {
// Callsign list elements
document.getElementById("chat-" + selected_callsign + "-list-dxgrid").innerHTML = '<small>'+ data.user_info_gridsquare +'</small>';
document.getElementById("user-image-" + selected_callsign).src = data.user_info_image;
document.getElementById("user-image-" + selected_callsign).className = "p-1 rounded-circle";
document.getElementById("user-image-" + selected_callsign).style = "width: 60px";
// DX Station tab
document.getElementById("dx_user_info_name").innerHTML = document.getElementById("dx_user_info_name").innerHTML =
data.user_info_name; data.user_info_name;
document.getElementById("dx_user_info_age").innerHTML = document.getElementById("dx_user_info_age").innerHTML =
@ -1737,10 +1749,6 @@ function getSetUserInformation(selected_callsign) {
document.getElementById("dx_user_info_comments").innerHTML = document.getElementById("dx_user_info_comments").innerHTML =
data.user_info_comments; data.user_info_comments;
document.getElementById("dx_user_info_image").src = data.user_info_image; document.getElementById("dx_user_info_image").src = data.user_info_image;
document.getElementById("user-image-" + selected_callsign).src =
data.user_info_image;
document.getElementById("user-image-" + selected_callsign).className =
"p-1 rounded-circle w-50";
document.getElementById("dx_user_info_gridsquare").className = ""; document.getElementById("dx_user_info_gridsquare").className = "";
document.getElementById("dx_user_info_name").className = document.getElementById("dx_user_info_name").className =
@ -1756,15 +1764,20 @@ function getSetUserInformation(selected_callsign) {
document.getElementById("dx_user_info_comments").className = ""; document.getElementById("dx_user_info_comments").className = "";
}) })
.catch(function (err) { .catch(function (err) {
document.getElementById("dx_user_info_image").src =
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg=="; // Callsign list elements
document.getElementById("user-image-" + selected_callsign).src = src = document.getElementById("user-image-" + selected_callsign).src = src =
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWNpcmNsZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTEgNmEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCA4YTggOCAwIDEgMSAxNiAwQTggOCAwIDAgMSAwIDh6bTgtN2E3IDcgMCAwIDAtNS40NjggMTEuMzdDMy4yNDIgMTEuMjI2IDQuODA1IDEwIDggMTBzNC43NTcgMS4yMjUgNS40NjggMi4zN0E3IDcgMCAwIDAgOCAxeiIvPgo8L3N2Zz4="; "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWNpcmNsZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMTEgNmEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCA4YTggOCAwIDEgMSAxNiAwQTggOCAwIDAgMSAwIDh6bTgtN2E3IDcgMCAwIDAtNS40NjggMTEuMzdDMy4yNDIgMTEuMjI2IDQuODA1IDEwIDggMTBzNC43NTcgMS4yMjUgNS40NjggMi4zN0E3IDcgMCAwIDAgOCAxeiIvPgo8L3N2Zz4=";
document.getElementById("user-image-" + selected_callsign).className = document.getElementById("user-image-" + selected_callsign).className =
"p-1 rounded-circle w-100"; "p-1 rounded-circle w-100";
document.getElementById("user-image-" + selected_callsign).style = document.getElementById("user-image-" + selected_callsign).style =
"height:60px"; "height:60px";
document.getElementById("chat-" + selected_callsign + "-list-dxgrid").innerHTML = '<small>no grid</small>';
// DX Station tab
document.getElementById("dx_user_info_image").src =
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcGVyc29uLWJvdW5kaW5nLWJveCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNMS41IDFhLjUuNSAwIDAgMC0uNS41djNhLjUuNSAwIDAgMS0xIDB2LTNBMS41IDEuNSAwIDAgMSAxLjUgMGgzYS41LjUgMCAwIDEgMCAxaC0zek0xMSAuNWEuNS41IDAgMCAxIC41LS41aDNBMS41IDEuNSAwIDAgMSAxNiAxLjV2M2EuNS41IDAgMCAxLTEgMHYtM2EuNS41IDAgMCAwLS41LS41aC0zYS41LjUgMCAwIDEtLjUtLjV6TS41IDExYS41LjUgMCAwIDEgLjUuNXYzYS41LjUgMCAwIDAgLjUuNWgzYS41LjUgMCAwIDEgMCAxaC0zQTEuNSAxLjUgMCAwIDEgMCAxNC41di0zYS41LjUgMCAwIDEgLjUtLjV6bTE1IDBhLjUuNSAwIDAgMSAuNS41djNhMS41IDEuNSAwIDAgMS0xLjUgMS41aC0zYS41LjUgMCAwIDEgMC0xaDNhLjUuNSAwIDAgMCAuNS0uNXYtM2EuNS41IDAgMCAxIC41LS41eiIvPgogIDxwYXRoIGQ9Ik0zIDE0cy0xIDAtMS0xIDEtNCA2LTQgNiAzIDYgNC0xIDEtMSAxSDN6bTgtOWEzIDMgMCAxIDEtNiAwIDMgMyAwIDAgMSA2IDB6Ii8+Cjwvc3ZnPg==";
document.getElementById("dx_user_info_gridsquare").className = document.getElementById("dx_user_info_gridsquare").className =
"placeholder col-4"; "placeholder col-4";
document.getElementById("dx_user_info_name").className = document.getElementById("dx_user_info_name").className =