Aggiedit/lib/aggiedit_web/live/post_live/show.html.heex
2022-04-20 17:23:27 -06:00

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>