107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
Vue.createApp({
|
|
data() {
|
|
return {
|
|
currentfilms: currentfilms,
|
|
search: '',
|
|
type: 'all',
|
|
format: 'all',
|
|
sortBy: 'popularity',
|
|
sortDir: 'desc'
|
|
}
|
|
},
|
|
computed: {
|
|
searchedfilms: function() {
|
|
if(this.search) {
|
|
var searchTerms = this.search.toLowerCase().split(' ');
|
|
return this.currentfilms.filter(function (film) {
|
|
const name = film.name.toLowerCase();
|
|
const description = film.description.toLowerCase();
|
|
const company = film.company.toLowerCase();
|
|
const matches = (searchTerm) => name.includes(searchTerm) || description.includes(searchTerm) || company.includes(searchTerm);
|
|
return searchTerms.every(matches);
|
|
});
|
|
} 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) {
|
|
var first = a.name.toLowerCase() + a.format;
|
|
var second = b.name.toLowerCase() + b.format;
|
|
switch(sortBy) {
|
|
case 'popularity':
|
|
return a.popularity - b.popularity || first.localeCompare(second);
|
|
case 'name':
|
|
return first.localeCompare(second);
|
|
case 'price':
|
|
return a.price - b.price || first.localeCompare(second);
|
|
case 'iso':
|
|
return a.iso - b.iso || first.localeCompare(second);
|
|
case 'date':
|
|
return a.launched - b.launched || first.localeCompare(second);
|
|
}
|
|
});
|
|
if(sortDir === 'asc') {
|
|
return sorted;
|
|
} else {
|
|
return sorted.reverse();
|
|
}
|
|
},
|
|
films: function() {
|
|
return this.sortedfilms;
|
|
}
|
|
},
|
|
methods: {
|
|
formatPrice: function(price) {
|
|
return "€".repeat(price);
|
|
},
|
|
reset: function() {
|
|
this.search = '';
|
|
this.type = 'all';
|
|
this.format = 'all';
|
|
},
|
|
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();
|
|
}
|
|
},
|
|
toggle: function() {
|
|
if(document.querySelector('body').classList.contains('dark')) {
|
|
localStorage.setItem('theme', 'light');
|
|
document.querySelector('body').classList.remove('dark');
|
|
} else {
|
|
localStorage.setItem('theme', 'dark');
|
|
document.querySelector('body').classList.add('dark');
|
|
}
|
|
}
|
|
},
|
|
mounted: function() {
|
|
if(localStorage.getItem('theme') !== 'dark') {
|
|
document.querySelector('body').classList.remove('dark');
|
|
}
|
|
}
|
|
}).mount('#app');
|