krzysiej/bookmeterplus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2 version of filtering and persist filter settings.

Browse Source
This commit is contained in:
Krzysztof Płaczek
2025-07-29 15:24:52 +02:00
parent e836daa2b1
commit ce08be27a7
2 changed files with 149 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/main.js
View File

@@ -6,66 +6,71 @@ import persist from '@alpinejs/persist'
window.Alpine = Alpine;
Alpine.plugin(persist)
Alpine.data('bookmeterList', () => ({
items: [],
filteredItems: [],
username: '',
publisher: '',
title: '',
author: '',
nameFilter: '',
async init() {
this.$watch('nameFilter', () => this.updateFilter());
this.$watch('username', () => this.updateFilter());
this.$watch('title', () => this.updateFilter());
this.$watch('author', () => this.updateFilter());
this.$watch('publisher', () => this.updateFilter());
Alpine.data('bookmeterList', function () {
return {
items: [],
filteredItems: [],
username: '',
publisher: '',
title: '',
author: '',
nameFilter: '',
advancedSearch: this.$persist(0).as('advanced-search'),
async init() {
this.$watch('nameFilter', () => this.updateFilter());
this.$watch('username', () => this.updateFilter());
this.$watch('title', () => this.updateFilter());
this.$watch('author', () => this.updateFilter());
this.$watch('publisher', () => this.updateFilter());
let qp = new URLSearchParams(window.location.search);
if(qp.get('filter')) this.nameFilter = qp.get('filter');
let qp = new URLSearchParams(window.location.search);
if(qp.get('filter')) this.nameFilter = qp.get('filter');
const res = await fetch('/posts.json')
this.items = await res.json();
this.updateFilter();
},
stats(){
return {
'pages_total': this.filteredItems.reduce((a, b) => a + b.book.pages, 0) || '-',
'likes_total': this.filteredItems.reduce((a, b) => a + b.likes, 0) || '-',
'pages_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.book.pages, 0)/this.filteredItems.length) || '-',
'likes_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.likes, 0)/this.filteredItems.length) || '-',
'rating_avg': (this.filteredItems.reduce((a, b) => a + b.book.rating, 0)/this.filteredItems.length).toPrecision(2) || '-',
'formats': this.filteredItems.reduce((acc, item) => {
let val = item.book.format.toLowerCase() || 'brak danych';
acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;
return acc;
}, {})
};
},
updateFilter(){
let filter = this.nameFilter.toLowerCase();
const res = await fetch('/posts.json')
this.items = await res.json();
this.updateFilter();
},
stats(){
return {
'pages_total': this.filteredItems.reduce((a, b) => a + b.book.pages, 0) || '-',
'likes_total': this.filteredItems.reduce((a, b) => a + b.likes, 0) || '-',
'pages_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.book.pages, 0)/this.filteredItems.length) || '-',
'likes_avg': Math.round(this.filteredItems.reduce((a, b) => a + b.likes, 0)/this.filteredItems.length) || '-',
'rating_avg': (this.filteredItems.reduce((a, b) => a + b.book.rating, 0)/this.filteredItems.length).toPrecision(2) || '-',
'formats': this.filteredItems.reduce((acc, item) => {
let val = item.book.format.toLowerCase() || 'brak danych';
acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;
return acc;
}, {})
};
},
updateFilter(){
let filter = this.nameFilter.toLowerCase();
this.filteredItems = this.items.filter(i => {
this.filteredItems = this.items.filter(i => {
if(this.advancedSearch) {
return (
(!this.username || i.username.toLowerCase().includes(this.username.toLowerCase())) &&
(!this.title || i.book.title.toLowerCase().includes(this.title.toLowerCase())) &&
(!this.author || i.book.author.toLowerCase().includes(this.author.toLowerCase())) &&
(!this.publisher || i.book.publisher.toLowerCase().includes(this.publisher.toLowerCase()))
);
} else {
if(filter.startsWith('@') && i.username.toLowerCase().includes(filter.substring(1))) return true;
if (i.username.toLowerCase().includes(filter) ||
i.book.title.toLowerCase().includes(filter) || i.book.author.toLowerCase().includes(filter) || i.book.publisher.toLowerCase().includes(filter)) return true;
return false;
}
});
return (
(!this.username || i.username.toLowerCase().includes(this.username.toLowerCase())) &&
(!this.title || i.book.title.toLowerCase().includes(this.title.toLowerCase())) &&
(!this.author || i.book.author.toLowerCase().includes(this.author.toLowerCase())) &&
(!this.publisher || i.book.publisher.toLowerCase().includes(this.publisher.toLowerCase()))
);
if(filter.startsWith('@') && i.username.toLowerCase().includes(filter.substring(1))) return true;
if (i.username.toLowerCase().includes(filter) ||
i.book.title.toLowerCase().includes(filter) || i.book.author.toLowerCase().includes(filter) || i.book.publisher.toLowerCase().includes(filter)) return true;
return false;
});
this.updateURL();
},
updateURL() {
let qp = new URLSearchParams();
if(this.nameFilter !== '') qp.set('filter', this.nameFilter);
this.updateURL();
},
updateURL() {
let qp = new URLSearchParams();
if(this.nameFilter !== '') qp.set('filter', this.nameFilter);
history.replaceState(null, null, "?"+qp.toString());
history.replaceState(null, null, "?"+qp.toString());
}
}
}))
})
Alpine.start();