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

20
Dockerfile Normal file
View File

@@ -0,0 +1,20 @@
FROM node:20
# Set working directory inside container
WORKDIR /src
# Copy package files first (for better caching)
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of your project
COPY . .
# Expose Vite’s default dev port
EXPOSE 5173
# Default command
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

2
bin/build Executable file
View File

@@ -0,0 +1,2 @@
#!/usr/bin/env bash
docker compose run --rm node npm run build

2
bin/dev Executable file
View File

@@ -0,0 +1,2 @@
#!/usr/bin/env bash
docker compose run --rm node npm run dev -- --host 0.0.0.0

2
bin/tailwindbuild Executable file
View File

@@ -0,0 +1,2 @@
#!/usr/bin/env bash
docker compose run --rm node npm run tailwind:build

10
docker-compose.yml Normal file
View File

@@ -0,0 +1,10 @@
services:
node:
build: .
working_dir: /src
volumes:
- .:/src
- /node_modules
ports:
- "5173:5173"
command: npm run dev -- --host 0.0.0.0

16
download_posts.php
View File

@@ -1,9 +1,19 @@
<?php
if (!file_exists('public/posts_2023.json')) {
file_put_contents('public/posts_2023.json', file_get_contents('https://bookmeter.xyz/api/posts?edition=2023'));
file_put_contents('public/posts_2023.json', download_posts('https://bookmeter.xyz/api/posts?edition=2023'));
}
if (!file_exists('public/posts_2024.json')) {
file_put_contents('public/posts_2024.json', file_get_contents('https://bookmeter.xyz/api/posts?edition=2024'));
file_put_contents('public/posts_2024.json', download_posts('https://bookmeter.xyz/api/posts?edition=2024'));
}
file_put_contents('public/posts_2025.json', download_posts('https://bookmeter.xyz/api/posts?edition=2025'));
function download_posts(string $url): false|string
{
$posts = file_get_contents($url);
$posts = json_decode($posts, true);
array_walk($posts, function (&$item) {
unset($item['image']);
});
return json_encode($posts);
}
file_put_contents('public/posts_2025.json', file_get_contents('https://bookmeter.xyz/api/posts?edition=2025'));

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>

30
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"license": "ISC",
"dependencies": {
"@alpinejs/persist": "^3.14.9",
"alpinejs": "^3.14.9"
"alpinejs": "^3.14.9",
"chart.js": "^4.5.0"
},
"devDependencies": {
"autoprefixer": "^10.4.21",
@@ -511,6 +512,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
"license": "MIT"
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1035,9 +1042,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001727",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
"version": "1.0.30001743",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001743.tgz",
"integrity": "sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==",
"dev": true,
"funding": [
{
@@ -1052,7 +1059,20 @@
"type": "github",
"url": "https://github.com/sponsors/ai"
}
]
],
"license": "CC-BY-4.0"
},
"node_modules/chart.js": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
"license": "MIT",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/chokidar": {
"version": "3.6.0",

5
package.json
View File

@@ -18,12 +18,13 @@
"license": "ISC",
"dependencies": {
"@alpinejs/persist": "^3.14.9",
"alpinejs": "^3.14.9"
"alpinejs": "^3.14.9",
"chart.js": "^4.5.0"
},
"devDependencies": {
"autoprefixer": "^10.4.21",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17",
"vite": "^7.0.5"
"vite": "7.1.5"
}
}

34
src/chart.js Normal file
View File

@@ -0,0 +1,34 @@
import Chart from 'chart.js/auto'
const data = [
{year: 2009, count: 10},
{year: 2010, count: NaN},
{year: 2011, count: 20},
{year: 2012, count: 15},
{year: 2013, count: 25},
{year: 2014, count: 22},
{year: 2015, count: 30},
{year: 2016, count: 28},
];
// linechart.data.labels.push(label);
// linechart.data.datasets.forEach((dataset) => {
// dataset.data.push(newData);
// });
// linechart.update();
window.linechart = new Chart(
document.getElementById('acquisitions'),
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Acquisitions by year',
data: data.map(row => row.count)
}
]
}
}
);

6
src/darkmodetoggle.js Normal file
View File

@@ -0,0 +1,6 @@
export default () => ({
mode(modeName) {
localStorage.theme = modeName;
document.documentElement.classList.toggle("dark", modeName==='dark');
}
});

844
src/generated.css
View File

File diff suppressed because one or more lines are too long

127
src/main.js
View File

