Showing members, allowing window resize

ui/_/code/quill.js

@@ -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", () => {

ui/desktop/Home.js

@@ -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)")

ui/desktop/apps/Dashboard/Dashboard.js

@@ -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);

ui/desktop/apps/Forum/Forum.js

@@ -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)")

ui/desktop/apps/Jobs/Jobs.js

@@ -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"
         }

ui/desktop/apps/Market/Market.js

@@ -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"

ui/desktop/apps/Market/MarketGrid.js

@@ -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) {
+                    if (ParchmentMade) {
-                        filtered = filtered.filter(item => item.madeIn === "Hyperia");
+                        filtered = filtered.filter(item => item.madeIn === "Parchment");
                     }
                     if (americaMade) {
                         filtered = filtered.filter(item => item.madeIn === "America");

ui/desktop/apps/Market/MarketSidebar.js

@@ -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)
             })

ui/desktop/apps/People/People.js

@@ -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)

ui/desktop/components/AppMenu.js

@@ -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")

ui/desktop/components/AppWindow.js

@@ -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":
+                case "People":
-                    Forum()
+                    People()
-                    break;
-                case "Messages":
-                    Messages()
-                    break;
-                case "Market":
-                    Market()
-                    break;
-                case "Jobs":
-                    Jobs()
                     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)")

ui/desktop/index.js

@@ -9,17 +9,24 @@ window.Socket = new Socket()
 window.currentNetwork = ""
 window.currentApp = ""
 
-window.addEventListener("navigate", () => {
+async function openNetworkAndApp() {
-    if(window.currentNetwork !== selectedNetwork()) {
+    
-        window.currentNetwork = selectedNetwork()
+    if(window.currentNetwork !== networkFromPath()) {
+        window.currentNetwork = networkFromPath()
         const event = new CustomEvent('networkchanged', {
             detail: { name: currentNetwork }
         });
         window.dispatchEvent(event)
     }
 
-    if(window.currentApp !== selectedApp()) {
+    if(!window.currentNetwork.data) {
-        window.currentApp = selectedApp()
+        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)
     }
 

ui/mobile/apps/Forum/Forum.js

@@ -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)")

ui/mobile/apps/Jobs/Jobs.js

@@ -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"
         }

ui/mobile/apps/Market/Market.js

@@ -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"

ui/mobile/apps/Market/MarketGrid.js

@@ -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) {
+                    if (ParchmentMade) {
-                        filtered = filtered.filter(item => item.madeIn === "Hyperia");
+                        filtered = filtered.filter(item => item.madeIn === "Parchment");
                     }
                     if (americaMade) {
                         filtered = filtered.filter(item => item.madeIn === "America");

ui/mobile/apps/Market/MarketSidebar.js

@@ -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)
             })

ui/mobile/index.html

@@ -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">

ui/public/pages/Why.js

@@ -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)