sam/ForumMobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Connected DB to events/jobs + more

Browse Source 
- Modified handlers.js to be the same as on frm.so
- Added --trash-src to shared.css
- Modified Event and Job cards to include a trash icon for deleting
- Deleting works, it just does not smoothly re-render yet
- Adjusted visual bug on Events/Jobs where the contents of the AppWindow would overflow vertically. They now scroll and the title/search bar remain fixed.
- Refactored part of People.js into PeopleCard.js
This commit is contained in:
matiasc18
2026-03-15 19:45:04 -04:00
parent dde27f9b31
commit 834d5e763e
9 changed files with 160 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/_/code/bridge/handlers.js
View File

@@ -8,11 +8,11 @@ const handlers = {
},
async editEvent(id, updatedEvent, networkId, userId) {
return await global.db.events.add(id, updatedEvent, networkId, userId);
return await global.db.events.edit(id, updatedEvent, networkId, userId);
},
async deleteEvent(id, networkId, userId) {
return await global.db.events.add(id, networkId, userId);
return await global.db.events.delete(id, networkId, userId);
},
async getEvent(id) {
@@ -28,11 +28,11 @@ const handlers = {
},
async editJob(id, updatedJob, networkId, userId) {
return await global.db.jobs.add(id, updatedJob, networkId, userId);
return await global.db.jobs.edit(id, updatedJob, networkId, userId);
},
async deleteJob(id, networkId, userId) {
return await global.db.jobs.add(id, networkId, userId);
return await global.db.jobs.delete(id, networkId, userId);
},
async getJob(id) {

2
src/_/code/shared.css
View File

@@ -27,6 +27,7 @@
--column-src: /_/icons/column2.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--trash-src: /_/icons/trash.svg;
--pin-src: /_/icons/pin.svg;
--time-src: /_/icons/time.svg;
@@ -56,6 +57,7 @@
--column-src: /_/icons/column2.svg;
--nodes-src: /_/icons/nodes.svg;
--forum-src: /_/icons/forum.svg;
--trash-src: /_/icons/trash.svg;
--pin-src: /_/icons/pinlight.svg;
--time-src: /_/icons/timelight.svg;

20
src/apps/Events/EventCard.js
View File

@@ -1,4 +1,5 @@
import util from "../../util"
import server from "../../_/code/bridge/serverFunctions.js"
class EventCard extends Shadow {
constructor(event) {
@@ -8,12 +9,24 @@ class EventCard extends Shadow {
render() {
VStack(() => {
HStack(() => {
h3(this.event.title)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
if (this.event.creator_id === global.profile.id) {
img(util.cssVariable("trash-src"), "1.5em")
.marginRight(0.5, em)
.onTap(() => {
this.deleteEvent(this.event)
})
}
})
.justifyContent("space-between")
.verticalAlign("center")
HStack(() => {
img(util.cssVariable("pin-src"), "1.3em")
p(this.event.location)
@@ -38,6 +51,13 @@ class EventCard extends Shadow {
.gap(0.5, em)
}
async deleteEvent(event) {
const result = await server.deleteEvent(event.id, event.network_id, global.profile.id)
if (result.data === null) {
console.log("Failed to delete event")
}
}
convertDate(rawDate) {
const parsed = new Date(rawDate);

23
src/apps/Events/Events.js
View File

@@ -22,23 +22,9 @@ css(`
`)
class Events extends Shadow {
events = [
{
id: 1,
network_id: 2,
creator_id: 1,
title: "Austin Chapter Lead",
description: "This is the descriptio lets try a longer one agaiin just to see what it would look like? mayeb even longer bc that was pretty short now that i see it. maybe 2 sentences if possible or more.",
location: "1234 location",
time_start: "2026-01-13 13:41:41.0722",
created: "2026-01-13 12:00:00.0000",
updated_at: "2026-01-13 13:41:41.0722"
}
]
constructor() {
super()
// this.events = global.currentNetwork.data.events;
this.events = global.currentNetwork.data.events;
}
render() {
@@ -55,6 +41,7 @@ class Events extends Shadow {
SearchBar()
VStack(() => {
if (this.events == "" || this.events == []) {
LoadingCircle()
} else if (this.events.length > 0) {
@@ -71,6 +58,8 @@ class Events extends Shadow {
.textAlign("center")
}
})
.overflowY("scroll")
})
.boxSizing("border-box")
.paddingVertical(1, em)
.height(100, pct)
@@ -79,8 +68,8 @@ class Events extends Shadow {
async getEvents(networkId) {
const fetchedEvents = await server.getEvents(networkId)
if (this.checkForUpdates(this.events, fetchedEvents)) {
this.events = fetchedEvents
if (this.checkForUpdates(this.events, fetchedEvents.data)) {
this.events = fetchedEvents.data
this.rerender()
}
}

20
src/apps/Jobs/JobCard.js
View File

@@ -1,4 +1,5 @@
import util from "../../util.js"
import server from "../../_/code/bridge/serverFunctions.js"
class JobCard extends Shadow {
constructor(job) {
@@ -8,12 +9,24 @@ class JobCard extends Shadow {
render() {
VStack(() => {
HStack(() => {
h3(this.job.title)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
if (this.job.creator_id === global.profile.id) {
img(util.cssVariable("trash-src"), "1.5em")
.marginRight(0.5, em)
.onTap(() => {
this.deleteJob(this.job)
})
}
})
.justifyContent("space-between")
.verticalAlign("center")
HStack(() => {
img(util.cssVariable("pin-src"), "1.3em")
p(this.job.location)
@@ -34,6 +47,13 @@ class JobCard extends Shadow {
.gap(0.5, em)
.boxSizing("border-box")
}
async deleteJob(job) {
const result = await server.deleteJob(job.id, job.network_id, global.profile.id)
if (result.data === null) {
console.log("Failed to delete job")
}
}
}
register(JobCard)

21
src/apps/Jobs/Jobs.js
View File

@@ -24,20 +24,10 @@ css(`
`)
class Jobs extends Shadow {
jobs = [
{
id: 1,
network_id: 2,
creator_id: 1,
title: "Austin Chapter Lead",
description: "This is the description",
salary: 50000.00,
company: "Hyperia",
location: "1234 location",
created: "2026-03-12 13:41:41.0722",
updated_at: "2026-03-12 13:41:41.0722"
constructor() {
super()
this.jobs = global.currentNetwork.data.jobs;
}
]
render() {
VStack(() => {
@@ -55,6 +45,7 @@ class Jobs extends Shadow {
SearchBar()
VStack(() => {
if (this.jobs == "" || this.jobs == []) {
LoadingCircle()
} else if (this.jobs.length > 0) {
@@ -71,6 +62,8 @@ class Jobs extends Shadow {
.textAlign("center")
}
})
.overflowY("scroll")
})
.boxSizing("border-box")
.paddingVertical(1, em)
.height(100, pct)
@@ -79,7 +72,7 @@ class Jobs extends Shadow {
async getJobs(networkId) {
const fetchedJobs = await server.getJobs(networkId)
if (this.checkForUpdates(this.jobs, fetchedJobs)) {
if (this.checkForUpdates(this.jobs, fetchedJobs.data)) {
this.jobs = fetchedJobs
this.rerender()
}

27
src/apps/People/People.js
View File

@@ -1,3 +1,5 @@
import "./PeopleCard.js"
css(`
people- {
font-family: 'Arial';
@@ -41,30 +43,7 @@ class People extends Shadow {
LoadingCircle()
} else if (this.people.length > 0) {
for (let i = 0; i < this.people.length; i++) {
HStack(() => {
HStack(() => { })
.boxSizing("border-box")
.height(3.5, em)
.width(3.5, em)
.padding(0.5, em)
.border("1px solid var(--accent)")
.borderRadius(100, pct)
.background("black")
VStack(() => {
h3(this.people[i].first_name + " " + this.people[i].last_name)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
p("<b>Member since: </b>" + " " + this.convertDate(this.people[i].created))
})
.verticalAlign("center")
.gap(0.5, em)
})
.height(3.5, em)
.padding(0.75, em)
.gap(1, em)
PeopleCard(this.people[i])
}
} else {
h2("No Members")

58
src/apps/People/PeopleCard.js Normal file
View File

@@ -0,0 +1,58 @@
class PeopleCard extends Shadow {
constructor(person) {
super()
this.person = person
}
render() {
HStack(() => {
HStack(() => { })
.boxSizing("border-box")
.height(3.5, em)
.width(3.5, em)
.padding(0.5, em)
.border("1px solid var(--accent)")
.borderRadius(100, pct)
.background("black")
VStack(() => {
h3(this.person.first_name + " " + this.person.last_name)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
p("<b>Member since: </b>" + " " + this.convertDate(this.person.created))
})
.verticalAlign("center")
.gap(0.5, em)
})
.height(3.5, em)
.padding(0.75, em)
.gap(1, em)
}
convertDate(rawDate) {
const parsed = new Date(rawDate);
if (isNaN(parsed.getTime())) return rawDate;
const month = parsed.toLocaleString("en-US", { month: "long", timeZone: "UTC" });
const day = parsed.getUTCDate();
const year = parsed.getUTCFullYear();
const ordinal = (n) => {
const mod100 = n % 100;
if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
switch (n % 10) {
case 1: return `${n}st`;
case 2: return `${n}nd`;
case 3: return `${n}rd`;
default: return `${n}th`;
}
};
return `${month} ${ordinal(day)}, ${year}`;
}
}
register(PeopleCard)

1
src/components/AppWindow.js
View File

@@ -31,6 +31,7 @@ class AppWindow extends Shadow {
}
})
.height(100, pct)
.overflowY("hidden")
.display("flex")
.position("relative")
.onNavigate(() => {