204 lines
7.7 KiB
JavaScript
204 lines
7.7 KiB
JavaScript
import server from "../../_/code/bridge/server"
|
|
|
|
class JobForm extends Shadow {
|
|
inputStyles(el) {
|
|
return el
|
|
.background("var(--main)")
|
|
.color("var(--text)")
|
|
.border("1px solid var(--accent)")
|
|
.fontSize(0.9, rem)
|
|
.backgroundColor("var(--darkaccent)")
|
|
.borderRadius(12, px)
|
|
.outline("none")
|
|
.onTouch((start) => {
|
|
if (start) {
|
|
this.style.backgroundColor = "var(--accent)"
|
|
} else {
|
|
this.style.backgroundColor = "var(--darkaccent)"
|
|
}
|
|
})
|
|
}
|
|
|
|
errorMessage = ""
|
|
|
|
render() {
|
|
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)
|
|
.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)
|
|
.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("fixed")
|
|
.height(window.visualViewport.height - 20, px)
|
|
.width(100, pct)
|
|
.top(100, vh)
|
|
.background("var(--main)")
|
|
.zIndex(4)
|
|
.borderTopLeftRadius("10px")
|
|
.borderTopRightRadius("10px")
|
|
.boxSizing("border-box")
|
|
.border("1px solid var(--accent)")
|
|
.transition("top .3s")
|
|
}
|
|
|
|
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"
|
|
}
|
|
}
|
|
}
|
|
|
|
register(JobForm) |