diff --git a/src/Profile/Profile.js b/src/Profile/Profile.js index c51beca..0c940b5 100644 --- a/src/Profile/Profile.js +++ b/src/Profile/Profile.js @@ -1,4 +1,5 @@ import server from "../_/code/bridge/serverFunctions"; +import util from "../util"; css(` profile- textarea::-webkit-scrollbar { @@ -38,15 +39,31 @@ class Profile extends Shadow { }) 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(() => { }) // Profile Image placeholder - .boxSizing("border-box") - .height(10, em) - .width(10, em) - .paddingHorizontal(0.5, em) - .border("1px solid var(--accent)") - .borderRadius(100, pct) - .background("var(--darkaccent)") + 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") @@ -123,6 +140,31 @@ class Profile extends Shadow { .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); + } + } + convertDate(rawDate) { const parsed = new Date(rawDate); diff --git a/src/apps/People/PeopleCard.js b/src/apps/People/PeopleCard.js index 9315bfa..b231a85 100644 --- a/src/apps/People/PeopleCard.js +++ b/src/apps/People/PeopleCard.js @@ -1,19 +1,26 @@ +import util from "../../util" + class PeopleCard extends Shadow { constructor(person) { super() this.person = person + this.imgSrc = null } render() { HStack(() => { - HStack(() => { }) - .boxSizing("border-box") - .height(3, em) - .width(3, em) - .paddingHorizontal(0.5, em) - .border("1px solid var(--accent)") - .borderRadius(100, pct) - .background("var(--darkaccent)") + HStack(() => { + if (!this.imgSrc.includes("null")) { + img(this.imgSrc, "3em", "3em") + .borderRadius(100, pct) + } + }) + .boxSizing("border-box") + .height(3, em) + .width(3, em) + .border("1px solid var(--accent)") + .borderRadius(100, pct) + .background("var(--darkaccent)") VStack(() => { p(this.person.first_name + " " + this.person.last_name) @@ -29,6 +36,10 @@ class PeopleCard extends Shadow { .gap(1, em) } + connectedCallback() { + this.imgSrc = `${util.HOST}${this.person.image_path}` + } + convertDate(rawDate) { const parsed = new Date(rawDate); diff --git a/src/components/AppWindowContainer.js b/src/components/AppWindowContainer.js index e0cf6df..c996c3d 100644 --- a/src/components/AppWindowContainer.js +++ b/src/components/AppWindowContainer.js @@ -2,8 +2,6 @@ import "./AppWindow.js" import "../Profile/Profile.js" class AppWindowContainer extends Shadow { - isProfileOpen = false - render() { ZStack(() => { diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 99c3075..9231df3 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -9,7 +9,6 @@ class Sidebar extends Shadow { .fontFamily("Arial") .marginLeft(2, em) .onTap(function (done) { - console.log("hello") if(done) { if (this.innerText === "Logout") { global.onLogout() diff --git a/vite.config.ts b/vite.config.ts index 73993c2..82fd98d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -32,6 +32,10 @@ export default defineConfig({ target: "http://localhost:10002", changeOrigin: true }, + "/profile/upload-image": { + target: "http://localhost:10002", + changeOrigin: true + }, "/api": { target: "http://localhost:10002", changeOrigin: true