Add event + add job form
- Modified handlers to catch errors - Added placeholder "No location added", etc. messages to Job/Event cards - Added EventForm.js and JobForm.js for adding - EventForm and JobForm are animated to slide up from bottom - Modified openProfile/closeProfile logic - Fixed SidebarItem().onClick() firing twice bug (switched to .onTap) - Profile is now animated to slide up from the bottom
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import util from "../../util.js"
|
||||
import server from "../../_/code/bridge/serverFunctions"
|
||||
|
||||
class JobForm extends Shadow {
|
||||
inputStyles(el) {
|
||||
@@ -19,59 +19,185 @@ class JobForm extends Shadow {
|
||||
})
|
||||
}
|
||||
|
||||
errorMessage = ""
|
||||
|
||||
render() {
|
||||
form(() => {
|
||||
VStack(() => {
|
||||
input("Title", "70vw")
|
||||
.attr({ name: "title", type: "text" })
|
||||
ZStack(() => {
|
||||
p("X")
|
||||
.color("var(--darkred)")
|
||||
.fontSize(2, em)
|
||||
.position("absolute")
|
||||
.fontFamily("Arial")
|
||||
.marginTop(1, rem)
|
||||
.marginLeft(1, rem)
|
||||
.onTap(() => {
|
||||
this.toggle()
|
||||
})
|
||||
|
||||
form(() => {
|
||||
VStack(() => {
|
||||
h1("Create a Job")
|
||||
.color("var(--text)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
.marginTop(1.5, em)
|
||||
|
||||
input("Title", "70%")
|
||||
.attr({ name: "title", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("Location", "70%")
|
||||
.attr({ name: "location", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("Company", "70%")
|
||||
.attr({ name: "company", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
HStack(() => {
|
||||
input("Salary", "30%")
|
||||
.attr({ name: "salary_number", type: "number", min: "0", step: "0.01" })
|
||||
.padding(1, em)
|
||||
.marginHorizontal(1, em)
|
||||
.styles(this.inputStyles)
|
||||
select(() => {
|
||||
option("One-time")
|
||||
.attr({ value: "one-time"})
|
||||
option("Hourly")
|
||||
.attr({ value: "hour"})
|
||||
option("Monthly")
|
||||
.attr({ value: "month"})
|
||||
option("Yearly")
|
||||
.attr({ value: "year"})
|
||||
})
|
||||
.attr({ name: "salary_period" })
|
||||
.width(40, pct)
|
||||
.padding(1, em)
|
||||
.marginHorizontal(1, em)
|
||||
.styles(this.inputStyles)
|
||||
})
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("Location", "70vw")
|
||||
.attr({ name: "location", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("Company", "70vw")
|
||||
.attr({ name: "company", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("salary", "70vw")
|
||||
.attr({ name: "salary", type: "number" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
input("Description", "70vw")
|
||||
.attr({ name: "description", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
button("==>")
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.boxSizing("border-box")
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("center")
|
||||
|
||||
input("Description", "70%")
|
||||
.attr({ name: "description", type: "text" })
|
||||
.margin(1, em)
|
||||
.padding(1, em)
|
||||
.styles(this.inputStyles)
|
||||
HStack(() => {
|
||||
button("==>")
|
||||
.padding(1, em)
|
||||
.fontSize(0.9, rem)
|
||||
.borderRadius(12, px)
|
||||
.background("var(--searchbackground)")
|
||||
.color("var(--text)")
|
||||
.border("1px solid var(--accent)")
|
||||
.boxSizing("border-box")
|
||||
.onTouch(function (start) {
|
||||
if (start) {
|
||||
this.style.backgroundColor = "var(--accent)"
|
||||
} else {
|
||||
this.style.backgroundColor = "var(--searchbackground)"
|
||||
}
|
||||
})
|
||||
})
|
||||
.width(70, vw)
|
||||
.margin("auto")
|
||||
.fontSize(0.9, rem)
|
||||
.borderRadius(12, px)
|
||||
.background("var(--accent)")
|
||||
.color("var(--text)")
|
||||
.border("1px solid var(--accent)")
|
||||
.paddingLeft(0, em)
|
||||
.paddingRight(2, em)
|
||||
.marginVertical(1, em)
|
||||
.border("1px solid transparent")
|
||||
|
||||
p("")
|
||||
.dynamicText("errormessage", "{{}}")
|
||||
.margin("auto")
|
||||
.marginTop(1, em)
|
||||
.color("var(--text)")
|
||||
.fontFamily("Arial")
|
||||
.opacity(.7)
|
||||
.padding(0.5, em)
|
||||
.backgroundColor("var(--darkred)")
|
||||
.width(100, pct)
|
||||
.textAlign("center")
|
||||
.boxSizing("border-box")
|
||||
})
|
||||
.horizontalAlign("center")
|
||||
})
|
||||
.onSubmit((e) => {
|
||||
e.preventDefault()
|
||||
const data = {
|
||||
title: e.target.$('[name="title"]').value,
|
||||
location: e.target.$('[name="location"]').value,
|
||||
company: e.target.$('[name="company"]').value,
|
||||
salary_number: e.target.$('[name="salary_number"]').value,
|
||||
salary_period: e.target.$('[name="salary_period"]').value,
|
||||
description: e.target.$('[name="description"]').value,
|
||||
};
|
||||
this.handleSend(data)
|
||||
})
|
||||
})
|
||||
.position("absolute")
|
||||
.height(90, pct)
|
||||
.width(95, pct)
|
||||
.top(50, pct).left(50, pct)
|
||||
.center()
|
||||
.position("fixed")
|
||||
.height(window.visualViewport.height - 20, px)
|
||||
.width(100, pct)
|
||||
.top(100, vh)
|
||||
.background("var(--main)")
|
||||
.zIndex(100)
|
||||
.zIndex(4)
|
||||
.borderTopLeftRadius("10px")
|
||||
.borderTopRightRadius("10px")
|
||||
.boxSizing("border-box")
|
||||
.transform(`translate(-50%, -45%)`)
|
||||
.border("1px solid var(--accent)")
|
||||
.transition("top .3s")
|
||||
}
|
||||
|
||||
tryThis() {
|
||||
console.log("hello2")
|
||||
async handleSend(jobData) {
|
||||
if (!jobData.title) {
|
||||
this.$(".VStack > p")
|
||||
.attr({ errorMessage: 'Jobs must include a title.' })
|
||||
.display("")
|
||||
|
||||
return;
|
||||
} else {
|
||||
this.$(".VStack > p").style.display = "none"
|
||||
}
|
||||
|
||||
const newJob = {
|
||||
title: jobData.title,
|
||||
location: jobData.location.trim() === '' ? null : jobData.location.trim(),
|
||||
company: jobData.company.trim() === '' ? null : jobData.company.trim(),
|
||||
salary_number: jobData.salary_number.trim() === '' ? null : jobData.salary_number,
|
||||
salary_period: jobData.salary_number.trim() === '' ? null : jobData.salary_period,
|
||||
description: jobData.description.trim() === '' ? null : jobData.description.trim()
|
||||
}
|
||||
|
||||
const { data } = await server.addJob(newJob, global.currentNetwork.id, global.profile.id)
|
||||
if (data.status === 200) {
|
||||
console.log("Added new job: ", data)
|
||||
this.toggle()
|
||||
window.dispatchEvent(new CustomEvent('new-job', {
|
||||
detail: { job: data.job }
|
||||
}));
|
||||
} else {
|
||||
console.log("Failed to add new event: ", data)
|
||||
this.$(".VStack > p")
|
||||
.attr({ errorMessage: data.error })
|
||||
.display("")
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if(this.style.top === "15vh") {
|
||||
this.style.top = "100vh"
|
||||
this.pointerEvents = "none"
|
||||
} else {
|
||||
this.style.top = "15vh"
|
||||
this.pointerEvents = "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user