Well, sending messages took longer than it should have
This commit is contained in:
metacryst
@@ -1,3 +1,6 @@
|
||||
import "./MessagesSidebar.js"
|
||||
import "./MessagesPanel.js"
|
||||
|
||||
css(`
|
||||
messages- {
|
||||
font-family: 'Bona';
|
||||
@@ -23,62 +26,76 @@ css(`
|
||||
`)
|
||||
|
||||
class Messages extends Shadow {
|
||||
friends = []
|
||||
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(() => {
|
||||
VStack(() => {
|
||||
h3("Friends")
|
||||
.marginTop(0)
|
||||
.marginBottom(1, em)
|
||||
.marginLeft(0.4, em)
|
||||
|
||||
if (this.friends.length > 1) {
|
||||
for(let i = 0; i < this.friends.length; i++) {
|
||||
p(this.friends[i].name)
|
||||
}
|
||||
} else {
|
||||
p("No Friends!")
|
||||
}
|
||||
})
|
||||
.height(100, vh)
|
||||
.paddingLeft(2, em)
|
||||
.paddingRight(2, em)
|
||||
.paddingTop(2, em)
|
||||
.gap(0, em)
|
||||
.borderRight("1px solid var(--accent2)")
|
||||
MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
|
||||
|
||||
VStack(() => {
|
||||
h3("Conversations")
|
||||
.marginTop(0)
|
||||
.marginBottom(1, em)
|
||||
.marginLeft(0.4, em)
|
||||
|
||||
if (this.conversations.length > 1) {
|
||||
for(let i = 0; i < this.conversations.length; i++) {
|
||||
p(this.conversations[i].name)
|
||||
}
|
||||
if(this.getConvoFromID(this.selectedConvoID)) {
|
||||
MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
|
||||
} else {
|
||||
p("No Conversations!")
|
||||
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()
|
||||
})
|
||||
.height(100, vh)
|
||||
.paddingLeft(2, em)
|
||||
.paddingRight(2, em)
|
||||
.paddingTop(2, em)
|
||||
.gap(0, em)
|
||||
.borderRight("1px solid var(--accent2)")
|
||||
})
|
||||
.width(100, "%")
|
||||
.height(87, vh)
|
||||
.x(0).y(13, vh)
|
||||
.borderTop("1px solid var(--accent2)")
|
||||
|
||||
p("0 Items")
|
||||
.position("absolute")
|
||||
.x(50, vw).y(50, vh)
|
||||
.transform("translate(-50%, -50%)")
|
||||
|
||||
HStack(() => {
|
||||
input("Search messages...", "45vw")
|
||||
@@ -88,7 +105,7 @@ class Messages extends Shadow {
|
||||
.fontSize(1.1, em)
|
||||
.paddingLeft(1.3, em)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--accent2)")
|
||||
.border("0.5px solid var(--divider)")
|
||||
.outline("none")
|
||||
.color("var(--accent)")
|
||||
.borderRadius(10, px)
|
||||
@@ -97,7 +114,7 @@ class Messages extends Shadow {
|
||||
.marginLeft(2, em)
|
||||
.borderRadius(10, px)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--accent2)")
|
||||
.border("0.5px solid var(--divider)")
|
||||
.color("var(--accent)")
|
||||
.fontFamily("Bona Nova")
|
||||
.onHover(function (hovering) {
|
||||
@@ -115,7 +132,7 @@ class Messages extends Shadow {
|
||||
.marginLeft(1, em)
|
||||
.borderRadius(10, px)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--accent2)")
|
||||
.border("0.5px solid var(--divider)")
|
||||
.color("var(--accent)")
|
||||
.fontFamily("Bona Nova")
|
||||
.onHover(function (hovering) {
|
||||
@@ -139,40 +156,6 @@ class Messages extends Shadow {
|
||||
.width(100, "%")
|
||||
.height(100, "%")
|
||||
}
|
||||
|
||||
SidebarName(name) {
|
||||
let firstLetter = name[0]
|
||||
|
||||
HStack(() => {
|
||||
div(firstLetter)
|
||||
.display("flex")
|
||||
.justifyContent("center")
|
||||
.alignItems("center")
|
||||
.width(1.5, em)
|
||||
.height(1.5, em)
|
||||
.border("1px solid var(--accent2)")
|
||||
.borderRadius(100, "%")
|
||||
p(name)
|
||||
.marginLeft(1, em)
|
||||
})
|
||||
.alignItems("center")
|
||||
.padding(5, px)
|
||||
.borderRadius(0.5, em)
|
||||
.cursor("default")
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.background = "var(--green)"
|
||||
|
||||
} else {
|
||||
this.style.background = "transparent"
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Optional additional logic
|
||||
}
|
||||
}
|
||||
|
||||
register(Messages)
|
||||
56
ui/site/apps/Messages/MessagesPanel.js
Normal file
56
ui/site/apps/Messages/MessagesPanel.js
Normal file
@@ -0,0 +1,56 @@
|
||||
import "../../components/LoadingCircle.js"
|
||||
|
||||
class MessagesPanel extends Shadow {
|
||||
messages
|
||||
|
||||
constructor(messages) {
|
||||
super()
|
||||
this.messages = messages
|
||||
}
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
if(this.messages) {
|
||||
for(let i=0; i<this.messages.length; i++) {
|
||||
let message = this.messages[i]
|
||||
let fromMe = window.profile.email === message.from.email
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
p(message.from.firstName + " " + message.from.lastName)
|
||||
.fontWeight("bold")
|
||||
.marginBottom(0.3, em)
|
||||
|
||||
p(util.formatTime(message.time))
|
||||
.opacity(0.2)
|
||||
.marginLeft(1, em)
|
||||
})
|
||||
p(message.text)
|
||||
})
|
||||
.paddingVertical(0.5, em)
|
||||
.marginLeft(fromMe ? 70 : 0, pct)
|
||||
.paddingRight(fromMe ? 10 : 0, pct)
|
||||
.marginRight(fromMe ? 0 : 70, pct)
|
||||
.paddingLeft(fromMe ? 5 : 10, pct)
|
||||
.background(fromMe ? "var(--brown)" : "var(--green)")
|
||||
}
|
||||
} else {
|
||||
LoadingCircle()
|
||||
}
|
||||
})
|
||||
.onAppear(async () => {
|
||||
requestAnimationFrame(() => {
|
||||
this.scrollTop = this.scrollHeight
|
||||
});
|
||||
})
|
||||
.gap(1, em)
|
||||
.position("relative")
|
||||
.overflow("scroll")
|
||||
.height(95, pct)
|
||||
.width(100, pct)
|
||||
.paddingTop(2, em)
|
||||
.paddingBottom(2, em)
|
||||
.backgroundColor("var(--darkbrown)")
|
||||
}
|
||||
}
|
||||
|
||||
register(MessagesPanel)
|
||||
73
ui/site/apps/Messages/MessagesSidebar.js
Normal file
73
ui/site/apps/Messages/MessagesSidebar.js
Normal file
@@ -0,0 +1,73 @@
|
||||
class MessagesSidebar extends Shadow {
|
||||
conversations = []
|
||||
selectedConvoID
|
||||
onSelect
|
||||
|
||||
constructor(conversations, selectedConvoID, onSelect) {
|
||||
super()
|
||||
this.conversations = conversations
|
||||
this.selectedConvoID = selectedConvoID
|
||||
this.onSelect = onSelect
|
||||
}
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
this.conversations.forEach((convo, i) => {
|
||||
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
|
||||
p(this.makeConvoTitle(convo.between))
|
||||
.textAlign("left")
|
||||
.marginLeft(0.5, inches)
|
||||
.paddingTop(0.2, inches)
|
||||
.width(100, pct)
|
||||
.marginTop(0)
|
||||
.fontSize(1, em)
|
||||
.fontWeight("bold")
|
||||
|
||||
p(util.formatTime(convo.messages.last.time))
|
||||
.paddingTop(0.2, inches)
|
||||
.fontSize(0.8, em)
|
||||
.marginRight(0.1, inches)
|
||||
.color("var(--divider")
|
||||
})
|
||||
.justifyContent("space-between")
|
||||
.marginBottom(0)
|
||||
|
||||
p(convo.messages.last.text)
|
||||
.fontSize(0.8, em)
|
||||
.textAlign("left")
|
||||
.marginLeft(0.5, inches)
|
||||
.marginBottom(2, em)
|
||||
.color("var(--divider)")
|
||||
})
|
||||
.background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
|
||||
.onClick(() => {
|
||||
this.onSelect(i)
|
||||
})
|
||||
})
|
||||
})
|
||||
.minWidth(15, vw)
|
||||
.height(100, vh)
|
||||
.gap(0, em)
|
||||
}
|
||||
|
||||
makeConvoTitle(members) {
|
||||
let membersString = ""
|
||||
for(let i=0; i<members.length; i++) {
|
||||
let member = members[i]
|
||||
if(member.email === window.profile.email) {
|
||||
continue;
|
||||
}
|
||||
if(members.length > 2) {
|
||||
membersString += member.firstName
|
||||
} else {
|
||||
membersString += member.firstName + " " + member.lastName
|
||||
}
|
||||
}
|
||||
return membersString
|
||||
}
|
||||
}
|
||||
|
||||
register(MessagesSidebar)
|
||||
Reference in New Issue
Block a user