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.
 
 
 
 

137 lines
3.6 KiB

const moment = require("moment")
const {commentApi} = require("../../../../../rpdata/api/Comment")
const {charactersApi} = require("../../../../../rpdata/api/Character")
module.exports = class {
onCreate(input) {
this.state = {
error: null,
loading: false,
values: {
subject: "",
source: "",
characterName: "",
characterId: "",
fictionalDate: "",
},
characters: [],
opened: false,
placeholder: "(Required)",
}
this.first = false
}
onMount() {
charactersApi.list({author: (this.input.user||{}).name}).then((characters) => {
this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
})
const comments = this.input.chapter.comments || []
const lastComment = comments[comments.length - 1]
let date = lastComment.fictionalDate || chapter.fictionalDate
if (date != null) {
this.change("fictionalDate", {target: {value: moment(date).format("MMM D, YYYY")}})
}
}
change(key, ev) {
this.state.values = Object.assign({}, this.state.values, {[key]: ev.target.value})
if (key === "characterId") {
if (ev.target.value !== "") {
const character = this.state.characters.find(c => c.id === this.state.values.characterId)
if (character != null) {
this.state.placeholder = character.name
} else {
this.state.placeholder = "(Required)"
}
} else {
this.state.placeholder = "(Required)"
}
}
}
open() {
if (!this.state.opened) {
charactersApi.list({author: (this.input.user||{}).name}).then((characters) => {
this.state.characters = characters.sort((a,b) => a.name.localeCompare(b.name))
})
}
}
close() {
this.first = false
this.state.opened = false
this.emit("close")
}
save() {
const values = Object.assign({}, this.state.values)
if (values.source.length == 0) {
this.state.error = "The comment body is empty."
console.warn(values)
return
}
if (this.input.chapter.commentMode !== "Chat" && values.subject.trim().length == 0) {
this.state.error = "The subject is empty."
return
}
if (values.characterName.trim().length < 1) {
const character = this.state.characters.find(c => c.id === this.state.values.characterId)
if (character == null) {
this.state.error = "You need to give a display name for an anonymous character."
return
}
values.characterName = character.name
}
let fictionalDate = new Date(values.fictionalDate + " UTC")
if (values.fictionalDate != "") {
if (Number.isNaN(fictionalDate)) {
this.state.error = `Could not parse ${values.fictionalDate} as date!`
return
}
} else {
fictionalDate = null
}
const input = {
chapterId: this.input.chapter.id,
subject: values.subject,
source: values.source,
characterName: values.characterName,
characterId: values.characterId,
fictionalDate: fictionalDate,
}
if (input.characterId == "") {
input.characterId = null
}
commentApi.addComment(input).then(comment => {
this.emit("add", comment)
this.emit("close")
this.state.values = {
subject: "",
source: "",
characterName: "",
characterId: "",
fictionalDate: "",
}
this.state.opened = false
}).catch(errs => {
console.warn("Failed to add comemnt:", errs)
this.state.error = "Failed to add comemnt: " + (errs[0]||errs||{}).message || errs
}).then(() => {
this.state.loading = false
})
}
}