mirror/booklore
1
0
Fork 0
mirror of https://github.com/booklore-app/booklore.git synced 2025-12-23 22:28:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Add missing kobo progress bar and stats (#1942)

Browse Source 
* fix: added missing kobo progress bar from book card

* fix: added kobo progress bar to metadata viewer

* fix: consider kobo progress in stats
This commit is contained in:
Pedro Nave
2025-12-20 01:59:31 +00:00
committed by GitHub
parent 32a1a2ac34
commit bfa08054b5
10 changed files with 142 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html
View File

@@ -49,7 +49,7 @@
(onChange)="toggleSelection($event)">
</p-checkbox>
}
<div class="cover-progress-bar-container">
@if (progressPercentage !== null) {
<p-progressBar
[value]="progressPercentage"
@@ -62,12 +62,23 @@
<p-progressBar
[value]="koProgressPercentage"
[showValue]="false"
class="cover-progress-bar"
[ngClass]="[
progressPercentage == null ? 'cover-progress-bar-ko-only' : 'cover-progress-bar-ko-both',
koProgressPercentage === 100 ? 'progress-complete-ko' : 'progress-incomplete-ko'
]">
</p-progressBar>
}
@if (koboProgressPercentage !== null) {
<p-progressBar
[value]="koboProgressPercentage"
[showValue]="false"
class="cover-progress-bar"
[ngClass]="[
koboProgressPercentage === 100 ? 'progress-complete-kobo' : 'progress-incomplete-kobo'
]">
</p-progressBar>
}
</div>
</div>
<div [hidden]="bottomBarHidden">

37
booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.scss
View File

