Showing members, allowing window resize
This commit is contained in:
@@ -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", () => {
|
||||
|
||||
@@ -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)")
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)")
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
||||
26
ui/desktop/apps/People/People.js
Normal file
26
ui/desktop/apps/People/People.js
Normal 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)
|
||||
@@ -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")
|
||||
|
||||
@@ -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)")
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
@@ -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)")
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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)
|
||||
Reference in New Issue
Block a user