86 lines
2.5 KiB
JavaScript
86 lines
2.5 KiB
JavaScript
const app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
currentfilms: currentfilms,
|
|
search: '',
|
|
type: 'all',
|
|
format: 'all',
|
|
sortBy: 'popularity',
|
|
sortDir: 'desc'
|
|
},
|
|
computed: {
|
|
searchedfilms: function() {
|
|
if(this.search) {
|
|
var search = this.search.toLowerCase();
|
|
return this.currentfilms.filter(function (film) {
|
|
return film.name.toLowerCase().indexOf(search) !== -1 ||
|
|
film.description.toLowerCase().indexOf(search) !== -1;
|
|
});
|
|
} else {
|
|
return this.currentfilms;
|
|
}
|
|
},
|
|
filteredfilms: function() {
|
|
var format = this.format;
|
|
var type = this.type;
|
|
if(type === 'all' && format === 'all') {
|
|
return this.searchedfilms;
|
|
} else if(type === 'all' && format !== 'all') {
|
|
return this.searchedfilms.filter(function (film) {
|
|
return format === film.format;
|
|
});
|
|
} else if(this.type !== 'all' && this.format === 'all') {
|
|
return this.searchedfilms.filter(function (film) {
|
|
return type === film.color + film.type;
|
|
});
|
|
} else {
|
|
return this.searchedfilms.filter(function (film) {
|
|
return type === film.color + film.type &&
|
|
format === film.format;
|
|
});
|
|
}
|
|
},
|
|
sortedfilms: function() {
|
|
var sortBy = this.sortBy;
|
|
var sortDir = this.sortDir;
|
|
var sorted = this.filteredfilms.sort(function (a, b) {
|
|
switch(sortBy) {
|
|
case 'popularity':
|
|
return a.popularity - b.popularity;
|
|
case 'name':
|
|
var first = a.name.toLowerCase() + a.format;
|
|
var second = b.name.toLowerCase() + b.format;
|
|
if(first < second) return -1;
|
|
if(first > second) return 1;
|
|
return 0;
|
|
case 'price':
|
|
return a.price - b.price;
|
|
case 'iso':
|
|
return a.iso - b.iso;
|
|
case 'date':
|
|
return a.launched - b.launched;
|
|
}
|
|
});
|
|
if(sortDir === 'asc') {
|
|
return sorted;
|
|
} else {
|
|
return sorted.reverse();
|
|
}
|
|
},
|
|
films: function() {
|
|
return this.sortedfilms;
|
|
}
|
|
},
|
|
methods: {
|
|
formatPrice: function(price) {
|
|
return "€".repeat(price);
|
|
},
|
|
sort: function(button) {
|
|
if(this.sortBy === button.target.innerText.toLowerCase()) {
|
|
this.sortDir === 'asc' ? this.sortDir = 'desc' : this.sortDir = 'asc';
|
|
} else {
|
|
this.sortBy = button.target.innerText.toLowerCase();
|
|
}
|
|
}
|
|
}
|
|
}); |