@@ -123,10 +123,19 @@
visibility: visible;
}
.cover-progress-bar,
.cover-progress-bar-ko-both,
.cover-progress-bar-ko-only {
.cover-progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 7.5px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.cover-progress-bar {
left: 0;
right: 0;
height: 2.5px;
@@ -134,18 +143,6 @@
opacity: 0.9;
}
.cover-progress-bar {
bottom: 2.5px;
}
.cover-progress-bar-ko-both {
bottom: 0;
}
.cover-progress-bar-ko-only {
bottom: 2.5px;
}
.series-number-overlay {
position: absolute;
top: 8px;
@@ -231,7 +228,15 @@
background-color: #8b5cf6;
}
::ng-deep p-progressbar {
::ng-deep .progress-incomplete-kobo .p-progressbar-value {
background-color: #bf0000;
}
::ng-deep .progress-complete-kobo .p-progressbar-value {
background-color: #f65c9c;
}
::ng-deep .cover-progress-bar {
--p-progressbar-border-radius: 0 !important;
}

7
booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.ts
View File

@@ -110,6 +110,13 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy {
return null;
}
get koboProgressPercentage(): number | null {
if (this.book.koboProgress?.percentage != null) {
return this.book.koboProgress.percentage;
}
return null;
}
get displayTitle(): string | undefined {
return (this.isSeriesCollapsed && this.book.metadata?.seriesName) ? this.book.metadata?.seriesName : this.book.metadata?.title;
}

20
booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-viewer/metadata-viewer.component.html
View File

@@ -19,6 +19,9 @@
</div>
}
<div
class="cover-progress-bar-container"
[style.--progress-count]="getProgressCount(book)">
@let progress = getProgressPercent(book);
@if (progress !== null) {
<p-progressBar
@@ -29,7 +32,6 @@
'progress-complete': progress === 100,
'progress-incomplete': progress < 100
}"
[style]="{ height: '6px' }"
></p-progressBar>
}
@@ -37,14 +39,26 @@
<p-progressBar
[value]="getKoProgressPercent(book)"
[showValue]="false"
class="cover-progress-bar"
[ngClass]="[
getProgressPercent(book) == null ? 'cover-progress-bar-ko-only' : 'cover-progress-bar-ko-both',
getKoProgressPercent(book) === 100 ? 'progress-complete-ko' : 'progress-incomplete-ko'
]"
[style]="{ height: '6px' }"
>
</p-progressBar>
}
@if (getKoboProgressPercent(book) !== null) {
<p-progressBar
[value]="getKoboProgressPercent(book)"
[showValue]="false"
class="cover-progress-bar"
[ngClass]="[
getKoboProgressPercent(book) === 100 ? 'progress-complete-kobo' : 'progress-incomplete-kobo'
]"
>
</p-progressBar>
}
</div>
</div>
@if (navigationState$ | async) {

38
booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-viewer/metadata-viewer.component.scss
View File

@@ -63,28 +63,28 @@
z-index: 2;
}
.cover-progress-bar,
.cover-progress-bar-ko-both,
.cover-progress-bar-ko-only {
.cover-progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
border-radius: 9999px;
overflow: hidden;
display: flex;
flex-direction: column;
height: calc(var(--progress-count, 0) * 6px);
}
.cover-progress-bar {
bottom: 0;
z-index: 2;
pointer-events: none;
height: 6px;
flex-shrink: 0;
}
.cover-progress-bar-ko-both {
bottom: 0;
height: 12px;
z-index: 3;
}
.cover-progress-bar-ko-only {
bottom: 0;
::ng-deep .cover-progress-bar {
--p-progressbar-border-radius: 0 !important;
}
::ng-deep .progress-incomplete .p-progressbar-value {
@@ -96,11 +96,19 @@
}
::ng-deep .progress-incomplete-ko .p-progressbar-value {
background-color: var(--primary-text-color);
background-color: #fbbf24;
}
::ng-deep .progress-complete-ko .p-progressbar-value {
background-color: var(--primary-hover-color);
background-color: #8b5cf6;
}
::ng-deep .progress-incomplete-kobo .p-progressbar-value {
background-color: #bf0000;
}
::ng-deep .progress-complete-kobo .p-progressbar-value {
background-color: #f65c9c;
}
.info-section {

15
booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-viewer/metadata-viewer.component.ts
View File

@@ -659,6 +659,21 @@ export class MetadataViewerComponent implements OnInit, OnChanges {
return null;
}
getKoboProgressPercent(book: Book): number | null {
if (book.koboProgress?.percentage != null) {
return book.koboProgress.percentage;
}
return null;
}
getProgressCount(book: Book): number {
let count = 0;
if (this.getProgressPercent(book) !== null) count++;
if (this.getKoProgressPercent(book) !== null) count++;
if (this.getKoboProgressPercent(book) !== null) count++;
return count;
}
getFileExtension(filePath?: string): string | null {
if (!filePath) return null;
const parts = filePath.split('.');

3
booklore-ui/src/app/features/stats/service/reading-dna-chart.service.ts
View File

@@ -390,7 +390,8 @@ export class ReadingDNAChartService implements OnDestroy {
book.epubProgress?.percentage || 0,
book.pdfProgress?.percentage || 0,
book.cbxProgress?.percentage || 0,
book.koreaderProgress?.percentage || 0
book.koreaderProgress?.percentage || 0,
book.koboProgress?.percentage || 0
);
return progress > 50;
});

3
booklore-ui/src/app/features/stats/service/reading-habits-chart.service.ts
View File

@@ -309,7 +309,8 @@ export class ReadingHabitsChartService implements OnDestroy {
book.epubProgress?.percentage || 0,
book.pdfProgress?.percentage || 0,
book.cbxProgress?.percentage || 0,
book.koreaderProgress?.percentage || 0
book.koreaderProgress?.percentage || 0,
book.koboProgress?.percentage || 0
);
return progress > 0 && progress < 100;
});

1
booklore-ui/src/app/features/stats/service/reading-progress-chart-service.ts
View File

@@ -228,6 +228,7 @@ export class ReadingProgressChartService implements OnDestroy {
if (book.epubProgress?.percentage) return book.epubProgress.percentage;
if (book.cbxProgress?.percentage) return book.cbxProgress.percentage;
if (book.koreaderProgress?.percentage) return book.koreaderProgress.percentage;
if (book.koboProgress?.percentage) return book.koboProgress.percentage;
return 0;
}

3
booklore-ui/src/app/features/stats/service/reading-velocity-chart.service.ts
View File

@@ -283,8 +283,9 @@ export class ReadingVelocityChartService implements OnDestroy {
const pdfProgress = book.pdfProgress?.percentage || 0;
const cbxProgress = book.cbxProgress?.percentage || 0;
const koreaderProgress = book.koreaderProgress?.percentage || 0;
const koboProgress = book.koboProgress?.percentage || 0;
return Math.max(epubProgress, pdfProgress, cbxProgress, koreaderProgress) / 100;
return Math.max(epubProgress, pdfProgress, cbxProgress, koreaderProgress, koboProgress) / 100;
}
private calculateAverageRating(books: Book[]): number {