88 lines
2.8 KiB
JavaScript
88 lines
2.8 KiB
JavaScript
import "../../components/LoadingCircle.js"
|
|
|
|
class ForumPanel extends Shadow {
|
|
forums = [
|
|
"HY"
|
|
]
|
|
messages = []
|
|
|
|
render() {
|
|
VStack(() => {
|
|
if(this.messages.length > 0) {
|
|
|
|
let previousDate = null
|
|
|
|
for(let i=0; i<this.messages.length; i++) {
|
|
let message = this.messages[i]
|
|
const dateParts = this.parseDate(message.time);
|
|
const { date, time } = dateParts;
|
|
|
|
if (previousDate !== date) {
|
|
previousDate = date;
|
|
|
|
p(date)
|
|
.textAlign("center")
|
|
.opacity(0.5)
|
|
.marginVertical(1, em)
|
|
.color("var(--divider)")
|
|
}
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p(message.sentBy)
|
|
.fontWeight("bold")
|
|
.marginBottom(0.3, em)
|
|
|
|
p(util.formatTime(message.time))
|
|
.opacity(0.2)
|
|
.marginLeft(1, em)
|
|
})
|
|
p(message.text)
|
|
})
|
|
}
|
|
} else {
|
|
LoadingCircle()
|
|
}
|
|
})
|
|
.gap(1, em)
|
|
.position("relative")
|
|
.overflow("scroll")
|
|
.height(100, pct)
|
|
.width(96, pct)
|
|
.paddingTop(5, em)
|
|
.paddingBottom(2, em)
|
|
.paddingLeft(4, pct)
|
|
.backgroundColor("var(--darkbrown)")
|
|
.onAppear(async () => {
|
|
requestAnimationFrame(() => {
|
|
this.scrollTop = this.scrollHeight
|
|
});
|
|
let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
|
|
if(!res) console.error("failed to get messages")
|
|
if(res.msg.length > 0 && this.messages.length === 0) {
|
|
this.messages = res.msg
|
|
this.rerender()
|
|
}
|
|
window.addEventListener("new-post", (e) => {
|
|
this.messages = e.detail
|
|
if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
|
|
this.rerender()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
parseDate(str) {
|
|
// Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
|
|
const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
|
|
if (!match) return null;
|
|
|
|
const [, mm, dd, yyyy, hh, min, ampm] = match;
|
|
const date = `${mm}/${dd}/${yyyy}`;
|
|
const time = `${hh}:${min}${ampm.toLowerCase()}`;
|
|
|
|
return { date, time };
|
|
}
|
|
}
|
|
|
|
register(ForumPanel) |