Skip to content

Commit

Permalink
style(Collectionner): 💄 Better status badge
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nytuo
Nytuo committed Sep 9, 2023
1 parent 88ebde5 commit 5e9a95d
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 154 deletions.
2 changes: 1 addition & 1 deletion src/API/API.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class API {
"token": currentProfile.getToken,
"table": isSeries ? "Series" : "Books",
"type": "noedit",
"column": isSeries ? "ID_Series" : "API_ID",
"column": isSeries ? "ID_Series" : "ID_book",
"whereEl": old_id,
"value": `'${new_id}'`,
"where": isSeries ? "ID_Series" : "ID_book"
Expand Down
278 changes: 143 additions & 135 deletions src/components/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { IBook } from "@/interfaces/IBook";
import { updateBookStatusForOne, getFromDB } from "@/utils/Fetchers.ts";
import { AutoStories, Close, Done, Favorite, PlayArrow } from "@mui/icons-material";
import { IconButton } from "@mui/material";
import { Badge, IconButton } from "@mui/material";
import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
import { Toaster } from "./Toaster.tsx";
import { PDP, currentProfile } from "@/utils/Common.ts";
import { useTranslation } from "react-i18next";

function Card({ book, provider, handleOpenDetails, onClick }: { book: IBook; provider: any; handleOpenDetails?: any; onClick?: () => void; }) {
function Card({ book, provider, handleOpenDetails, onClick, type }: { book: IBook; provider: any; handleOpenDetails?: any; onClick?: () => void; type: "book" | "lite"; }) {

if (book.URLCover === "null" || book.URLCover === "" || book.URLCover == null) {
book.URLCover = "Images/fileDefault.png";
Expand All @@ -19,146 +19,154 @@ function Card({ book, provider, handleOpenDetails, onClick }: { book: IBook; pro
const { t } = useTranslation();

return (<>
<div style={{ cursor: "pointer" }} className="cardcusto"
id={"id_vol" + book.ID_book + "_" + Math.floor(Math.random() * 8000)}
data-effect="zoom"
onClick={() => {
if (onClick) {
onClick();
} else {
handleOpenDetails(true, book, provider);
}
}
}
>
<Badge data-effect="zoom" sx={{
width: "250px",
height: "380px",
transition: "all 0.3s ease-in-out",
"&:hover": {
transform: "scale(1.1,1.1)",
},

<div className="card__image">
<img width={"100%"} id={"card_img_id_" + book.ID_book} src={book.URLCover} alt="" />
</div>
<div className="card__body">
<span className="card__play js-play"
onClick={() => {
updateBookStatusForOne("reading", book.ID_book);
const encoded = encodeURIComponent(book.PATH.replaceAll("/", "%C3%B9"));
window.location.href = "viewer.html?" + encoded;
}
}} badgeContent={(book.favorite === 1 || book.favorite === "true") ? <Favorite
sx={{
width: "20px",
}}
/> : ""} color={(book.read === 1 || book.read === "true") ? "success" : (book.reading === 1 || book.reading === "true") ? "warning" : "error"}
invisible={(type === "lite") ? true : false}
>
<div style={{ cursor: "pointer" }} className="cardcusto"
id={"id_vol" + book.ID_book + "_" + Math.floor(Math.random() * 8000)}
data-effect="zoom"
onClick={() => {
if (onClick) {
onClick();
} else {
handleOpenDetails(true, book, provider);
}

><IconButton>
<PlayArrow />
</IconButton>
</span>
<p className="card__bio" style={{ textAlign: "center" }}>{book.NOM}</p>
</div>
<Grid2 container spacing={5}>
<span className={
"card__save js-fav"
}
id={"btn_id_fav_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={
async () => {
if (book.favorite === 1) {
book.favorite = 0;
Toaster(t("remove_fav"), "success");
await getFromDB("Books", "* FROM Books WHERE favorite=1").then(async (resa) => {
if (!resa) return;
const bookList = JSON.parse(resa);
for (let i = 0; i < bookList.length; i++) {
if (bookList[i].ID_book === book.ID_book) {
const options = {
method: "POST", headers: {
"Content-Type": "application/json"
}, body: JSON.stringify({
"token": currentProfile.getToken,
"table": "Books",
"column": "favorite",
"whereEl": bookList[i].ID_book,
"value": false,
"where": "ID_book"
}, null, 2)
};
await fetch(PDP + "/DB/update", options);
}
>

<div className="card__image">
<img width={"100%"} id={"card_img_id_" + book.ID_book} src={book.URLCover} alt="" />
</div>
<div className="card__body">
<span className="card__play js-play"
onClick={() => {
updateBookStatusForOne("reading", book.ID_book);
const encoded = encodeURIComponent(book.PATH.replaceAll("/", "%C3%B9"));
window.location.href = "viewer.html?" + encoded;
}
}

><IconButton>
<PlayArrow />
</IconButton>
</span>
<p className="card__bio" style={{ textAlign: "center" }}>{book.NOM}</p>
</div>
<Grid2 container spacing={5}>
<span className={
"card__save js-fav"
}
id={"btn_id_fav_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={
async () => {
if (book.favorite === 1) {
book.favorite = 0;
Toaster(t("remove_fav"), "success");
await getFromDB("Books", "* FROM Books WHERE favorite=1").then(async (resa) => {
if (!resa) return;
const bookList = JSON.parse(resa);
for (let i = 0; i < bookList.length; i++) {
if (bookList[i].ID_book === book.ID_book) {
const options = {
method: "POST", headers: {
"Content-Type": "application/json"
}, body: JSON.stringify({
"token": currentProfile.getToken,
"table": "Books",
"column": "favorite",
"whereEl": bookList[i].ID_book,
"value": false,
"where": "ID_book"
}, null, 2)
};
await fetch(PDP + "/DB/update", options);
}
}
}
});
} else {
book.favorite = 1;
Toaster(t("add_fav"), "success");
await getFromDB("Books", "* FROM Books WHERE favorite=0").then(async (resa) => {
if (!resa) return;
const bookList = JSON.parse(resa);
for (let i = 0; i < bookList.length; i++) {
if (bookList[i].ID_book === book.ID_book) {
const options = {
method: "POST", headers: {
"Content-Type": "application/json"
}, body: JSON.stringify({
"token": currentProfile.getToken,
"table": "Books",
"column": "favorite",
"whereEl": bookList[i].ID_book,
"value": true,
"where": "ID_book"
}, null, 2)
};
await fetch(PDP + "/DB/update", options);
});
} else {
book.favorite = 1;
Toaster(t("add_fav"), "success");
await getFromDB("Books", "* FROM Books WHERE favorite=0").then(async (resa) => {
if (!resa) return;
const bookList = JSON.parse(resa);
for (let i = 0; i < bookList.length; i++) {
if (bookList[i].ID_book === book.ID_book) {
const options = {
method: "POST", headers: {
"Content-Type": "application/json"
}, body: JSON.stringify({
"token": currentProfile.getToken,
"table": "Books",
"column": "favorite",
"whereEl": bookList[i].ID_book,
"value": true,
"where": "ID_book"
}, null, 2)
};
await fetch(PDP + "/DB/update", options);
}
}
}
});
});
}
}
}
}>
<Favorite />
</IconButton>
</span>
<span className={
"card__close js-unread"
}
id={"btn_id_unread_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("unread", book.ID_book);
Toaster(t("mkunread"), "success");
}}>
<Close />
</IconButton>
</span>
<span className={
"card__reading js-reading"
}
id={"btn_id_reading_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("reading", book.ID_book);
Toaster(t("mkreading"), "success");
}}>
<AutoStories />
</IconButton>
</span>
<span className={
"card__read js-read"
}
id={"btn_id_read_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("read", book.ID_book);
Toaster(t("mkread"), "success");
}}>
<Done />
</IconButton>
}>
<Favorite />
</IconButton>
</span>
<span className={
"card__close js-unread"
}
id={"btn_id_unread_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("unread", book.ID_book);
Toaster(t("mkunread"), "success");
}}>
<Close />
</IconButton>
</span>
<span className={
"card__reading js-reading"
}
id={"btn_id_reading_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("reading", book.ID_book);
Toaster(t("mkreading"), "success");
}}>
<AutoStories />
</IconButton>
</span>
<span className={
"card__read js-read"
}
id={"btn_id_read_" + book.ID_book + "_" + Math.random() * 8000}
>
<IconButton onClick={() => {
updateBookStatusForOne("read", book.ID_book);
Toaster(t("mkread"), "success");
}}>
<Done />
</IconButton>

</span>
</Grid2>
{
book.unread !== null && book.read !== null && book.reading !== null &&
<div className={
book.unread === 1 ? "pointR" : book.reading === 1 ? "pointY" : ""
}>
{book.favorite === 1 ? <i className="material-icons" style={{ fontSize: "16px", position: "relative", left: "-17px" }}>favorite</i> : ""}
</div>
}
</div>
</span>
</Grid2>
</div>
</Badge >
</>);
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/ContainerExplorer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { IBook } from "@/interfaces/IBook.ts";
import Card from "./Card.tsx";

function ContainerExplorer({ stateExplorer, handleAddBreadcrumbs, handleOpenDetails }: { stateExplorer: { open: boolean; explorer: IBook[]; provider: any; booksNumber: number; } | null; handleAddBreadcrumbs: any; handleOpenDetails: any; }) {
function ContainerExplorer({ stateExplorer, handleAddBreadcrumbs, handleOpenDetails, type }: { stateExplorer: { open: boolean; explorer: IBook[]; provider: any; booksNumber: number; } | null; handleAddBreadcrumbs: any; handleOpenDetails: any; type: "book" | "lite"; }) {
return (<>
<div className="cards-list" id="ContainerExplorer">

{stateExplorer && stateExplorer.open ? stateExplorer.explorer.map((book: IBook, index: number) => {
return <Card provider={stateExplorer.provider} key={index} book={book} handleOpenDetails={handleOpenDetails} />;
return <Card type={type} provider={stateExplorer.provider} key={index} book={book} handleOpenDetails={handleOpenDetails} />;
}) : <></>}
</div>
</>);
Expand Down
4 changes: 2 additions & 2 deletions src/components/ContentViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -900,7 +900,7 @@ function ContentViewer({ provider, TheBook, type, handleAddBreadcrumbs, handleCh
type === "series" && openExplorer.explorer.length > 0
&& <div>
<h1>{t("volumes")}</h1>
<ContainerExplorer stateExplorer={openExplorer} handleAddBreadcrumbs={handleAddBreadcrumbs} handleOpenDetails={handleChangeToDetails} />
<ContainerExplorer type="book" stateExplorer={openExplorer} handleAddBreadcrumbs={handleAddBreadcrumbs} handleOpenDetails={handleChangeToDetails} />
</div>
}
{
Expand Down Expand Up @@ -998,7 +998,7 @@ function ContentViewer({ provider, TheBook, type, handleAddBreadcrumbs, handleCh

{
relations.map((el: any, index: number) => {
return <Card key={index} onClick={
return <Card key={index} type="lite" onClick={
() => {
if (provider === providerEnum.Marvel) {
handleOpenMoreInfo(el.name, el.description, tryToParse(el.image).path + "/detail." + tryToParse(el.image).extension, tryToParse(el.url)[0].url, "cover");
Expand Down
2 changes: 1 addition & 1 deletion src/components/Drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1200,7 +1200,7 @@ export default function MiniDrawer({
</div>
</div> : <></>}
{
openExplorer && openExplorer.open ? <ContainerExplorer stateExplorer={openExplorer} handleAddBreadcrumbs={handleAddBreadcrumbs} handleOpenDetails={openExplorer.type === "series" ? handleOpenSeries : handleOpenDetails} /> :
openExplorer && openExplorer.open ? <ContainerExplorer type='lite' stateExplorer={openExplorer} handleAddBreadcrumbs={handleAddBreadcrumbs} handleOpenDetails={openExplorer.type === "series" ? handleOpenSeries : handleOpenDetails} /> :
openSeries && openSeries.open ? <Series stateSeries={openSeries} handleAddBreadcrumbs={handleAddBreadcrumbs} handleChangeToDetails={handleChangeToDetails} handleChangeToSeries={handleChangeToSeries} /> :
openDetails && openDetails.open ? <Details stateDetails={openDetails} handleAddBreadcrumbs={handleAddBreadcrumbs} /> : <HomeContainer handleOpenDetails={handleOpenDetails} />
}
Expand Down
Loading

0 comments on commit 5e9a95d

Please sign in to comment.