working on droplet, adding app components
This commit is contained in:
Sam
@@ -150,6 +150,7 @@ class Dashboard extends Shadow {
|
||||
.gap(8);
|
||||
});
|
||||
})
|
||||
.gap(0.5, em)
|
||||
.paddingTop(4, pct)
|
||||
.paddingLeft(5, pct)
|
||||
.width(100, pct)
|
||||
|
||||
203
ui/desktop/apps/Dashboard/alt.js
Normal file
203
ui/desktop/apps/Dashboard/alt.js
Normal file
@@ -0,0 +1,203 @@
|
||||
class Dashboard extends Shadow {
|
||||
|
||||
gridStyle() {
|
||||
return {
|
||||
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',
|
||||
'border-bottom': '1px solid var(--divider)'
|
||||
},
|
||||
td: {
|
||||
'background-color': 'var(--window)',
|
||||
'color': 'var(--accent)',
|
||||
'border': 'none',
|
||||
'border-bottom': '1px solid var(--divider)'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
gridCSS() {
|
||||
css(`
|
||||
input.gridjs-input {
|
||||
background-color: var(--window);
|
||||
color: var(--accent);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--divider);
|
||||
border-radius: 0;
|
||||
margin-left: 5em
|
||||
}
|
||||
|
||||
.gridjs-wrapper {
|
||||
box-shadow: none;
|
||||
padding-left: 4em;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
`)
|
||||
}
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
|
||||
if(window.location.pathname.startsWith("/my")) {
|
||||
h1(global.profile.name);
|
||||
return
|
||||
}
|
||||
else if(!window.location.pathname.includes("comalyr")) {
|
||||
return
|
||||
}
|
||||
|
||||
h1("Website Inquiries")
|
||||
.paddingLeft(5, pct)
|
||||
|
||||
VStack(() => {
|
||||
VStack(() => {
|
||||
p("Contact Us")
|
||||
.marginBottom(2, vh)
|
||||
.marginLeft(5, em)
|
||||
.fontStyle("italic")
|
||||
|
||||
ZStack(() => {
|
||||
new gridjs.Grid({
|
||||
columns: [
|
||||
{
|
||||
name: "Time",
|
||||
sort: {
|
||||
compare: (a, b) => {
|
||||
const parse = (str) => {
|
||||
const [datePart, timePart] = str.trim().split(/\s+/);
|
||||
const [month, day, year] = datePart.split('.');
|
||||
const normalized = timePart.replace(/(\d+):(\d+)(am|pm)/i, (_, h, m, meridiem) => {
|
||||
let hours = parseInt(h);
|
||||
if (meridiem.toLowerCase() === 'pm' && hours !== 12) hours += 12;
|
||||
if (meridiem.toLowerCase() === 'am' && hours === 12) hours = 0;
|
||||
return `${String(hours).padStart(2, '0')}:${m}:00`;
|
||||
});
|
||||
return new Date(`${year}-${month}-${day}T${normalized}`);
|
||||
}
|
||||
return parse(a) - parse(b);
|
||||
}
|
||||
}
|
||||
},
|
||||
"First", "Last", "Email", "Phone",
|
||||
{
|
||||
name: "Message",
|
||||
formatter: (cell) => gridjs.html(`
|
||||
<div class="messageCell" style="
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
max-width: 300px;
|
||||
" data-message="${cell.replace(/"/g, '"')}">
|
||||
${cell}
|
||||
</div>
|
||||
`)
|
||||
},
|
||||
"County"
|
||||
],
|
||||
data: global.currentNetwork.data.contact.map(e => [
|
||||
e.time.replace(/:\d{6}(?=am|pm)/i, '')
|
||||
.replace('-', ' ')
|
||||
.replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
|
||||
const [h, m] = time.split(':');
|
||||
return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
|
||||
}),
|
||||
e.fname,
|
||||
e.lname,
|
||||
e.email,
|
||||
e.phone,
|
||||
e.message,
|
||||
e.county ?? "Not Specified"
|
||||
]),
|
||||
sort: {
|
||||
multiColumn: false,
|
||||
initialState: {
|
||||
columnIndex: 0,
|
||||
direction: "desc"
|
||||
}
|
||||
},
|
||||
search: true,
|
||||
style: this.gridStyle()
|
||||
}).render(quill.rendering.last)
|
||||
|
||||
this.gridCSS()
|
||||
})
|
||||
.overflow("hidden")
|
||||
})
|
||||
.gap(0.5, em)
|
||||
|
||||
VStack(() => {
|
||||
p("Join")
|
||||
.marginBottom(2, vh)
|
||||
.marginLeft(5, em)
|
||||
.fontStyle("italic")
|
||||
|
||||
ZStack(() => {
|
||||
new gridjs.Grid({
|
||||
columns: [
|
||||
{
|
||||
name: "Time",
|
||||
sort: {
|
||||
compare: (a, b) => {
|
||||
const parse = (str) => {
|
||||
const [datePart, timePart] = str.trim().split(/\s+/);
|
||||
const [month, day, year] = datePart.split('.');
|
||||
const normalized = timePart.replace(/(\d+):(\d+)(am|pm)/i, (_, h, m, meridiem) => {
|
||||
let hours = parseInt(h);
|
||||
if (meridiem.toLowerCase() === 'pm' && hours !== 12) hours += 12;
|
||||
if (meridiem.toLowerCase() === 'am' && hours === 12) hours = 0;
|
||||
return `${String(hours).padStart(2, '0')}:${m}:00`;
|
||||
});
|
||||
return new Date(`${year}-${month}-${day}T${normalized}`);
|
||||
}
|
||||
return parse(a) - parse(b);
|
||||
}
|
||||
}
|
||||
},
|
||||
"First", "Last", "Email", "Phone", "County"
|
||||
],
|
||||
data: global.currentNetwork.data.join.map(e => [
|
||||
e.time.replace(/:\d{6}(?=am|pm)/i, '')
|
||||
.replace('-', ' ')
|
||||
.replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
|
||||
const [h, m] = time.split(':');
|
||||
return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
|
||||
}),
|
||||
e.fname,
|
||||
e.lname,
|
||||
e.email,
|
||||
e.phone,
|
||||
e.county ?? "Not Specified"
|
||||
]),
|
||||
sort: true,
|
||||
search: true,
|
||||
style: this.gridStyle()
|
||||
}).render(quill.rendering.last)
|
||||
|
||||
this.gridCSS()
|
||||
})
|
||||
.marginBottom(3, em)
|
||||
.overflow("hidden")
|
||||
})
|
||||
.gap(0.5, em)
|
||||
})
|
||||
.gap(4, em)
|
||||
})
|
||||
.gap(0.5, em)
|
||||
.paddingTop(4, pct)
|
||||
.width(100, pct)
|
||||
.height(100, pct);
|
||||
}
|
||||
}
|
||||
|
||||
register(Dashboard)
|
||||
@@ -4,13 +4,13 @@ class People extends Shadow {
|
||||
h1("Members")
|
||||
.fontWeight("bold")
|
||||
.marginBottom(2, em)
|
||||
.marginLeft(4, em)
|
||||
.marginLeft(2, em)
|
||||
|
||||
VStack(() => {
|
||||
VStack(() => {
|
||||
p("Officers")
|
||||
.marginBottom(2, vh)
|
||||
.marginLeft(8, em)
|
||||
.marginLeft(4, em)
|
||||
.fontStyle("italic")
|
||||
|
||||
ZStack(() => {
|
||||
@@ -27,35 +27,36 @@ class People extends Shadow {
|
||||
'background-color': 'var(--window)',
|
||||
'color': 'var(--accent)',
|
||||
'box-shadow': 'none',
|
||||
'font-size': '0.9em'
|
||||
'font-size': '0.9em',
|
||||
'max-width': '90%'
|
||||
},
|
||||
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)'
|
||||
'border-bottom': '1px solid var(--divider)'
|
||||
}
|
||||
}
|
||||
}).render(quill.rendering.last)
|
||||
})
|
||||
.overflow("hidden")
|
||||
})
|
||||
.gap(0.5, em)
|
||||
|
||||
VStack(() => {
|
||||
p("Stripe Subscribers")
|
||||
.marginBottom(2, vh)
|
||||
.marginLeft(8, em)
|
||||
.marginLeft(4, em)
|
||||
.fontStyle("italic")
|
||||
|
||||
ZStack(() => {
|
||||
new gridjs.Grid({
|
||||
columns: ["Amount", "Name", "Email", "Phone", "Area", "Created"],
|
||||
columns: ["Amount", "Name", "Email", "Phone", "County", "Created"],
|
||||
data: global.currentNetwork.data.stripeMembers.map(m => [
|
||||
"$" + m.subscriptions[0].amount,
|
||||
m.name,
|
||||
@@ -81,19 +82,19 @@ class People extends Shadow {
|
||||
'background-color': 'var(--window)',
|
||||
'color': 'var(--accent)',
|
||||
'box-shadow': 'none',
|
||||
'font-size': '0.9em'
|
||||
'font-size': '0.9em',
|
||||
'max-width': '90%'
|
||||
},
|
||||
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)'
|
||||
'border-bottom': '1px solid var(--divider)'
|
||||
}
|
||||
}
|
||||
}).render(quill.rendering.last)
|
||||
@@ -103,17 +104,18 @@ class People extends Shadow {
|
||||
background-color: var(--window);
|
||||
color: var(--accent);
|
||||
border: none;
|
||||
border-bottom: 1px solid rgb(69 53 53);
|
||||
border-bottom: 1px solid var(--divider);
|
||||
border-radius: 0;
|
||||
margin-left: 8em
|
||||
margin-left: 4em
|
||||
}
|
||||
|
||||
.gridjs-wrapper {
|
||||
box-shadow: none;
|
||||
padding-left: 8em;
|
||||
padding-left: 3em;
|
||||
}
|
||||
`)
|
||||
})
|
||||
.marginBottom(3, em)
|
||||
})
|
||||
.gap(0.5, em)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user