105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
css(`
|
|
people- {
|
|
font-family: 'Arial';
|
|
}
|
|
|
|
people- h1 {
|
|
font-family: 'Bona';
|
|
}
|
|
|
|
people- p {
|
|
color: var(--accent);
|
|
}
|
|
|
|
people- p b {
|
|
color: var(--darkbrown);
|
|
}
|
|
`)
|
|
|
|
class People extends Shadow {
|
|
people = "";
|
|
|
|
constructor() {
|
|
super()
|
|
this.people = global.currentNetwork.data.members;
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
h1("People")
|
|
.color("rgb(158 136 105)")
|
|
.textAlign("center")
|
|
|
|
if (this.people == "") {
|
|
LoadingCircle()
|
|
} else if (this.people.length > 0) {
|
|
for (let i = 0; i < this.people.length; i++) {
|
|
HStack(() => {
|
|
HStack(() => { })
|
|
.boxSizing("border-box")
|
|
.height(3.5, em)
|
|
.width(3.5, em)
|
|
.padding(0.5, em)
|
|
.border("1px solid var(--accent)")
|
|
.borderRadius(100, pct)
|
|
.background("black")
|
|
|
|
VStack(() => {
|
|
h3(this.people[i].firstName + " " + this.people[i].lastName)
|
|
.color("var(--brown)")
|
|
.fontSize(1.2, em)
|
|
.fontWeight("bold")
|
|
.marginVertical(0, em)
|
|
p("<b>Member since: </b>" + " " + this.convertDate(this.people[i].created))
|
|
})
|
|
.verticalAlign("center")
|
|
.gap(0.5, em)
|
|
})
|
|
.height(3.5, em)
|
|
.padding(0.75, em)
|
|
.gap(1, em)
|
|
}
|
|
} else {
|
|
h2("No Members")
|
|
.color("var(--brown)")
|
|
.fontWeight("bold")
|
|
.marginTop(7.5, em)
|
|
.marginBottom(0.5, em)
|
|
.textAlign("center")
|
|
p("Invite people to this network!")
|
|
.textAlign("center")
|
|
.color("var(--darkbrown)")
|
|
}
|
|
})
|
|
.position("relative")
|
|
.boxSizing("border-box")
|
|
.paddingVertical(1, em)
|
|
.height(100, pct)
|
|
.width(100, pct)
|
|
}
|
|
|
|
convertDate(rawDate) {
|
|
const date = rawDate.split("-", 1)[0]; // "01.31.2026
|
|
const [mm, dd, yyyy] = date.split(".").map(Number);
|
|
|
|
const months = [
|
|
"January", "February", "March", "April", "May", "June",
|
|
"July", "August", "September", "October", "November", "December"
|
|
];
|
|
|
|
const ordinal = (n) => {
|
|
const mod100 = n % 100;
|
|
if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
|
|
switch (n % 10) {
|
|
case 1: return `${n}st`;
|
|
case 2: return `${n}nd`;
|
|
case 3: return `${n}rd`;
|
|
default: return `${n}th`;
|
|
}
|
|
};
|
|
|
|
return `${months[mm - 1]} ${ordinal(dd)}, ${yyyy}`;
|
|
}
|
|
}
|
|
|
|
register(People) |