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

36
index.html
View File

@@ -34,7 +34,7 @@
</form>
<div x-show="advancedSearch" class="flex m-4">
<div class="relative w-full d-block max-w-xs mr-2">
<input x-model="username" placeholder="użytkownik" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<input @input.debounce="updateFilter" x-model="username" placeholder="użytkownik" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<button x-show="username.length" @click="username=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
@@ -42,7 +42,7 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<input x-model="title" placeholder="tytuł" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<input @input.debounce="updateFilter" x-model="title" placeholder="tytuł" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<button x-show="title.length" @click="title=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
@@ -50,7 +50,7 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<input x-model="author" placeholder="autor" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<input @input.debounce="updateFilter" x-model="author" placeholder="autor" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<button x-show="author.length" @click="author=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
@@ -58,22 +58,22 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<input x-model="publisher" placeholder="wydawca" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<input @input.debounce="updateFilter" x-model="publisher" placeholder="wydawca" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" />
<button x-show="publisher.length" @click="publisher=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class=" w-full d-block max-w-xs mr-2">
<div class="d-block max-w-xs mr-2">
<label for="year-2025" class="p-2.5 inline-block" >
<input x-model="year" type="checkbox" id="year-2025" value="2025" /> 2025
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2025" value="2025" /> 2025
</label>
<label for="year-2024" class="p-2.5 inline-block" >
<input x-model="year" type="checkbox" id="year-2024" value="2024" /> 2024
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2024" value="2024" /> 2024
</label>
<label for="year-2023" class="p-2.5 inline-block" >
<input x-model="year" type="checkbox" id="year-2023" value="2023" /> 2023
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2023" value="2023" /> 2023
</label>
</div>
@@ -87,15 +87,15 @@
<thead>
<tr>
<th class="text-right pl-1 w-[4rem]">#</th>
<th class="text-left pl-1">Uzytkownik</th>
<th class="text-left pl-1">Tytuł</th>
<th class="text-left pl-1">Autor</th>
<th class="text-left pl-1">Wydawca</th>
<th class="text-right pr-4 w-[7rem]">Stron</th>
<th class="text-left pl-1 w-[12rem]">Format</th>
<th class="text-right w-[5rem]">Ocena</th>
<th class="text-right pr-4 w-[5rem]">⚡</th>
<th class="text-left pl-1 w-[5rem]">Link</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('username')">Uzytkownik</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('title')">Tytuł</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('author')">Autor</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('publisher')">Wydawca</th>
<th class="text-right pr-4 w-[7rem] cursor-pointer" @click="orderBy('pages')">Stron</th>
<th class="text-left pl-1 w-[12rem] cursor-pointer" @click="orderBy('format')">Format</th>
<th class="text-right w-[5rem] cursor-pointer" @click="orderBy('rating')">Ocena</th>
<th class="text-right pr-4 w-[5rem] cursor-pointer" @click="orderBy('likes')">⚡</th>
<th class="text-left pl-1 w-[5rem] cursor-pointer">Link</th>
</tr>
</thead>
<tbody>
@@ -117,7 +117,7 @@
<td class="pr-4 text-right w-[5rem] w-[5rem]"><a :href="item.book.pages" x-text="item.book.pages"></a></td>
<td class="pl-1"><a :href="item.book.format" x-text="item.book.format"></a></td>
<td class="text-right"><a :href="item.book.rating" x-text="item.book.rating"></a></td>
<td class="pr-4 text-right"><a :href="item.book.likes" x-text="item.likes"></a></td>
<td class="pr-4 text-right" x-text="item.likes"></td>
<td class="pl-1 py-2">
<a :href="'https://www.hejto.pl/wpis/'+item.slug" target="_blank">
link