diff options
Diffstat (limited to 'lib/aggiedit_web/live/post_live/show.html.heex')
-rw-r--r-- | lib/aggiedit_web/live/post_live/show.html.heex | 70 |
1 files changed, 12 insertions, 58 deletions
diff --git a/lib/aggiedit_web/live/post_live/show.html.heex b/lib/aggiedit_web/live/post_live/show.html.heex index b89999b..f0d1f41 100644 --- a/lib/aggiedit_web/live/post_live/show.html.heex +++ b/lib/aggiedit_web/live/post_live/show.html.heex @@ -1,4 +1,3 @@ - <div class="d-flex justify-content-center"> <div class="container"> <div> @@ -6,7 +5,7 @@ </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"/> + <img src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} class="img-fluid" style="max-height: 40vh"/> <% end %> </div> <div class="post-body"> @@ -16,21 +15,18 @@ <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 class="border rounded p-2 m-2"> + <div class="chat" id="chat"> + </div> + </div> + <form class="border rounded p-2 m-2" onsubmit="return RoomChat.submitForm(event)"> + <div class="form-group m-2"> + <label for="message">Message</label> + <input type="text" class="form-control" id="message" name="message" placeholder="Message"> + </div> + <button type="submit" class="m-2 btn btn-primary">Submit</button> + </form> </div> </div> @@ -47,45 +43,3 @@ /> </.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> |