Skip to content

Commit

Permalink
spacing and indentation changes for readability
Browse files Browse the repository at this point in the history
  • Loading branch information
@KaranErry
KaranErry committed Apr 15, 2019
1 parent 11bd1a3 commit 0dec1e1
Showing 1 changed file with 136 additions and 112 deletions.
248 changes: 136 additions & 112 deletions views/chat.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,63 @@
<style>
.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
background: none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}
.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
float: left;
width: 30%;
}
.chat_ib {
float: left;
padding: 10px 0 0 15px;
Expand All @@ -57,10 +70,12 @@ img{ max-width:100%;}
clear:both;
padding: 0 0 15px;
}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
}
.inbox_chat { height: 595px; overflow-y: scroll;}
.active_chat{
Expand All @@ -74,12 +89,14 @@ img{ max-width:100%;}
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg p {
background: #ebebeb none repeat scroll 0 0;
border-radius: 3px;
Expand All @@ -89,32 +106,38 @@ img{ max-width:100%;}
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 12px;
margin: 8px 0 0;
}
.received_withd_msg { width: 57%;}
.mesgs {
float: left;
padding: 30px 15px 0 25px;
width: 60%;
}
.sent_msg p {
.sent_msg p {
background: #05728f none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#fff;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 46%;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
Expand All @@ -125,6 +148,7 @@ img{ max-width:100%;}
}
.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
Expand All @@ -138,136 +162,136 @@ img{ max-width:100%;}
top: 11px;
width: 33px;
}
.messaging {
padding: 0 0 50px 0;
}
.msg_history {
height: 516px;
overflow-y: auto;
}
</style>

<br>
<h3 class=" text-center">Messaging</h3>
<h3 class=" text-center">Messaging</h3>

<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="inbox_chat">
<div class="chat_list">
{{# each chats }}
<div class="chat_people" threadId="{{this._id}}">
<span class="chat_img"> <img src="{{this.selectedImageUrl}}" alt="sunil"> </span>
<span class="chat_ib">
<input id = "threadId" type="hidden" class="form-control disabled" value="{{this._id}}">
{{#ifEquals this.selectedPersonSelling ../currentSession.passport.user._json.email}}
<h5>Interested buyer for "{{this.selectedPostTitle}}"<span class="chat_date">Dec 25</span></h5>
{{/ifEquals}}
{{#ifEquals this.dateChatStartedBy ../currentSession.passport.user._json.email}}
<h5>Seller of "{{this.selectedPostTitle}}"</h5><span class="chat_date">Dec 25</span>
{{/ifEquals}}
</span>
</div>
{{/each}}
</div>
<div class="inbox_msg">
<div class="inbox_people">
<div class="inbox_chat">
<div class="chat_list">
{{# each chats }}
<div class="chat_people" threadId="{{this._id}}">
<span class="chat_img"> <img src="{{this.selectedImageUrl}}" alt="sunil"> </span>
<span class="chat_ib">
<input id = "threadId" type="hidden" class="form-control disabled" value="{{this._id}}">
{{#ifEquals this.selectedPersonSelling ../currentSession.passport.user._json.email}}
<h5>Interested buyer for "{{this.selectedPostTitle}}"<span class="chat_date">Dec 25</span></h5>
{{/ifEquals}}
{{#ifEquals this.dateChatStartedBy ../currentSession.passport.user._json.email}}
<h5>Seller of "{{this.selectedPostTitle}}"</h5><span class="chat_date">Dec 25</span>
{{/ifEquals}}
</span>
</div>
{{/each}}
</div>
<div class="mesgs">
<input id = "username" type="hidden" class="form-control disabled" value="{{currentSession.passport.user._json.email}}">
<div class="msg_history">
<div id="chatroom" class="outgoing_msg">
<div id="feedback" class="sent_msg">
</div>
</div>
</div>
<div id="input_zone" class="type_msg">
<div class="input_msg_write">
<input id="message" type="text" class="write_msg" placeholder="Type a message" />
<button id="send_message" class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
<div class="mesgs">
<input id = "username" type="hidden" class="form-control disabled" value="{{currentSession.passport.user._json.email}}">
<div class="msg_history">
<div id="chatroom" class="outgoing_msg">
<div id="feedback" class="sent_msg">
</div>
</div>
</div>
</div>
<div id="input_zone" class="type_msg">
<div class="input_msg_write">
<input id="message" type="text" class="write_msg" placeholder="Type a message" />
<button id="send_message" class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>

<script>
var socket = io.connect();
$(() => {
// When send is pressed, get imporant values and run sendMessage function to save to DB
$("#send_message").click(() => {
var threadId = window.sessionStorage.getItem('currentThread');
if (threadId) {
var chatMessage = {
name: $("#username").val(), chat: $("#message").val(), thread: threadId
}
sendMessage(chatMessage);
}
});
// if a thread is selected show the messages specific to that thread
$('.chat_people').click(function(){
console.log('Thread Clicked');
var threadId = $(this).attr('threadId'); // Get thread id
selectThread(threadId);
})
if ('{{preselectedThread}}') {
selectThread('{{preselectedThread}}');
}
})
// when messages are sent send to function to display
socket.on('message', addMessages)
socket.on('allMessages', addAllMessages)
function selectThread(threadId) {
console.log('Thread Selected');
// Save thread id to session storage
window.sessionStorage.setItem('currentThread', threadId); // set thread id in session
$("#chatroom").empty();
// Modify UI to visually select the thread
$(`.chat_people[threadId='${threadId}']`).addClass('active_chat');
$(`.chat_people[threadId!='${threadId}']`).removeClass('active_chat');
sendInfoForMessages(threadId);
}
// if user presses send button, it will send to post function and save to DB
function sendMessage(chatMessage){
var senderName = chatMessage.name;
var message = chatMessage.chat;
var threadId = chatMessage.thread;
<script>
var socket = io.connect();
$(() => {
// When send is pressed, get imporant values and run sendMessage function to save to DB
$("#send_message").click(() => {
var threadId = window.sessionStorage.getItem('currentThread');
if (threadId) {
var chatMessage = {
name: $("#username").val(), chat: $("#message").val(), thread: threadId
}
sendMessage(chatMessage);
}
});
// if a thread is selected show the messages specific to that thread
$('.chat_people').click(function(){
console.log('Thread Clicked');
var threadId = $(this).attr('threadId'); // Get thread id
selectThread(threadId);
})
if ('{{preselectedThread}}') {
selectThread('{{preselectedThread}}');
}
})
// when messages are sent send to function to display
socket.on('message', addMessages)
socket.on('allMessages', addAllMessages)
function selectThread(threadId) {
console.log('Thread Selected');
// Save thread id to session storage
window.sessionStorage.setItem('currentThread', threadId); // set thread id in session
$("#chatroom").empty();
// Modify UI to visually select the thread
$(`.chat_people[threadId='${threadId}']`).addClass('active_chat');
$(`.chat_people[threadId!='${threadId}']`).removeClass('active_chat');
sendInfoForMessages(threadId);
}
// if user presses send button, it will send to post function and save to DB
function sendMessage(chatMessage){
var senderName = chatMessage.name;
var message = chatMessage.chat;
var threadId = chatMessage.thread;
console.log(senderName, message, threadId);
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/chat/messages", true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("senderName="+senderName+"&message="+message+"&threadId="+threadId);
}
// display messages sent on message dialog
function addMessages(message){
$("#chatroom").append("<p class='message'>" + $("#username").val()+ ": " + $("#message").val()+ "</p>")
$("#message").val(" ");
}
function addAllMessages(message){
var messagesArray= message[0].messages;
var i;
for (i in messagesArray) {
console.log(JSON.stringify(messagesArray[i]));
message= JSON.stringify(messagesArray[i].message);
byWho = JSON.stringify(messagesArray[i].byWho);
$("#chatroom").append("<p class='message'>"+eval(byWho)+": "+eval(message)+"</p>");
}
console.log(senderName, message, threadId);
$("#message").val(" ");
}
// sends get request to server to get thread messages when the radio button is selected
function sendInfoForMessages(threadId){
console.log("Inside getMessages:",threadId);
var xhttp = new XMLHttpRequest();
xhttp.open('POST', '/chat/messages/getInfo', true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send('threadId='+threadId);
}
</script>
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/chat/messages", true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("senderName="+senderName+"&message="+message+"&threadId="+threadId);
}
// display messages sent on message dialog
function addMessages(message){
$("#chatroom").append("<p class='message'>" + $("#username").val()+ ": " + $("#message").val()+ "</p>")
$("#message").val(" ");
}
function addAllMessages(message){
var messagesArray= message[0].messages;
var i;
for (i in messagesArray) {
console.log(JSON.stringify(messagesArray[i]));
message= JSON.stringify(messagesArray[i].message);
byWho = JSON.stringify(messagesArray[i].byWho);
$("#chatroom").append("<p class='message'>"+eval(byWho)+": "+eval(message)+"</p>");
}
$("#message").val(" ");
}
// sends get request to server to get thread messages when the radio button is selected
function sendInfoForMessages(threadId){
console.log("Inside getMessages:",threadId);
var xhttp = new XMLHttpRequest();
xhttp.open('POST', '/chat/messages/getInfo', true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send('threadId='+threadId);
}
</script>

0 comments on commit 0dec1e1

Please sign in to comment.