sam/frm.so
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

showing more info for stripe members, showing data in proper table

Browse Source
This commit is contained in:
metacryst
2026-03-06 07:58:03 -06:00
parent 4061e86ce7
commit b22b12a7a5
6 changed files with 112 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
ui/desktop/apps/People/People.js
View File

@@ -4,56 +4,116 @@ class People extends Shadow {
h1("Members")
.fontWeight("bold")
.marginBottom(2, em)
.marginLeft(4, em)
HStack(() => {
VStack(() => {
VStack(() => {
p("Officers")
.marginBottom(2, vh)
.marginLeft(8, em)
.fontStyle("italic")
for(let i = 0; i < global.currentNetwork.data.members.length; i++) {
let member = global.currentNetwork.data.members[i]
HStack(() => {
p(member.firstName + " " + member.lastName)
.width(10, vw)
p(member.email)
.width(10, vw)
})
}
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'
},
th: {
'background-color': 'var(--window)',
'color': 'var(--accent)',
'border': 'none',
'border-bottom': '1px solid rgb(69 53 53)'
},
td: {
'background-color': 'var(--window)',
'color': 'var(--accent)',
'border': 'none',
'border-bottom': '1px solid rgb(69 53 53)'
}
}
}).render(quill.rendering.last)
})
})
.gap(0.5, em)
VStack(() => {
p("Stripe Subscribers")
.marginBottom(2, vh)
.marginLeft(8, em)
.fontStyle("italic")
for(let i = 0; i < global.currentNetwork.data.stripeMembers.length; i++) {
let member = global.currentNetwork.data.stripeMembers[i]
HStack(() => {
p(member.name)
.width(10, vw)
p(member.email)
.width(20, vw)
p(new Date(member.created * 1000).toLocaleString('en-US', {
timeZone: 'America/Chicago',
hour: 'numeric',
minute: '2-digit',
month: 'numeric',
day: 'numeric',
year: 'numeric'
}))
.width(40, vw)
})
}
ZStack(() => {
new gridjs.Grid({
columns: ["Amount", "Name", "Email", "Phone", "Area", "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'
},
th: {
'background-color': 'var(--window)',
'color': 'var(--accent)',
'border': 'none',
'border-bottom': '1px solid rgb(69 53 53)'
},
td: {
'background-color': 'var(--window)',
'color': 'var(--accent)',
'border': 'none',
'border-bottom': '1px solid rgb(69 53 53)'
}
}
}).render(quill.rendering.last)
css(`
input.gridjs-input {
background-color: var(--window);
color: var(--accent);
border: 1px solid rgb(69 53 53);
margin-left: 8em
}
`)
})
})
.gap(0.5, em)
})
.gap(10, vw)
.gap(4, em)
})
.gap(0.5, em)
.paddingTop(4, pct)
.paddingLeft(5, pct)
.width(100, pct)
.height(100, pct);
}