Skip to content

Instantly share code, notes, and snippets.

@vikaskanani

vikaskanani/filters.html

Created May 28, 2019 04:28
Show Gist options
  • Save vikaskanani/c831bd709df40d2e87b368a810eda32d to your computer and use it in GitHub Desktop.
Save vikaskanani/c831bd709df40d2e87b368a810eda32d to your computer and use it in GitHub Desktop.
Download ZIP
Filter demo
Raw
filters.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<title>Filters</title>
<style>
.flex-row-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-row-container>.flex-row-item {
flex-grow: 1;
flex: 1 1 30%;
}
.flex-row-item {
border: 1px solid #f76707;
}
.highlight {
background-color: bisque;
color: black;
}
</style>
</head>
<body>
<div class="flex-row-container">
<div class="flex-row-item">
Job: <div id="job"></div>
</div>
<div class="flex-row-item">
Contractor: <div id="contractor"></div>
</div>
<div class="flex-row-item">
Service: <div id="service"></div>
</div>
</div>
<table id="grid" border="1" cellspacing="0" cellpadding="3px"></table>
<log></log>
</body>
<script>
var photos = [{
"service": "Lawncare",
"jobNo": "J8235-62",
"contractor": "Vikas"
}, {
"service": "Snow removal",
"jobNo": "J8235-62",
"contractor": "Vikas"
}, {
"service": "Snow removal",
"jobNo": "J8235-63",
"contractor": "Bharat"
}, {
"service": "Winterization",
"jobNo": "J8235-63",
"contractor": "Bharat"
}, {
"service": "Lawncare",
"jobNo": "J8235-64",
"contractor": "Bharat"
}, {
"service": "Snow removal",
"jobNo": "J8235-64",
"contractor": "Bharat"
}, {
"service": "Winterization",
"jobNo": "J8235-64",
"contractor": "Bharat"
}, {
"service": "Winterization",
"jobNo": "J8235-65",
"contractor": "Pritesh"
}, {
"service": "Occupancy Check",
"jobNo": "J8235-65",
"contractor": "Pritesh"
}, {
"service": "Snow removal",
"jobNo": "J8235-66",
"contractor": "Vikas"
}, {
"service": "Snow removal",
"jobNo": "J8235-67",
"contractor": "Pritesh"
}, {
"service": "Lawncare",
"jobNo": "J8235-68",
"contractor": "Vikas"
}, {
"service": "Occupancy Check",
"jobNo": "J8235-68",
"contractor": "Vikas"
}, {
"service": "Lawncare",
"jobNo": "J8235-69",
"contractor": "Ashish"
}, {
"service": "Occupancy Check",
"jobNo": "J8235-70",
"contractor": "Pritesh"
}, {
"service": "Lawncare",
"jobNo": "J8235-71",
"contractor": "Pritesh"
}, {
"service": "Snow removal",
"jobNo": "J8235-71",
"contractor": "Pritesh"
}, {
"service": "Winterization",
"jobNo": "J8235-71",
"contractor": "Pritesh"
}, {
"service": "Occupancy Check",
"jobNo": "J8235-71",
"contractor": "Pritesh"
}];
var arrJobs = [],
arrCons = [],
arrServices = [];
function onChange() {
//$("log").append("called<br/>");
var selectedJobs = [];
var selectedCons = [];
var selectedServices = [];
if ( $(".job:checked").length ) {
$(".job:checked").each(function(){
selectedJobs.push($(this).val());
});
} else {
selectedJobs = _.map(arrJobs, _.clone);
}
if ( $(".contractor:checked").length ) {
$(".contractor:checked").each(function(){
selectedCons.push($(this).val());
});
} else {
selectedCons = _.map(arrCons, _.clone);
}
if ( $(".service:checked").length ) {
$(".service:checked").each(function(){
selectedServices.push($(this).val());
});
} else {
selectedServices = _.map(arrServices, _.clone);
}
$("tr", $("#grid")).removeClass('highlight');
newPhotos = _.filter(photos, function(o) {
var ret = false;
if ( _.includes(selectedJobs, o.jobNo)
&& _.includes(selectedCons, o.contractor)
&& _.includes(selectedServices, o.service)
) {
ret = true;
//highligh row
$("#" + _.replace(o.jobNo + o.contractor + o.service, ' ', '')).addClass("highlight");
}
return ret;
});
$(".job:checked").each(function(){
var mVal = $(this).val();
var original = $("#lbl" + $(this).attr('id')).text();
var newV = original + ' ' +
_.reduce(newPhotos, function(sum, n){
var isSelected = 0;
if ( n.jobNo == mVal ) {
isSelected = 1;
}
return sum + isSelected;
}, 0);
$("#lbl" + $(this).attr('id')).text(newV);
});
$(".contractor:checked").each(function(){
var mVal = $(this).val();
var original = $("#lbl" + $(this).attr('id')).text();
var newV = original + ' ' +
_.reduce(newPhotos, function(sum, n){
var isSelected = 0;
if ( n.contractor == mVal ) {
isSelected = 1;
}
return sum + isSelected;
}, 0);
$("#lbl" + $(this).attr('id')).text(newV);
});
$(".service:checked").each(function(){
var mVal = $(this).val();
var original = $("#lbl" + $(this).attr('id')).text();
var newV = original + ' ' +
_.reduce(newPhotos, function(sum, n){
var isSelected = 0;
if ( n.service == mVal ) {
isSelected = 1;
}
return sum + isSelected;
}, 0);
$("#lbl" + $(this).attr('id')).text(newV);
});
$(".job").each(function(){
var mVal = $(this).val();
if(!$(this).is(':checked')) {
var original = $("#lbl" + $(this).attr('id')).text();
var cnt = _.reduce(photos, function(sum, o) {
var c = 0;
if ( o.jobNo == mVal
&& _.includes(selectedCons, o.contractor)
&& _.includes(selectedServices, o.service)
) {
c = 1;
}
return sum + c;
}, 0);
var newV = original + ' ' + cnt;
$("#lbl" + $(this).attr('id')).text(newV);
}
})
$(".contractor").each(function(){
var mVal = $(this).val();
if(!$(this).is(':checked')) {
var original = $("#lbl" + $(this).attr('id')).text();
var cnt = _.reduce(photos, function(sum, o) {
var c = 0;
if ( o.contractor == mVal
&& _.includes(selectedJobs, o.jobNo)
&& _.includes(selectedServices, o.service)
) {
c = 1;
}
return sum + c;
}, 0);
var newV = original + ' ' + cnt;
$("#lbl" + $(this).attr('id')).text(newV);
}
})
$(".service").each(function(){
var mVal = $(this).val();
if(!$(this).is(':checked')) {
var original = $("#lbl" + $(this).attr('id')).text();
var cnt = _.reduce(photos, function(sum, o) {
var c = 0;
if ( o.service == mVal
&& _.includes(selectedJobs, o.jobNo)
&& _.includes(selectedCons, o.contractor)
) {
c = 1;
}
return sum + c;
}, 0);
var newV = original + ' ' + cnt;
$("#lbl" + $(this).attr('id')).text(newV);
}
})
}
$(function () {
_.forEach(photos, function (v) {
arrJobs.push(v.jobNo);
arrCons.push(v.contractor);
arrServices.push(v.service);
$("#grid").append(
$('<tr>')
.append($('<td>')
.append($('<span>')
.text(v.jobNo)
)
).append($('<td>')
.append($('<span>')
.text(v.contractor)
)
).append($('<td>')
.append($('<span>')
.text(v.service)
)
)
.attr("id", _.replace(v.jobNo + v.contractor + v.service, ' ', ''))
);
});
arrJobs = _.uniq(arrJobs);
arrCons = _.uniq(arrCons);
arrServices = _.uniq(arrServices);
_.forEach(arrJobs, function (v) {
$("#job").append(
$('<input type="checkbox">')
.addClass("job")
.val(v)
.attr('id', _.replace(v, ' ', ''))
.on("change", onChange)
).append(
$('<label>')
.text(v)
.attr('id', 'lbl'+_.replace(v, ' ', ''))
).append(
$('<br>')
);
});
_.forEach(arrCons, function (v) {
$("#contractor").append(
$('<input type="checkbox">')
.addClass("contractor")
.val(v)
.attr('id', _.replace(v, ' ', ''))
.on("change", onChange)
).append(
$('<label>')
.text(v)
.attr('id', 'lbl'+_.replace(v, ' ', ''))
).append(
$('<br>')
);
});
_.forEach(arrServices, function (v) {
$("#service").append(
$('<input type="checkbox">')
.addClass("service")
.val(v)
.attr('id', _.replace(v, ' ', ''))
.on("change", onChange)
).append(
$('<label>')
.text(v)
.attr('id', 'lbl'+_.replace(v, ' ', ''))
).append(
$('<br>')
);
});
onChange();
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment