Skip to content

Commit

Permalink
feat: edit/delete statistics (#290)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Renji-XD
Renji-XD authored Dec 23, 2023
1 parent ccc9bbf commit e6b9b68
Show file tree
Hide file tree
Showing 23 changed files with 1,065 additions and 163 deletions.
64 changes: 38 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ You can find most of the reader controls in the reader header which you can open
| ![Icon](assets/readme/control-finish.svg) | Allows you to complete the current book |
| ![Icon](assets/readme/control-reading-point.svg) | Allows you to execute a custom reader point action |
| ![Icon](assets/readme/control-fullscreen.svg) | Allows you to enter fullscreen mode (keybind <kbd>F11</kbd>) |
| ![Icon](assets/readme/control-reader-statistics.svg) | Navigates you to the statistics tab |
| ![Icon](assets/readme/control-reader-statistics.svg) | Navigates you to the statistics with the current Book as Filter |
| ![Icon](assets/readme/control-image-gallery.svg) | Opens the Book Image Gallery |
| ![Icon](assets/readme/control-settings.svg) | Navigates you to the settings |
| ![Icon](assets/readme/control-manager.svg) | Navigates you to the book manager or opens the action menu |
Expand Down Expand Up @@ -118,22 +118,24 @@ You may:

You may find the following controls in the manager:

| Control | Description |
| ------------------------------------------------- | ------------------------------------------------------------------------------ |
| ![Icon](assets/readme/control-bookselect.svg) | Toggles book selection |
| ![Icon](assets/readme/control-bookselection.svg) | Selects all books |
| ![Icon](assets/readme/control-file-upload.svg) | Allows you to import new books to the library |
| ![Icon](assets/readme/control-folder-upload.svg) | Allows you to import new books from a folder to the library (desktop only) |
| ![Icon](assets/readme/control-import.svg) | Allows you to import a previous exported zip file |
| ![Icon](assets/readme/control-browser-source.svg) | Indicates that data from the browser db is displayed |
| ![Icon](assets/readme/control-gdrive-source.svg) | Indicates that data from the configured default GDrive source is displayed |
| ![Icon](assets/readme/control-odrive-source.svg) | Indicates that data from the configured default OneDrive source is displayed |
| ![Icon](assets/readme/control-fs-source.svg) | Indicates that data from the configured default filesystem source is displayed |
| ![Icon](assets/readme/control-log.svg) | Allows you to download data for a bug report |
| ![Icon](assets/readme/control-settings.svg) | Navigates you to the settings |
| ![Icon](assets/readme/control-manager.svg) | Opens the action menu |
| ![Icon](assets/readme/control-export.svg) | Opens the export menu for the selected books |
| ![Icon](assets/readme/control-cancel.svg) | Cancels the current book import/deletion |
| Control | Description |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| ![Icon](assets/readme/control-bookselect.svg) | Toggles book selection |
| ![Icon](assets/readme/control-bookselection.svg) | Selects all books |
| ![Icon](assets/readme/control-file-upload.svg) | Allows you to import new books to the library |
| ![Icon](assets/readme/control-folder-upload.svg) | Allows you to import new books from a folder to the library (desktop only) |
| ![Icon](assets/readme/control-import.svg) | Allows you to import a previous exported zip file |
| ![Icon](assets/readme/control-browser-source.svg) | Indicates that data from the browser db is displayed |
| ![Icon](assets/readme/control-gdrive-source.svg) | Indicates that data from the configured default GDrive source is displayed |
| ![Icon](assets/readme/control-odrive-source.svg) | Indicates that data from the configured default OneDrive source is displayed |
| ![Icon](assets/readme/control-fs-source.svg) | Indicates that data from the configured default filesystem source is displayed |
| ![Icon](assets/readme/control-log.svg) | Allows you to download data for a bug report |
| ![Icon](assets/readme/control-settings.svg) | Navigates you to the settings |
| ![Icon](assets/readme/control-manager.svg) | Opens the action menu |
| ![Icon](assets/readme/control-export.svg) | Opens the export menu for the selected books |
| ![Icon](assets/readme/control-reader-statistics.svg) | Opens the statistics tab (filtered by selected books if any) |
| ![Icon](assets/readme/control-statistics-filter-range-off.svg) | Deletes statistics of selected books |
| ![Icon](assets/readme/control-cancel.svg) | Cancels the current book operation |

# Reading Tracker

Expand Down Expand Up @@ -258,15 +260,16 @@ The Title Filter Menu lets you filter part of the Data based on the book title.

You may find the following controls in the filter menu:

| Control | Description |
| ---------------------------------------------------------------- | ---------------------------------------------- |
| ![Icon](assets/readme/control-statistics-filter-apply.svg) | Apply selected Title Filters |
| ![Icon](assets/readme/control-statistics-filter-check-all.svg) | Selects all Titles |
| ![Icon](assets/readme/control-statistics-filter-uncheck-all.svg) | Deselects all Titles |
| ![Icon](assets/readme/control-statistics-filter-range-on.svg) | Displays Titles across all Time |
| ![Icon](assets/readme/control-statistics-filter-range-off.svg) | Displays only Titles in current Date Selection |
| ![Icon](assets/readme/control-statistics-filter-checked-on.svg) | Displays all Titles (selected and unselected) |
| ![Icon](assets/readme/control-statistics-filter-checked-off.svg) | Displays only selected Titles |
| Control | Description |
| ---------------------------------------------------------------- | ------------------------------------------------------ |
| ![Icon](assets/readme/control-statistics-filter-apply.svg) | Apply selected Title Filters |
| ![Icon](assets/readme/control-statistics-filter-check-all.svg) | Selects all Titles |
| ![Icon](assets/readme/control-statistics-filter-uncheck-all.svg) | Deselects all Titles |
| ![Icon](assets/readme/control-statistics-filter-range-on.svg) | Displays Titles across all Time |
| ![Icon](assets/readme/control-statistics-filter-range-off.svg) | Displays only Titles in current Date Selection |
| ![Icon](assets/readme/control-statistics-filter-checked-on.svg) | Displays all Titles (selected and unselected) |
| ![Icon](assets/readme/control-statistics-filter-checked-off.svg) | Displays only selected Titles |
| ![Icon](assets/readme/control-delete.svg) | Removes any prefilters and shows the all title filters |

## Heatmap / Overview

Expand All @@ -283,6 +286,15 @@ You may find the following controls in the heatmap:

The Statistics Summary Tab displays detail Deta for the configured Date Range and Aggregration/Data Sources. Clicking on the attribute name lets you quick switch between them, clicking on the Sort Icon will toggle the Direction. The sort Icon will be grayed out in case the column isn't the active sorting attribute.

You may find the following controls in the summary section:

| Control | Description |
| ----------------------------------------- | ----------------------------------------------------------- |
| ![Icon](assets/readme/control-delete.svg) | Deletes the selected row from the database |
| ![Icon](assets/readme/control-pen.svg) | Allows you to edit a row in "None" primary aggregation mode |
| ![Icon](assets/readme/control-close.svg) | Cancels the row editing mode |
| ![Icon](assets/readme/control-save.svg) | Saves the edited row back to the database |

# Data Import/Export

You can transfer books and their related data between devices/browsers by importing and exporting data via different storage sources
Expand Down
37 changes: 26 additions & 11 deletions apps/web/src/lib/components/book-card/book-manager-header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
import {
faArrowDownShortWide,
faArrowDownWideShort,
faCalendarXmark,
faChartLine,
faCircleXmark,
faCloudArrowUp,
Expand Down Expand Up @@ -65,6 +66,7 @@
filesChange: FileList;
importBackup: File;
selectionToStatistics: void;
deleteStatistics: void;
replicateData: void;
cancelReplication: void;
}>();
Expand Down Expand Up @@ -469,17 +471,6 @@
{/if}

{#if selectedCount > 0}
<div
tabindex="0"
role="button"
class="transform-gpu {baseIconClasses}"
in:scale={inAnimationParams}
out:scale={outAnimationParams}
on:click={() => dispatch('selectionToStatistics')}
on:keyup={dummyFn}
>
<Fa icon={faChartLine} />
</div>
<div
tabindex="0"
role="button"
Expand All @@ -491,6 +482,30 @@
>
<Fa icon={faCloudArrowUp} />
</div>
{#if $storageSource$ === StorageKey.BROWSER}
<div
tabindex="0"
role="button"
class="transform-gpu {baseIconClasses}"
in:scale={inAnimationParams}
out:scale={outAnimationParams}
on:click={() => dispatch('selectionToStatistics')}
on:keyup={dummyFn}
>
<Fa icon={faChartLine} />
</div>
<div
tabindex="0"
role="button"
class="transform-gpu {baseIconClasses}"
in:scale={inAnimationParams}
out:scale={outAnimationParams}
on:click={() => dispatch('deleteStatistics')}
on:keyup={dummyFn}
>
<Fa icon={faCalendarXmark} />
</div>
{/if}
<div
tabindex="0"
role="button"
Expand Down
10 changes: 6 additions & 4 deletions apps/web/src/lib/components/button-toggle-group/button-toggle-group.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
import Fa from 'svelte-fa';
export let options: ToggleOption<any>[];
export let selectedOptionId: any;
export let invertColors = false;
const dispatch = createEventDispatcher<{
edit: string;
Expand All @@ -29,12 +29,14 @@
<div class="flex">
<button
title={option.id}
class="m-1 rounded-md border-2 border-gray-400 p-2 text-lg"
class="m-1 rounded-md border-2 border-gray-400 p-2 text-black text-lg"
class:border-4={option.thickBorders && option.id === selectedOptionId}
class:border-blue-300={option.id === selectedOptionId}
class:bg-gray-700={option.id === selectedOptionId}
class:text-white={option.id === selectedOptionId}
class:bg-white={option.id !== selectedOptionId}
class:text-white={(option.id === selectedOptionId && !invertColors) ||
(option.id !== selectedOptionId && invertColors)}
class:bg-white={(option.id === selectedOptionId && invertColors) ||
(option.id !== selectedOptionId && !invertColors)}
style={mapToStyleString(option.style)}
on:click={() => (selectedOptionId = option.id)}
>
Expand Down
11 changes: 11 additions & 0 deletions apps/web/src/lib/components/button-toggle-group/toggle-option.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,14 @@ export interface ToggleOption<T> {
thickBorders?: boolean;
showIcons?: boolean;
}

export const optionsForToggle: ToggleOption<boolean>[] = [
{
id: false,
text: 'Off'
},
{
id: true,
text: 'On'
}
];
6 changes: 4 additions & 2 deletions apps/web/src/lib/components/confirm-dialog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
export let dialogHeader: string;
export let dialogMessage: string;
export let contentStyles: string = '';
export let showCancel = true;
export let resolver: (arg0: boolean) => void;
const dispatch = createEventDispatcher<{
Expand All @@ -21,10 +23,10 @@
<DialogTemplate>
<svelte:fragment slot="header">{dialogHeader}</svelte:fragment>
<svelte:fragment slot="content">
<p>{dialogMessage}</p>
<p style={contentStyles}>{dialogMessage}</p>
</svelte:fragment>
<div class="flex grow justify-between" slot="footer">
<button class={buttonClasses} on:click={() => closeDialog(true)}>
<button class={buttonClasses} class:invisible={!showCancel} on:click={() => closeDialog(true)}>
Cancel
<Ripple />
</button>
Expand Down
16 changes: 4 additions & 12 deletions apps/web/src/lib/components/settings/settings-content.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@
TrackerSkipThresholdAction
} from '$lib/components/book-reader/book-reading-tracker/book-reading-tracker';
import ButtonToggleGroup from '$lib/components/button-toggle-group/button-toggle-group.svelte';
import type { ToggleOption } from '$lib/components/button-toggle-group/toggle-option';
import {
optionsForToggle,
type ToggleOption
} from '$lib/components/button-toggle-group/toggle-option';
import MessageDialog from '$lib/components/message-dialog.svelte';
import Ripple from '$lib/components/ripple.svelte';
import SettingsCustomTheme from '$lib/components/settings/settings-custom-theme.svelte';
Expand Down Expand Up @@ -157,17 +160,6 @@
showIcons: true
}));
const optionsForToggle: ToggleOption<boolean>[] = [
{
id: false,
text: 'Off'
},
{
id: true,
text: 'On'
}
];
const optionsForFuriganaStyle: ToggleOption<FuriganaStyle>[] = [
{
id: FuriganaStyle.Partial,
Expand Down
3 changes: 2 additions & 1 deletion apps/web/src/lib/components/settings/settings-item-group.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
export let title: string;
export let tooltip = '';
export let applyHeaderClasses = true;
</script>

<section class="pb-8 md:pb-3">
<div class="flex">
<h2 class="mb-2 text-xl font-medium">
<h2 class="mb-2" class:text-xl={applyHeaderClasses} class:font-medium={applyHeaderClasses}>
{#if tooltip}
<Popover contentText={tooltip} contentStyles="padding: 0.5rem;">
<Fa icon={faCircleQuestion} slot="icon" class="mx-2" />
Expand Down
Loading

0 comments on commit e6b9b68

Please sign in to comment.