/*
Template Name: Grenviro Monitoring
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: Ecommerce product list Js File
*/
// table-product-list-all
var productListAllData = [
{
"id": 1,
"product": {
"img": "build/images/products/img-1.png",
"title": "Half Sleeve Round Neck T-Shirts",
"category": "Fashion"
},
"stock": "12",
"price": "215.00",
"orders": "48",
"rating": "4.2",
"published": {
"publishDate": "12 Oct, 2021",
"publishTime": "10:05 AM",
}
},
{
"id": 2,
"product": {
"img": "build/images/products/img-2.png",
"title": "Urban Ladder Pashe Chair",
"category": "Furniture"
},
"stock": "06",
"price": "160.00",
"orders": "30",
"rating": "4.3",
"published": {
"publishDate": "06 Jan, 2021",
"publishTime": "01:31 PM",
}
},
{
"id": 3,
"product": {
"img": "build/images/products/img-3.png",
"title": "350 ml Glass Grocery Container",
"category": "Grocery"
},
"stock": "10",
"price": "125.00",
"orders": "48",
"rating": "4.5",
"published": {
"publishDate": "26 Mar, 2021",
"publishTime": "11:40 AM",
}
},
{
"id": 4,
"product": {
"img": "build/images/products/img-4.png",
"title": "Fabric Dual Tone Living Room Chair",
"category": "Furniture"
},
"stock": "15",
"price": "340.00",
"orders": "40",
"rating": "4.2",
"published": {
"publishDate": "19 Apr, 2021",
"publishTime": "02:51 PM",
}
},
{
"id": 5,
"product": {
"img": "build/images/products/img-5.png",
"title": "Crux Motorsports Helmet",
"category": "Automotive Accessories"
},
"stock": "08",
"price": "175.00",
"orders": "55",
"rating": "4.4",
"published": {
"publishDate": "30 Mar, 2021",
"publishTime": "09:42 AM",
}
},
{
"id": 6,
"product": {
"img": "build/images/products/img-6.png",
"title": "Half Sleeve T-Shirts (Blue)",
"category": "Fashion"
},
"stock": "15",
"price": "225.00",
"orders": "48",
"rating": "4.2",
"published": {
"publishDate": "12 Oct, 2021",
"publishTime": "04:55 PM",
}
},
{
"id": 7,
"product": {
"img": "build/images/products/img-7.png",
"title": "Noise Evolve Smartwatch",
"category": "Watches"
},
"stock": "12",
"price": "105.00",
"orders": "45",
"rating": "4.3",
"published": {
"publishDate": "15 May, 2021",
"publishTime": "03:40 PM",
}
},
{
"id": 8,
"product": {
"img": "build/images/products/img-8.png",
"title": "Sweatshirt for Men (Pink)",
"category": "Fashion"
},
"stock": "20",
"price": "120.00",
"orders": "48",
"rating": "4.2",
"published": {
"publishDate": "21 Jun, 2021",
"publishTime": "12:18 PM",
}
},
{
"id": 9,
"product": {
"img": "build/images/products/img-9.png",
"title": "Reusable Ecological Coffee Cup",
"category": "Grocery"
},
"stock": "14",
"price": "325.00",
"orders": "55",
"rating": "4.3",
"published": {
"publishDate": "15 Jan, 2021",
"publishTime": "10:29 PM",
}
},
{
"id": 10,
"product": {
"img": "build/images/products/img-10.png",
"title": "Travel Carrying Pouch Bag",
"category": "Kids"
},
"stock": "20",
"price": "180.00",
"orders": "60",
"rating": "4.3",
"published": {
"publishDate": "15 Jun, 2021",
"publishTime": "03:51 PM",
}
},
{
"id": 11,
"product": {
"img": "build/images/products/img-1.png",
"title": "Half Sleeve Round Neck T-Shirts",
"category": "Fashion"
},
"stock": "12",
"price": "215.00",
"orders": "48",
"rating": "4.2",
"published": {
"publishDate": "12 Oct, 2021",
"publishTime": "10:05 AM",
}
},
{
"id": 12,
"product": {
"img": "build/images/products/img-2.png",
"title": "Urban Ladder Pashe Chair",
"category": "Furniture"
},
"stock": "06",
"price": "160.00",
"orders": "30",
"rating": "4.3",
"published": {
"publishDate": "06 Jan, 2021",
"publishTime": "01:31 PM",
}
}
];
var inputValueJson = sessionStorage.getItem('inputValue');
if (inputValueJson) {
inputValueJson = JSON.parse(inputValueJson);
Array.from(inputValueJson).forEach(element => {
productListAllData.unshift(element);
});
}
var editinputValueJson = sessionStorage.getItem('editInputValue');
if(editinputValueJson){
editinputValueJson = JSON.parse(editinputValueJson);
productListAllData = productListAllData.map(function (item) {
if (item.id == editinputValueJson.id) {
return editinputValueJson;
}
return item;
});
}
document.getElementById("addproduct-btn").addEventListener("click", function(){
sessionStorage.setItem('editInputValue',"")
})
var productListAll = new gridjs.Grid({
columns:
[
{
name: '#',
width: '40px',
sort: {
enabled: false
},
data: (function (row) {
return gridjs.html('\
\
\
');
})
},
{
name: 'Product',
width: '360px',
data: (function (row) {
return gridjs.html('' +
'
' +
'
' +
'
' +
'
Category : ' + row.product.category + '
' +
'
' +
'
' +
'' +
'' +
'
');
})
}
],
className: {
th: 'text-muted',
},
pagination: {
limit: 10
},
sort: true,
data: productListAllData
}).render(document.getElementById("table-product-list-all"));
// table-product-list-published
var productListPublishedData = [
{
"id": 1,
"product": {
"img": "build/images/products/img-2.png",
"title": "Urban Ladder Pashe Chair",
"category": "Furniture"
},
"stock": "06",
"price": "160.00",
"orders": "30",
"rating": "4.3",
"published": {
"publishDate": "06 Jan, 2021",
"publishTime": "01:31 PM",
}
},{
"id": 2,
"product": {
"img": "build/images/products/img-6.png",
"title": "Half Sleeve T-Shirts (Blue)",
"category": "Fashion"
},
"stock": "15",
"price": "125.00",
"orders": "48",
"rating": "4.2",
"published": {
"publishDate": "12 Oct, 2021",
"publishTime": "04:55 PM",
}
},{
"id": 3,
"product": {
"img": "build/images/products/img-4.png",
"title": "Fabric Dual Tone Living Room Chair",
"category": "Furniture"
},
"stock": "15",
"price": "140.00",
"orders": "40",
"rating": "4.2",
"published": {
"publishDate": "19 Apr, 2021",
"publishTime": "02:51 PM",
}
},{
"id": 4,
"product": {
"img": "build/images/products/img-4.png",
"title": "350 ml Glass Grocery Container",
"category": "Grocery"
},
"stock": "10",
"price": "125.00",
"orders": "48",
"rating": "4.5",
"published": {
"publishDate": "26 Mar, 2021",
"publishTime": "11:40 AM",
}
},{
"id": 5,
"product": {
"img": "build/images/products/img-5.png",
"title": "Crux Motorsports Helmet",
"category": "Automotive Accessories"
},
"stock": "08",
"price": "135.00",
"orders": "55",
"rating": "4.4",
"published": {
"publishDate": "30 Mar, 2021",
"publishTime": "09:42 AM",
}
}
]
var productListPublished = new gridjs.Grid({
columns:
[
{
name: '#',
width: '40px',
sort: {
enabled: false
},
formatter: (function (cell) {
return gridjs.html('\
\
\
');
})
},
{
name: 'Product',
width: '360px',
data: (function (row) {
return gridjs.html('' +
'
' +
'
' +
'
' +
'
Category : ' + row.product.category + '
' +
'
' +
'
' +
'' +
'' +
'
');
})
}
],
className: {
th: 'text-muted',
},
pagination: {
limit: 10
},
sort: true,
data: productListPublishedData
}).render(document.getElementById("table-product-list-published"));
// Search product list
var searchProductList = document.getElementById("searchProductList");
searchProductList.addEventListener("keyup", function () {
var inputVal = searchProductList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.product.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(productListAllData, inputVal);
var filterPublishData = filterItems(productListPublishedData, inputVal);
productListAll.updateConfig({
data: filterData
}).forceRender();
productListPublished.updateConfig({
data: filterPublishData
}).forceRender();
checkRemoveItem();
});
// mail list click event
Array.from(document.querySelectorAll('.filter-list a')).forEach(function (filteritem) {
filteritem.addEventListener("click", function () {
var filterListItem = document.querySelector(".filter-list a.active");
if (filterListItem) filterListItem.classList.remove("active");
filteritem.classList.add('active');
var filterItemValue = filteritem.querySelector(".listname").innerHTML
var filterData = productListAllData.filter(filterlist => filterlist.product.category === filterItemValue);
var filterPublishedData = productListPublishedData.filter(filterlist => filterlist.product.category === filterItemValue);
productListAll.updateConfig({
data: filterData
}).forceRender();
productListPublished.updateConfig({
data: filterPublishedData
}).forceRender();
checkRemoveItem();
});
})
// price range slider
var slider = document.getElementById('product-price-range');
noUiSlider.create(slider, {
start: [0, 2000], // Handle start position
step: 10, // Slider moves in increments of '10'
margin: 20, // Handles must be more than '20' apart
connect: true, // Display a colored bar between the handles
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to '100'
'min': 0,
'max': 2000
},
format: wNumb({ decimals: 0, prefix: '$ ' })
});
var minCostInput = document.getElementById('minCost'),
maxCostInput = document.getElementById('maxCost');
var filterDataAll = '';
var filterDataPublished = '';
// When the slider value changes, update the input and span
slider.noUiSlider.on('update', function (values, handle) {
var productListupdatedAll = productListAllData;
var productListupdatedPublished = productListPublishedData;
if (handle) {
maxCostInput.value = values[handle];
} else {
minCostInput.value = values[handle];
}
var maxvalue = maxCostInput.value.substr(2);
var minvalue = minCostInput.value.substr(2);
filterDataAll = productListupdatedAll.filter(
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
);
filterDataPublished = productListupdatedPublished.filter(
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
);
productListAll.updateConfig({
data: filterDataAll
}).forceRender();
productListPublished.updateConfig({
data: filterDataPublished
}).forceRender();
checkRemoveItem();
});
minCostInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
maxCostInput.addEventListener('change', function () {
slider.noUiSlider.set([null, this.value]);
});
// text inputs example
var filterChoicesInput = new Choices(
document.getElementById('filter-choices-input'),
{
addItems: true,
delimiter: ',',
editItems: true,
maxItemCount: 10,
removeItems: true,
removeItemButton: true,
}
)
// sidebar filter check
Array.from(document.querySelectorAll(".filter-accordion .accordion-item")).forEach(function (item) {
var isFilterSelected = item.querySelectorAll(".filter-check .form-check .form-check-input:checked").length;
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
Array.from(item.querySelectorAll(".form-check .form-check-input")).forEach(function (subitem) {
var checkElm = subitem.value;
if (subitem.checked) {
filterChoicesInput.setValue([checkElm]);
}
subitem.addEventListener("click", function (event) {
if (subitem.checked) {
isFilterSelected++;
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
filterChoicesInput.setValue([checkElm]);
} else {
filterChoicesInput.removeActiveItemsByValue(checkElm);
}
});
filterChoicesInput.passedElement.element.addEventListener('removeItem', function (event) {
if (event.detail.value == checkElm) {
subitem.checked = false;
isFilterSelected--;
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
}
}, false);
// clearall
document.getElementById("clearall").addEventListener("click", function () {
subitem.checked = false;
filterChoicesInput.removeActiveItemsByValue(checkElm);
isFilterSelected = 0;
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
productListAll.updateConfig({
data: productListAllData
}).forceRender();
productListPublished.updateConfig({
data: productListPublishedData
}).forceRender();
});
});
});
// Search Brands Options
var searchBrandsOptions = document.getElementById("searchBrandsList");
searchBrandsOptions.addEventListener("keyup", function () {
var inputVal = searchBrandsOptions.value.toLowerCase();
var searchItem = document.querySelectorAll("#flush-collapseBrands .form-check");
Array.from(searchItem).forEach(function (elem) {
var searchBrandsTxt = elem.getElementsByClassName("form-check-label")[0].innerText.toLowerCase();
elem.style.display = searchBrandsTxt.includes(inputVal) ? "block" : "none";
})
});
// table select to remove
// checkbox-wrapper
var isSelected = 0;
function checkRemoveItem() {
var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]');
Array.from(tabEl).forEach(function (el) {
el.addEventListener('show.bs.tab', function (event) {
isSelected = 0;
document.getElementById("selection-element").style.display = 'none';
});
});
setTimeout(function () {
Array.from(document.querySelectorAll(".checkbox-product-list input")).forEach(function (item) {
item.addEventListener('click', function (event) {
if (event.target.checked == true) {
event.target.closest('tr').classList.add("gridjs-tr-selected");
} else {
event.target.closest('tr').classList.remove("gridjs-tr-selected");
}
var checkboxes = document.querySelectorAll('.checkbox-product-list input:checked');
isSelected = checkboxes.length;
if (event.target.closest('tr').classList.contains("gridjs-tr-selected")) {
document.getElementById("select-content").innerHTML = isSelected;
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
} else {
document.getElementById("select-content").innerHTML = isSelected;
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
}
});
});
removeItems();
removeSingleItem();
}, 100);
}
// check to remove item
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
function removeItems() {
var removeItem = document.getElementById('removeItemModal');
removeItem.addEventListener('show.bs.modal', function (event) {
isSelected = 0;
document.getElementById("delete-product").addEventListener("click", function () {
Array.from(document.querySelectorAll(".gridjs-table tr")).forEach(function (element) {
var filtered = '';
if (element.classList.contains("gridjs-tr-selected")) {
var getid = element.querySelector('.form-check-input').value;
function arrayRemove(arr, value) {
return arr.filter(function (ele) {
return ele.id != value;
});
}
var filtered = arrayRemove(productListAllData, getid);
var filteredPublished = arrayRemove(productListPublishedData, getid);
productListAllData = filtered;
productListPublishedData = filteredPublished;
element.remove();
}
});
document.getElementById("btn-close").click();
if (document.getElementById("selection-element"))
document.getElementById("selection-element").style.display = 'none';
checkboxes.checked = false;
});
})
}
function removeSingleItem() {
var getid = 0;
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
item.addEventListener('click', function (event) {
getid = item.getAttribute('data-id');
document.getElementById("delete-product").addEventListener("click", function () {
function arrayRemove(arr, value) {
return arr.filter(function (ele) {
return ele.id != value;
});
}
var filtered = arrayRemove(productListAllData, getid);
var filteredPublished = arrayRemove(productListPublishedData, getid);
productListAllData = filtered;
productListPublishedData = filteredPublished;
var element = item.closest(".gridjs-tr");
element.remove();
});
});
});
var getEditid = 0;
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
elem.addEventListener('click', function (event) {
getEditid = elem.getAttribute('data-edit-id');
productListAllData = productListAllData.map(function (item) {
if (item.id == getEditid) {
sessionStorage.setItem('editInputValue', JSON.stringify(item));
}
return item;
});
});
});
} 
' +
'