Skip to content

Commit b124848

Browse files
HlibPavlykHlibPavlyk
committed
feat: Add messages design in chat
- messages will check if current user is author and implement related message design - edit Get page and chat.js
1 parent ea35bf8 commit b124848

File tree

3 files changed

+73
-131
lines changed

3 files changed

+73
-131
lines changed

‎src/CoinyProject.WebUI/Hubs/DiscussionHub.cs

-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ namespace CoinyProject.WebUI.Hubs
66
{
77
public class DiscussionHub : Hub
88
{
9-
/* public async Task SendMessage(string message)
10-
{
11-
12-
await Clients.All.SendAsync("receiveMessage", message);
13-
}*/
149
public async Task SendMessage(string user, string message)
1510
{
1611
await Clients.All.SendAsync("ReceiveMessage", user, message);

‎src/CoinyProject.WebUI/Views/Discussion/Get.cshtml

+50-77
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,4 @@
1-
@* @using CoinyProject.Application.DTO.Discussion
2-
@model IEnumerable<DiscussionMessageCreateDTO>
3-
4-
<div class="bg-light">
5-
<h2 class="text-center text-primary">Discussion Talk</h2>
6-
<div class="row">
7-
<div class="col-md-12" id="chat">
8-
9-
@if (Model != null)
10-
@foreach (var message in Model)
11-
{
12-
<div class="row">
13-
<div class="container bg-primary">
14-
<p class="text-lg-start">@message.Message</p>
15-
</div>
16-
</div>
17-
}
18-
</div>
19-
<div class="col-md-12">
20-
<form
21-
data-ajax-begin="clearInputField" data-ajax-complete=""
22-
data-ajax-failure="alert('Fail')" data-ajax-success="sendMessage"
23-
data-ajax="true" data-ajax-method="POST">
24-
<div class="row">
25-
<div class="col-md-10">
26-
<input name="Text" class="form-control" id="messageText" />
27-
</div>
28-
<div class="col-md-2">
29-
<button type="submit" class="btn btn-primary" id="submitButton">Send</button>
30-
</div>
31-
</div>
32-
</form>
33-
</div>
34-
</div>
35-
</div>
36-
37-
38-
<script src="~/js/signalrReqHandler.js"></script>
39-
<script src="~/signalr/signalr.min.js"></script>
40-
<script src="~/lib/jquery/dist/jquery.unobtrusive-ajax.min.js"></script>
41-
<script src="~/js/chat.js"></script> *@
42-
1+
432
@using CoinyProject.Application.DTO.Discussion
443
@using Microsoft.AspNetCore.Http
454

@@ -51,47 +10,61 @@
5110
}
5211

5312
<div class="container">
54-
<h2 class="text-center text-primary">Discussion Talk</h2>
55-
<div class="col-lg-6 center">
56-
<div class="card">
57-
<div class="row g-0">
58-
<div class="col-6 col-md-12">
59-
<div class="card-body d-flex flex-column">
60-
<div class="text-muted">
61-
<span>
62-
Author: @Model.Username
63-
</span>
64-
<span class="text-primary rounded border border-primary px-2 py-1">
65-
Topic: @Model.Topic
66-
</span>
67-
</div>
68-
<div class="h-100">
69-
<h4 class="card-title">@Model.Name</h4>
13+
<h2 class="text-center text-primary mt-3">Discussion Talk</h2>
14+
<div id="currentUser" data-user-id="@currentUser.Identity.Name"></div>
15+
<div class="row justify-content-center">
16+
<div class="col-lg-6">
17+
18+
19+
<div class="card mb-3" style="height: 100px;">
20+
<div class="row g-0">
21+
<div class="col-6 col-md-12">
22+
<div class="card-body d-flex flex-column">
23+
<div class="text-muted">
24+
<span>
25+
Author: @Model.Username
26+
</span>
27+
<span class="text-primary rounded border border-primary px-2 py-1">
28+
Topic: @Model.Topic
29+
</span>
30+
</div>
31+
<div class="h-100">
32+
<h4 class="card-title">@Model.Name</h4>
33+
</div>
7034
</div>
7135
</div>
7236
</div>
7337
</div>
74-
</div>
75-
</div>
76-
<div class="row">
77-
<div class="col-6">
78-
<ul id="messagesList" class="list-group">
79-
@if(Model != null)
80-
foreach(var message in Model.Messages)
81-
{
82-
<li>@message.Username says @message.Message</li>
83-
}
84-
</ul>
85-
</div>
86-
</div>
87-
<div class="row mt-3">
88-
<div class="col-6">
8938

90-
<div class="input-group">
91-
<input type="text" id="userInput" hidden value="@currentUser.Identity.Name" />
92-
<input type="text" class="form-control" id="messageInput" placeholder="Type your message here..." />
93-
<button class="btn btn-primary" id="sendButton">Send Message</button>
39+
<div class="row justify-content-center">
40+
<div class="col-lg-10">
41+
<div id="messagesList" class="list-group">
42+
@if (Model != null && Model.Messages.Any())
43+
{
44+
foreach (var message in Model.Messages)
45+
{
46+
var isCurrentUserMessageAuthor = (message.Username == currentUser.Identity.Name);
47+
<div class="message-item mb-3 border rounded p-2
48+
@(isCurrentUserMessageAuthor ? "text-end bg-body-tertiary " : "")">
49+
<span class="badge @(isCurrentUserMessageAuthor ? "bg-danger" : "bg-info")">@message.Username</span>
50+
<div class="message-content">@message.Message</div>
51+
</div>
52+
}
53+
}
54+
else
55+
{
56+
<div class="message-item mb-3 border rounded p-2">No messages yet.</div>
57+
}
58+
</div>
59+
60+
<div class="input-group">
61+
<input type="text" id="userInput" hidden value="@currentUser.Identity.Name" />
62+
<input type="text" class="form-control" id="messageInput" placeholder="Type your message here..." />
63+
<button class="btn btn-primary" id="sendButton">Send Message</button>
64+
</div>
65+
</div>
9466
</div>
67+
9568
</div>
9669
</div>
9770
</div>

‎src/CoinyProject.WebUI/wwwroot/js/chat.js

+23-49
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
1-

2-
var connection = new signalR.HubConnectionBuilder().withUrl("/chat").build();
1+
var connection = new signalR.HubConnectionBuilder().withUrl("/chat").build();
32

43
document.getElementById("sendButton").disabled = true;
4+
var currentUser = document.getElementById("currentUser").dataset.userId;
55

66
connection.on("ReceiveMessage", function (user, message) {
7-
var li = document.createElement("li");
8-
document.getElementById("messagesList").appendChild(li);
7+
var div = document.createElement("div");
8+
document.getElementById("messagesList").appendChild(div);
99

10-
li.textContent = `${user} says ${message}`;
10+
div.classList.add("message-item", "mb-3", "border", "rounded", "p-2");
11+
12+
var badge = document.createElement("span");
13+
badge.classList.add("badge", "bg-info");
14+
badge.textContent = user;
15+
16+
var messageContent = document.createElement("div");
17+
messageContent.classList.add("message-content");
18+
messageContent.textContent = message;
19+
20+
if (user === currentUser) {
21+
div.classList.add("text-end", "bg-body-tertiary");
22+
badge.classList.add("bg-danger");
23+
}
24+
25+
div.appendChild(badge);
26+
div.appendChild(messageContent);
1127
});
1228

1329
connection.start().then(function () {
@@ -23,53 +39,11 @@ document.getElementById("sendButton").addEventListener("click", function (event)
2339
if (message.trim() === "") {
2440
return;
2541
}
42+
2643
connection.invoke("SendMessage", user, message).catch(function (err) {
2744
return console.error(err.toString());
2845
});
46+
2947
document.getElementById("messageInput").value = "";
3048
event.preventDefault();
3149
});
32-
33-
/*class DiscussionMessageCreateDTO {
34-
constructor(text) {
35-
this.text = text;
36-
}
37-
}
38-
39-
document.getElementById('submitButton').addEventListener('click', () => { });
40-
41-
const username = userName;
42-
const textInput = document.getElementById('messageText');
43-
const chat = document.getElementById('chat');
44-
const messagesQueue = [];
45-
46-
47-
48-
function clearInputField() {
49-
messagesQueue.push(textInput.value);
50-
textInput.value = "";
51-
}
52-
53-
function addMessageToChat(message) {
54-
let container = document.createElement('div');
55-
container.className = "container";
56-
57-
let sender = document.createElement('p');
58-
sender.className = "sender";
59-
sender.textContent = message.sender;
60-
61-
let text = document.createElement('p');
62-
text.textContent = message.text;
63-
64-
container.appendChild(sender);
65-
container.appendChild(text);
66-
chat.appendChild(container);
67-
}
68-
69-
function sendMessageToHub() {
70-
let messageText = textInput.value;
71-
if (messageText.trim() === "") return;
72-
73-
connection.invoke('SendMessage', messageText);
74-
textInput.value = "";
75-
}*/

0 commit comments

Comments
 (0)