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

Implementing sorting.

Browse Source
This commit is contained in:
Krzysztof Płaczek
2025-08-01 19:31:43 +02:00
parent 01c3f59085
commit 1ee5fbf655
3 changed files with 138 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/generated.css
View File

@@ -583,29 +583,30 @@ video {
inset-inline-start: 0px;
}
.m-2 {
margin: 0.5rem;
}
.m-3 {
margin: 0.75rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
.m-4 {
margin: 1rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
.mr-2 {
margin-right: 0.5rem;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
@@ -622,18 +623,10 @@ video {
height: 1rem;
}
.w-1 {
width: 0.25rem;
}
.w-12 {
width: 3rem;
}
.w-2 {
width: 0.5rem;
}
.w-3 {
width: 0.75rem;
}
@@ -646,6 +639,22 @@ video {
width: 2rem;
}
.w-\[12rem\] {
width: 12rem;
}
.w-\[4rem\] {
width: 4rem;
}
.w-\[5rem\] {
width: 5rem;
}
.w-\[7rem\] {
width: 7rem;
}
.w-auto {
width: auto;
}
@@ -654,8 +663,20 @@ video {
width: 100%;
}
.max-w-lg {
max-width: 32rem;
.max-w-md {
max-width: 28rem;
}
.max-w-xs {
max-width: 20rem;
}
.table-fixed {
table-layout: fixed;
}
.cursor-pointer {
cursor: pointer;
}
.items-center {
@@ -693,6 +714,11 @@ video {
padding: 0.625rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -739,6 +765,11 @@ video {
line-height: 1.25rem;
}
.text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -757,6 +788,11 @@ video {
display: none;
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.focus\:outline:focus {
outline-style: solid;
}
@@ -767,4 +803,41 @@ video {
.peer:valid ~ .peer-valid\:visible {
visibility: visible;
}
@media (prefers-color-scheme: dark) {
.dark\:border-stone-700 {
--tw-border-opacity: 1;
border-color: rgb(68 64 60 / var(--tw-border-opacity, 1));
}
.dark\:border-stone-900 {
--tw-border-opacity: 1;
border-color: rgb(28 25 23 / var(--tw-border-opacity, 1));
}
.dark\:bg-stone-900 {
--tw-bg-opacity: 1;
background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}
.dark\:bg-stone-950 {
--tw-bg-opacity: 1;
background-color: rgb(12 10 9 / var(--tw-bg-opacity, 1));
}
.dark\:text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:hover\:bg-stone-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}
}

35
src/main.js
View File

@@ -17,14 +17,14 @@ Alpine.data('bookmeterList', function () {
nameFilter: '',
years: [2023, 2024, 2025],
year: this.$persist(['2025']).as('year-filter'),
orderBy: [],
orderColumn: ['order', 1],
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());
// this.$watch('username', () => this.updateFilter());
// this.$watch('title', () => this.updateFilter());
// this.$watch('author', () => this.updateFilter());
// this.$watch('publisher', () => this.updateFilter());
this.$watch('year', () => this.updateFilter());
let qp = new URLSearchParams(window.location.search);
@@ -36,10 +36,14 @@ Alpine.data('bookmeterList', function () {
fetch('/posts_2023.json').then(res => res.json())
])
this.items = [...data1, ...data2, ...data3]
this.updateFilter();
},
orderBy(property) {
let direction = (this.orderColumn[0] === property) ? this.orderColumn[1] * -1 : 1;
this.orderColumn = [property, direction];
this.sort();
},
stats(){
return {
pages_total: this.filteredItems.reduce((a, b) => a + b.book.pages, 0) || '-',
@@ -54,11 +58,23 @@ Alpine.data('bookmeterList', function () {
}, {})
};
},
sort() {
let sortFunction = ({
username: (a,b) => ((a.username < b.username) ? -1 : (a.username > b.username) ? 1 : 0) * this.orderColumn[1],
title: (a,b) => ((a.book.title < b.book.title) ? -1 : (a.book.title > b.book.title) ? 1 : 0) * this.orderColumn[1],
author: (a,b) => ((a.book.author < b.book.author) ? -1 : (a.book.author > b.book.author) ? 1 : 0) * this.orderColumn[1],
publisher: (a,b) => ((a.book.publisher < b.book.publisher) ? -1 : (a.book.publisher > b.book.publisher) ? 1 : 0) * this.orderColumn[1],
pages: (a,b) => ((a.book.pages < b.book.pages) ? -1 : (a.book.pages > b.book.pages) ? 1 : 0) * this.orderColumn[1],
format: (a,b) => ((a.book.format < b.book.format) ? -1 : (a.book.format > b.book.format) ? 1 : 0) * this.orderColumn[1],
rating: (a,b) => ((a.book.rating < b.book.rating) ? -1 : (a.book.rating > b.book.rating) ? 1 : 0) * this.orderColumn[1],
likes: (a,b) => ((a.likes < b.likes) ? -1 : (a.likes > b.likes) ? 1 : 0) * this.orderColumn[1],
})[this.orderColumn[0]];
this.filteredItems = this.filteredItems.sort(sortFunction);
},
updateFilter(){
let filter = this.nameFilter.toLowerCase();
this.filteredItems = this.items.filter(i => {
return this.year.includes(i.created_at.substring(0,4))
}).filter(i => {
this.filteredItems = this.items.filter(i => this.year.includes(i.created_at.substring(0,4)))
.filter(i => {
if(this.advancedSearch) {
return (
(!this.username || i.username.toLowerCase().includes(this.username.toLowerCase())) &&
@@ -73,6 +89,7 @@ Alpine.data('bookmeterList', function () {
return false;
}
});
this.sort();
this.updateURL();
},