From 1ee5fbf655b1aacb22fc07e2525f3b83d90f5c95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20P=C5=82aczek?= Date: Fri, 1 Aug 2025 19:31:43 +0200 Subject: [PATCH] Implementing sorting. --- index.html | 36 +++++++-------- src/generated.css | 115 +++++++++++++++++++++++++++++++++++++--------- src/main.js | 35 ++++++++++---- 3 files changed, 138 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 1826b2e..0dc2b80 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@
- +
- +
- +
- +
-
+
@@ -87,15 +87,15 @@ # - Uzytkownik - Tytuł - Autor - Wydawca - Stron - Format - Ocena - ⚡ - Link + Uzytkownik + Tytuł + Autor + Wydawca + Stron + Format + Ocena + ⚡ + Link @@ -117,7 +117,7 @@ - + link diff --git a/src/generated.css b/src/generated.css index fb1ea1a..84ae070 100644 --- a/src/generated.css +++ b/src/generated.css @@ -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)); + } } \ No newline at end of file diff --git a/src/main.js b/src/main.js index a231965..6a0b38e 100644 --- a/src/main.js +++ b/src/main.js @@ -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(); },