diff --git a/readme.md b/readme.md index 4f196d8..e043964 100644 --- a/readme.md +++ b/readme.md @@ -1,35 +1,47 @@ -### Run Web App +## Run in Browser ```npm run start``` -### Build and Run (iOS App) -https://capacitorjs.com/docs/ios#adding-the-ios-platform - - -Add this option into the top level of capacitor.config.json if you want the ios app to call the dev server: +### Browser: Dev Frontend and Dev Backend (localhost) +This option should be at the top level of capacitor.config.json "server": { "url": "http://sam.local:5173", "cleartext": true }, -Otherwise, it will call prod. +### Browser: Prod Frontend and Prod Backend +Run: +vite build +npx serve dist -To Install: +If you need to login again: +run localStorage.clear() in the browser dev tools console and then refresh the page. + +## Run On Device +https://capacitorjs.com/docs/ios#adding-the-ios-platform + +One-Time Install: npm install @capacitor/ios npx cap add ios To Open XCode: npx cap open ios -To Rerun: +Run this command to rebuild for iOS npm run build && npx cap copy ios -### Build and run (In Browser, hitting prod server) -vite build -npx serve dist +### iOS: Dev Frontend and Dev Backend (localhost) +This option should be at the top level of capacitor.config.json +"server": { + "url": "http://sam.local:5173", + "cleartext": true +}, -If you need to login again: -run localStorage.clear() in the browser dev tools console and then refresh the page. +### iOS: Dev Frontend with Prod Backend (frm.so) +Add "https://frm.so" to VITE_API_URL in .env.development + +### iOS: Prod Frontend and Prod Backend (frm.so) +Remove the "server" object from capacitor.config ### Various Commands npx cap config - this will list the full configuration currently being used diff --git a/src/Home/Home.js b/src/Home/Home.js index 9e4a62c..104e717 100644 --- a/src/Home/Home.js +++ b/src/Home/Home.js @@ -4,6 +4,9 @@ import "../components/AppWindowContainer.js" class Home extends Shadow { + dragStartX = null + sidebarOpen = false + render() { ZStack(() => { @@ -36,6 +39,83 @@ class Home extends Shadow { .height(window.visualViewport.height - 20, px) .position("fixed") .top(20, px) + .borderLeft("1px solid var(--accent)") + .onTouch((start, e) => { + console.log(e) + if(this.sidebarOpen) { + this.sidebarOpenDrag(start, e) + } else { + this.sidebarClosedDrag(start, e) + } + }) + } + + sidebarOpenDrag(start, e) { + console.log("sidebaropendrag") + if(start) { + let fiveSixths = (window.outerWidth * 5) / 6 + let amount = e.targetTouches[0].clientX + if(amount < fiveSixths) { + this.dragStartX = e.touches[0].clientX + document.addEventListener("touchmove", this.moveSidebar) + } + } else { + if(!this.dragStartX) return; + + let oneThird = window.outerWidth / 3 + let endX = e.changedTouches[0].clientX + if(endX < oneThird) { + this.style.transition = "left .2s" + this.style.left = `0px` + this.sidebarOpen = false + } else { + this.style.transition = "left .2s" + this.sidebarOpen = true + this.style.left = `${oneThird * 2}px` + } + + this.style.transition = "" + this.dragStartX = null + document.removeEventListener("touchmove", this.moveSidebar) + } + } + + sidebarClosedDrag(start, e) { + console.log(e) + if(start) { + let oneTenth = window.outerWidth / 10 + let amount = e.targetTouches[0].clientX + if(amount < oneTenth) { + this.dragStartX = e.touches[0].clientX + document.addEventListener("touchmove", this.moveSidebar) + } + } else { + if(!this.dragStartX) return; + + let oneThird = window.outerWidth / 3 + let endX = e.changedTouches[0].clientX + if(endX > oneThird) { + this.style.transition = "left .2s" + this.style.left = `${oneThird * 2}px` + this.sidebarOpen = true + } else { + this.sidebarOpen = false + this.style.left = "0px" + } + + this.style.transition = "" + this.dragStartX = null + document.removeEventListener("touchmove", this.moveSidebar) + } + } + + moveSidebar = (e) => { + let twoThirds = window.outerWidth * .66 + let amount = e.targetTouches[0].clientX + if(e.targetTouches[0] && amount < twoThirds) { + console.log("dragtivated: ", amount, twoThirds) + this.style.left = `${amount}px` + } } } diff --git a/src/Profile/Profile.js b/src/Profile/Profile.js index 0c940b5..2c3ee27 100644 --- a/src/Profile/Profile.js +++ b/src/Profile/Profile.js @@ -18,152 +18,153 @@ css(` `) class Profile extends Shadow { - constructor() { - super() - this.profile = global.profile - this.bioText = global.profile.bio ?? "" - } + constructor() { + super() + this.profile = global.profile + this.bioText = global.profile.bio ?? "" + } - render() { - ZStack(() => { - p("< Back") - .color("var(--darkred)") - .fontSize(1.5, em) - .position("absolute") - .fontFamily("Arial") - .top(2, rem) - .left(2, rem) - .zIndex(1001) - .onClick(() => { - $("appwindowcontainer-").closeProfile() - }) + render() { + ZStack(() => { + p("< Back") + .color("var(--darkred)") + .fontSize(1.2, em) + .position("absolute") + .fontFamily("Arial") + .top(3, rem) + .left(2, rem) + .zIndex(1001) + .onClick((done) => { + if(done) + $("appwindowcontainer-").closeProfile() + }) - form(() => { - input("Image Upload", "0px", "0px") - .attr({ name: "image-upload", type: "file" }) - .display("none") - .visibility("hidden") - .onChange((e) => { - this.handleUpload(e.target.files[0]); - }) + form(() => { + input("Image Upload", "0px", "0px") + .attr({ name: "image-upload", type: "file" }) + .display("none") + .visibility("hidden") + .onChange((e) => { + this.handleUpload(e.target.files[0]); + }) - VStack(() => { - HStack(() => { - if (global.profile.image_path) { - img(`${util.HOST}${global.profile.image_path}`, "10em", "10em") - .borderRadius(100, pct) - } - }) - .boxSizing("border-box") - .height(10, em) - .width(10, em) - .border("1px solid var(--accent)") - .borderRadius(100, pct) - .background("var(--darkaccent)") - .onTap(() => { - const inputSelector = this.$('[name="image-upload"]'); - inputSelector.click() - }) + VStack(() => { + HStack(() => { + if (global.profile.image_path) { + img(`${util.HOST}${global.profile.image_path}`, "10em", "10em") + .borderRadius(100, pct) + } + }) + .boxSizing("border-box") + .height(10, em) + .width(10, em) + .border("1px solid var(--accent)") + .borderRadius(100, pct) + .background("var(--darkaccent)") + .onTap(() => { + const inputSelector = this.$('[name="image-upload"]'); + inputSelector.click() + }) - h1(this.profile.first_name + " " + this.profile.last_name) - .color("var(--headertext") - .width(70, pct) - .textAlign("center") - .marginBottom(0.25, em) + h1(this.profile.first_name + " " + this.profile.last_name) + .color("var(--headertext") + .width(70, pct) + .textAlign("center") + .marginBottom(0.25, em) - p("Joined " + this.convertDate(this.profile.created)) - .color("var(--headertext)") - .marginBottom(0.5, em) + p("Joined " + this.convertDate(this.profile.created)) + .color("var(--headertext)") + .marginBottom(0.5, em) - h2("Bio") - .color("var(--headertext") - .margin(0) - .paddingVertical(0.9, em) - .borderTop("2px solid var(--divider)") - .width(70, pct) - .textAlign("center") + h2("Bio") + .color("var(--headertext") + .margin(0) + .paddingVertical(0.9, em) + .borderTop("2px solid var(--divider)") + .width(70, pct) + .textAlign("center") - textarea(this.bioText ? this.bioText : "Tap to start typing...") - .attr({ name: "bioinput" }) - .padding(1, em) - .width(90, pct) - .height(15, em) - .boxSizing("border-box") - .background("var(--searchbackground)") - .color("var(--darktext)") - .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)") - .borderRadius(12, px) - .fontFamily("Arial") - .fontSize(1.1, em) - .outline("none") - .onAppear((e) => { - if (this.bioText) { - $("profile- textarea").innerText = this.bioText - } - }) - .lineHeight(1.2, em) + textarea(this.bioText ? this.bioText : "Tap to start typing...") + .attr({ name: "bioinput" }) + .padding(1, em) + .width(90, pct) + .height(15, em) + .boxSizing("border-box") + .background("var(--searchbackground)") + .color("var(--darktext)") + .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)") + .borderRadius(12, px) + .fontFamily("Arial") + .fontSize(1.1, em) + .outline("none") + .onAppear((e) => { + if (this.bioText) { + $("profile- textarea").innerText = this.bioText + } + }) + .lineHeight(1.2, em) - button("Save Bio") - .padding(1, em) - .fontSize(1.1, em) - .borderRadius(12, px) - .background("var(--searchbackground)") - .color("var(--text)") - .border("1px solid var(--accent)") - .boxSizing("border-box") - .marginVertical(0.75, em) - }) - .horizontalAlign("center") - .marginTop(5, em) - }) - .onSubmit(async (e) => { - e.preventDefault(); - const newBio = new FormData(e.target).get("bioinput"); - if (newBio.trim() !== this.profile.bio.trim()) { - const result = await server.editBio(newBio, this.profile.id) - const { bio, updated_at } = result.data - global.profile.bio = bio - global.profile.updated_at = updated_at - this.profile = global.profile - } - }) - }) - .backgroundColor("var(--main)") - .overflowX("hidden") - .height(window.visualViewport.height - 20, px) - .boxSizing("border-box") - .width(100, pct) - .position("fixed") - .top(100, vh) - .zIndex(5) - .transition("top .3s") - .pointerEvents("none") - } + button("Save Bio") + .padding(1, em) + .fontSize(1.1, em) + .borderRadius(12, px) + .background("var(--searchbackground)") + .color("var(--text)") + .border("1px solid var(--accent)") + .boxSizing("border-box") + .marginVertical(0.75, em) + }) + .horizontalAlign("center") + .marginTop(5, em) + }) + .onSubmit(async (e) => { + e.preventDefault(); + const newBio = new FormData(e.target).get("bioinput"); + if (newBio.trim() !== this.profile.bio.trim()) { + const result = await server.editBio(newBio, this.profile.id) + const { bio, updated_at } = result.data + global.profile.bio = bio + global.profile.updated_at = updated_at + this.profile = global.profile + } + }) + }) + .backgroundColor("var(--main)") + .overflowX("hidden") + .height(window.visualViewport.height - 20, px) + .boxSizing("border-box") + .width(100, pct) + .position("fixed") + .top(100, vh) + .zIndex(5) + .transition("top .3s") + .pointerEvents("none") + } - async handleUpload(file) { - try { - const body = new FormData(); - body.append('image', file); - const res = await util.authFetch(`${util.HOST}/profile/upload-image`, { - method: "POST", - credentials: "include", - headers: { - "Accept": "application/json" - }, - body: body - }); - - if(res.status === 401) { - return res.status - } - if (!res.ok) return res.status; - const data = await res.json() - global.profile = data.member - console.log(global.profile) - } catch (err) { // Network error / Error reaching server - console.error(err); - } - } + async handleUpload(file) { + try { + const body = new FormData(); + body.append('image', file); + const res = await util.authFetch(`${util.HOST}/profile/upload-image`, { + method: "POST", + credentials: "include", + headers: { + "Accept": "application/json" + }, + body: body + }); + + if(res.status === 401) { + return res.status + } + if (!res.ok) return res.status; + const data = await res.json() + global.profile = data.member + console.log(global.profile) + } catch (err) { // Network error / Error reaching server + console.error(err); + } + } convertDate(rawDate) { const parsed = new Date(rawDate); diff --git a/src/_/code/shared.css b/src/_/code/shared.css index bea313c..23452cf 100644 --- a/src/_/code/shared.css +++ b/src/_/code/shared.css @@ -12,7 +12,7 @@ --quillred: #DE3F3F; --brown: #812A18; - --sidebar: #3f914c; + --sidebar: #698b6f; --divider: #523636; --darkbrown: #3f0808; --darkgrey: #5c4646; @@ -20,7 +20,7 @@ --headertext: #433c36e2; --searchbackground: #dfc9ac; --loginButton: var(--main); - --loginBackground: var(--gold); + --loginBackground: #d96b6b; --home-src: /_/icons/home.svg; --home-selected-src: /_/icons/homelightselected.svg; diff --git a/src/apps/People/PeopleCard.js b/src/apps/People/PeopleCard.js index b231a85..b7fdbae 100644 --- a/src/apps/People/PeopleCard.js +++ b/src/apps/People/PeopleCard.js @@ -10,7 +10,8 @@ class PeopleCard extends Shadow { render() { HStack(() => { HStack(() => { - if (!this.imgSrc.includes("null")) { + console.log(this.imgSrc) + if (this.imgSrc && !this.imgSrc.includes("null")) { img(this.imgSrc, "3em", "3em") .borderRadius(100, pct) } @@ -37,7 +38,9 @@ class PeopleCard extends Shadow { } connectedCallback() { - this.imgSrc = `${util.HOST}${this.person.image_path}` + if(this.person.image_path) { + this.imgSrc = `${util.HOST}${this.person.image_path}` + } } convertDate(rawDate) { diff --git a/src/public/_/icons/events.svg b/src/public/_/icons/events.svg index bf3ce43..6c2d257 100644 --- a/src/public/_/icons/events.svg +++ b/src/public/_/icons/events.svg @@ -1,3 +1,3 @@ - - - \ No newline at end of file + + +