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

Improvements and docker

Browse Source
This commit is contained in:
Krzysztof Płaczek
2025-09-18 15:37:41 +02:00
parent 9a66134469
commit 3046780f1b
15 changed files with 356 additions and 889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
index.html
View File

@@ -1,5 +1,12 @@
<!DOCTYPE html>
<html lang="pl">
<html lang="pl" x-data="{ dark: false }" x-init="
dark = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
$watch('dark', value => {
document.documentElement.classList.toggle('dark', value)
localStorage.theme = value ? 'dark' : 'light'
})
"
:class="{ 'dark': dark }">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,9 +17,19 @@
}
</style>
</head>
<body class="dark:text-gray-300 dark:bg-stone-950">
<body class="dark:text-gray-300 dark:bg-gray-950">
<div x-data="bookmeterList">
<!-- <div class="p-10">-->
<!-- <div class="chart-container" style="position: relative; height:30vh; width:80vw">-->
<!-- <canvas id="statsChart" height="100px"></canvas>-->
<!-- </div>-->
<!-- <div class="chart-container" style="position: relative; height:50vh; width:80vw">-->
<!-- <canvas id="chartPoints" height="100px"></canvas>-->
<!-- </div>-->
<!-- </div>-->
<!-- <button @click="updatechartnew()" class="text-red-500">click me</button>-->
<div x-cloak>
<form class="flex items-center m-2" x-show="!advancedSearch">
<div class="relative w-full d-block max-w-md ">
@@ -21,7 +38,7 @@
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="text" class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full ps-10 p-2.5 pr-8 dark:bg-stone-900 dark:border-stone-700 dark:text-gray-100" x-model="nameFilter" placeholder="wyszukiwarka"/>
<input type="text" class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full ps-10 p-2.5 pr-8 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" x-model="nameFilter" placeholder="wyszukiwarka"/>
<button x-show="nameFilter.length" @click="nameFilter=''" 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" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
@@ -45,7 +62,7 @@
</form>
<div x-show="advancedSearch" class="flex m-4">
<div class="relative w-full d-block max-w-xs mr-2">
<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" />
<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-gray-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"/>
@@ -53,7 +70,7 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<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" />
<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-gray-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"/>
@@ -61,7 +78,7 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<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" />
<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-gray-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"/>
@@ -69,7 +86,7 @@
</button>
</div>
<div class="relative w-full d-block max-w-xs mr-2">
<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" />
<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-gray-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"/>
@@ -94,24 +111,74 @@
</div>
</div>
<template x-ref="sortIcons">
<span>
<svg x-show="orderColumn[1] === -1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
<svg x-show="orderColumn[1] === 1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
</svg>
</span>
</template>
<table class="table table-fixed w-full text-sm">
<thead>
<tr>
<th class="text-right pl-1 w-[4rem]">#</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 cursor-pointer" @click="orderBy('username')">
<div class="flex" x-data="{ columnName: 'username' }">
<span>Użytkownik</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('title')">
<div class="flex" x-data="{ columnName: 'title' }">
<span>Tytuł</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('author')">
<div class="flex" x-data="{ columnName: 'author' }">
<span>Autor</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-left pl-1 cursor-pointer" @click="orderBy('publisher')">
<div class="flex" x-data="{ columnName: 'publisher' }">
<span>Wydawca</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-right pr-4 w-[7rem] cursor-pointer" @click="orderBy('pages')">
<div class="flex" x-data="{ columnName: 'pages' }">
<span>Stron</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-left pl-1 w-[12rem] cursor-pointer" @click="orderBy('format')">
<div class="flex" x-data="{ columnName: 'format' }">
<span>Format</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-right w-[5rem] cursor-pointer" @click="orderBy('rating')">
<div class="flex" x-data="{ columnName: 'rating' }">
<span>Ocena</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-right pr-4 w-[5rem] cursor-pointer" @click="orderBy('likes')">
<div class="flex" x-data="{ columnName: 'likes' }">
<span>⚡</span>
<div x-html="$refs.sortIcons.innerHTML"></div>
</div>
</th>
<th class="text-left pl-1 w-[5rem] cursor-pointer">Link</th>
</tr>
</thead>
<tbody>
<template x-for="(item, key) in filteredItems" :key="item.uuid">
<tr class="border-b border-slate-100 dark:border-stone-900 m-3 w-auto hover:bg-gray-100 dark:hover:bg-stone-900">
<tr class="border-b border-slate-100 dark:border-stone-900 m-3 w-auto hover:bg-gray-100 dark:hover:bg-gray-900">
<td class="pl-1 text-right" x-text="filteredItems.length-key"></td>
<td class="pl-1 w-3 py-2">
<a @click="advancedSearch ? username=item.username : nameFilter='@'+item.username" class="cursor-pointer" x-text="item.username"></a>
@@ -165,6 +232,22 @@
</tfoot>
</table>
</div>
<div x-data="darkmodetoggle" class="flex m-5 border-t py-4 px-4 dark:bg-gray-800 dark:border-t-gray-500">
<div class="cursor-pointer text-yellow-500 px-4 dark:text-yellow-200" @click="mode('light')" title="Light mode">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"/>
</svg>
</div>
<div class="cursor-pointer text-yellow-500 px-4 dark:text-yellow-200" @click="mode('dark')" title="Dark mode">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
clip-rule="evenodd"/>
</svg>
</div>
</div>
<!--<script type="module" src="/src/chart.js"></script>-->
<script type="module" src="/src/main.js"></script>
<script type="module" src="/src/darkmodetoggle.js"></script>
</body>
</html>