@@ -2,12 +2,17 @@ import './generated.css'
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
import Chart from 'chart.js/auto'
import darkmodetoggle from './darkmodetoggle';
window.Alpine = Alpine;
Alpine.plugin(persist)
Alpine.data('darkmodetoggle', darkmodetoggle);
Alpine.data('bookmeterList', function () {
return {
chart: null,
chartPoints: null,
chartPublisher: null,
items: {},
filteredItems: [],
username: '',
@@ -17,7 +22,7 @@ Alpine.data('bookmeterList', function () {
nameFilter: '',
years: [2023, 2024, 2025],
year: this.$persist(['2025']).as('year-filter'),
orderColumn: ['order', 1],
orderColumn: ['order', 0],
advancedSearch: this.$persist(0).as('advanced-search'),
async init() {
this.$watch('nameFilter', () => this.updateFilter());
@@ -38,9 +43,113 @@ Alpine.data('bookmeterList', function () {
this.items = [...data1, ...data2, ...data3]
this.updateFilter();
// this.initChart();
},
updatechartnew(){
this.chart.data.datasets[0].data[0] = Math.random()*50;
Alpine.raw(this.chart).update('none');
this.updateChart()
},
// initChart() {
// const ctx = document.getElementById('statsChart').getContext('2d')
//
// this.chart = Alpine.raw(new Chart(ctx, {
// type: 'bar',
// data: {
// labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
// datasets: [{
// label: '# of Votes',
// data: [12, 19, 3, 5, 2, 3],
// borderWidth: 1
// }]
// }
// }));
//
// const chartPoints = document.getElementById('chartPoints').getContext('2d')
//
// const bubbleData = this.filteredItems.map(item => ({
// x: item.book.pages,
// y: item.book.rating,
// r: Math.sqrt(item.likes || 1) * 2, // scale likes
// format: item.book.format
// }));
//
//
// this.chartPoints = Alpine.raw(new Chart(chartPoints, {
// type: 'bubble',
// data: {
// labels: [],
// datasets: [{
// label: 'points',
// // data: this.pointsChartData,
// data: bubbleData,
// // backgroundColor: 'rgb(255, 99, 132)'
// backgroundColor: bubbleData.map(d =>
// d.format === 'audiobook' ? 'rgba(255,99,132,0.5)' :
// d.format === 'ebook' ? 'rgba(54,162,235,0.5)' :
// 'rgba(75,192,192,0.5)'
// )
// }]
// },
// options: {
// scales: {
// x: { title: { display: true, text: 'Pages' } },
// y: { title: { display: true, text: 'Rating' }, min: 0, max: 10 }
// }
// }
// }));
//
// },
get pointsChartData(){
let data = [];
for(let i in this.filteredItems){
// console.info(Alpine.raw(this.filteredItems[i]));
if(!(this.filteredItems[i]['book']['rating'] in data)){
data[this.filteredItems[i]['book']['rating']] = []
}
if(!(this.filteredItems[i]['likes'] in data[this.filteredItems[i]['book']['rating']])){
data[this.filteredItems[i]['book']['rating']][this.filteredItems[i]['likes']] = 0;
}
data[this.filteredItems[i]['book']['rating']][this.filteredItems[i]['likes']]++;
}
let data2 = [];
for(let i in data){
for(let j in data[i]){
data2.push({x: j, y: i, r: data[i][j], label: 'label'});
}
}
return data2;
},
updateChart() {
if (!this.chart) {
return;
}
// console.info( Alpine.raw(this.filteredItems));
const topItems = this.filteredItems.slice(0, 20).map(item => ({
title: item.book?.title || 'Unknown',
likes: item.likes || 0,
// date: (new Date(item.created_at)).getFullYear()+'-'+((new Date(item.created_at)).getMonth()+1)
}));
let counts = {};
// topItems.forEach(item => counts[item.date] = 1 + ())
console.info(topItems);
this.chart.data.labels = topItems.map(i => i.title)
this.chart.data.datasets[0].data = topItems.map(i => i.likes)
Alpine.raw(this.chart).update('none');
},
orderBy(property) {
let direction = (this.orderColumn[0] === property) ? this.orderColumn[1] * -1 : 1;
let direction = (this.orderColumn[0] === property) ? ((this.orderColumn[1] === -1) ? 0 : this.orderColumn[1] * -1) : 1;
if (!direction) {
property = 'order';
}
this.orderColumn = [property, direction];
this.sort();
},
@@ -70,10 +179,15 @@ Alpine.data('bookmeterList', function () {
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);
if (this.orderColumn[0] === 'order') {
this.initFilteredData();
}
},
updateFilter(){
initFilteredData(){
let filter = this.nameFilter.toLowerCase();
this.filteredItems = this.items.filter(i => this.year.includes(i.created_at.substring(0,4)))
this.filteredItems = this.items
.filter(i => this.year.includes(i.created_at.substring(0,4)))
.filter(i => {
if(this.advancedSearch) {
return (
@@ -89,6 +203,9 @@ Alpine.data('bookmeterList', function () {
return false;
}
});
},
updateFilter(){
this.initFilteredData();
this.sort();
this.updateURL();

1
src/style.css
View File

@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
[x-cloak] {
display: none;

1
tailwind.config.js
View File

@@ -8,5 +8,6 @@ module.exports = {
extend: {},
},
plugins: [],
darkMode: 'class'
}