92 lines
2.7 KiB
Plaintext
92 lines
2.7 KiB
Plaintext
|
|
<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>
|