@neap/fairplay-widgetjs
Advanced tools
This SDK requires vue.js and jQuery.
<!DOCTYPE html>
<html>
<head>
<title>View JS Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs/dist/fairplay.min.css">
</head>
<body>
<div id="wrapper"></div>
<script src="https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs"></script>
<script type="text/javascript">
var fp = new Fairplay({
// clientId: 'dewdwq',
mode:'dev' // Optional. When set to 'dev', the 'clientId' property is not required.
})
fp.createWidget({
el: '#wrapper',
pageSize: 2, // Optional. Default is 10.
categories: { // Optional. This object overides the Neap's JobAdder's Board category names
5843: 'Internet & Telco',
5821: 'Internet & Telco'
}
})
fp.getJobAds({ where:{ professionId:1123 } }, (err,data) => { console.log(data) })
</script>
</body>
Latest version:
You can access that JS and the default CSS using a specific version as follow:
To create a Fairplay object, make sure you have your clientId (unless you're using the SDK in dev mode):
var fp = new Fairplay({
clientId:'123456789', // Required
businessId: 123, // Required for certain APIs (e.g., 'submitForm')
classifications: { // Optional. Used to overides out-of-the-box classification names, merge classfications into a single one or find classification to power select boxes.
professions: [{
ids:[1,2],
name: 'IT',
roles:[{
ids:[100],
name: 'Manager'
}, {
ids:[200,300,400],
name: 'Support'
}]
}, {
ids:[3],
name: 'Human Resources',
roles:[{
ids:[110],
name: 'Head of Recruitment'
}, {
ids:[210,310,410],
name: 'Compliance Manager'
}]
}],
locations: [{
ids:[10,20,30],
name: 'Sydney',
areas:[{
ids:[1000],
name: 'CBD'
}, {
ids:[2000,3000,4000],
name: 'Inner West'
}]
}, {
ids:[40],
name: 'Melbourne',
areas:[{
ids:[5000,6000],
name: 'CBD'
}, {
ids:[7000],
name: 'Coast'
}]
}],
workTypes: [{
ids:[60],
name: 'Full-time'
}, {
ids:[70],
name: 'Part-time'
}, {
ids:[80,90],
name: 'Contract'
}]
}
});
fp.getJobAds({ where:<Where> }, next:<Function>)
{
"id": "1265",
"title": "Junior IT specialist for Hospital systems",
"summary": "Looking for Junior IT specialist for Hospital systems to help supporting all IT systems in the hospital.",
"bulletPoints": [
"Advantageous package",
"Flexible holidays"
],
"created": "2018-12-20T03:22:19Z",
"owner": null,
"profession":
{
"id": "5843",
"name": "IT",
"role":
{
"id": "6286",
"name": "Helpdesk & Support",
"link": "?professions=IT-5843&roles=Helpdesk%20%26%20Support-6286"
},
"link": "?professions=IT-5843"
},
"location":
{
"id": "6628",
"name": "Sydney",
"area":
{
"id": "6654",
"name": "North West & Hills District"
}
},
"workType":
{
"id": "5815",
"name": "Full Time"
},
"salary":
{
"per": "Hour",
"lowest": 40,
"highest": 50,
"lower": 40,
"upper": 50,
"id": 4,
"description": "$40 - $50 per hour"
},
"date": "20/12/2018",
"link": "/jobs/it/junior-it-specialist-for-hospital-systems/1265",
"consultant": {
}
}
fp.submitForm([formDOM:<Element>, event:<Event>, input:<Object>, next:<Function>])
document.getElementById('main-form').addEventListener('submit', function(event) {
fp.submitForm(this,event, (error, res) => {
if (error) {
console.log('ERROR')
console.log(JSON.stringify(error))
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
}
})
})
var formDOM = document.getElementById('main-form')
// Valid offers: 'Submit Resume', 'Submit Vacancy', 'Job Alert', 'Contact Us', 'Free Report', 'Apply Job', 'Refer Friend'
var extraInputs = { offer:'Submit Resume' }
// As you can see we can also omit the 'event' input.
fp.submitForm(formDOM, extraInputs,function(error,res) {
if (error) {
console.log('ERROR')
console.log(JSON.stringify(error))
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
}
})
fp.submitForm({ firstName:'Nic', lastName:'Dao' }, function(error,res) {
if (error) {
console.log('ERROR')
console.log(JSON.stringify(error))
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
}
})
<form onsubmit="submitResume(this, event)">
...
</form>
function submitResume(form, event) {
event.preventDefault();
// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message' and an attachement.
var payload = {
offer: "Submit Resume",
type: "candidate",
recipients:['nic@neap.co'],
recipientsOnly: true
}
showSubmitting();
fp.submitForm(form, payload, (error, res) => {
hideSubmitting()
if (error) {
var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'
console.log(logMsg)
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
form.reset();
}
})
}
<form onsubmit="submitResume(this, event)">
...
</form>
function submitResume(form, event) {
event.preventDefault();
// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message', 'profession_name', 'job_title' and an attachement.
var payload = {
offer: "Submit Vacancy",
type: "client",
recipients:['nic@neap.co'],
recipientsOnly: true
}
showSubmitting();
fp.submitForm(form, payload, (error, res) => {
hideSubmitting()
if (error) {
var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'
console.log(logMsg)
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
form.reset();
}
})
}
<form onsubmit="contactUs(this, event)">
...
</form>
function contactUs(form, event) {
event.preventDefault();
// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message'.
var payload = {
offer: "Contact Us",
recipients:['nic@neap.co'],
recipientsOnly: true
}
showSubmitting();
fp.submitForm(form, payload, (error, res) => {
hideSubmitting()
if (error) {
var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'
console.log(logMsg)
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
form.reset();
}
})
}
<form onsubmit="referFriend(this, event)">
...
</form>
function referFriend(form, event) {
event.preventDefault();
var formData = new FormData(form);
var payload = {
offer: "Refer Friend",
type: "candidate",
firstName: formData.get("from_firstname"),
lastName: formData.get("from_lastname"),
email: formData.get("from_email"),
phone: formData.get("from_phone"),
message: formData.get("message"),
friend: {
firstName: formData.get("friend_firstname"),
lastName: formData.get("friend_lastname"),
email: formData.get("friend_email"),
phone: formData.get("friend_phone"),
profession: formData.get("friend_profession")
},
recipients:['nic@neap.co'],
recipientsOnly: true
}
showSubmitting();
fp.submitForm(form, payload, (error, res) => {
hideSubmitting()
if (error) {
var message = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'
console.log(message)
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
form.reset();
}
})
}
fp.repo.profession.find({ where:<Object> })
WARNING: This API only returns values if the optional
classificationsinput was setup during the Fairplay instance creation.
var p01 = fp.repo.profession.find({ where:{ id:1 } })
var p02 = fp.repo.profession.find({ where:{ id:'2' } })
var p03 = fp.repo.profession.find({ where:{ id:'1_2' } }) // equivalent to a search by ID where ID is equal to 1 or 2.
profession is not the only type of classification that cna be searched. The others are:
professionrolelocationareaworkTypefp.on(eventName:<String>, next:<Function>)
As of today, the only supported event is job-alert-created, which is fired after the Create Job Alert button is clicked.
fp.on('job-alert-created', data => {
console.log(data.profession) // e.g., { strId: '1_2', name:'Sales' }
console.log(data.role) // e.g., { strId: '10', name:'Manager' }
console.log(data.location) // e.g., { strId: '10_20', name:'Sydney' }
console.log(data.area) // e.g., { strId: '30', name:'CBD' }
console.log(data.type) // e.g., { strId: '400', name:'Full-time' }
console.log(data.consultant)
console.log(data.keywords) // e.g., 'Senior SDR'
console.log(data.salary) // e.g., { min:100, max:200, per:'hour' }
})
Simply run this:
npm run dev
This will host 2 version of the widget:
Dev: http://localhost:8080/dev Prod: http://localhost:8080/prod
Prod uses the minified/uglified ES5 version of the code (to see how to compile that code, jump to the section).
Simply run:
npm run build
This will produce multiple artefacts under the dist folder.
npm run lintnpm run dev
npm run build
git commit 'your message'npm run vnpm run rls <the new version>npm run pushThis will host the minified version to https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs. The minified CSS is located at https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs@0.2.1/dist/fairplay.min.css
You can access that JS and the default CSS using a specific version as follow:
var formDOM = document.getElementById('main-form')
// Valid offers: 'Submit Resume', 'Submit Vacancy', 'Job Alert', 'Contact Us', 'Free Report', 'Apply Job', 'Refer Friend'
var extraInputs = {
offer:'Submit Resume',
recipients:['somebody@example.com.au'],
recipientsOnly: true
}
// As you can see we can also omit the 'event' input.
fp.submitForm(formDOM, extraInputs,function(error,res) {
if (error) {
console.log('ERROR')
console.log(JSON.stringify(error))
} else {
console.log(`Status: ${res.status}`)
console.log(`Data: ${res.data}`)
}
})
FAQs
JS Widget that powers job search
The npm package @neap/fairplay-widgetjs receives a total of 7 weekly downloads. As such, @neap/fairplay-widgetjs popularity was classified as not popular.
We found that @neap/fairplay-widgetjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.