turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.1.1

Browse Source
This commit is contained in:
User
2025-01-06 12:58:10 -05:00
parent 489e054614
commit 721192fce7
23 changed files with 227 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/Layouts/AppLayout.jsx
View File

@@ -5,11 +5,11 @@ import { Moon, Sun } from 'lucide-react';
import { Separator } from '@radix-ui/react-separator';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
import { AppSidebar } from '@/components/ui/app-sidebar.jsx';
import { AppSidebar } from '@/components/ui/app-sidebar';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { TooltipContent } from '@/components/ui/tooltip.jsx';
import { TooltipContent } from '@/components/ui/tooltip';
import { Toaster } from '@/components/ui/toaster';
export default function AppLayout({ auth, header, children, toolbar }) {
@@ -59,17 +59,12 @@ export default function AppLayout({ auth, header, children, toolbar }) {
<span className="flex gap-1 ml-auto justify-center content-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
{ theme === 'dark' && (
<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
<Sun />
</Button>
) }
{ theme === 'light' && (
<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
<Moon />
</Button>
) }
<TooltipTrigger asChild>
{ theme === 'dark' ? (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('light') }>
<Sun />
</Button>) : (<Button variant="link" size="icon" onClick={ () => themeButtonOnclickHandler('dark') }>
<Moon />
</Button>) }
</TooltipTrigger>
<TooltipContent>
<p>Toggle day / night mode</p>

22
resources/js/Pages/Comic/Chapters.jsx
View File

@@ -50,10 +50,12 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
const groupOnClickHandler = (pathword) => {
router.get(`/comic/${ comic.comic.path_word }?group=${ pathword }`, {}, {
only: ['chapters'],
preserveState: true
preserveState: true,
onSuccess: () => {
setGroup(pathword);
setAscending(true);
}
});
setGroup(pathword);
setAscending(true);
}
const ComicChapterLink = (props) => {
@@ -160,16 +162,17 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
</div>
</CardContent>
<CardContent>
<Tabs defaultValue={ group } className="w-full">
<Tabs defaultValue={ group } className="w-full" onValueChange={ (e) => groupOnClickHandler(e)} >
<div className="flex">
<TabsList className={ `grid w-full grid-cols-${ Object.entries(comic.groups).length } ` }>
{ Object.entries(comic.groups).map((g, i) => (
<TabsTrigger onClick={ () => groupOnClickHandler(g[1].path_word) }
key={ g[1].path_word }
value={ g[1].path_word }>
<TabsTrigger key={ g[1].path_word } value={ g[1].path_word }>
{ g[1].name }
<Badge key={ g[1].path_word } className="ml-2" variant="outline">
{ g[1].count }
</Badge>
</TabsTrigger>
)) }
) ) }
</TabsList>
<div className="flex justify-end">
<TooltipProvider>
@@ -200,7 +203,8 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
</div>
</div>
<TabsContent value={ group }>
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 xl:grid-cols-12 gap-1">
<div
className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 2xl:grid-cols-12 gap-1">
{ (chapters.total > chapters.limit && chapters.offset > 0) && (
<Button size="sm" variant="outline" asChild>
<Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) - chapters.limit }}>

26
resources/js/Pages/Comic/Favourites.jsx
View File

