Skip to content

Commit

Permalink
almost done
Browse files Browse the repository at this point in the history 
finished user listing
now able to send messages
  • Loading branch information
@toddync
toddync committed Oct 14, 2023
1 parent 264686a commit aa49621
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 82 deletions.
9 changes: 8 additions & 1 deletion css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,9 @@ html {
}

.msg-date {
font-size: 14px;
position: absolute;
right: 5px;
font-size: 10px;
color: var(--msg-date);
margin-left: 3px;
}
Expand All @@ -492,6 +494,11 @@ html {
margin-right: 2px;
}

.username{
font-size: 13px;
color: var(--msg-message);
}

.add {
position: sticky;
bottom: 25px;
Expand Down
8 changes: 3 additions & 5 deletions home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h1>loading</h1>
</div>
<div class="wrapper">

<div id="users" class="conversation-area pc">
<div id="users" class="conversation-area pc users">

<!-- PC USERS AREA -->

Expand All @@ -84,7 +84,7 @@ <h1>loading</h1>
</div>
</div>-->

<div id="users2" class="conversation-area2 mob" style="border:0px; width:60%; height: 100%; margin-right:60%">
<div id="users2" class="conversation-area2 mob users" style="border:0px; width:60%; height: 100%; margin-right:60%">
</div>
<!-- MOBILE USERS AREA -->

Expand Down Expand Up @@ -164,9 +164,7 @@ <h1>loading</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip">
<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" /></svg>
-->
<svg id="down" style="transform: rotate(90deg);" fill="currentColor" width="30" height="30" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M6.185 4.843l11.927 7.157-11.927 7.157 2.982-7.157-2.982-7.157zm-4.185-4.843l5 12-5 12 20-12-20-12z"/>
</svg>

<textarea id="to_send" placeholder="Type something here..."></textarea>
<button style="background-color:rgb(0,0,0, 0.01); border: 0px; transform: rotate(90deg);" id="send">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"></path></svg>
Expand Down
173 changes: 124 additions & 49 deletions javascript/home.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function encodeHTML(s) {
return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/>/g, '&gt;');
return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/>/g, '&gt;').replace(/"/g, '&Prime;').replace(/'/g, '&prime;');
}

