You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
9.4 KiB
202 lines
9.4 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
|
|
<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>
|
|
<script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-bundle')}}"
|
|
defer></script>
|
|
<script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-worker-bundle')}}"
|
|
defer></script>
|
|
<link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div th:include="fragments/navbar :: navbarFragment"></div>
|
|
<header id="chat-section" hidden>
|
|
<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>
|
|
<div class="container-fluid h-100 mt-4 pt-4">
|
|
<div class="row justify-content-center h-100 mt-3">
|
|
<div class="col-md-4 col-xl-3 chat">
|
|
<div class="card mb-sm-3 mb-md-0 contacts_card chat-height" id="contactsCard">
|
|
<div class="card-header">
|
|
<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>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-body contacts_body">
|
|
<ui class="contacts" id="contacts-box">
|
|
<li class="text-center ">
|
|
<div class="spinner-grow spinner-grow-lg text-info "
|
|
style="width: 100px; height: 100px;"></div>
|
|
</li>
|
|
</ui>
|
|
</div>
|
|
<div class="card-footer"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 col-xl-6 chat">
|
|
<div class="card chat-height" 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 chat-height" id="chat-card" hidden>
|
|
<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">
|
|
<span id="user-name-span">Chat with Khalid</span>
|
|
<p id="num-messages-p"></p>
|
|
</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>
|
|
<div class="card-footer">
|
|
<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"
|
|
hidden></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>
|
|
</div>
|
|
</form>
|
|
</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>
|
|
<div class="msg msg_container">
|
|
{{{message}}}
|
|
<span class="msg_time">{{msgDateFormat messageTime}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="msg_container_send_template">
|
|
<div class="d-flex justify-content-end mb-4">
|
|
<div class="msg msg_container_send">
|
|
{{{message}}}
|
|
<span class="msg_time_send">{{msgDateFormat messageTime}}</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>
|
|
|
|
<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">
|
|
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
|
|
<p>{{userName}} is online</p>
|
|
</div>
|
|
<div class="d-flex flex-column ml-auto">
|
|
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
|
|
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
|
|
</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">
|
|
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
|
|
<p>Last active {{fromNow lastActive}}</p>
|
|
</div>
|
|
<div class="d-flex flex-column ml-auto">
|
|
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
|
|
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
</body>
|
|
<script src="../static/js/chatStatic.js" th:if="false"></script>
|
|
|
|
|
|
</html>
|