2019-10-02 16:25:46 +00:00
<!DOCTYPE html>
< html xmlns:th = "http://www.thymeleaf.org" >
< head >
2019-10-15 05:28:56 +00:00
< script src = "https://code.jquery.com/jquery-2.1.4.min.js" th:if = "false" > < / script >
< script src = "http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer = "defer" th:if = "false" > < / script >
< div th:replace = "fragments/head :: headFragment" >
< meta charset = "UTF-8" >
< title id = "pageTitle" > Chat< / title >
< / div >
2020-01-15 11:12:22 +00:00
< script src = "./../../javascript/bundle.js" th:src = "@{'/js/' + ${@environment.getProperty('chat-bundle')}}" defer > < / script >
2019-12-07 06:01:42 +00:00
< link rel = "stylesheet" th:href = "@{/css/chat.css}" href = "../../resources/static/css/chat.css" >
2019-10-02 16:25:46 +00:00
< / head >
< body >
2019-10-15 05:28:56 +00:00
< div th:include = "fragments/navbar :: navbarFragment" > < / div >
2020-05-29 13:20:59 +00:00
< header id = "chat-section" hidden >
2019-10-15 05:28:56 +00:00
< div class = "dark-overlay" >
< div class = "chat-inner container bg-primary" >
< div class = "row" >
< div class = "col-sm d-lg-block" >
< h1 class = "display-4" > Chat with your friends< / h1 >
< div class = "d-flex" >
< div class = "p-4 align-self-start" >
< / div >
< div class = "p-4 align-self-end" >
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam dolorem nostrum consequatur eos voluptates. Ipsam ullam quos illo qui. Quaerat corrupti nisi numquam rerum quasi nesciunt deserunt fugit commodi consequatur!
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / header >
2019-11-05 09:59:19 +00:00
< div class = "container-fluid h-100" >
2019-11-05 16:18:13 +00:00
< div class = "row justify-content-center h-100 mt-3" >
2019-11-05 09:59:19 +00:00
< div class = "col-md-4 col-xl-3 chat" >
< div class = "card mb-sm-3 mb-md-0 contacts_card" >
< div class = "card-header" >
2019-11-29 19:13:50 +00:00
< form action = "#" id = "user-search" >
< div class = "input-group" >
< input type = "text" placeholder = "Search..." id = "user-search-term" class = "form-control search" >
< button class = "search-cancel" id = "user-search-cancel" hidden > < i class = "fas fa-times" > < / i > < / button >
< div class = "input-group-prepend" >
< button class = "input-group-text search_btn" > < i class = "fas fa-search" > < / i > < / button >
< / div >
2019-11-05 09:59:19 +00:00
< / div >
2019-11-29 19:13:50 +00:00
< / form >
2019-11-05 09:59:19 +00:00
< / div >
< div class = "card-body contacts_body" >
2019-11-29 19:13:50 +00:00
< ui class = "contacts" id = "contacts-box" >
2019-11-13 14:10:02 +00:00
< th:block th:each = "au: ${activeUsers}" >
2019-11-05 11:18:29 +00:00
< li name = "user-box" class = "user-box" >
2019-11-05 09:59:19 +00:00
< div class = "d-flex bd-highlight" >
< div class = "img_cont" >
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class = "rounded-circle user_img" >
2019-11-13 14:10:02 +00:00
< span th:if = "${au.online == true}" class = "online_icon" > < / span >
2019-11-05 09:59:19 +00:00
< / div >
< div class = "user_info" >
2019-11-17 05:21:44 +00:00
< span class = "to-user-span" th:text = "${au.userName}" > Khalid< / span >
2019-11-13 14:10:02 +00:00
< div th:switch = "${au.online}" >
< p th:case = "true" th:text = "${au.userName} + ' is online'" > Khalid is online< / p >
< th:block th:case = "false" >
2019-11-29 19:13:50 +00:00
< th:block th:if = "${au.lastActive == null}" >
2019-11-13 14:10:02 +00:00
< p th:text = "'User has not logged in yet'" > < / p >
< / th:block >
< th:block th:if = "${au.lastActive != null}" >
2019-11-13 15:04:31 +00:00
< p th:text = "'Last active ' + ${au.lastActive}" > Last active 3 hours ago< / p >
2019-11-13 14:10:02 +00:00
< / th:block >
<!-- <p th:case="${au.online == true}" th:text="${au.userName} + ' is online'">Khalid is online</p>
< p th:if = "${au.online == false}" th:text = "${au.userName} + ' is offline' + ' Last active = ' + ${au.lastActive}" > Khalid is offline. -->
<!-- <span th:text="'Last active = ' + ${au.lastActive}"></span> -->
< / th:block >
< / div >
2019-11-05 09:59:19 +00:00
< / div >
2019-11-06 05:01:48 +00:00
< div class = "d-flex flex-column ml-auto" >
< div class = "text-right" > Dec 25< / div >
< div style = "color: rgba(255,255,255,0.7);" > Hello how are you< / div >
< / div >
2019-11-05 09:59:19 +00:00
< / div >
< / li >
< / th:block >
< / ui >
< / div >
< div class = "card-footer" > < / div >
< / div >
< / div >
< div class = "col-md-8 col-xl-6 chat" >
2019-11-05 16:18:13 +00:00
< div class = "card" id = "no-user-selected" >
< div class = "m-auto" >
< div class = "d-flex justify-content-center" >
< div class = "align-self-center" >
< h2 class = "display-4 no-user-selected-h2" > Please select a user< / h2 >
< / div >
< / div >
< / div >
< / div >
< div class = "card" id = "chat-card" hidden >
2019-11-05 09:59:19 +00:00
< div class = "card-header msg_head" >
< div class = "d-flex bd-highlight" >
< div class = "img_cont" >
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class = "rounded-circle user_img" >
2019-12-12 12:53:41 +00:00
<!-- <span class="online_icon"></span> -->
2019-11-05 09:59:19 +00:00
< / div >
< div class = "user_info" >
2019-11-05 16:18:13 +00:00
< span id = "user-name-span" > Chat with Khalid< / span >
< p id = "num-messages-p" > 1767 Messages< / p >
2019-11-05 09:59:19 +00:00
< / div >
< div class = "video_cam" >
< span > < i class = "fas fa-video" > < / i > < / span >
< span > < i class = "fas fa-phone" > < / i > < / span >
< / div >
< / div >
< span id = "action_menu_btn" > < i class = "fas fa-ellipsis-v" > < / i > < / span >
< div class = "action_menu" >
< ul >
< li > < i class = "fas fa-user-circle" > < / i > View profile< / li >
< li > < i class = "fas fa-users" > < / i > Add to close friends< / li >
< li > < i class = "fas fa-plus" > < / i > Add to group< / li >
< li > < i class = "fas fa-ban" > < / i > Block< / li >
< / ul >
< / div >
< / div >
2019-12-07 06:01:42 +00:00
< div class = "card-body msg_card_body" id = "chat-area-new" >
2019-11-05 09:59:19 +00:00
< / div >
< div class = "card-footer" >
2019-11-06 14:12:43 +00:00
< form action = "#" th:object = "${chatMessageDTO}" method = "post" id = "chatMessageForm" class = "needs-validation" novalidate >
< div class = "input-group" >
< div class = "input-group-append" >
< span class = "input-group-text attach_btn" > < i class = "fas fa-paperclip" > < / i > < / span >
< / div >
< textarea name = "" id = "chatInput" class = "form-control type_msg" placeholder = "Type your message..." required > < / textarea >
< div class = "input-group-append" >
< button class = "input-group-text send_btn" > < i class = "fas fa-location-arrow" > < / i > < / button >
< / div >
2019-11-05 09:59:19 +00:00
< / div >
2019-11-06 14:12:43 +00:00
< / form >
2019-11-05 09:59:19 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
< template id = "msg_container_template" >
< div class = "d-flex justify-content-start mb-4" >
< div class = "img_cont_msg" >
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class = "rounded-circle user_img_msg" >
< / div >
2019-12-13 11:37:13 +00:00
< div class = "msg msg_container" >
2019-11-05 09:59:19 +00:00
{{{message}}}
2020-02-01 10:56:27 +00:00
< span class = "msg_time" > {{msgDateFormat messageTime}}< / span >
2019-11-05 09:59:19 +00:00
< / div >
< / div >
< / template >
2019-10-02 16:25:46 +00:00
2019-11-05 09:59:19 +00:00
< template id = "msg_container_send_template" >
< div class = "d-flex justify-content-end mb-4" >
2019-12-13 11:37:13 +00:00
< div class = "msg msg_container_send" >
2019-11-05 09:59:19 +00:00
{{{message}}}
2020-02-01 10:56:27 +00:00
< span class = "msg_time_send" > {{msgDateFormat messageTime}}< / span >
2019-11-05 09:59:19 +00:00
< / div >
<!-- <div class="img_cont_msg">
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img_msg">
< / div > -->
{{{avatar}}}
< / div >
< / template >
2019-10-02 16:25:46 +00:00
2019-11-29 19:13:50 +00:00
< template id = "user-contact-online-template" >
< li name = "user-box" class = "user-box" >
< div class = "d-flex bd-highlight" >
< div class = "img_cont" >
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class = "rounded-circle user_img" >
< span class = "online_icon" > < / span >
< / div >
< div class = "user_info" >
2020-02-14 13:48:22 +00:00
< span class = "to-user-span" > {{userName}}< / span > < span > {{{lockIcon unlocked}}}< / span >
2019-11-29 19:13:50 +00:00
< p > {{userName}} is online< / p >
< / div >
< div class = "d-flex flex-column ml-auto" >
2020-03-19 06:24:30 +00:00
< div class = "text-right" > {{moment lastMessageTime "MMM DD"}}< / div >
< div style = "color: rgba(255,255,255,0.7);" > {{lastMessageText}}< / div >
2019-11-29 19:13:50 +00:00
< / div >
< / div >
< / li >
< / template >
< template id = "user-contact-offline-template" >
< li name = "user-box" class = "user-box" >
< div class = "d-flex bd-highlight" >
< div class = "img_cont" >
< img src = "https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class = "rounded-circle user_img" >
< / div >
< div class = "user_info" >
2020-02-14 13:48:22 +00:00
< span class = "to-user-span" > {{userName}}< / span > < span > {{{lockIcon unlocked}}}< / span >
2020-02-01 10:56:27 +00:00
< p > Last active {{fromNow lastActive}}< / p >
2019-11-29 19:13:50 +00:00
< / div >
< div class = "d-flex flex-column ml-auto" >
2020-03-19 06:24:30 +00:00
< div class = "text-right" > {{moment lastMessageTime "MMM DD"}}< / div >
< div style = "color: rgba(255,255,255,0.7);" > {{lastMessageText}}< / div >
2019-11-29 19:13:50 +00:00
< / div >
< / div >
< / li >
< / template >
2019-10-02 16:25:46 +00:00
< / body >
2019-10-15 05:28:56 +00:00
< script src = "../static/js/chatStatic.js" th:if = "false" > < / script >
2020-05-28 14:56:04 +00:00
< / html >