Skip to content

Instantly share code, notes, and snippets.

@xullnn

xullnn/car_fitlering_app.js

Created December 22, 2019 08:14
Show Gist options
  • Save xullnn/b0252721ce7fa74362acf1c2ccafd72d to your computer and use it in GitHub Desktop.
Save xullnn/b0252721ce7fa74362acf1c2ccafd72d to your computer and use it in GitHub Desktop.
Download ZIP
Car Filtering App
Raw
car_fitlering_app.js
var app = (function() {
var cars = [
{ make: 'Honda', image: 'images/honda-accord-2005.jpg', model: 'Accord', year: 2005, price: 7000 },
{ make: 'Honda', image: 'images/honda-accord-2008.jpg', model: 'Accord', year: 2008, price: 11000 },
{ make: 'Toyota', image: 'images/toyota-camry-2009.jpg', model: 'Camry', year: 2009, price: 12500 },
{ make: 'Toyota', image: 'images/toyota-corrolla-2016.jpg', model: 'Corolla', year: 2016, price: 15000 },
{ make: 'Suzuki', image: 'images/suzuki-swift-2014.jpg', model: 'Swift', year: 2014, price: 9000 },
{ make: 'Audi', image: 'images/audi-a4-2013.jpg', model: 'A4', year: 2013, price: 25000 },
{ make: 'Audi', image: 'images/audi-a4-2013.jpg', model: 'A4', year: 2013, price: 26000 },
];
var optionTemp = Handlebars.compile($('#option_partial').html());
var carTemp = Handlebars.compile($('#car_partial').html());
var optionMap;
Handlebars.registerHelper('capitalize', function(str) {
return str[0].toUpperCase() + str.slice(1);
});
function uniqeArray(array) {
var unique = [];
array.forEach(e => { if (!unique.includes(e)) unique.push(e) });
return unique;
};
function getOptionMap(dataSet) {
return Object.keys(dataSet[0]).map(key => {
return {
name: key,
values: uniqeArray(dataSet.map(car => car[key])),
};
});
};
function renderOptions(optionMap) {
$form = $('form.filter_form');
$('div.fields').remove();
optionMap.forEach(aspect => {
if (aspect.name !== 'image') {
$form.prepend(optionTemp(aspect));
}
});
};
function renderFullOptions() {
var fullMap = getOptionMap(cars);
renderOptions(fullMap);
};
function renderCars(cars) {
var $container = $('section#car_list');
$('#car_list figure').remove();
cars.forEach(car => $container.append(carTemp(car)))
};
function collect_specs() {
var specs = {};
$('form.filter_form').serializeArray().forEach(obj => {
specs[obj.name] = obj.value;
})
return specs;
};
function parseSpecValue(value) {
return (/^\d+$/.test(value)) ? +value : value;
};
function findCars(specs) {
var carsCopy = cars.slice();
var specValue;
for(let spec in specs) {
specValue = parseSpecValue(specs[spec]);
if (specValue !== 'All') {
carsCopy = carsCopy.filter(car => car[spec] === specValue)
}
};
return carsCopy;
};
function handleSubmit() {
$('form.filter_form').on('submit', function(event) {
event.preventDefault();
var filter_specs = collect_specs();
var filtered_cars = findCars(filter_specs);
renderCars(filtered_cars);
});
};
function prefilterOptionsByMake(make) {
var allMakes = getOptionMap(cars).find(mapObj => mapObj.name === 'make').values;
var filteredCars = cars.filter(car => car.make === make);
var preFilterOptionMap = getOptionMap(filteredCars);
preFilterOptionMap.find(mapObj => mapObj.name === 'make').values = allMakes;
return preFilterOptionMap;
};
function handleChange() {
$('select#make').on('change', function(event) {
var make = $(event.target).val();
if (make === 'All') return;
var preFilterOptionMap = prefilterOptionsByMake(make);
renderOptions(preFilterOptionMap);
$(`option[value=${make}]`).attr('selected', true);
handleChange();
})
};
function bindEvents() {
handleSubmit();
handleChange();
};
return {
init: function() {
renderFullOptions()
renderCars(cars);
bindEvents();
},
};
})();
app.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment