124 lines
7.4 KiB
HTML
124 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
layout:decorate="~{layouts/blank-layout}">
|
|
<head>
|
|
<title th:text="${pageTitle}">Chat</title>
|
|
</head>
|
|
<body layout:fragment="page_content" id="live_chat">
|
|
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" id="csrfToken"/>
|
|
<input type="hidden" id="userId" th:value="${#authentication.principal.profile.userId}"/>
|
|
<input type="hidden" id="firstContactUserName" th:value="${firstContactUserName}"/>
|
|
<input type="hidden" id="firstContactUserID" th:value="${firstContactUserID}"/>
|
|
<input type="hidden" id="chatRoomID" th:value="${chatRoomID}"/>
|
|
<input type="hidden" id="userIsEmpty" th:value="${userIsEmpty}"/>
|
|
<div class="row chat-application">
|
|
<div class="col-md-3" >
|
|
<div class="card user-chat-box">
|
|
<div class="card-header card-header-rose card-header-icon">
|
|
<div class="card-icon d-flex" style="cursor: pointer;" id="addContact"><i class="material-icons pr-3">group_add</i>
|
|
<h4 class="card-title m-0">Contacts</h4>
|
|
</div>
|
|
<div class="searchbar mt-3">
|
|
<input class="form-control" type="text" placeholder="Search Contact">
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="mailbox list-style-none app-chat">
|
|
<div class="message-center chat-scroll chat-users notifications position-relative" id="contactArea">
|
|
<div th:each="user : ${userContact}" th:attr="data-user-id-list=${user.userId}">
|
|
<li><a href="javascript:void(0)" class="chat-user message-item align-items-center border-bottom px-3 py-2" th:attr="data-user-id=${user.userId}, data-username=${user.fullName}">
|
|
<span class="user-img">
|
|
<img th:src="@{/images/example/d1.png}" alt="user" class="img-fluid rounded-circle" width="40px">
|
|
<span class="profile-status online"></span>
|
|
</span>
|
|
<div class="mail-contnet w-75 d-inline-block v-middle pl-2" th:id="${'div-span-' + user.userId}" >
|
|
<h6 class="message-title mb-0 mt-1" th:text="${user.fullName}"></h6>
|
|
<span class="font-12 text-nowrap d-block text-muted text-truncate" th:text="${user.companyName}"></span> <span class="font-12 text-nowrap d-block text-muted" th:text="${user.lastMessage}"></span>
|
|
<div th:if="${user.unread} != 0">
|
|
<span class="badge badge-danger" th:id="${user.userId}" th:text="${user.unread}"></span>
|
|
</div>
|
|
</div>
|
|
</a></li>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="card chat-container">
|
|
<div class="card-header card-header-rose card-header-icon border-bottom">
|
|
<div class="chat-meta-user pt-3 pb-3 ">
|
|
<div class="current-chat-user-name">
|
|
<span>
|
|
<img th:src="@{/images/example/d1.png}" alt="dynamic-image" class="rounded-circle" width="45">
|
|
<span class="name font-weight-bold ml-2 text-uppercase" id="receiverName" th:text="${firstContactUserName}"></span>
|
|
</span>
|
|
<button type="button" class="btn btn-primary float-right" onclick="displayVideoCall()">
|
|
Video Call
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body ">
|
|
<div class="chat-box scrollable" id="messageAreaBox" style="height:calc(100vh - 360px);">
|
|
<ul class="chat-list chat" id="messageArea">
|
|
<!-- <div th:each="message : ${messageList}">
|
|
<div th:if="${message.from} == ${#authentication.principal.profile.userId}">
|
|
<li class="odd chat-item">
|
|
<div class="chat-content">
|
|
<div class="box bg-light-info" th:text="${message.text}"></div>
|
|
</div>
|
|
<div class="chat-time" th:text="${message.dateTime}"></div>
|
|
</li>
|
|
</div>
|
|
<div th:unless="${message.from} == ${#authentication.principal.profile.userId}">
|
|
<li class="chat-item">
|
|
<div class="chat-content">
|
|
<h6 class="font-medium" th:text="${message.from}"></h6>
|
|
<div class="box bg-light-info" th:text="${message.text}"></div>
|
|
</div>
|
|
<div class="chat-time" th:text="${message.dateTime}"></div>
|
|
</li>
|
|
</div>
|
|
</div> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-body border-top border-bottom chat-send-message-footer">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="input-field mt-0 mb-0">
|
|
<input id="textarea1" placeholder="Type and hit enter" class="message-type-box form-control border-0" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<th:block layout:fragment="page_style" th:with="baseUrl=${@webHelper.baseUrl()}">
|
|
<link href="scripts/chat/jsPanel/dist/jspanel.css" rel="stylesheet">
|
|
<link href="scripts/chat/chat.css" rel="stylesheet">
|
|
<!-- <link rel="stylesheet" type="text/css" href="#" th:href="${baseUrl}+@{/webjars/adminwrap/js/plugins/chat/chat.css}" /> -->
|
|
</th:block>
|
|
<th:block layout:fragment="page_script" th:with="baseUrl=${@webHelper.baseUrl()}">
|
|
<!-- loading jsPanel javascript -->
|
|
<script src="scripts/chat/jsPanel/dist/jspanel.js"></script>
|
|
<!-- optionally load jsPanel extensions -->
|
|
<script src="scripts/chat/jsPanel/dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
|
|
<script src="scripts/chat/jsPanel/dist/extensions/hint/jspanel.hint.js"></script>
|
|
<script src="scripts/chat/jsPanel/dist/extensions/modal/jspanel.modal.js"></script>
|
|
<script src="scripts/chat/jsPanel/dist/extensions/tooltip/jspanel.tooltip.js"></script>
|
|
<script src="scripts/chat/jsPanel/dist/extensions/dock/jspanel.dock.js"></script>
|
|
<!-- load sockjs and stomp -->
|
|
<!-- <script src="#" type="application/javascript" th:src="${baseUrl}+@{'/webjars/adminwrap/js/plugins/chat/chat.js'}" ></script> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
|
|
</th:block>
|
|
</html>
|
|
<th:block layout:fragment="page_script" th:with="baseUrl=${@webHelper.baseUrl()}">
|
|
<script src='https://meet.jit.si/external_api.js' defer></script>
|
|
</th:block> |