131 lines
5.4 KiB
JavaScript
131 lines
5.4 KiB
JavaScript
class People extends Shadow {
|
|
render() {
|
|
VStack(() => {
|
|
h1("Members")
|
|
.fontWeight("bold")
|
|
.marginBottom(2, em)
|
|
.marginLeft(2, em)
|
|
|
|
VStack(() => {
|
|
VStack(() => {
|
|
p("Officers")
|
|
.marginBottom(2, vh)
|
|
.marginLeft(4, em)
|
|
.fontStyle("italic")
|
|
|
|
ZStack(() => {
|
|
new gridjs.Grid({
|
|
columns: ["Name", "Email"],
|
|
data: global.currentNetwork.data.members.map(m => [
|
|
m.firstName + " " + m.lastName,
|
|
m.email
|
|
]),
|
|
sort: true,
|
|
search: true,
|
|
style: {
|
|
table: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'box-shadow': 'none',
|
|
'font-size': '0.9em',
|
|
'max-width': '90%'
|
|
},
|
|
th: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'border': 'none',
|
|
},
|
|
td: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'border': 'none',
|
|
'border-bottom': '1px solid var(--divider)'
|
|
}
|
|
}
|
|
}).render(quill.rendering.last)
|
|
})
|
|
.overflow("hidden")
|
|
})
|
|
.gap(0.5, em)
|
|
|
|
VStack(() => {
|
|
p("Stripe Subscribers")
|
|
.marginBottom(2, vh)
|
|
.marginLeft(4, em)
|
|
.fontStyle("italic")
|
|
|
|
ZStack(() => {
|
|
new gridjs.Grid({
|
|
columns: ["Amount", "Name", "Email", "Phone", "County", "Created"],
|
|
data: global.currentNetwork.data.stripeMembers.map(m => [
|
|
"$" + m.subscriptions[0].amount,
|
|
m.name,
|
|
m.email,
|
|
m.phone,
|
|
m.city,
|
|
new Date(m.created * 1000).toLocaleString('en-US', {
|
|
timeZone: 'America/Chicago',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
})
|
|
]),
|
|
sort: true,
|
|
search: true,
|
|
style: {
|
|
input: {
|
|
'background-color': 'var(--window)',
|
|
},
|
|
table: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'box-shadow': 'none',
|
|
'font-size': '0.9em',
|
|
'max-width': '90%'
|
|
},
|
|
th: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'border': 'none',
|
|
},
|
|
td: {
|
|
'background-color': 'var(--window)',
|
|
'color': 'var(--accent)',
|
|
'border': 'none',
|
|
'border-bottom': '1px solid var(--divider)'
|
|
}
|
|
}
|
|
}).render(quill.rendering.last)
|
|
|
|
css(`
|
|
input.gridjs-input {
|
|
background-color: var(--window);
|
|
color: var(--accent);
|
|
border: none;
|
|
border-bottom: 1px solid var(--divider);
|
|
border-radius: 0;
|
|
margin-left: 4em
|
|
}
|
|
|
|
.gridjs-wrapper {
|
|
box-shadow: none;
|
|
padding-left: 3em;
|
|
}
|
|
`)
|
|
})
|
|
.marginBottom(3, em)
|
|
})
|
|
.gap(0.5, em)
|
|
})
|
|
.gap(4, em)
|
|
})
|
|
.gap(0.5, em)
|
|
.paddingTop(4, pct)
|
|
.width(100, pct)
|
|
.height(100, pct);
|
|
}
|
|
}
|
|
|
|
register(People) |