diff --git a/chatto/src/main/resources/static/css/chat.css b/chatto/src/main/resources/static/css/chat.css new file mode 100644 index 0000000..e29194f --- /dev/null +++ b/chatto/src/main/resources/static/css/chat.css @@ -0,0 +1,265 @@ +body, +html { + height: 100%; + margin: 0; + background: #7F7FD5; + background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); + background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); +} + +.chat { + margin-top: auto; + margin-bottom: auto; +} + +.card { + height: 500px; + border-radius: 15px !important; + background-color: rgba(0, 0, 0, 0.4) !important; +} + +.contacts_body { + padding: 0.75rem 0 !important; + overflow-y: auto; + white-space: nowrap; +} + +.msg_card_body { + overflow-y: auto; +} + +.card-header { + border-radius: 15px 15px 0 0 !important; + border-bottom: 0 !important; +} + +.card-footer { + border-radius: 0 0 15px 15px !important; + border-top: 0 !important; +} + +.container { + align-content: center; +} + +.search { + border-radius: 15px 0 0 15px !important; + background-color: rgba(0, 0, 0, 0.3) !important; + border: 0 !important; + color: white !important; +} + +.search:focus { + box-shadow: none !important; + outline: 0px !important; +} + +.type_msg { + background-color: rgba(0, 0, 0, 0.3) !important; + border: 0 !important; + color: white !important; + height: 60px !important; + overflow-y: auto; +} + +.type_msg:focus { + box-shadow: none !important; + outline: 0px !important; +} + +.attach_btn { + border-radius: 15px 0 0 15px !important; + background-color: rgba(0, 0, 0, 0.3) !important; + border: 0 !important; + color: white !important; + cursor: pointer; +} + +.send_btn { + border-radius: 0 15px 15px 0 !important; + background-color: rgba(0, 0, 0, 0.3) !important; + border: 0 !important; + color: white !important; + cursor: pointer; +} + +.search_btn { + border-radius: 0 15px 15px 0 !important; + background-color: rgba(0, 0, 0, 0.3) !important; + border: 0 !important; + color: white !important; + cursor: pointer; +} + +.contacts { + list-style: none; + padding: 0; +} + +.contacts li { + width: 100% !important; + padding: 5px 10px; + margin-bottom: 15px !important; +} + +.active { + background-color: rgba(0, 0, 0, 0.3); +} + +.user_img { + height: 70px; + width: 70px; + border: 1.5px solid #f5f6fa; +} + +.user_img_msg { + height: 40px; + width: 40px; + border: 1.5px solid #f5f6fa; +} + +.img_cont { + position: relative; + height: 70px; + width: 70px; +} + +.img_cont_msg { + height: 40px; + width: 40px; +} + +.online_icon { + position: absolute; + height: 15px; + width: 15px; + background-color: #4cd137; + border-radius: 50%; + bottom: 0.2em; + right: 0.4em; + border: 1.5px solid white; +} + +.offline { + background-color: #c23616 !important; +} + +.user_info { + margin-top: auto; + margin-bottom: auto; + margin-left: 15px; +} + +.user_info span { + font-size: 20px; + color: white; +} + +.user_info p { + font-size: 10px; + color: rgba(255, 255, 255, 0.6); +} + +.video_cam { + margin-left: 50px; + margin-top: 5px; +} + +.video_cam span { + color: white; + font-size: 20px; + cursor: pointer; + margin-right: 20px; +} + +.msg_container { + margin-top: auto; + margin-bottom: auto; + margin-left: 10px; + border-radius: 25px; + background-color: #82ccdd; + padding: 10px; + position: relative; + min-width: 100px; + text-align: center; +} + +.msg_container_send { + margin-top: auto; + margin-bottom: auto; + margin-right: 10px; + border-radius: 25px; + background-color: #78e08f; + padding: 10px; + position: relative; + min-width: 100px; + text-align: center; +} + +.msg_time { + position: absolute; + left: 0; + bottom: -15px; + color: rgba(255, 255, 255, 0.5); + font-size: 10px; +} + +.msg_time_send { + position: absolute; + right: 0; + bottom: -15px; + color: rgba(255, 255, 255, 0.5); + font-size: 10px; +} + +.msg_head { + position: relative; +} + +#action_menu_btn { + position: absolute; + right: 10px; + top: 10px; + color: white; + cursor: pointer; + font-size: 20px; +} + +.action_menu { + z-index: 1; + position: absolute; + padding: 15px 0; + background-color: rgba(0, 0, 0, 0.5); + color: white; + border-radius: 15px; + top: 30px; + right: 15px; + display: none; +} + +.action_menu ul { + list-style: none; + padding: 0; + margin: 0; +} + +.action_menu ul li { + width: 100%; + padding: 10px 15px; + margin-bottom: 5px; +} + +.action_menu ul li i { + padding-right: 10px; +} + +.action_menu ul li:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.2); +} + +@media(max-width: 576px) { + .contacts_card { + margin-bottom: 15px !important; + } +} \ No newline at end of file diff --git a/chatto/src/main/resources/static/js/chat.js b/chatto/src/main/resources/static/js/chat.js index 65a2024..11a9e40 100644 --- a/chatto/src/main/resources/static/js/chat.js +++ b/chatto/src/main/resources/static/js/chat.js @@ -27,12 +27,22 @@ var username = sessionStorage.getItem('username'); var password = sessionStorage.getItem('password'); var authToken = 'Basic ' + btoa(username + ":" + password); var iterations = 100000; + +var source = document.getElementById("msg_container_template").innerHTML; +var msgContainerTemplate = Handlebars.compile(source); +var source = document.getElementById("msg_container_send_template").innerHTML; +var msgContainerSendTemplate = Handlebars.compile(source); + +var chatAreaNew = document.getElementById('chat_area_new'); + // var lastMessageTimeStamp; // console.log(authToken); // 'Basic ' + btoa("hmm" + ":" + "hmm") - +Handlebars.registerHelper('avatar', function() { + return '
'; +}); // var user; @@ -202,11 +212,13 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { console.log(this.value); if (sessionStorage.getItem(this.value) == null) { chatTextArea.textContent = ''; + chatAreaNew.innerHTML = ''; getAllMessages(this.value) .then(json => { console.log(json); let i = 0; let messageLog = []; + let messageLogNew = []; let lastMessageTimeStamp; // console.log("Json length = " + json.length); // @@ -226,6 +238,7 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { let localDate = new Date(utcDate); let messageLine = sprintf('%s %s: %s ', localDate, obj.fromUser, message); + // localDate.`` // console.log('localDate = ' + localDate); console.log(messageLine); @@ -235,9 +248,22 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { chatTextArea.scrollTop = chatTextArea.scrollHeight; // console.log('Message log = ' + messageLog); + let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() }; + let msgContainer; + if (obj.fromUser == username) { + msgContainer = msgContainerSendTemplate(context); + } else { + msgContainer = msgContainerTemplate(context); + } + + messageLogNew.push(JSON.stringify(context)); + $(chatAreaNew).append(msgContainer); + }); sessionStorage.setItem(this.value, JSON.stringify(messageLog)); + sessionStorage.setItem(this.value + 'new', JSON.stringify(messageLogNew)); + // console.log() // sessionStorage.clear(); console.log('Last message time = ' + lastMessageTimeStamp); sessionStorage.setItem(this.value + '-time', lastMessageTimeStamp); @@ -250,6 +276,7 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { console.log("Stored messages = " + sessionStorage.getItem(this.value)); let storedMessages = JSON.parse(sessionStorage.getItem(this.value)); + let storedMessagesNew = JSON.parse(sessionStorage.getItem(this.value + 'new')); let lastMessageTime = sessionStorage.getItem(this.value + '-time'); console.log("last message time stamp = " + lastMessageTime); if (lastMessageTime != null) { @@ -275,19 +302,56 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { chatTextArea.scrollTop = chatTextArea.scrollHeight; storedMessages.push(messageLine); + let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() }; + let msgContainer; + if (obj.fromUser == username) { + msgContainer = msgContainerSendTemplate(context); + } else { + msgContainer = msgContainerTemplate(context); + } + + storedMessagesNew.push(JSON.stringify(context)); + $(chatAreaNew).append(msgContainer); + }) sessionStorage.setItem(this.value + '-time', lastMessageTimeStamp); sessionStorage.setItem(this.value, JSON.stringify(storedMessages)); + sessionStorage.setItem(this.value+'new', JSON.stringify(storedMessagesNew)); console.log("this value stored" + sessionStorage.getItem(this.value)) console.log("last message time stamp = " + lastMessageTimeStamp); console.log(sessionStorage.getItem(this.value + '-time')); } chatTextArea.textContent = ''; + chatAreaNew.innerHTML = ''; console.log("Stored messages 2 = " + storedMessages); storedMessages.forEach(function(messageLine) { chatTextArea.append(messageLine + '\n'); chatTextArea.scrollTop = chatTextArea.scrollHeight; + + // let context = {message: messageLine}; + // let msgContainer; + // if(obj.fromUser == username) + // { + // msgContainer = msgContainerSendTemplate(context); + // } + // else{ + // msgContainer = msgContainerTemplate(context); + // } + + // $(chatAreaNew).append(msgContainer); + }) + + storedMessagesNew.forEach(function(contextString) { + let context = JSON.parse(contextString); + let msgContainer; + if (context.fromUser == username) { + msgContainer = msgContainerSendTemplate(context); + } else { + msgContainer = msgContainerTemplate(context); + } + + $(chatAreaNew).append(msgContainer); }) @@ -310,4 +374,10 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) { }); -handleChatForm(); \ No newline at end of file +handleChatForm(); + +$(document).ready(function() { + $('#action_menu_btn').click(function() { + $('.action_menu').toggle(); + }); +}); \ No newline at end of file diff --git a/chatto/src/main/resources/templates/chat.html b/chatto/src/main/resources/templates/chat.html index a37c256..50fe2d4 100644 --- a/chatto/src/main/resources/templates/chat.html +++ b/chatto/src/main/resources/templates/chat.html @@ -11,6 +11,9 @@ Chat + + + @@ -40,10 +43,121 @@ +
+
+
+
+
+
+ +
+ +
+
+
+
+ +
  • +
    +
    + + +
    + +
    +
    • +     + + +
  • +
    +
    + + +
    + +
    +
    • +     +     +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + + +
    +
    + +
    +
      +
    • View profile
      • +
    • Add to close friends
      • +
    • Add to group
      • +
    • Block
      • +
    +
    +
    +
    +
    +
    + +
    +
    + Hi, how are you samim? + 8:40 AM, Today +
    +
    +
    +
    + Hi Khalid i am good tnx how about you? + 8:55 AM, Today +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +

    Chat

    @@ -97,7 +211,31 @@
    + +