1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<div class="d-flex justify-content-center">
<div class="container">
<div>
<h1><%= @post.title %></h1>
</div>
<div>
<%= if Ecto.assoc_loaded?(@post.upload) && !is_nil(@post.upload) do %>
<img src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} class="img-fluid"/>
<% end %>
</div>
<div class="post-body">
<%= @post.body %>
</div>
<%= if Aggiedit.Roles.guard?(@current_user, :edit, @post) do %>
<span><%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @room, @post), class: "button" %></span> |
<% end %>
<span><%= live_redirect "Back", to: Routes.post_index_path(@socket, :index, @room) %></span>
</div>
</div>
<!-- chat container from https://www.bootdey.com/snippets/view/card-chat-list#html -->
<div class="container content mt-2">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="card">
<div class="card-header">Chat</div>
<div class="card-body chat-container">
<ul class="chat-list" id="chat">
</ul>
</div>
</div>
</div>
</div>
</div>
<%= if @live_action in [:edit] do %>
<.modal return_to={Routes.post_show_path(@socket, :show, @room, @post)}>
<.live_component
module={AggieditWeb.PostLive.FormComponent}
id={@post.id}
current_user={@current_user}
title={@page_title}
action={@live_action}
post={@post}
return_to={Routes.post_show_path(@socket, :show, @room, @post)}
/>
</.modal>
<% end %>
<script>
const scrollToBottom = (element) => {
element.scrollIntoView({ behavior: 'smooth', block: 'end' });
};
const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
const messageElement = document.createElement("div");
messageElement.innerHTML = `
<li class="${user_id == <%= @current_user.id %> ? 'out' : 'in'}" id=${id}>
<div class="chat-body">
<div class="chat-message">
<h5>${user}</h5>
<p>${body}</p>
</div>
</div>
</li>
`;
element.appendChild(messageElement);
scrollToBottom(element);
};
let channel;
window.addEventListener('phx:initial-post', (e) => {
const chatWindow = document.getElementById("chat");
window.userSocket.connect();
channel = window.RoomChat.connect(window.userSocket, e.detail.id);
channel.on('shout', (comment) => {
appendComment(comment, chatWindow);
});
channel.on('initial-comments', ({comments}) => {
comments.forEach((comment) => {
appendComment(comment, chatWindow);
});
scrollToBottom(chatWindow);
});
channel.push("send", {body: "Hello!"});
});
</script>
|