@@ -1,13 +1,15 @@
import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Star } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { useToast } from "@/hooks/use-toast.js";
import { useState } from "react";
import { Head, Link, } from '@inertiajs/react';
import { Star } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout.jsx';
import { Badge } from '@/components/ui/badge';
import { BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useToast } from '@/hooks/use-toast.js';
export default function Favourites({ auth, favourites }) {
@@ -45,9 +47,9 @@ export default function Favourites({ auth, favourites }) {
<CardHeader>
<CardTitle><Link href={ `/comic/${ props.pathword }` }>{ props.name }</Link></CardTitle>
<div className="flex gap-2 items-end justify-between">
<p>
{ props.authors.map(a => <Badge key={ a.path_word } variant="outline"><Link>{ a.name }</Link></Badge>) }
</p>
<div>
{ props.authors.map(a => <Badge key={ a.name } variant="outline">{ a.name }</Badge>) }
</div>
<p className="text-right text-sm">
Updated: { props.upstream_updated_at }
</p>

30
resources/js/Pages/Comic/Histories.jsx
View File

@@ -116,25 +116,21 @@ export default function Histories({ auth, histories }) {
</Table>
<div>
<Pagination className="justify-end">
<PaginationContent>
{ histories.current_page > 1 && (
<PaginationContent>
{ histories.current_page > 1 && (
<PaginationItem>
<PaginationPrevious href={ histories.prev_page_url } only={['histories']} />
</PaginationItem>
) }
<PaginationItem>
<PaginationPrevious href={ histories.prev_page_url } only={['histories']} />
<PaginationLink href="#">{ histories.current_page }</PaginationLink>
</PaginationItem>
) }
<PaginationItem>
<PaginationLink href="#">{ histories.current_page }</PaginationLink>
</PaginationItem>
<PaginationItem>
</PaginationItem>
<PaginationItem>
{ histories.current_page < histories.last_page && (
<PaginationItem>
<PaginationNext href={ histories.next_page_url } only={['histories']} />
</PaginationItem>
) }
</PaginationItem>
</PaginationContent>
{ histories.current_page < histories.last_page && (
<PaginationItem>
<PaginationNext href={ histories.next_page_url } only={['histories']} />
</PaginationItem>
) }
</PaginationContent>
</Pagination>
</div>
</div>

2
resources/js/Pages/Comic/Index.jsx
View File

@@ -14,7 +14,7 @@ export default function Index({ comics, offset, auth }) {
const url = new URL(window.location); //searchParams
const [favourites, setFavourites] = useState(auth.user?.favourites);
const [favourites, setFavourites] = useState(auth.user?.favourites ?? []);
const { toast } = useToast();
const favouriteOnClickHandler = (pathword) => {

203
resources/js/Pages/Comic/Read.jsx
View File

@@ -1,7 +1,7 @@
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, Settings } from 'lucide-react';
import { ChevronFirst, ChevronLast, Rows3 } from 'lucide-react';
import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
import { throttle } from 'lodash';
@@ -14,22 +14,18 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
import { Switch } from '@/components/ui/switch';
import { TooltipContent } from '@/components/ui/tooltip';
export default function Read({ auth, comic, chapter }) {
export default function Read({ auth, comic, chapter, chapters }) {
const validReadingModes = ['rtl', 'utd'];
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO
const [currentImage, setCurrentImage] = useState(1);
const [isJumpToPageOpen, setIsJumpToPageOpen] = useState(false);
const windowSize = useWindowSize();
const ref = useRef();
const [divDimensions, setDivDimensions] = useState([0, 0]);
const [loading, setLoading] = useState(true);
const ref = useRef();
const windowSize = useWindowSize();
const getLocalStorageReadingMode = () => {
if (window.localStorage.getItem('readingMode') !== null && validReadingModes.includes(window.localStorage.getItem('readingMode'))) {
@@ -39,6 +35,14 @@ export default function Read({ auth, comic, chapter }) {
return "rtl";
}
const getLocalStorageIsTwoPagePerScreen = () => {
if (window.localStorage.getItem('twoPagesPerScreen') !== null && validReadingModes.includes(window.localStorage.getItem('twoPagesPerScreen'))) {
return window.localStorage.getItem('twoPagesPerScreen');
}
return false;
}
function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
@@ -64,10 +68,26 @@ export default function Read({ auth, comic, chapter }) {
}
}
const selectOnChangeHandler = (e) => {
const toggleTwoPagesPerScreen = (e) => {
if (e) {
window.localStorage.setItem('twoPagesPerScreen', true);
setIsTwoPagePerScreen(true);
} else {
window.localStorage.setItem('twoPagesPerScreen', false);
setIsTwoPagePerScreen(false);
}
}
const imageSelectOnChangeHandler = (e) => {
document.getElementById(`image-${e - 1}`)?.scrollIntoView();
setCurrentImage(e);
setIsJumpToPageOpen(false);
}
const chapterSelectOnChangeHandler = (e) => {
router.visit(route('comics.read', {
pathword: comic.comic.path_word,
uuid: e
}));
}
const setViewPort = (e) => {
@@ -109,36 +129,22 @@ export default function Read({ auth, comic, chapter }) {
}
};
return (<div className="basis-full">
<img
id={ `image-${ img.innerKey }` }
ref={ imgRef }
style={ imgStyles }
className={` m-auto comic-img `}
src={ `/image/${ btoa(img.url) }` }
onClick={ handleImageClick }
alt={ comic.comic.name }
/>
</div>);
return (
<div className="basis-full">
<img alt={ comic.comic.name } className={` m-auto comic-img `} id={ `image-${ img.innerKey }` } ref={ imgRef }
onClick={ handleImageClick } src={ `/image/${ btoa(img.url) }` } style={ imgStyles } />
</div>
);
}
const Toolbar = () => {
return (
<>
<Dialog>
<DialogTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="link" size="icon">
<Settings />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Options</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<DialogTrigger asChild>
<Button variant="ghost">
{ currentImage } / { chapter.sorted.length }
</Button>
</DialogTrigger>
<DialogContent className="max-w-[600px]">
<DialogHeader>
@@ -157,6 +163,54 @@ export default function Read({ auth, comic, chapter }) {
onCheckedChange={ (e) => toggleReadingMode(e) } />
</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</label>
<p>Only applicable to RTL mode</p>
</div>
<Switch defaultChecked={ (isTwoPagesPerScreen) }
onCheckedChange={ (e) => toggleTwoPagesPerScreen(e) } />
</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>Jump to Chapter</label>
</div>
<Select onValueChange={ (e) => chapterSelectOnChangeHandler(e) } defaultValue={ chapter.chapter.uuid }>
<SelectTrigger className="w-[50%]">
<SelectValue />
</SelectTrigger>
<SelectContent position="popper" sideOffset={ -100 }>
{ chapters.map(c => (
<SelectItem key={ c.chapter_uuid } value={ c.chapter_uuid }>
{ c.name }
</SelectItem>
) ) }
</SelectContent>
</Select>
</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>Jump to Page</label>
</div>
<Select onValueChange={ (e) => imageSelectOnChangeHandler(e) } defaultValue={ currentImage }>
<SelectTrigger className="w-[50%]">
<SelectValue />
</SelectTrigger>
<SelectContent position="popper" sideOffset={ -100 }>
{ chapter.sorted.map((img, i) => (
<SelectItem key={ i + 1 } value={ i + 1 }>
{ i + 1 } / { chapter.sorted.length }
</SelectItem>
) ) }
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<PrimaryButton>Done</PrimaryButton>
@@ -165,67 +219,10 @@ export default function Read({ auth, comic, chapter }) {
</DialogContent>
</Dialog>
<Dialog open={ isJumpToPageOpen }>
<DialogTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="ghost" onClick={ () => setIsJumpToPageOpen(!isJumpToPageOpen) }>
{ currentImage } / { chapter.sorted.length }
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Jump To</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</DialogTrigger>
<DialogContent className="max-w-[600px]">
<DialogHeader>
<DialogTitle>Jump to</DialogTitle>
<DialogDescription>
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<Select defaultOpen onValueChange={ (e) => selectOnChangeHandler(e) } defaultValue={ currentImage}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{ chapter.sorted.map((img, i) => (
<SelectItem key={ i + 1 } value={ i + 1 }>{ i + 1 } / { chapter.sorted.length }</SelectItem>
))}
</SelectContent>
</Select>
</div>
<DialogFooter>
<DialogClose asChild>
<PrimaryButton onClick={ () => setIsJumpToPageOpen(false) }>Done</PrimaryButton>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="link" size="icon" asChild>
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
<Rows3 />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>TOC</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{ chapter.chapter.prev && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild>
<Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.prev]) }>
<ChevronFirst />
@@ -239,10 +236,25 @@ export default function Read({ auth, comic, chapter }) {
</TooltipProvider>
) }
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild>
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
<Rows3 />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>TOC</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
{ chapter.chapter.next && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<TooltipTrigger asChild>
<Button variant="link" size="icon" asChild>
<Link href={ route('comics.read', [comic.comic.path_word, chapter.chapter.next]) }>
<ChevronLast />
@@ -265,6 +277,7 @@ export default function Read({ auth, comic, chapter }) {
useEffect(() => {
setReadingMode(getLocalStorageReadingMode());
setIsTwoPagePerScreen(getLocalStorageIsTwoPagePerScreen());
if (!ref.current) return;
@@ -280,7 +293,7 @@ export default function Read({ auth, comic, chapter }) {
const imageBottom = imageTop + image.offsetHeight;
// Check if the image is in the visible area
if (containerScrollTop + 80 >= imageTop && containerScrollTop < imageBottom) {
if (containerScrollTop + 76 >= imageTop && containerScrollTop < imageBottom) { // Magic number 76
visibleImageIndex = i;
}
});

2
resources/js/Pages/Pages/Installation.jsx
View File

@@ -30,7 +30,7 @@ export default function Installation({ auth }) {
</ul>
<p className="pt-2">Steps for installation</p>
<ol className="list-decimal ml-6 pt-2">
<li>Clone the git repo <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">https://ds19910209@bitbucket.org/pokebeacon/cv4.git</span></li>
<li>Clone the git repo <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">https://bitbucket.org/pokebeacon/cv4.git</span></li>
<li>Install PHP dependencies <span className="rounded-md border m-1 p-1 font-mono text-sm shadow-sm">composer install</span></li>
<li>Clone .env.example file to .env</li>
<li>Edit any items in .env if needed</li>

14
resources/js/Pages/Pages/Updates.jsx
View File

@@ -11,6 +11,20 @@ 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.1</CardTitle>
<CardDescription>Release: 06 Jan 2025</CardDescription>
</CardHeader>
<CardContent>
<ul>
<li>Fixed: errors in frontend</li>
<li>Fixed: favourites w/o metadata return error in frontend</li>
<li>Removed gear button on reading page</li>
<li>Jump to any chapters directly in reading page</li>
</ul>
</CardContent>
</Card>
<Card className="w-[90%] m-3 mx-auto">
<CardHeader>
<CardTitle>0.1.0</CardTitle>

4
resources/js/Pages/Profile/Edit.jsx
View File

@@ -10,8 +10,8 @@ export default function Edit({ auth, mustVerifyEmail, status, timezones }) {
return (
<AppLayout auth={ auth } header={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<span className="hidden lg:block"><BreadcrumbSeparator /></span>
<BreadcrumbItem>
<BreadcrumbLink>Profile</BreadcrumbLink>
</BreadcrumbItem>
</>

30
resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
View File

@@ -1,20 +1,14 @@
import { useRef } from 'react';
import { useForm } from '@inertiajs/react';
import DangerButton from '@/components/DangerButton';
import InputError from '@/components/InputError';
import SecondaryButton from '@/components/SecondaryButton';
import TextInput from '@/components/TextInput';
import { useForm } from '@inertiajs/react';
import { useRef, useState } from 'react';
import {
Dialog, DialogClose,
DialogContent,
DialogDescription, DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card.jsx";
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
export default function DeleteUserForm({ className = '' }) {
export default function DeleteUserForm() {
const passwordInput = useRef();
const {
@@ -54,12 +48,12 @@ export default function DeleteUserForm({ className = '' }) {
<DialogContent className="max-w-[800px]">
<DialogHeader>
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
<DialogDescription className="pt-3">
Once your account is deleted, all of its resources and
data will be permanently deleted. Please enter your
password to confirm you would like to permanently delete
your account.
</DialogDescription>
<DialogDescription className="pt-3">
Once your account is deleted, all of its resources and
data will be permanently deleted. Please enter your
password to confirm you would like to permanently delete
your account.
</DialogDescription>
</DialogHeader>
<div className="items-center gap-4">
<TextInput id="password" type="password" name="password" ref={ passwordInput }

2
resources/js/components/ui/app-sidebar.jsx
View File

@@ -57,7 +57,7 @@ export function AppSidebar({ auth }) {
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">Comic</span>
<span>0.1.0</span>
<span>0.1.1</span>
</div>
</Link>
</SidebarMenuButton>