161 lines
5.3 KiB
JavaScript
161 lines
5.3 KiB
JavaScript
import "./MessagesSidebar.js"
|
|
import "./MessagesPanel.js"
|
|
|
|
css(`
|
|
messages- {
|
|
font-family: 'Bona';
|
|
}
|
|
|
|
messages- input::placeholder {
|
|
font-family: 'Bona Nova';
|
|
font-size: 0.9em;
|
|
color: var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
appearance: none; /* remove default style */
|
|
-webkit-appearance: none;
|
|
width: 1em;
|
|
height: 1em;
|
|
border: 1px solid var(--accent);
|
|
}
|
|
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--red);
|
|
}
|
|
`)
|
|
|
|
class Messages extends Shadow {
|
|
conversations = []
|
|
selectedConvoID = null
|
|
onConversationSelect(i) {
|
|
console.log("convo selected: ", i)
|
|
this.selectedConvoID = i
|
|
this.$("messagessidebar-").rerender()
|
|
this.$("messagespanel-").rerender()
|
|
}
|
|
|
|
getConvoFromID(id) {
|
|
for(let i=0; i<this.conversations.length; i++) {
|
|
if(this.conversations[i].id === id) {
|
|
return this.conversations[i]
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
HStack(() => {
|
|
MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
|
|
|
|
VStack(() => {
|
|
if(this.getConvoFromID(this.selectedConvoID)) {
|
|
MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
|
|
} else {
|
|
MessagesPanel()
|
|
}
|
|
|
|
input("Send Message", "93%")
|
|
.paddingVertical(1, em)
|
|
.paddingHorizontal(2, em)
|
|
.color("var(--accent)")
|
|
.background("var(--darkbrown)")
|
|
.marginBottom(6, em)
|
|
.border("none")
|
|
.fontSize(1, em)
|
|
.onKeyDown((e) => {
|
|
if (e.key === "Enter") {
|
|
window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
|
|
e.target.value = ""
|
|
}
|
|
})
|
|
})
|
|
.gap(1, em)
|
|
.width(100, pct)
|
|
.alignHorizontal("center")
|
|
.alignVertical("end")
|
|
})
|
|
.onAppear(async () => {
|
|
let res = await Socket.send({app: "MESSAGES", operation: "GET"})
|
|
if(!res) console.error("failed to get messages")
|
|
|
|
if(res.msg.length > 0 && this.conversations.length === 0) {
|
|
this.conversations = res.msg
|
|
this.selectedConvoID = this.conversations[0].id
|
|
this.rerender()
|
|
}
|
|
|
|
window.addEventListener("new-message", (e) => {
|
|
let convoID = e.detail.conversationID
|
|
let messages = e.detail.messages
|
|
let convo = this.getConvoFromID(convoID)
|
|
convo.messages = messages
|
|
this.rerender()
|
|
})
|
|
})
|
|
.width(100, "%")
|
|
.height(87, vh)
|
|
.x(0).y(13, vh)
|
|
|
|
HStack(() => {
|
|
input("Search messages...", "45vw")
|
|
.attr({
|
|
"type": "text"
|
|
})
|
|
.fontSize(1.1, em)
|
|
.paddingLeft(1.3, em)
|
|
.background("transparent")
|
|
.border("0.5px solid var(--divider)")
|
|
.outline("none")
|
|
.color("var(--accent)")
|
|
.borderRadius(10, px)
|
|
|
|
button("Search")
|
|
.marginLeft(2, em)
|
|
.borderRadius(10, px)
|
|
.background("transparent")
|
|
.border("0.5px solid var(--divider)")
|
|
.color("var(--accent)")
|
|
.fontFamily("Bona Nova")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
|
|
} else {
|
|
this.style.background = "transparent"
|
|
|
|
}
|
|
})
|
|
|
|
button("+ New Message")
|
|
.width(13, em)
|
|
.marginLeft(1, em)
|
|
.borderRadius(10, px)
|
|
.background("transparent")
|
|
.border("0.5px solid var(--divider)")
|
|
.color("var(--accent)")
|
|
.fontFamily("Bona Nova")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.background = "var(--green)"
|
|
|
|
} else {
|
|
this.style.background = "transparent"
|
|
|
|
}
|
|
})
|
|
.onClick((clicking) => {
|
|
console.log(this, "clicked")
|
|
})
|
|
|
|
})
|
|
.x(55, vw).y(4, vh)
|
|
.position("absolute")
|
|
.transform("translateX(-50%)")
|
|
})
|
|
.width(100, "%")
|
|
.height(100, "%")
|
|
}
|
|
}
|
|
|
|
register(Messages) |