203 lines
8.8 KiB
JavaScript
203 lines
8.8 KiB
JavaScript
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.first_name + " " + global.profile.last_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) |