412 lines
16 KiB
JavaScript
412 lines
16 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: job-list init js
|
|
*/
|
|
|
|
// get colors array from the string
|
|
function getChartColorsArray(chartId) {
|
|
if (document.getElementById(chartId) !== null) {
|
|
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
|
colors = JSON.parse(colors);
|
|
return colors.map(function (value) {
|
|
var newValue = value.replace(" ", "");
|
|
if (newValue.indexOf(",") === -1) {
|
|
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
|
if (color) return color;
|
|
else return newValue;;
|
|
} else {
|
|
var val = value.split(',');
|
|
if (val.length == 2) {
|
|
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
|
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
|
return rgbaColor;
|
|
} else {
|
|
return newValue;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
// Simple Donut Charts
|
|
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
|
|
if (chartDonutBasicColors) {
|
|
var options = {
|
|
series: [98, 63, 35],
|
|
labels: ["New Application", "Approved", "Rejected"],
|
|
chart: {
|
|
height: 300,
|
|
type: 'donut',
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
dataLabels: {
|
|
dropShadow: {
|
|
enabled: false,
|
|
}
|
|
},
|
|
colors: chartDonutBasicColors
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#simple_dount_chart"), options);
|
|
chart.render();
|
|
}
|
|
|
|
var url = "build/json/";
|
|
var allJobList = '';
|
|
var editList = false;
|
|
|
|
var prevButton = document.getElementById('page-prev');
|
|
var nextButton = document.getElementById('page-next');
|
|
|
|
// configuration variables
|
|
var currentPage = 1;
|
|
var itemsPerPage = 3;
|
|
|
|
var getJSON = function (jsonurl, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", url + jsonurl, true);
|
|
xhr.responseType = "json";
|
|
xhr.onload = function () {
|
|
var status = xhr.status;
|
|
if (status === 200) {
|
|
callback(null, xhr.response);
|
|
} else {
|
|
callback(status, xhr.response);
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
|
|
// get json
|
|
getJSON("job-list.json", function (err, data) {
|
|
if (err !== null) {
|
|
console.log("Something went wrong: " + err);
|
|
} else {
|
|
allJobList = data;
|
|
loadJobListData(allJobList, currentPage);
|
|
paginationEvents();
|
|
sortElementsById();
|
|
}
|
|
});
|
|
|
|
function loadJobListData(datas, page) {
|
|
var pages = Math.ceil(datas.length / itemsPerPage)
|
|
if (page < 1) page = 1
|
|
if (page > pages) page = pages
|
|
document.querySelector("#job-list").innerHTML = '';
|
|
|
|
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
|
|
// Array.from(datas).forEach(function (listData, index){
|
|
if(datas[i] && datas[i].tags){
|
|
var tags = datas[i].tags;
|
|
var tagHtml = '';
|
|
Array.from(tags).forEach((tag, index) => {
|
|
tagHtml += '<span class="badge bg-primary-subtle text-primary me-1">' + tag + '</span>'
|
|
})
|
|
}
|
|
if (datas[i]) {
|
|
document.querySelector("#job-list").innerHTML += '<div class="card joblist-card">\
|
|
<div class="card-body">\
|
|
<div class="d-flex mb-4">\
|
|
<div class="avatar-sm">\
|
|
<div class="avatar-title bg-light rounded">\
|
|
<img src="'+ datas[i].companyLogo + '" alt="" class="avatar-xxs companyLogo-img">\
|
|
</div>\
|
|
</div>\
|
|
<div class="ms-3 flex-grow-1">\
|
|
<img src="'+ datas[i].coverImg + '" alt="" class="d-none cover-img">\
|
|
<a href="#!"><h5 class="job-title">'+ datas[i].jobTitle + '</h5></a>\
|
|
<p class="company-name text-muted mb-0">'+ datas[i].companyName + '</p>\
|
|
</div>\
|
|
<div>\
|
|
<button type="button" class="btn btn-ghost-primary btn-icon custom-toggle" data-bs-toggle="button">\
|
|
<span class="icon-on"><i class="ri-bookmark-line"></i></span>\
|
|
<span class="icon-off"><i class="ri-bookmark-fill"></i></span>\
|
|
</button>\
|
|
</div>\
|
|
</div>\
|
|
<p class="text-muted job-description">'+ datas[i].description + '</p>\
|
|
<div>'+ tagHtml + '</div>\
|
|
</div>\
|
|
<div class="card-footer border-top-dashed">\
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">\
|
|
<div><i class="ri-briefcase-2-line align-bottom me-1"></i> <span class="job-type">'+ datas[i].type + '</span></div>\
|
|
<div class="d-none"><span class="job-experience">'+ datas[i].experience + '</span></div>\
|
|
<div><i class="ri-map-pin-2-line align-bottom me-1"></i> <span class="job-location">'+ datas[i].location + '</span></div>\
|
|
<div><i class="ri-user-3-line align-bottom me-1"></i> '+ datas[i].applied + '</div>\
|
|
<div><i class="ri-time-line align-bottom me-1"></i> <span class="job-postdate">'+ datas[i].postDate + '</span></div>\
|
|
<div><a href="#!" class="btn btn-primary viewjob-list">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a></div>\
|
|
</div>\
|
|
</div>\
|
|
</div>';
|
|
}
|
|
// });
|
|
}
|
|
|
|
document.getElementById("total-result").innerHTML = datas.length
|
|
selectedPage();
|
|
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
|
|
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
|
|
jobDetailShow();
|
|
}
|
|
|
|
function selectedPage() {
|
|
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
|
|
for (var i = 0; i < pagenumLink.length; i++) {
|
|
if (i == currentPage - 1) {
|
|
pagenumLink[i].parentNode.classList.add("active");
|
|
} else {
|
|
pagenumLink[i].parentNode.classList.remove("active");
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
// paginationEvents
|
|
function paginationEvents() {
|
|
var numPages = function numPages() {
|
|
return Math.ceil(allJobList.length / itemsPerPage);
|
|
};
|
|
|
|
function clickPage() {
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
|
|
currentPage = e.target.textContent;
|
|
loadJobListData(allJobList, currentPage);
|
|
}
|
|
});
|
|
};
|
|
|
|
function pageNumbers() {
|
|
var pageNumber = document.getElementById('page-num');
|
|
pageNumber.innerHTML = "";
|
|
// for each page
|
|
for (var i = 1; i < numPages() + 1; i++) {
|
|
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
|
}
|
|
}
|
|
|
|
prevButton.addEventListener('click', function () {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
loadJobListData(allJobList, currentPage);
|
|
}
|
|
});
|
|
|
|
nextButton.addEventListener('click', function () {
|
|
if (currentPage < numPages()) {
|
|
currentPage++;
|
|
loadJobListData(allJobList, currentPage);
|
|
}
|
|
});
|
|
|
|
pageNumbers();
|
|
clickPage();
|
|
selectedPage();
|
|
}
|
|
|
|
// multiple Remove CancelButton
|
|
var tagInputField = new Choices('#taginput-choices', {
|
|
removeItemButton: true,
|
|
}
|
|
);
|
|
|
|
// companylogo image
|
|
document.querySelector("#companylogo-image-input").addEventListener("change", function () {
|
|
var preview = document.querySelector("#companylogo-img");
|
|
var file = document.querySelector("#companylogo-image-input").files[0];
|
|
var reader = new FileReader();
|
|
reader.addEventListener("load",function () {
|
|
preview.src = reader.result;
|
|
},false);
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// cover image
|
|
document.querySelector("#cover-image-input").addEventListener("change", function () {
|
|
var preview = document.querySelector("#modal-cover-img");
|
|
var file = document.querySelector("#cover-image-input").files[0];
|
|
var reader = new FileReader();
|
|
reader.addEventListener("load",function () {
|
|
preview.src = reader.result;
|
|
},false);
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// Form Event
|
|
(function () {
|
|
'use strict'
|
|
|
|
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
|
var forms = document.querySelectorAll('.needs-validation')
|
|
var date = new Date().toUTCString().slice(5, 16);
|
|
|
|
// Loop over them and prevent submission
|
|
Array.prototype.slice.call(forms)
|
|
.forEach(function (form) {
|
|
form.addEventListener('submit', function (event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
} else {
|
|
event.preventDefault();
|
|
|
|
var jobTitleVal = document.getElementById("jobtitle-field").value;
|
|
var companyNameVal = document.getElementById("companyname-field").value;
|
|
var companyLogoImg = document.getElementById("companylogo-img").src;
|
|
var jobCoverImg = document.getElementById("modal-cover-img").src;
|
|
var jobTypeVal = document.getElementById("job_type-field").value;
|
|
var jobExperienceVal = document.getElementById("experience-field").value;
|
|
var locationVal = document.getElementById("location-field").value;
|
|
var descriptionVal = document.getElementById("description-field").value;
|
|
var tagInputFieldValue = tagInputField.getValue(true);
|
|
|
|
if (jobTitleVal !== "" && companyNameVal !== "" && jobTypeVal !== "" && locationVal !== "" && locationVal !== "" && !editList) {
|
|
var newJobId = findNextId();
|
|
var newJobList = {
|
|
'id': newJobId,
|
|
"coverImg": jobCoverImg,
|
|
"companyLogo": companyLogoImg,
|
|
"jobTitle": jobTitleVal,
|
|
"companyName": companyNameVal,
|
|
"description": descriptionVal,
|
|
"tags": tagInputFieldValue,
|
|
"type": jobTypeVal,
|
|
"experience": jobExperienceVal,
|
|
"location": locationVal,
|
|
"applied": "0 Applied",
|
|
"postDate": date
|
|
};
|
|
allJobList.push(newJobList);
|
|
sortElementsById();
|
|
}
|
|
|
|
loadJobListData(allJobList, currentPage);
|
|
document.getElementById("close-jobListModal").click();
|
|
}
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
})
|
|
})()
|
|
|
|
function fetchIdFromObj(member) {
|
|
return parseInt(member.id);
|
|
}
|
|
|
|
function findNextId() {
|
|
if (allJobList.length === 0) {
|
|
return 0;
|
|
}
|
|
var lastElementId = fetchIdFromObj(allJobList[allJobList.length - 1]),
|
|
firstElementId = fetchIdFromObj(allJobList[0]);
|
|
return (firstElementId >= lastElementId) ? (firstElementId + 1) : (lastElementId + 1);
|
|
}
|
|
|
|
function sortElementsById() {
|
|
var manyJobList = allJobList.sort(function (a, b) {
|
|
var x = fetchIdFromObj(a);
|
|
var y = fetchIdFromObj(b);
|
|
|
|
if (x > y) {
|
|
return -1;
|
|
}
|
|
if (x < y) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
})
|
|
|
|
loadJobListData(manyJobList, currentPage);
|
|
}
|
|
|
|
// jobDetailShow event
|
|
function jobDetailShow() {
|
|
Array.from(document.querySelectorAll("#job-list .joblist-card")).forEach(function (item) {
|
|
item.querySelector(".viewjob-list").addEventListener("click", function () {
|
|
var coverImgVal = item.querySelector(".cover-img").src;
|
|
var companyLogoImgVal = item.querySelector(".companyLogo-img").src;
|
|
var jobTitleVal = item.querySelector(".job-title").innerHTML;
|
|
var companyNameVal = item.querySelector(".company-name").innerHTML;
|
|
var jobDescVal = item.querySelector(".job-description").innerHTML;
|
|
var jobTypeVal = item.querySelector(".job-type").innerHTML;
|
|
var jobLocationVal = item.querySelector(".job-location").innerHTML;
|
|
var jobPostdateVal = item.querySelector(".job-postdate").innerHTML;
|
|
var jobExperienceVal = item.querySelector(".job-experience").innerHTML;
|
|
|
|
document.querySelector("#cover-img").src = coverImgVal;
|
|
document.querySelector("#job-overview .view-companylogo").src = companyLogoImgVal;
|
|
document.querySelector("#job-overview .view-title").innerHTML = jobTitleVal;
|
|
document.querySelector("#job-overview .view-companyname").innerHTML = companyNameVal;
|
|
document.querySelector("#job-overview .view-location").innerHTML = jobLocationVal;
|
|
document.querySelector("#job-overview .view-desc").innerHTML = jobDescVal;
|
|
document.querySelector("#job-overview .view-type").innerHTML = jobTypeVal;
|
|
document.querySelector("#job-overview .view-postdate").innerHTML = jobPostdateVal;
|
|
document.querySelector("#job-overview .view-experience").innerHTML = jobExperienceVal;
|
|
});
|
|
});
|
|
}
|
|
|
|
// Search list
|
|
var searchElementList = document.getElementById("searchJob");
|
|
searchElementList.addEventListener("keyup", function () {
|
|
var inputVal = searchElementList.value.toLowerCase();
|
|
|
|
function filterItems(arr, query) {
|
|
return arr.filter(function (el) {
|
|
return el.jobTitle.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.companyName.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
|
})
|
|
}
|
|
|
|
var filterData = filterItems(allJobList, inputVal);
|
|
if(inputVal.length > 0){
|
|
document.getElementById("found-job-alert").classList.remove("d-none");
|
|
}else{
|
|
document.getElementById("found-job-alert").classList.add("d-none");
|
|
}
|
|
|
|
if(filterData.length == 0){
|
|
document.getElementById("pagination-element").style.display = "none";
|
|
}else{
|
|
document.getElementById("pagination-element").style.display = "flex";
|
|
}
|
|
|
|
var pageNumber = document.getElementById('page-num');
|
|
pageNumber.innerHTML = "";
|
|
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
|
|
// for each page
|
|
for (var i = 1; i < dataPageNum + 1; i++) {
|
|
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
|
|
}
|
|
loadJobListData(filterData, currentPage);
|
|
});
|
|
|
|
// clearFields
|
|
function clearFields() {
|
|
document.getElementById("companylogo-img").src = "build/images/users/multi-user.jpg";
|
|
document.getElementById("jobtitle-field").value = "";
|
|
document.getElementById("companyname-field").value = "";
|
|
document.getElementById("job_type-field").value = "Full Time";
|
|
document.getElementById("experience-field").value = "";
|
|
document.getElementById("location-field").value = "";
|
|
document.getElementById("Salary-field").value = "";
|
|
document.getElementById("description-field").value = "";
|
|
|
|
tagInputField.removeActiveItems();
|
|
tagInputField.setChoiceByValue("");
|
|
|
|
document.getElementById("createjob-form").classList.remove("was-validated");
|
|
}
|
|
|
|
document.getElementById('CreateJobModal').addEventListener('hidden.bs.modal', event => {
|
|
clearFields();
|
|
}); |