0.1.3

2025-01-18 19:05:23 -05:00
parent 3f282d6ecd
commit 14938f63df
23 changed files with 652 additions and 177 deletions
--- a/resources/js/Pages/Comic/Histories.jsx
+++ b/resources/js/Pages/Comic/Histories.jsx
@@ -79,6 +79,12 @@ export default function Histories({ auth, histories }) {
                    <Button size="sm" variant="destructive" onClick={ () => removeDuplicatedButtonOnClickHandler() }>
                        Remove duplicates
                    </Button>
+
+                    <Button size="sm" asChild>
+                        <Link href="?group=comic">
+                            Group by Comics
+                        </Link>
+                    </Button>
                </div>
                <Table>
                    <TableHeader>
@@ -135,5 +141,5 @@ export default function Histories({ auth, histories }) {
                </div>
            </div>
        </AppLayout>
-);
+    );
 }
--- a/resources/js/Pages/Comic/HistoriesByComic.jsx
+++ b/resources/js/Pages/Comic/HistoriesByComic.jsx
@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Head, Link, router } from '@inertiajs/react';
+import AppLayout from '@/Layouts/AppLayout.jsx';
+
+import { DateTime } from "luxon";
+
+import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Button } from "@/components/ui/button.jsx";
+
+export default function Histories({ auth, histories }) {
+
+    const deleteButtonOnClickHandler = () => {
+        router.visit(route('comics.patchHistories'), {
+            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
+            method: "PATCH",
+            only: ['histories'],
+            onSuccess: data => {
+                toast({
+                    title: "All set",
+                    description: `The histories has been deleted.`,
+                });
+            }
+        });
+    }
+
+    const removeDuplicatedButtonOnClickHandler = () => {
+        router.visit(route('comics.destroyHistories'), {
+            data: (ids.length > 0) ? { ids: ids } : { ids: 'all' },
+            method: "DELETE",
+            only: ['histories'],
+            onSuccess: data => {
+                toast({
+                    title: "All set",
+                    description: `The duplicated records has been deleted.`,
+                });
+            }
+        });
+    }
+
+    return (
+        <AppLayout auth={ auth } header={
+            <>
+                <BreadcrumbSeparator className="hidden lg:block" />
+                <BreadcrumbItem>
+                    <BreadcrumbPage>Histories</BreadcrumbPage>
+                </BreadcrumbItem>
+            </>
+        }>
+            <Head>
+                <title>Histories</title>
+            </Head>
+            <div className="p-3 pt-1 w-[90%] mx-auto">
+                <div className="flex justify-end gap-2">
+                    <Button size="sm" asChild>
+                        <Link href="?group=">
+                            Group by Chapter
+                        </Link>
+                    </Button>
+                </div>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Comic</TableHead>
+                            <TableHead>Chapter</TableHead>
+                            <TableHead>Read at</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        { histories.map((comic, i) =>
+                             comic.histories.map((record, j) => (
+                                <TableRow key={ j }>
+                                    { (j === 0) ? <TableCell className="w-[40%]" rowspan={ comic.histories.length }>
+                                        <Link href={ route('comics.chapters', comic.comic.comic_pathword) }>
+                                            { comic.comic.comic_name }
+                                        </Link>
+                                    </TableCell> : null }
+                                    <TableCell>
+                                        <Link href={ route('comics.read', [comic.comic.comic_pathword, record.chapter_uuid]) }>
+                                            { record.chapter_name }
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>{ record.read_at }</TableCell>
+                                </TableRow>
+                            ) )
+                        ) }
+                    </TableBody>
+                </Table>
+            </div>
+        </AppLayout>
+    );
+}
--- a/resources/js/Pages/Comic/Index.jsx
+++ b/resources/js/Pages/Comic/Index.jsx
@@ -12,11 +12,17 @@ import { useToast } from '@/hooks/use-toast.js';

 export default function Index({ comics, offset, auth }) {

-    const url = new URL(window.location); //searchParams
+    const url = new URL(window.location); // searchParams

    const [favourites, setFavourites] = useState(auth.user?.favourites ?? []);
    const { toast } = useToast();

+    /**
+     * On click handler for the star
+     * Do posting and make a toast
+     *
+     * @param pathword
+     */
    const favouriteOnClickHandler = (pathword) => {
        axios.post(route('comics.postFavourite'), { pathword: pathword }).then(res => {
            setFavourites(res.data);
@@ -28,6 +34,12 @@ export default function Index({ comics, offset, auth }) {
        });
    }

+    /**
+     * Generate info card for comics
+     * @param props
+     * @returns {JSX.Element}
+     * @constructor
+     */
    const ComicCard = (props) => (
        <Card>
            <CardHeader>
@@ -41,7 +53,9 @@ export default function Index({ comics, offset, auth }) {
                </div>
            </CardHeader>
            <CardContent>
-                <CardTitle><Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link></CardTitle>
+                <CardTitle>
+                    <Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link>
+                </CardTitle>
                <CardDescription className="pt-2">
                    { props.author && props.author.map(a => (
                        <Badge className="m-1" key={ a.path_word } variant="outline">
@@ -53,6 +67,12 @@ export default function Index({ comics, offset, auth }) {
        </Card>
    );

+    /**
+     * Loop and return all info cards
+     * @param comics
+     * @returns {*}
+     * @constructor
+     */
    const ComicCards = (comics) => {
        return comics.list.map((comic, i) => <ComicCard key={ i } { ...comic } />);
    }
--- a/resources/js/Pages/Comic/Read.jsx
+++ b/resources/js/Pages/Comic/Read.jsx
@@ -1,6 +1,6 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Head, Link, router } from '@inertiajs/react';
 import AppLayout from '@/Layouts/AppLayout.jsx';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
 import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';

@@ -19,6 +19,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
    const validReadingModes = ['rtl', 'utd'];

    const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
+    const [isInvertClickingZone, setIsInvertClickingZone] = useState(false);
    const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO

    const [currentImage, setCurrentImage] = useState(1);
@@ -35,9 +36,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
        return "rtl";
    }

+    const getLocalStorageIsInvertClickingZone = () => {
+        if (window.localStorage.getItem('invertClickingZone') !== null && window.localStorage.getItem('invertClickingZone')) {
+            return window.localStorage.getItem('invertClickingZone') === 'true';
+        }
+
+        return false;
+    }
+
    const getLocalStorageIsTwoPagePerScreen = () => {
-        if (window.localStorage.getItem('twoPagesPerScreen') !== null && validReadingModes.includes(window.localStorage.getItem('twoPagesPerScreen'))) {
-            return window.localStorage.getItem('twoPagesPerScreen');
+        if (window.localStorage.getItem('twoPagesPerScreen') !== null && window.localStorage.getItem('twoPagesPerScreen')) {
+            return window.localStorage.getItem('twoPagesPerScreen') === 'true';
        }

        return false;
@@ -68,6 +77,16 @@ export default function Read({ auth, comic, chapter, chapters }) {
        }
    }

+    const toggleInvertClickingZone = (e) => {
+        if (e) {
+            window.localStorage.setItem('invertClickingZone', true);
+            setIsInvertClickingZone(true);
+        } else {
+            window.localStorage.setItem('invertClickingZone', false);
+            setIsInvertClickingZone(false);
+        }
+    }
+
    const toggleTwoPagesPerScreen = (e) => {
        if (e) {
            window.localStorage.setItem('twoPagesPerScreen', true);
@@ -114,24 +133,32 @@ export default function Read({ auth, comic, chapter, chapters }) {
            const bounds = imgRef.current.getBoundingClientRect();
            const percentage = (e.pageX - bounds.left) / imgRef.current.offsetWidth;

-            if (percentage < 0.45) {
+            const prevHandler = () => {
                if (img.innerKey === 0 && chapter.chapter.prev) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.prev]));
                } else {
                    document.getElementById(`image-${img.innerKey - 1}`)?.scrollIntoView();
                }
-            } else if (percentage > 0.55) {
+            }
+
+            const nextHandler = () => {
                if (img.innerKey >= chapter.sorted.length - 1 && chapter.chapter.next) {
                    router.visit(route('comics.read', [comic.comic.path_word, chapter.chapter.next]));
                } else {
                    document.getElementById(`image-${img.innerKey + 1}`)?.scrollIntoView();
                }
            }
+
+            // InvertClickingZone
+            if (percentage < 0.45 || percentage > 0.55) {
+                (percentage < 0.45) ^ isInvertClickingZone ? prevHandler() : nextHandler();
+            }
        };

        return (
            <div className="basis-full">
-                <img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` } ref={ imgRef }
+                <img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` }
+                     loading={ (img.innerKey < 5) ? "eager" : "lazy" } ref={ imgRef }
                     onClick={ handleImageClick } src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
            </div>
        );
@@ -166,7 +193,17 @@ export default function Read({ auth, comic, chapter, chapters }) {
                        <div className="space-y-4">
                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div className="space-y-0.5">
-                                    <label>Two images per screen</label>
+                                    <label>Flip clicking zone</label>
+                                    <p>Turn on for clicking image on right side to previous one</p>
+                                </div>
+                                <Switch defaultChecked={ (isInvertClickingZone) }
+                                        onCheckedChange={ (e) => toggleInvertClickingZone(!isInvertClickingZone) } />
+                            </div>
+                        </div>
+                        <div className="space-y-4">
+                            <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                                <div className="space-y-0.5">
+                                    <label>Two images per screen TODO</label>
                                    <p>Only applicable to RTL mode</p>
                                </div>
                                <Switch defaultChecked={ (isTwoPagesPerScreen) }
@@ -277,6 +314,7 @@ export default function Read({ auth, comic, chapter, chapters }) {

    useEffect(() => {
        setReadingMode(getLocalStorageReadingMode());
+        setIsInvertClickingZone(getLocalStorageIsInvertClickingZone());
        setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());

        if (!ref.current) return;
@@ -333,7 +371,7 @@ export default function Read({ auth, comic, chapter, chapters }) {
                <title>{ chapter.chapter.name.concat(" - ", comic.comic.name) }</title>
            </Head>
            <div className="p-3 pt-1 pb-1 flex flex-wrap justify-center" id="mvp" ref={ ref }
-                 style={ { overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" } }>
+                 style={{ overflowAnchor: "none", height: "calc(100dvh - 90px)", overflowY: "scroll" }}>
                { chapter.sorted.map((img, j) => <ImageForComic key={ j } innerKey={ j } { ...img } />) }
            </div>
        </AppLayout>
--- a/resources/js/Pages/Pages/Installation.jsx
+++ b/resources/js/Pages/Pages/Installation.jsx
@@ -38,6 +38,7 @@ export default function Installation({ auth }) {
                            <li>Generate Database tables <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">php artisan migrate</span></li>
                            <li>Install JS dependencies <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">bun install</span></li>
                            <li>Build frontend JS files <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">bun run build</span></li>
+                            <li>Run background queue process <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">php artisan queue:listen</span></li>
                            <li>Visit <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">http://[url]/tags</span> to fetch initial dataset</li>
                            <li>It should be running?</li>
                        </ol>
--- a/resources/js/Pages/Pages/Updates.jsx
+++ b/resources/js/Pages/Pages/Updates.jsx
@@ -11,6 +11,22 @@ export default function Updates({ auth }) {
                <title>Updates</title>
            </Head>
            <div className="p-3 pt-1">
+                <Card className="w-[90%] m-3 mx-auto">
+                    <CardHeader>
+                        <CardTitle>0.1.3</CardTitle>
+                        <CardDescription>Release: 18 Jan 2025</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <ul>
+                            <li>Fixed: Theme initialization</li>
+                            <li>Toggle clicking spot invert in reading page</li>
+                            <li>Beta: Histories group by comics</li>
+                            <li>Beta: Prefetch first chapter if unread comic clicked</li>
+                            <li>Updated cache TTL</li>
+                            <li>Moved theme toggle to sidebar</li>
+                        </ul>
+                    </CardContent>
+                </Card>
                <Card className="w-[90%] m-3 mx-auto">
                    <CardHeader>
                        <CardTitle>0.1.2</CardTitle>