/*if (sessionStorage.getItem("id") == null || sessionStorage.getItem("id") == "" || sessionStorage.getItem("id") == "undefined") {
Expand All @@ -10,8 +10,8 @@ var conn = new WebSocket(`ws://localhost:4000?id=${1}`);

// Attach an error listener to the WebSocket object
conn.addEventListener('error', function(event) {
console.log('WebSocket error:', event);
console.log("error ocours in conection");
//console.log('WebSocket error:', event);
//console.log("error ocours in conection");
$("#error").html("There was an error in your conection to the server, or the devs forget to turn the server on...");
});

Expand Down Expand Up @@ -42,7 +42,7 @@ colors.forEach(color => {
colorns[0].classList.add('selected');
colorns[1].classList.add('selected');
localStorage.setItem('color', color.getAttribute('data-color'));
//console.log(localStorage.getItem('color'))
////console.log(localStorage.getItem('color'))
});
});

Expand Down Expand Up @@ -122,13 +122,15 @@ function select(id) {
document.getElementById("search").setAttribute("data-grp", "yes");
document.getElementById("search2").setAttribute("data-grp", "yes");
} else {
conn.send({

conn.send(JSON.stringify({
act: "request", ctx: "msg", chat: id
});
}));

document.getElementById("search").setAttribute("data-grp", "no");
document.getElementById("search2").setAttribute("data-grp", "no");
}
//console.log('hovered');
////console.log('hovered');
}
}
/* messages */
Expand Down Expand Up @@ -172,22 +174,21 @@ function notification(id) {
document.getElementById('Adicionar').addEventListener('blur', leave);

conn.onopen = () => {
conn.send(JSON.stringify({
/*conn.send(JSON.stringify({
act: "request", ctx: "msg", chat: "3"
}));
}));*/
}

conn.onmessage = function(e) {
var data = JSON.parse(e.data)
//console.log(data);
console.log(data.status);
console.log(JSON.stringify(data, null, 2))

////console.log(JSON.stringify(data, null, 1))

if (data.status == "success") {

if (data.ctx === "loadChat") {

data.msgs.forEach(msg => {
console.log(msg, "\n")

document.getElementById("result").innerHTML += buildMsg(msg, data.reqId, data.chat);

Expand All @@ -201,21 +202,25 @@ conn.onmessage = function(e) {
//document.getElementById("loader").style.display = "none";
document.getElementById("to_send").focus();

} else if (data.ctx === "userList") {

document.querySelectorAll("users").forEach(usrBox => {
} else if(data.act == "firstLoad" && data.ctx == "user"){

//console.log(JSON.stringify(data, null, 2))

document.querySelectorAll(".users").forEach(usrBox => {
//console.log("u")
data.users.forEach(user => {
usrBox.innerHTML += user;
//console.log("uu")
usrBox.innerHTML += buildUser(user);
})
})

} else if (data.act === "response" && data.ctx === "msg") {
} else if (data.act === "update" && data.ctx === "msg") {

var id = data.msg_id;
var id_ = data.id;
var id = data.id;
var id_ = data.msg_id;

if (data.ctxStatus === "success") {
console.log(e.data);
//console.log(e.data);
document.getElementById(id).style.color = "";
document.getElementById(id).setAttribute("id", "msg_"+id_);
} else if (data.ctxStatus === "fail") {
Expand All @@ -232,7 +237,7 @@ conn.onmessage = function(e) {
}

} else if (data.act === "request" && e.data.ctx === "id") {
console.log(data)
//console.log(data)
conn.send({
act: "response", ctx: "register", id: document.getElementById('user').getAttribute('data-User-Id')});

Expand All @@ -243,10 +248,10 @@ conn.onmessage = function(e) {
let from = data.from;
let date = data.date;
let msg = data.msg;
console.log("-----");
console.log("recieving message: "+msg);
console.log("from: "+from);
console.log("-----");
//console.log("-----");
//console.log("recieving message: "+msg);
//console.log("from: "+from);
//console.log("-----");
// notification(from);


Expand Down Expand Up @@ -305,7 +310,7 @@ conn.onmessage = function(e) {
}
};

//console.log(e.message);
////console.log(e.message);



Expand All @@ -324,17 +329,35 @@ function add() {
var to = document.getElementById('result').getAttribute('data-Current-User-id');
var id = document.getElementById('user').getAttribute('data-User-Id');
var date = moment().format('YYYY-MM-DD H:mm:ss');
var msg_id = moment().format('H:mm:ss');

conn.send({
act: "send", ctx: "msg", msg: msg, to: to, user: id, date: date, msg_date: moment().format("H:mm"), msg_id: msg_id
});

console.log(msg);

var msg_id = new Date().getTime();

conn.send(JSON.stringify({
act: "send",
ctx: "msg",
msg: msg,
to: to,
user: id,
date: date,
msg_date: moment().format("H:mm"),
msg_id: msg_id
}));

msg = msg.replace(/\n/g, "<br>");
document.getElementById('result').innerHTML += "<div class='chat-msg owner'><div class='chat-msg-profile'><img class='chat-msg-img' src='images/default.png' alt=''><div class='chat-msg-date'>" + moment().format('H:mm') +"</div></div><div class='chat-msg-content'><div class='chat-msg-text' style='color: gray' id='"+msg_id+"'>" + msg + "</div></div></div>";
document.getElementById('result').innerHTML += `
<div class='chat-msg owner'>
<div class='chat-msg-profile'>
<img class='chat-msg-img' src='images/default.png' alt=''>
<div class='chat-msg-date'>
${timeSince(new Date(), "msg")}
</div>
</div>
<div class='chat-msg-content'>
<div class='chat-msg-text' style='color: lightgray' id='${msg_id}'>
${msg}
</div>
</div>
</div>`;

var objDiv = document.getElementById('result');
objDiv.scrollTop = objDiv.scrollHeight;
}
Expand Down Expand Up @@ -388,7 +411,7 @@ function check() {
gr.style.display = "none";
checked = true;
}
console.log(checked);
//console.log(checked);
}

$('#search').keyup(function() {
Expand Down Expand Up @@ -468,59 +491,111 @@ function leave() {
function buildMsg(msg, id, chat) {
var date = new Date();
msg.date = new Date(msg.date);
msg.date = timeSince(msg.date, "msg");

/* if(date == msg.date){
if(date.getFullYear() == msg.date.getFullYear){}
}
*/

if (msg.sender == id) {

var r =`
<div class='chat-msg owner group'>
<div class='chat-msg-profile'>
<img class='chat-msg-img' src='images/default.png' alt=''>
<div class='chat-msg-date'>${msg.date}</div>
</div>
<div class='chat-msg-content'>
<div id='msg_${msg.id}' class='chat-msg-text'>${msg.message.replace("\n", "<br>")}</div>
<div id='msg_${msg.msg_id}' class='chat-msg-text'>${msg.message.replace("\n", "<br>")}</div>
</div>
</div>
`;

return r;
}

if (msg.sender != id) {
var r = `
<div class='chat-msg'>
<div class='chat-msg-profile'>
<img class='chat-msg-img' src='${msg.img}' alt=''>
<div class='chat-msg-date'>${msg.date}</div>
</div>
<div class='chat-msg-content'>
<span>${chat}</span>
<div id='${msg.id}' class='chat-msg-text'>${msg.message.replace("\n", "<br>")}</div>
<span class='username'>${chat}</span>
<div id='${msg.msg_id}' class='chat-msg-text'>${msg.message.replace("\n", "<br>")}</div>
</div>
</div>
`;

return r;
}

}


return "o";
function buildUser(user){
var date = timeSince(user.lastMsg.date)
var r = `
<div onClick='select(${user.id})' data-Username='${user.Name}' id='usr${user.id}' class='msg ${status} ${user.group} usr${user.id}' data-img='${user.Image || "./imagens/default.png"}'>
<img class='msg-profile' src='${user.Image}' alt='' />
<div class='msg-detail'>
<div class='msg-username'>${user.Name}</div>
<div class='msg-content'>
<span class='msg-message usr".$row1["id"]."-cont'>${ user.lastMsg.sender == user.id ? user.lastMsg.message : "You: " + user.lastMsg.message}</span>
<span class='msg-date usr${user.id}-date' data-date='${date}' data-count='${user.unseen}' >${date}
<span style='${user.unseen > 0 ? "" : "display:none"}' class='new-msgs msg-${user.id}'>${user.unseen}</span>
</span>
</div>
</div>
</div>`;

return r;
/*
$return .= "
<button class='add' data-bs-toggle='offcanvas' data-bs-target='#add'></button>
<div class='overlay'></div>
";
*/
}


function get(s){
localStorage.getItem(s)
}


function set(s, v){
localStorage.setItem(s, v)
}


function timeSince(date, msg){

if (!msg){

let now = new Date().getTime();
let msgTime = new Date(date).getTime();
date = new Date(date)

var s = Math.floor( ( now - msgTime ) / 1000 );
var m = Math.floor( s / 60 );
var h = Math.floor( m / 60 );
var d = Math.floor( h / 24 );

if(d > 1){

return date.toLocaleString('en-GB').split(",")[0];

} else {

let h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
let m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();

return h == 24 ? "ontem" : `${h}:${m}`;
}

} else {

let h = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
let m = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();

return h+":"+m;
}
}
Loading

0 comments on commit aa49621

Please sign in to comment.