265 lines
10 KiB
JavaScript
265 lines
10 KiB
JavaScript
/*
|
|
Template Name: Grenviro Monitoring
|
|
Author: Themesbrand
|
|
Website: https://Themesbrand.com/
|
|
Contact: Themesbrand@gmail.com
|
|
File: job companies list init js
|
|
*/
|
|
|
|
|
|
var url = "build/json/";
|
|
var allCompaniesList = '';
|
|
|
|
var prevButton = document.getElementById('page-prev');
|
|
var nextButton = document.getElementById('page-next');
|
|
|
|
// configuration variables
|
|
var currentPage = 1;
|
|
var itemsPerPage = 16;
|
|
|
|
// getJSON
|
|
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-companies-list.json", function (err, data) {
|
|
if (err !== null) {
|
|
console.log("Something went wrong: " + err);
|
|
} else {
|
|
allCompaniesList = data;
|
|
loadCompaniesListData(allCompaniesList, currentPage);
|
|
paginationEvents();
|
|
}
|
|
});
|
|
|
|
function loadCompaniesListData(datas, page) {
|
|
var pages = Math.ceil(datas.length / itemsPerPage)
|
|
if (page < 1) page = 1
|
|
if (page > pages) page = pages
|
|
document.querySelector("#companies-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]) {
|
|
document.querySelector("#companies-list").innerHTML += '<div class="col-xxl-3 col-md-6">\
|
|
<div class="card companiesList-card">\
|
|
<div class="card-body">\
|
|
<div class="avatar-sm mx-auto">\
|
|
<div class="avatar-title bg-light rounded">\
|
|
<img src="'+ datas[i].companyLogo + '" alt="" class="avatar-xxs companyLogo-img">\
|
|
</div>\
|
|
</div>\
|
|
<div class="text-center">\
|
|
<a href="#!">\
|
|
<h5 class="mt-3 company-name">'+ datas[i].companyName + '</h5>\
|
|
</a>\
|
|
<div class="d-none company-desc">'+ datas[i].companyDesc + '</div>\
|
|
<p class="text-muted industry-type">'+ datas[i].industryType + '</p>\
|
|
<div class="d-none">\
|
|
<span class="employee">'+ datas[i].employee + '</span>\
|
|
<span class="location">'+ datas[i].location + '</span>\
|
|
<span class="rating">'+ datas[i].rating + '</span>\
|
|
<span class="website">'+ datas[i].website + '</span>\
|
|
<span class="email">'+ datas[i].email + '</span>\
|
|
<span class="since">'+ datas[i].since + '</span>\
|
|
</div>\
|
|
</div>\
|
|
<div>\
|
|
<button type="button" class="btn btn-soft-primary w-100 viewcompany-list"><span class="vacancy">'+ datas[i].vacancy + '</span> Jobs Available</button>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>';
|
|
}
|
|
}
|
|
// })
|
|
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(allCompaniesList.length / itemsPerPage);
|
|
};
|
|
|
|
function clickPage() {
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
|
|
currentPage = e.target.textContent;
|
|
loadCompaniesListData(allCompaniesList, 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--;
|
|
loadCompaniesListData(allCompaniesList, currentPage);
|
|
}
|
|
});
|
|
|
|
nextButton.addEventListener('click', function () {
|
|
if (currentPage < numPages()) {
|
|
currentPage++;
|
|
loadCompaniesListData(allCompaniesList, currentPage);
|
|
}
|
|
});
|
|
|
|
pageNumbers();
|
|
clickPage();
|
|
selectedPage();
|
|
}
|
|
|
|
// jobDetailShow event
|
|
function jobDetailShow() {
|
|
Array.from(document.querySelectorAll("#companies-list .companiesList-card")).forEach(function (item) {
|
|
item.querySelector(".viewcompany-list").addEventListener("click", function () {
|
|
var companyLogoImgVal = item.querySelector(".companyLogo-img").src;
|
|
var companyNameVal = item.querySelector(".company-name").innerHTML;
|
|
var companyDescVal = item.querySelector(".company-desc").innerHTML;
|
|
var industryTypeVal = item.querySelector(".industry-type").innerHTML;
|
|
var companyEmployeeVal = item.querySelector(".employee").innerHTML;
|
|
var companyLocationVal = item.querySelector(".location").innerHTML;
|
|
var companyRatingVal = item.querySelector(".rating").innerHTML;
|
|
var companyWebsiteVal = item.querySelector(".website").innerHTML;
|
|
var companyEmailVal = item.querySelector(".email").innerHTML;
|
|
var companySinceVal = item.querySelector(".since").innerHTML;
|
|
var jobVacancyVal = item.querySelector(".vacancy").innerHTML;
|
|
|
|
document.querySelector("#company-overview .company-logo").src = companyLogoImgVal;
|
|
document.querySelector("#company-overview .overview-companyname").innerHTML = companyNameVal;
|
|
document.querySelectorAll("#company-overview .overview-industryType").forEach(function (elem) {
|
|
elem.innerHTML = industryTypeVal;
|
|
});
|
|
document.querySelector("#company-overview .overview-companydesc").innerHTML = companyDescVal;
|
|
document.querySelector("#company-overview .overview-company_location").innerHTML = companyLocationVal;
|
|
document.querySelector("#company-overview .overview-employee").innerHTML = companyEmployeeVal;
|
|
document.querySelector("#company-overview .overview-vacancy").innerHTML = jobVacancyVal;
|
|
document.querySelector("#company-overview .overview-rating").innerHTML = companyRatingVal;
|
|
document.querySelector("#company-overview .overview-website").innerHTML = companyWebsiteVal;
|
|
document.querySelector("#company-overview .overview-email").innerHTML = companyEmailVal;
|
|
document.querySelector("#company-overview .overview-since").innerHTML = companySinceVal;
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
// Search list
|
|
var searchElementList = document.getElementById("searchCompany");
|
|
searchElementList.addEventListener("keyup", function () {
|
|
var inputVal = searchElementList.value.toLowerCase();
|
|
|
|
function filterItems(arr, query) {
|
|
return arr.filter(function (el) {
|
|
return el.companyName.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.industryType.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
|
})
|
|
}
|
|
|
|
var filterData = filterItems(allCompaniesList, inputVal);
|
|
|
|
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>";
|
|
}
|
|
loadCompaniesListData(filterData, currentPage);
|
|
});
|
|
|
|
|
|
flatpickr("#datepicker", {
|
|
dateFormat: "d M, Y",
|
|
defaultDate: new Date(),
|
|
maxDate: new Date()
|
|
});
|
|
|
|
|
|
// filterdata
|
|
function filterData() {
|
|
var pickerVal = document.getElementById("datepicker").value;
|
|
var isType = document.getElementById("idType").value;
|
|
|
|
var filterData = allCompaniesList.filter(function (data) {
|
|
console.log(new Date(data.postDate) <= new Date(pickerVal))
|
|
|
|
var dateFilter = false;
|
|
var typeFilter = false;
|
|
|
|
if (data.type == "all" || isType == "all") {
|
|
typeFilter = true;
|
|
} else {
|
|
typeFilter = data.type == isType;
|
|
}
|
|
|
|
if (new Date(data.postDate) <= new Date(pickerVal)) {
|
|
dateFilter = true;
|
|
} else {
|
|
dateFilter = false;
|
|
}
|
|
|
|
if (typeFilter && dateFilter) {
|
|
return typeFilter && dateFilter;
|
|
}else if (typeFilter && pickerVal == "") {
|
|
return typeFilter;
|
|
} else if (typeFilter && dateFilter && pickerVal == "") {
|
|
return typeFilter && dateFilter;
|
|
}
|
|
});
|
|
|
|
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>";
|
|
}
|
|
|
|
loadCompaniesListData(filterData, currentPage);
|
|
}; |