Showing members, allowing window resize

This commit is contained in:
metacryst
2026-01-14 17:47:59 -06:00
parent 0f400fe300
commit d57ab2bf7a
19 changed files with 94 additions and 87 deletions

View File

@@ -1084,7 +1084,7 @@ HTMLElement.prototype.onTap = function(cb) {
- We can't just put a listener on the element, because a window "navigate" event won't trigger it
- We can't just put a listener on the window, because the "this" variable will only refer to the window
- And, if we try to re-add that scope using bind(), it makes the return value of .toString() unreadable, which means we cannot detect duplicate listeners.
- Therefore, we attach a global navigate event to the window, and each navigate event in this array, and manually trigger each event when the global one fires.
- Therefore, we attach a global navigate event to the window, and store each navigate event in this navigateListeners array, and manually trigger each event on the elements when the global one fires.
*/
navigateListeners = []
window.addEventListener("navigate", () => {

View File

@@ -47,6 +47,11 @@ class Home extends Shadow {
})
a("/signout", "Sign Out")
.paddingVertical(0)
.paddingHorizontal(0.5, em)
.height(2, em)
.lineHeight(2, em)
.fontSize(0.8, em)
.background("transparent")
.border("1px solid var(--accent")
.color("var(--accent)")

View File

@@ -41,7 +41,7 @@ class Dashboard extends Shadow {
.maxWidth(95, pct)
.gap(8);
window.comalData.contact.forEach((entry) => {
window.currentNetwork.data.contact.forEach((entry) => {
HStack(() => {
this.cell("time", entry.time);
this.cell("fname", entry.fname);
@@ -74,7 +74,7 @@ class Dashboard extends Shadow {
.maxWidth(95, pct)
.gap(8);
window.comalData.join.forEach((entry) => {
window.currentNetwork.data.contact.forEach((entry) => {
HStack(() => {
this.cell("time", entry.time);
this.cell("fname", entry.fname);

View File

@@ -69,7 +69,7 @@ class Forum extends Shadow {
ForumPanel()
input("Message Hyperia", "98%")
input("Message Parchment", "98%")
.paddingVertical(1, em)
.paddingLeft(2, pct)
.color("var(--accent)")

View File

@@ -30,7 +30,7 @@ class Jobs extends Shadow {
{
title: "Austin Chapter Lead",
salary: "1% of Local Revenue",
company: "Hyperia",
company: "Parchment",
city: "Austin",
state: "TX"
}

View File

@@ -33,7 +33,7 @@ class Market extends Shadow {
stars: "5",
reviews: 1,
price: "$12",
company: "Hyperia",
company: "Parchment",
type: "new",
image: "/db/images/1",
madeIn: "America"

View File

@@ -31,15 +31,15 @@ class MarketGrid extends Shadow {
let params = new URLSearchParams(window.location.search);
const hyperiaMade = params.get("hyperia-made") === "true";
const ParchmentMade = params.get("Parchment-made") === "true";
const americaMade = params.get("america-made") === "true";
const newItem = params.get("new") === "true";
const usedItem = params.get("used") === "true";
let filtered = this.listings;
if (hyperiaMade) {
filtered = filtered.filter(item => item.madeIn === "Hyperia");
if (ParchmentMade) {
filtered = filtered.filter(item => item.madeIn === "Parchment");
}
if (americaMade) {
filtered = filtered.filter(item => item.madeIn === "America");

View File

@@ -19,12 +19,12 @@ class MarketSidebar extends Shadow {
input()
.attr({
"type": "checkbox",
"id": "hyperia-check"
"id": "Parchment-check"
})
.onChange(this.handleChecked)
label("Hyperia-Made")
label("Parchment-Made")
.attr({
"for": "hyperia-check"
"for": "Parchment-check"
})
.marginLeft(0.5, em)
})

View File

@@ -0,0 +1,26 @@
class People extends Shadow {
render() {
VStack(() => {
h1("Members")
.fontWeight("bold")
.marginBottom(2, em)
for(let i = 0; i < window.currentNetwork.data.members.length; i++) {
let member = window.currentNetwork.data.members[i]
HStack(() => {
p(member.firstName + " " + member.lastName)
.width(10, pct)
p(member.email)
.width(10, pct)
})
}
})
.gap(0.5, em)
.paddingTop(4, pct)
.paddingLeft(5, pct)
.width(100, pct)
.height(100, pct);
}
}
register(People)

View File

@@ -46,7 +46,7 @@ class AppMenu extends Shadow {
this.rerender()
})
.onEvent("appchange", () => {
console.log("event firing successfully")
// console.log("app hello?") // BUG: Quill is not acknowledging this event unless there is something else in the function body
this.rerender()
})
.position("fixed")

View File

@@ -4,6 +4,7 @@ import "../apps/Tasks/Tasks.js"
import "../apps/Messages/Messages.js"
import "../apps/Market/Market.js"
import "../apps/Jobs/Jobs.js"
import "../apps/People/People.js"
class AppWindow extends Shadow {
@@ -25,22 +26,16 @@ class AppWindow extends Shadow {
case "Dashboard":
Dashboard()
break;
case "Forum":
Forum()
break;
case "Messages":
Messages()
break;
case "Market":
Market()
break;
case "Jobs":
Jobs()
case "People":
People()
break;
}
})
.overflow("scroll")
.position("fixed")
.position("absolute")
.onEvent("resize", () => {
this.rerender()
})
.width(window.innerWidth - this.calculateWidth(), px)
.height(window.innerHeight - this.calculateHeight(), px)
.background("var(--app)")

View File

@@ -9,17 +9,24 @@ window.Socket = new Socket()
window.currentNetwork = ""
window.currentApp = ""
window.addEventListener("navigate", () => {
if(window.currentNetwork !== selectedNetwork()) {
window.currentNetwork = selectedNetwork()
async function openNetworkAndApp() {
if(window.currentNetwork !== networkFromPath()) {
window.currentNetwork = networkFromPath()
const event = new CustomEvent('networkchanged', {
detail: { name: currentNetwork }
});
window.dispatchEvent(event)
}
if(window.currentApp !== selectedApp()) {
window.currentApp = selectedApp()
if(!window.currentNetwork.data) {
let appData = await fetch("/app/orgdata/" + window.profile.networks[0].id, {method: "GET"})
let json = await appData.json()
window.currentNetwork.data = json
}
if(window.currentApp !== appFromPath()) {
window.currentApp = appFromPath()
const event = new CustomEvent('appchange', {
detail: { name: window.currentApp }
});
@@ -29,9 +36,22 @@ window.addEventListener("navigate", () => {
if(window.currentNetwork) { // 2 navigates fire on load: 1 initial, and one after the org redirect
document.title = `${window.currentNetwork.abbreviation} | Parchment`
}
})
}
window.selectedNetwork = function () {
window.addEventListener("navigate", openNetworkAndApp)
window.openApp = function(appName) {
const appUrl = appName.charAt(0).toLowerCase() + appName.slice(1);
let parts = window.location.pathname.split('/').filter(Boolean);
let newPath = "/" + parts[0] + "/" + appUrl
window.navigateTo(newPath)
const event = new CustomEvent('appchange', {
detail: { name: appName }
});
window.dispatchEvent(event)
}
window.networkFromPath = function () {
const pathname = window.location.pathname;
const firstSegment = pathname.split('/').filter(Boolean)[0] || '';
let networks = window.profile?.networks
@@ -43,7 +63,7 @@ window.selectedNetwork = function () {
}
}
window.selectedApp = function() {
window.appFromPath = function() {
const pathname = window.location.pathname;
const segments = pathname.split('/').filter(Boolean);
const secondSegment = segments[1] || "";
@@ -51,19 +71,6 @@ window.selectedApp = function() {
return capitalized
}
window.openApp = function(appName) {
const appUrl = appName.charAt(0).toLowerCase() + appName.slice(1);
let parts = window.location.pathname.split('/').filter(Boolean);
let newPath = "/" + parts[0] + "/" + appUrl
console.log(newPath)
window.navigateTo(newPath)
// window.history.replaceState({}, '', newPath);
const event = new CustomEvent('appchange', {
detail: { name: appName }
});
window.dispatchEvent(event)
}
async function getProfile() {
try {
const res = await fetch("/profile", {
@@ -77,38 +84,33 @@ async function getProfile() {
if (!res.ok) throw new Error("Failed to fetch profile");
const profile = await res.json();
console.log(profile);
console.log("getProfile: ", profile);
window.profile = profile
} catch (err) {
console.error(err);
}
}
async function setCurrentNetwork() {
function getInitialNetworkPath() {
let path = ""
let defaultNetwork = window.profile.networks[0]
if(!selectedNetwork()) {
if(!networkFromPath()) {
path += (defaultNetwork.abbreviation + "/")
}
if(!selectedApp()) {
if(!appFromPath()) {
let defaultApp = defaultNetwork.apps[0]
path += defaultApp.toLowerCase()
}
let appData = await fetch("/app/orgdata/" + defaultNetwork.id, {method: "GET"})
let json = await appData.json()
console.log(json)
window.comalData = json
return path
}
getProfile().then(async () => {
if(window.profile.networks.length > 0) {
let path = await setCurrentNetwork()
let path = getInitialNetworkPath()
window.navigateTo(path)
}

View File

@@ -34,7 +34,7 @@ class Forum extends Shadow {
ForumPanel()
input("Message Hyperia", "98%")
input("Message Parchment", "98%")
.paddingVertical(1, em)
.paddingLeft(2, pct)
.color("var(--accent)")

View File

@@ -30,7 +30,7 @@ class Jobs extends Shadow {
{
title: "Austin Chapter Lead",
salary: "1% of Local Revenue",
company: "Hyperia",
company: "Parchment",
city: "Austin",
state: "TX"
}

View File

@@ -33,7 +33,7 @@ class Market extends Shadow {
stars: "5",
reviews: 1,
price: "$12",
company: "Hyperia",
company: "Parchment",
type: "new",
image: "/db/images/1",
madeIn: "America"

View File

@@ -31,15 +31,15 @@ class MarketGrid extends Shadow {
let params = new URLSearchParams(window.location.search);
const hyperiaMade = params.get("hyperia-made") === "true";
const ParchmentMade = params.get("Parchment-made") === "true";
const americaMade = params.get("america-made") === "true";
const newItem = params.get("new") === "true";
const usedItem = params.get("used") === "true";
let filtered = this.listings;
if (hyperiaMade) {
filtered = filtered.filter(item => item.madeIn === "Hyperia");
if (ParchmentMade) {
filtered = filtered.filter(item => item.madeIn === "Parchment");
}
if (americaMade) {
filtered = filtered.filter(item => item.madeIn === "America");

View File

@@ -19,12 +19,12 @@ class MarketSidebar extends Shadow {
input()
.attr({
"type": "checkbox",
"id": "hyperia-check"
"id": "Parchment-check"
})
.onChange(this.handleChecked)
label("Hyperia-Made")
label("Parchment-Made")
.attr({
"for": "hyperia-check"
"for": "Parchment-check"
})
.marginLeft(0.5, em)
})

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<title>Parchment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/_/icons/logo.svg">
<link rel="stylesheet" href="/_/code/shared.css">

View File

@@ -1,21 +0,0 @@
class Why extends Shadow {
render() {
p(`I grew up going to Classical Christian schools all my life. Little did I know, this was a very unique experience - we got to learn all about our history, and everyone had a shared moral understanding.
<br><br>Only when I went out into the world did I realize that most Americans have no idea what this is like. They have never been a part of a shared culture, and the only value they know is multiculturalism.
<br><br>As adults, that is the world the we are all expected to live in.
<br><br>Classical Christian schools are great, but what if I want to live a Classical Christian life?
<br><br>That is what Hyperia is for. It is a Classical Christian space for adults.
<br><br> -- Sam Russell, Founder
`)
.marginTop(window.isMobile() ? 20 : 30, vh)
.marginHorizontal(window.isMobile() ? 10 : 20, vw)
.marginBottom(20, vh)
}
}
register(Why)