The frontend/UI server, written in JS using the MarkoJS library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
3.7 KiB

2 years ago
  1. const moment = require("moment")
  2. const {commentApi} = require("../../../../../rpdata/api/Comment")
  3. const {charactersApi} = require("../../../../../rpdata/api/Character")
  4. module.exports = class {
  5. onCreate(input) {
  6. this.state = {
  7. error: null,
  8. loading: false,
  9. values: {
  10. subject: "",
  11. source: "",
  12. characterName: "",
  13. characterId: "",
  14. fictionalDate: "",
  15. },
  16. characters: [],
  17. opened: false,
  18. placeholder: "(Required)",
  19. }
  20. }
  21. onInput(input) {
  22. if (input.comment) {
  23. charactersApi.list({author: (input.user||{}).name}).then((characters) => {
  24. this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
  25. })
  26. const comment = input.comment
  27. let fictionalDate = new Date(comment.fictionalDate)
  28. if (comment.fictionalDate && !Number.isNaN(fictionalDate.getTime()) && fictionalDate.getTime() !== 0) {
  29. fictionalDate = moment.utc(fictionalDate).format("MMM D, YYYY")
  30. } else {
  31. fictionalDate = ""
  32. }
  33. this.state.values = {
  34. subject: comment.subject,
  35. characterId: comment.characterId,
  36. characterName: comment.characterName,
  37. fictionalDate: fictionalDate,
  38. source: comment.source,
  39. }
  40. }
  41. }
  42. change(key, ev) {
  43. this.state.values = Object.assign({}, this.state.values, {[key]: ev.target.value})
  44. if (key === "characterId") {
  45. if (ev.target.value !== "") {
  46. const character = this.state.characters.find(c => c.id === this.state.values.characterId)
  47. if (character != null) {
  48. this.state.placeholder = character.name
  49. } else {
  50. this.state.placeholder = "(Required)"
  51. }
  52. } else {
  53. this.state.placeholder = "(Required)"
  54. }
  55. }
  56. }
  57. close() {
  58. this.emit("close")
  59. }
  60. save() {
  61. const values = Object.assign({}, this.state.values)
  62. let clearFictionalDate = false
  63. if (values.source.length == 0) {
  64. this.state.error = "The comment body is empty."
  65. console.warn(values)
  66. return
  67. }
  68. if (this.input.chapter.commentMode !== "Chat" && values.subject.trim().length == 0) {
  69. this.state.error = "The subject is empty."
  70. return
  71. }
  72. if (values.characterName.trim().length < 1) {
  73. const character = this.state.characters.find(c => c.id === this.state.values.characterId)
  74. if (character == null) {
  75. this.state.error = "You need to give a display name for an anonymous character."
  76. return
  77. }
  78. values.characterName = character.name
  79. }
  80. let fictionalDate = new Date(values.fictionalDate + " UTC")
  81. if (values.fictionalDate != "") {
  82. if (Number.isNaN(fictionalDate)) {
  83. this.state.error = `Could not parse ${values.fictionalDate} as date!`
  84. return
  85. }
  86. } else {
  87. fictionalDate = null
  88. clearFictionalDate = true
  89. }
  90. const input = {
  91. commentId: this.input.comment.id,
  92. subject: values.subject,
  93. source: values.source,
  94. characterName: values.characterName,
  95. characterId: values.characterId,
  96. fictionalDate: fictionalDate,
  97. clearFictionalDate: clearFictionalDate,
  98. }
  99. if (input.characterId == "") {
  100. input.characterId = null
  101. }
  102. commentApi.editComment(input).then(comment => {
  103. this.emit("edit", comment)
  104. this.close()
  105. this.state.values = {
  106. subject: "",
  107. source: "",
  108. characterName: "",
  109. characterId: "",
  110. fictionalDate: "",
  111. }
  112. }).catch(errs => {
  113. console.warn("Failed to add comemnt:", errs)
  114. this.state.error = "Failed to add comemnt: " + (errs[0]||errs||{}).message || errs
  115. }).then(() => {
  116. this.state.loading = false
  117. })
  118. }
  119. }