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 >
2019-11-05 09:59:19 +00:00
< link rel = "stylesheet" th:href = "@{/css/chat.css}" href = "../static/css/chat.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js" > < / script >
2019-11-06 15:20:57 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.js" > < / script >
2019-11-07 03:59:53 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js" > < / script >
2019-10-15 05:28:56 +00:00
<!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->
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 >
< header id = "chat-section" >
< 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" >
< div class = "input-group" >
< input type = "text" placeholder = "Search..." name = "" class = "form-control search" >
< div class = "input-group-prepend" >
< span class = "input-group-text search_btn" > < i class = "fas fa-search" > < / i > < / span >
< / div >
< / div >
< / div >
< div class = "card-body contacts_body" >
< ui class = "contacts" >
< li class = "active" >
< 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" >
< span > Khalid< / span >
< p > Kalid is online< / p >
< / div >
< / div >
< / li >
< / ui >
< ui class = "contacts" >
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-13 14:10:02 +00:00
< span th:text = "${au.userName}" > Khalid< / span >
< div th:switch = "${au.online}" >
< p th:case = "true" th:text = "${au.userName} + ' is online'" > Khalid is online< / p >
< th:block th:case = "false" >
< th:block th:if = "${au.lastActive == null}" >
< p th:text = "'User has not logged in yet'" > < / p >
< / th:block >
< th:block th:if = "${au.lastActive != null}" >
< p th:text = "'Last active = ' + ${au.lastActive}" > Last active 3 hours ago< / p >
< / 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 >
2019-11-06 05:01:48 +00:00
2019-11-05 09:59:19 +00:00
< / 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 >
2019-11-06 14:12:43 +00:00
< input class = "form-control type_msg" size = "10" type = "password" id = "passphrase-initial" placeholder = "Passphrase " required >
2019-11-05 16:18:13 +00:00
< / 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" >
< span class = "online_icon" > < / span >
< / 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 >
< div class = "card-body msg_card_body" id = "chat_area_new" >
< 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 >
< div class = "msg_container" >
Hi, how are you samim?
< span class = "msg_time" > 8:40 AM, Today< / span >
< / div >
< / div >
< div class = "d-flex justify-content-end mb-4" >
< div class = "msg_container_send" >
Hi Khalid i am good tnx how about you?
< span class = "msg_time_send" > 8:55 AM, Today< / span >
< / div >
< div class = "img_cont_msg" >
2019-11-05 16:18:13 +00:00
< img src = "" class = "rounded-circle user_img_msg" >
2019-11-05 09:59:19 +00:00
< / div >
< / div >
< / 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 >
< input class = "form-control type_msg" size = "10" type = "password" id = "passphrase" placeholder = "Passphrase " required >
< 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 >
2019-11-06 14:12:43 +00:00
< section hidden >
2019-10-15 05:28:56 +00:00
< div class = "container" >
< div class = "row" >
< div class = "col-sm" >
2019-11-05 09:59:19 +00:00
2019-10-15 05:28:56 +00:00
< h4 class = "display-4 text-center py-2" > Chat< / h4 >
2019-10-22 12:12:18 +00:00
< div class = "card text-white bg-primary mb-3 card-form rounded mx-auto" >
2019-10-15 05:28:56 +00:00
< div class = "card-body rounded" >
<!-- <h4 class="card - title">Chat</h4> -->
< div class = "form-group" >
< textarea id = "chatTextArea" class = "form-control-lg py-2" disabled > < / textarea >
< / div >
<!-- <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post"> -->
<!-- th:action="@{/api/chat}" -->
< div class = "card-text" >
< / div >
2019-11-06 14:12:43 +00:00
< form action = "#" th:object = "${chatMessageDTO}" method = "post" class = "needs-validation" novalidate >
2019-10-15 05:28:56 +00:00
< div class = "row" >
< div class = "col-3" >
< div class = "form-group" >
< label class = "lead" for = "toUser" > User to send to: < / label >
< th:block th:each = "userName: ${userNames}" >
< input class = "form-control" type = "radio" th:field = "*{toUser}" th:value = "${userName}" >
< label class = "btn btn-secondary" th:for = "${#ids.prev('toUser')}" th:text = "${userName}" >
2019-10-22 12:12:18 +00:00
Demo User
< / label >
2019-10-15 05:28:56 +00:00
< / th:block >
< / div >
< / div >
< div class = "col" >
< div class = "my-form-inputs container" >
< div class = "form-group" >
< label for = "chatInput" > Your message: < / label >
2019-11-06 14:12:43 +00:00
< textarea class = "form-control" type = "text" required > < / textarea >
2019-10-22 12:12:18 +00:00
< div class = "invalid-feedback" >
Cannot be empty
< / div >
2019-10-15 05:28:56 +00:00
< / div >
< div class = "form-group" >
< label for = "passphrase" > Passphrase: < / label >
2019-11-06 14:12:43 +00:00
< input class = "form-control" type = "password" required >
2019-10-15 05:28:56 +00:00
< / div >
2019-10-26 13:25:10 +00:00
< div class = "form-group text-center" >
< button class = "btn btn-secondary mx-auto" > Submit< / button >
2019-10-15 05:28:56 +00:00
< / div >
< / div >
< / div >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
2019-11-05 09:59:19 +00:00
< 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 >
< div class = "msg_container" >
{{{message}}}
< span class = "msg_time" > {{time}}< / span >
< / 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" >
< div class = "msg_container_send" >
{{{message}}}
< span class = "msg_time_send" > {{time}}< / span >
< / 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
< / body >
< script th:src = "@{js/chat.js}" type = "text/javascript" > < / script >
2019-10-15 05:28:56 +00:00
< script src = "../static/js/chatStatic.js" th:if = "false" > < / script >
2019-10-02 16:25:46 +00:00
< / html >
<!-- <div th:include="::frag (${value1},${value2})">...</div>
< div th:include = "::frag (onevar=${value1},twovar=${value2})" > ...< / div > -->
