160 lines
5.9 KiB
JavaScript
160 lines
5.9 KiB
JavaScript
class Dashboard extends Shadow {
|
|
|
|
COL = {
|
|
time: 14,
|
|
fname: 6,
|
|
lname: 6,
|
|
email: 20,
|
|
phone: 12,
|
|
message: 24,
|
|
county: 10
|
|
};
|
|
|
|
cell(type, value) {
|
|
return p(value)
|
|
.width(this.COL[type], pct)
|
|
.whiteSpace("nowrap")
|
|
.overflowX("auto")
|
|
.overflowY("hidden")
|
|
}
|
|
|
|
spawnModal(msg) {
|
|
let div = document.createElement("div")
|
|
div.classList.add("modal")
|
|
div.innerText = msg
|
|
div.style.left = "50vw"
|
|
div.style.top = "50vh"
|
|
div.style.padding = "5em"
|
|
div.style.borderRadius = "12px"
|
|
div.style.position = "fixed"
|
|
div.style.backgroundColor = "var(--accent)"
|
|
div.style.color = "var(--main)"
|
|
div.style.transform = "translate(-50%, -50%)"
|
|
document.body.appendChild(div)
|
|
|
|
let p = document.createElement("p")
|
|
p.innerText = "X"
|
|
p.color = "red"
|
|
p.style.position = "absolute"
|
|
p.style.top = "1em"
|
|
p.style.right = "2em"
|
|
p.style.cursor = "pointer"
|
|
p.onClick((finished) => {
|
|
if(finished) {
|
|
p.parentElement.remove()
|
|
}
|
|
})
|
|
div.appendChild(p)
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
|
|
if(window.location.pathname.startsWith("/my")) {
|
|
h1(global.profile.name);
|
|
return
|
|
}
|
|
else if(!window.location.pathname.includes("comalyr")) {
|
|
return
|
|
}
|
|
|
|
h1("Website Inquiries");
|
|
|
|
p("Contact Us")
|
|
.fontWeight("bold")
|
|
.marginTop(4, em)
|
|
.marginBottom(1, em)
|
|
.fontStyle("italic")
|
|
|
|
HStack(() => {
|
|
p("Time").width(this.COL.time, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("First").width(this.COL.fname, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Last").width(this.COL.lname, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Email").width(this.COL.email, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Phone").width(this.COL.phone, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Message").width(this.COL.message, pct).fontWeight("bold").whiteSpace("nowrap")
|
|
p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
})
|
|
.width(95, pct)
|
|
.maxWidth(95, pct)
|
|
.gap(8);
|
|
|
|
global.currentNetwork.data.contact.forEach((entry) => {
|
|
|
|
HStack(() => {
|
|
this.cell("time", entry.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()}`;
|
|
}));
|
|
this.cell("fname", entry.fname);
|
|
this.cell("lname", entry.lname);
|
|
this.cell("email", entry.email);
|
|
this.cell("phone", entry.phone);
|
|
this.cell("message", entry.message)
|
|
.cursor("pointer")
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.outline = "1px solid black"
|
|
} else {
|
|
this.style.outline = ""
|
|
}
|
|
})
|
|
.onClick((done) => {
|
|
if(done) {
|
|
this.spawnModal(entry.message)
|
|
}
|
|
})
|
|
this.cell("county", entry.county ?? "Not Specified");
|
|
})
|
|
.width(95, pct)
|
|
.maxWidth(95, pct)
|
|
.gap(8);
|
|
});
|
|
|
|
p("Join")
|
|
.fontWeight("bold")
|
|
.marginTop(4, em)
|
|
.marginBottom(1, em)
|
|
.fontStyle("italic")
|
|
|
|
HStack(() => {
|
|
p("Time").width(this.COL.time, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("First").width(this.COL.fname, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Last").width(this.COL.lname, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Email").width(this.COL.email, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("Phone").width(this.COL.phone, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
|
|
})
|
|
.width(95, pct)
|
|
.maxWidth(95, pct)
|
|
.gap(8);
|
|
|
|
global.currentNetwork.data.join.forEach((entry) => {
|
|
HStack(() => {
|
|
this.cell("time", entry.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()}`;
|
|
}));
|
|
this.cell("fname", entry.fname);
|
|
this.cell("lname", entry.lname);
|
|
this.cell("email", entry.email);
|
|
this.cell("phone", entry.phone);
|
|
this.cell("county", entry.county ?? "Not Specified");
|
|
})
|
|
.width(95, pct)
|
|
.maxWidth(95, pct)
|
|
.gap(8);
|
|
});
|
|
})
|
|
.paddingTop(4, pct)
|
|
.paddingLeft(5, pct)
|
|
.width(100, pct)
|
|
.height(100, pct);
|
|
}
|
|
}
|
|
|
|
register(Dashboard) |