view-message.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>Home</title>
  5. </head>
  6. <body>
  7. <div layout:fragment="content">
  8. <script type="text/javascript" src="/js/view-message.js" defer></script>
  9. <div class="ui container" id="ViewMessage">
  10. <div class="ui active dimmer inverted">
  11. <div class="ui text loader">Loading...</div>
  12. </div>
  13. <br />
  14. <input type="hidden" v-bind:value="message.id" id="messageId" />
  15. <h3 class="ui header" th:inline="text">
  16. <img class="ui floated left image avatar" v-if="message.sender" v-bind:src="'/image/' + message.sender.avatarId" />
  17. {{ message.title }}
  18. <div class="sub header">
  19. Sent by <a v-if="message.sender">{{ message.sender.username }}</a> on
  20. <span>
  21. {{ new Date(message.date).toLocaleString() }}
  22. </span>
  23. </div>
  24. </h3>
  25. <p>{{ message.message }}</p>
  26. <div id="replies">
  27. <div class="ui comments">
  28. <div class="comment" v-for="reply in replies">
  29. <a class="avatar">
  30. <img v-bind:src="'/image/' + reply.user.avatarId" />
  31. </a>
  32. <div class="content">
  33. <a class="author">{{ reply.user.username }}</a>
  34. <div class="metadata">
  35. <span class="date">{{ new Date(reply.date).toLocaleString() }}</span>
  36. </div>
  37. <div class="text">
  38. {{ reply.content }}
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <br />
  45. <button id="ReplyButton" class="ui green button"><i class="reply icon"></i>Create Reply</button>
  46. </div>
  47. <div class="ui modal" id="NewReplyModal">
  48. <i class="close icon"></i>
  49. <div class="header">
  50. Reply to Message
  51. </div>
  52. <div class="content">
  53. <div class="ui form">
  54. <div class="field">
  55. <textarea cols="5" id="replyContent"></textarea>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="actions">
  60. <div class="ui red cancel button">Cancel</div>
  61. <div class="ui green button" id="PostReplyButton">OK</div>
  62. </div>
  63. </div>
  64. </div>
  65. </body>
  66. </html>