messages-index.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. // force the page to re-load if the back button was used
  2. $(window).bind("pageshow", function(event) {
  3. if (event.originalEvent.persisted) {
  4. window.location.reload();
  5. }
  6. });
  7. $("#brand-name").addClass("active");
  8. var app = new Vue({
  9. el: "#MessagesPage",
  10. data: {
  11. messages: []
  12. },
  13. mounted: function() {
  14. this.fetchMessages();
  15. },
  16. methods: {
  17. fetchMessages: function() {
  18. $.ajax({
  19. url: "/api/messages/",
  20. method: "GET"
  21. }).done(responseData => {
  22. this.messages = responseData;
  23. });
  24. }
  25. }
  26. });
  27. $("#NewMessageButton").click(function() {
  28. $("#NewMessageModal")
  29. .modal({
  30. closeable: false
  31. })
  32. .modal("show");
  33. });
  34. $("#SendNewMessageButton").click(function() {
  35. let messageData = {
  36. recipient: $("#NewMessageUsername").val(),
  37. title: $("#NewMessageTitle").val(),
  38. content: $("#NewMessageContent").val()
  39. };
  40. console.log(messageData);
  41. messageData.recipient = messageData.recipient.trim();
  42. messageData.title = messageData.title.trim();
  43. messageData.content = messageData.content.trim();
  44. var badData = false;
  45. var animationName = "shake";
  46. if (messageData.recipient.length == 0) {
  47. $("#NewMessageUsername").transition(animationName);
  48. console.log("Username empty");
  49. badData = true;
  50. }
  51. if (messageData.title.length == 0) {
  52. $("#NewMessageTitle").transition(animationName);
  53. badData = true;
  54. }
  55. if (messageData.content.length == 0) {
  56. $("#NewMessageContent").transition(animationName);
  57. badData = true;
  58. }
  59. if (badData) {
  60. return false;
  61. }
  62. $.ajax({
  63. url: "/api/messages/",
  64. method: "POST",
  65. data: messageData,
  66. success: function(responseData) {
  67. $("#NewMessageModal").modal("hide");
  68. }
  69. });
  70. });
  71. $(document).ready(function() {
  72. $(".ui.search").search({
  73. minCharacters: 3,
  74. searchDelay: 500,
  75. searchOnFocus: false,
  76. apiSettings: {
  77. url: "/api/user/search/{query}",
  78. onResponse: function(serverResponse) {
  79. var response = {
  80. results: []
  81. };
  82. $.each(serverResponse, function(index, user) {
  83. response.results.push({
  84. title: user.username
  85. });
  86. });
  87. return response;
  88. }
  89. }
  90. });
  91. });