better formatted time and ability to view messages in large mode
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
class Dashboard extends Shadow {
|
||||
|
||||
COL = {
|
||||
time: 17,
|
||||
time: 14,
|
||||
fname: 6,
|
||||
lname: 6,
|
||||
email: 20,
|
||||
@@ -18,6 +18,34 @@ class Dashboard extends Shadow {
|
||||
.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.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(() => {
|
||||
|
||||
@@ -43,7 +71,7 @@ class Dashboard extends Shadow {
|
||||
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("Message").width(this.COL.message, pct).fontWeight("bold").whiteSpace("nowrap")
|
||||
p("County").width(this.COL.county, pct).fontWeight("bold").whiteSpace("nowrap");
|
||||
})
|
||||
.width(95, pct)
|
||||
@@ -51,13 +79,32 @@ class Dashboard extends Shadow {
|
||||
.gap(8);
|
||||
|
||||
global.currentNetwork.data.contact.forEach((entry) => {
|
||||
|
||||
HStack(() => {
|
||||
this.cell("time", entry.time);
|
||||
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);
|
||||
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)
|
||||
@@ -85,7 +132,12 @@ class Dashboard extends Shadow {
|
||||
|
||||
global.currentNetwork.data.join.forEach((entry) => {
|
||||
HStack(() => {
|
||||
this.cell("time", entry.time);
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user