150 lines
4.7 KiB
JavaScript
150 lines
4.7 KiB
JavaScript
import "/_/code/components/LoadingCircle.js"
|
|
|
|
css(`
|
|
panel- {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
panel-::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0px;
|
|
height: 0px;
|
|
}
|
|
|
|
panel-::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
}
|
|
|
|
panel-::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
`)
|
|
|
|
class Panel extends Shadow {
|
|
announcements = []
|
|
isSending = false
|
|
|
|
constructor(announcements) {
|
|
super()
|
|
this.announcements = announcements
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
if(this.announcements.length > 0) {
|
|
let previousDate = null
|
|
|
|
for(let i=0; i<this.announcements.length; i++) {
|
|
let announcement = this.announcements[i]
|
|
const isMe = announcement.creator_id === global.profile.id
|
|
const dateParts = this.parseDate(announcement.created);
|
|
const { date, time } = dateParts;
|
|
|
|
if (previousDate !== date) {
|
|
previousDate = date;
|
|
|
|
p(date)
|
|
.textAlign("center")
|
|
.opacity(0.6)
|
|
.fontWeight("bold")
|
|
.paddingTop(1, em)
|
|
.paddingBottom(0.5, em)
|
|
.color("var(--quillred)")
|
|
.borderTop(`1px solid var(--${i == 0 ? "transparent" : "divider"})`)
|
|
}
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
h3(isMe ? "Me" : this.getAuthorName(announcement))
|
|
.color(isMe ? "var(--quillred)" : "var(--headertext")
|
|
.opacity(0.75)
|
|
.margin(0)
|
|
|
|
h3(`${date} ${time}`)
|
|
.opacity(0.5)
|
|
.color("var(--headertext)")
|
|
.margin(0)
|
|
.marginLeft(0.5, em)
|
|
.fontSize(1, em)
|
|
|
|
if (announcement.created !== announcement.updated_at) {
|
|
p("(edited)")
|
|
.color("var(--headertext)")
|
|
.letterSpacing(0.8, "px")
|
|
.opacity(0.5)
|
|
.fontWeight("bold")
|
|
.paddingLeft(0.25, em)
|
|
.fontSize(0.9, em)
|
|
}
|
|
})
|
|
.verticalAlign("center")
|
|
.marginBottom(0.1, em)
|
|
|
|
p(announcement.text)
|
|
.color("var(--text)")
|
|
.marginHorizontal(0.2, em)
|
|
.paddingVertical(0.2, em)
|
|
.boxSizing("border-box")
|
|
})
|
|
.marginBottom(0.05, em)
|
|
}
|
|
} else {
|
|
LoadingCircle()
|
|
}
|
|
})
|
|
.gap(1, em)
|
|
.fontSize(1.1, em)
|
|
.boxSizing("border-box")
|
|
.flex("1 1 auto")
|
|
.minHeight(0)
|
|
.overflowY("auto")
|
|
.width(100, pct)
|
|
.paddingBottom(2, em)
|
|
.paddingHorizontal(4, pct)
|
|
.backgroundColor("var(--main)")
|
|
.onAppear(async () => {
|
|
requestAnimationFrame(() => {
|
|
this.scrollTo({ top: 0, behavior: "smooth" });
|
|
});
|
|
})
|
|
}
|
|
|
|
getAuthorName(announcement) {
|
|
const members = global.currentNetwork.data.members;
|
|
const creator = members.find(m => m.id === announcement.creator_id);
|
|
if (creator) {
|
|
return `${creator.first_name} ${creator.last_name}`
|
|
} else {
|
|
return "No name"
|
|
}
|
|
}
|
|
|
|
parseDate(str) {
|
|
// Format: YYYY-MM-DDTHH:MM:SS.mmmZ
|
|
const match = str.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):\d{2}\.\d+Z$/);
|
|
if (!match) return null;
|
|
|
|
const [, yyyy, mm, dd, hh, min] = match;
|
|
|
|
// Convert 24h to 12h
|
|
const hour24 = parseInt(hh, 10);
|
|
const ampm = hour24 >= 12 ? 'pm' : 'am';
|
|
const hour12 = hour24 % 12 || 12;
|
|
|
|
const date = `${mm}/${dd}/${yyyy}`;
|
|
const time = `${hour12}:${min}${ampm}`;
|
|
|
|
return { date, time };
|
|
}
|
|
|
|
formatTime(str) {
|
|
const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
|
|
if (!match) return null;
|
|
|
|
const [_, hourMin, ampm] = match;
|
|
return hourMin + ampm.toLowerCase();
|
|
}
|
|
}
|
|
|
|
register(Panel) |