Skip to content
This repository was archived by the owner on Aug 27, 2024. It is now read-only.

Commit c2d3c04

Browse files
Nick Vidalrvolosatovs
Nick Vidal
authored and
rvolosatovs
committed
feat(chat-client): add Web UI
Signed-off-by: Nick Vidal <[email protected]>
1 parent 25ccfde commit c2d3c04

File tree

5 files changed

+419
-0
lines changed

5 files changed

+419
-0
lines changed

‎demos/chat-client/chat-web-ui/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Abhishek Gupta
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎demos/chat-client/chat-web-ui/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Chat Web UI
2+
3+
Web user interface for a chat client.

‎demos/chat-client/chat-web-ui/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
8+
<link rel="stylesheet" href="./style.css">
9+
<title>Enarx Chat</title>
10+
</head>
11+
12+
<body>
13+
14+
<section>
15+
<h1>Enarx Chat</h1>
16+
<p>Click on the chat button to start</p>
17+
</section>
18+
19+
<div id="chat-container">
20+
<button class='chat-btn'><i class="material-icons">chat</i></button>
21+
<div class='chat-popup'>
22+
23+
<div class='chat-header'>
24+
<div class='chatbot-img'>
25+
<i class='material-icons bot-img'>chat</i>
26+
</div>
27+
<h3 class='bot-title'>Enarx Chat</h3>
28+
</div>
29+
30+
<div class='chat-area'>
31+
<div class='bot-msg'>
32+
<i class='material-icons bot-img'>face</i>
33+
<span class='msg'>Enarx Chat</span>
34+
</div>
35+
</div>
36+
37+
38+
<div class='chat-input-area'>
39+
<input type='text' autofocus class='chat-input' onkeypress='return givenUserInput(event)' placeholder='Type a message ...' autocomplete='off'>
40+
<button class='chat-submit'><i class='material-icons'>send</i></button>
41+
</div>
42+
43+
</div>
44+
</div>
45+
<script src="./script.js"></script>
46+
47+
</body>
48+
49+
</html>

‎demos/chat-client/chat-web-ui/script.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
function init() {
2+
3+
//--------------------------- Important Variables----------------------------
4+
var inactiveMessage = "Server is down, Please contact the developer to activate it"
5+
chatPopup = document.querySelector(".chat-popup")
6+
chatBtn = document.querySelector(".chat-btn")
7+
chatSubmit = document.querySelector(".chat-submit")
8+
chatHeader = document.querySelector(".chat-header")
9+
chatArea = document.querySelector(".chat-area")
10+
chatInput = document.querySelector(".chat-input")
11+
expandWindow = document.querySelector(".expand-chat-window")
12+
root = document.documentElement;
13+
chatPopup.style.display = "none"
14+
var host = "http://localhost:8080"
15+
16+
17+
//------------------------ ChatBot Toggler -------------------------
18+
19+
chatBtn.addEventListener("click", () => {
20+
21+
mobileDevice = !detectMob()
22+
if (chatPopup.style.display == "none" && mobileDevice) {
23+
chatPopup.style.display = "flex"
24+
chatInput.focus();
25+
chatBtn.innerHTML = `<i class='material-icons'>close</i>`
26+
} else if (mobileDevice) {
27+
chatPopup.style.display = "none"
28+
chatBtn.innerHTML = `<i class='material-icons'>chat</i>`
29+
} else {
30+
mobileView()
31+
}
32+
})
33+
34+
chatSubmit.addEventListener("click", () => {
35+
let userResponse = chatInput.value.trim();
36+
if (userResponse !== "") {
37+
setUserResponse();
38+
send(userResponse)
39+
}
40+
})
41+
}
42+
43+
// end of init function
44+
45+
function userResponseBtn(e) {
46+
send(e.value);
47+
}
48+
49+
// to submit user input when he presses enter
50+
function givenUserInput(e) {
51+
if (e.keyCode == 13) {
52+
let userResponse = chatInput.value.trim();
53+
if (userResponse !== "") {
54+
setUserResponse()
55+
send(userResponse)
56+
}
57+
}
58+
}
59+
60+
// to display user message on UI
61+
function setUserResponse() {
62+
let userInput = chatInput.value;
63+
if (userInput) {
64+
let temp = `<div class="user-msg"><span class = "msg">${userInput}</span></div>`
65+
chatArea.innerHTML += temp;
66+
chatInput.value = ""
67+
} else {
68+
chatInput.disabled = false;
69+
}
70+
scrollToBottomOfResults();
71+
}
72+
73+
74+
75+
function scrollToBottomOfResults() {
76+
chatArea.scrollTop = chatArea.scrollHeight;
77+
}
78+
79+
/***************************************************************
80+
Frontend Part Completed
81+
****************************************************************/
82+
83+
function send(message) {
84+
chatInput.type = "text"
85+
passwordInput = false;
86+
chatInput.focus();
87+
console.log("User Message:", message)
88+
$.ajax({
89+
url: host,
90+
method: 'PUT',
91+
data: {
92+
message: message
93+
}
94+
});
95+
chatInput.focus();
96+
}
97+
98+
function mobileView() {
99+
$('.chat-popup').width($(window).width());
100+
101+
if (chatPopup.style.display == "none") {
102+
chatPopup.style.display = "flex"
103+
// chatInput.focus();
104+
chatBtn.style.display = "none"
105+
chatPopup.style.bottom = "0"
106+
chatPopup.style.right = "0"
107+
// chatPopup.style.transition = "none"
108+
expandWindow.innerHTML = `<i class='material-icons'>close</i>`
109+
}
110+
}
111+
112+
function detectMob() {
113+
return ((window.innerHeight <= 800) && (window.innerWidth <= 600));
114+
}
115+
116+
function createChatBot() {
117+
118+
host = "http://localhost:8080";
119+
init()
120+
const msg = document.querySelector(".msg");
121+
msg.innerText = "Welcome to Enarx Chat!";
122+
123+
const botTitle = document.querySelector(".bot-title");
124+
botTitle.innerText = "Enarx Chat";
125+
}
126+
127+
createChatBot();

0 commit comments

Comments
 (0)