nova
/
Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity
Browse Source

frnt: Further cleanup 

Removed old chat area code
master
Rohan Sircar 4 years ago
parent
59c14d681d
commit
4330b47982
4 changed files with 1 additions and 391 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      chatto/src/main/javascript/ts/src/view/UserView.ts
  2. BIN
      chatto/src/main/resources/static/img/default_avatar.jpg
  3. 67
      chatto/src/main/resources/templates/chat.html
  4. 311
      chatto/src/main/resources/templates/ts-test.html

14
chatto/src/main/javascript/ts/src/view/UserView.ts
View File

@ -91,24 +91,10 @@ export class UserView implements Observer<ActiveUserViewModel> {
}
// Add the active class to the current/clicked button
else if (current.length == 0) {
let elem = document.getElementById("passphrase-initial") as any;
if (elem == null) {
log.error("passphraseInput element reference is null");
return;
}
// passphrase = elem.value;
// if (passphrase == '' || passphrase == null) {
// // // alert('Please input passphrase')
// // // alertify.error('Please enter a passphrase');
// log.error('passphrase is empty or null');
// return;
// }
// @ts-ignore: Object is possibly 'null'.
document.getElementById("no-user-selected").hidden = true;
// @ts-ignore: Object is possibly 'null'.
document.getElementById("chat-card").hidden = false;
// @ts-ignore: Object is possibly 'null'.
elem.hidden = true;
}
// console.log(this.getElementsByClassName('to-user-span'));
let elem = el.getElementsByClassName("to-user-span")[0] as HTMLElement;

BIN
chatto/src/main/resources/static/img/default_avatar.jpg
View File

Side by Side

After

Width: 800  |  Height: 800  |  Size: 43 KiB

67
chatto/src/main/resources/templates/chat.html
View File

@ -99,7 +99,6 @@
<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>
<input class="form-control type_msg" size="10" type="password" id="passphrase-initial" placeholder="Passphrase " required hidden>
</div>
</div>
</div>
@ -138,7 +137,6 @@
<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>
@ -150,64 +148,6 @@
</div>
</div>
</div>
<section hidden>
<div class="container">
<div class="row">
<div class="col-sm">
<h4 class="display-4 text-center py-2">Chat</h4>
<div class="card text-white bg-primary mb-3 card-form rounded mx-auto">
<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>
<form action="#" th:object="${chatMessageDTO}" method="post" class="needs-validation" novalidate>
<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}">
Demo User
</label>
</th:block>
</div>
</div>
<div class="col">
<div class="my-form-inputs container">
<div class="form-group">
<label for="chatInput">Your message: </label>
<textarea class="form-control" type="text" required></textarea>
<div class="invalid-feedback">
Cannot be empty
</div>
</div>
<div class="form-group">
<label for="passphrase">Passphrase: </label>
<input class="form-control" type="password" required>
</div>
<div class="form-group text-center">
<button class="btn btn-secondary mx-auto">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<template id="msg_container_template">
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
@ -271,12 +211,7 @@
</template>
</body>
<!-- <script th:src="@{js/chat.js}" type="text/javascript"></script> -->
<!-- <script src="../static/js/bundle.js" th:src="@{/js/bundle.js}"></script> -->
<script src="../static/js/chatStatic.js" th:if="false"></script>
</html>
<!-- <div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div> -->
</html>

311
chatto/src/main/resources/templates/ts-test.html
View File

@ -1,311 +0,0 @@
<!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="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js" integrity="sha256-nIoG9XIePM1QNttI6KAGLYGNxc4DNinxxmOZW0/Z7uA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js" integrity="sha256-oh7N5nthuhldTk8/34Za7FXv3BkeVN9vAnYk/pLfC78=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.min.js" integrity="sha256-58eGKW6SunbeAY1RP9WEbg3nViB9o1qDnxV4yCITqx4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/alertify.min.js" integrity="sha256-yscIZgtlDR9q6eoYCRmcaiNE6W80UFSnq+6Llwu4NLI=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/alertify.min.css" integrity="sha256-nhstgDCuZGQRk+wvwXZIPt278arHtuZKJ1YQ0rrXiL4=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/default.css" integrity="sha256-dawRQVhnqw8jRXaGnK0aj/NpOsPaQm+Em1sWN+fvegI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/bootstrap.css" integrity="sha256-1fgYpB3cyITZIur7E+Mj3R54NtlN9HwHykgKTJf0pmU=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.5/fuse.min.js" integrity="sha256-Yrh3VGzE4d9b4KANknPJAhfcKt9SgHTL0v/FrJFoPzw=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.6.4/loglevel.min.js" integrity="sha256-ACTlnmNCkOooSKkPCKYbiex8WLE82aeiN+Z9ElZag5Q=" crossorigin="anonymous"></script>
<script src="./../../javascript/bundle.js" defer></script>
<link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">
<!-- <script th:src="@{js/my_Crypto.js}" type="text/javascript"></script> -->
</head>
<body>
<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>
<div class="container-fluid h-100">
<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">
<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">
<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" id="contacts-box">
<th:block th:each="au: ${activeUsers}">
<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 th:if="${au.online == true}" class="online_icon"></span>
</div>
<div class="user_info">
<span class="to-user-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>
</div>
<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>
</div>
</li>
</th:block>
</ui>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-8 col-xl-6 chat">
<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>
<input class="form-control type_msg" size="10" type="password" id="passphrase-initial" placeholder="Passphrase " required>
</div>
</div>
</div>
</div>
<div class="card" 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">1767 Messages</p>
</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>
<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"></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>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<section hidden>
<div class="container">
<div class="row">
<div class="col-sm">
<h4 class="display-4 text-center py-2">Chat</h4>
<div class="card text-white bg-primary mb-3 card-form rounded mx-auto">
<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>
<form action="#" th:object="${chatMessageDTO}" method="post" class="needs-validation" novalidate>
<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}">
Demo User
</label>
</th:block>
</div>
</div>
<div class="col">
<div class="my-form-inputs container">
<div class="form-group">
<label for="chatInput">Your message: </label>
<textarea class="form-control" type="text" required></textarea>
<div class="invalid-feedback">
Cannot be empty
</div>
</div>
<div class="form-group">
<label for="passphrase">Passphrase: </label>
<input class="form-control" type="password" required>
</div>
<div class="form-group text-center">
<button class="btn btn-secondary mx-auto">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
<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>
<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>
<p>{{userName}} is online</p>
</div>
<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>
</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>
<p>Last active {{lastActive}}</p>
</div>
<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>
</div>
</li>
</template>
</body>
<!-- <script th:src="@{js/chat.js}" type="text/javascript"></script> -->
<!-- <script src="../static/js/bundle.js" th:src="@{/js/bundle.js}"></script> -->
<script src="../static/js/chatStatic.js" th:if="false"></script>
</html>
<!-- <div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div> -->
Write Preview
Loading…
Cancel
Save