glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-09-10 11:58:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

install prettier

Browse Source
This commit is contained in:
glax
2025-09-01 21:07:40 +02:00
parent e4b56e0559
commit 14e822ec5f
31 changed files with 1656 additions and 1190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tranga-website/README.md
View File

@@ -24,31 +24,31 @@ export default tseslint.config({
languageOptions: { languageOptions: {
// other options... // other options...
parserOptions: { parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'], project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname, tsconfigRootDir: import.meta.dirname,
}, },
}, },
}) });
``` ```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js ```js
// eslint.config.js // eslint.config.js
import reactX from 'eslint-plugin-react-x' import reactX from "eslint-plugin-react-x";
import reactDom from 'eslint-plugin-react-dom' import reactDom from "eslint-plugin-react-dom";
export default tseslint.config({ export default tseslint.config({
plugins: { plugins: {
// Add the react-x and react-dom plugins // Add the react-x and react-dom plugins
'react-x': reactX, "react-x": reactX,
'react-dom': reactDom, "react-dom": reactDom,
}, },
rules: { rules: {
// other rules... // other rules...
// Enable its recommended typescript rules // Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules, ...reactX.configs["recommended-typescript"].rules,
...reactDom.configs.recommended.rules, ...reactDom.configs.recommended.rules,
}, },
}) });
``` ```

24
tranga-website/eslint.config.js
View File

@@ -1,28 +1,28 @@
import js from '@eslint/js' import js from "@eslint/js";
import globals from 'globals' import globals from "globals";
import reactHooks from 'eslint-plugin-react-hooks' import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from 'eslint-plugin-react-refresh' import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from 'typescript-eslint' import tseslint from "typescript-eslint";
export default tseslint.config( export default tseslint.config(
{ ignores: ['dist'] }, { ignores: ["dist"] },
{ {
extends: [js.configs.recommended, ...tseslint.configs.recommended], extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'], files: ["**/*.{ts,tsx}"],
languageOptions: { languageOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
globals: globals.browser, globals: globals.browser,
}, },
plugins: { plugins: {
'react-hooks': reactHooks, "react-hooks": reactHooks,
'react-refresh': reactRefresh, "react-refresh": reactRefresh,
}, },
rules: { rules: {
...reactHooks.configs.recommended.rules, ...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [ "react-refresh/only-export-components": [
'warn', "warn",
{ allowConstantExport: true }, { allowConstantExport: true },
], ],
}, },
}, },
) );

117
tranga-website/package-lock.json generated
View File

@@ -26,6 +26,7 @@
"eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0", "globals": "^15.15.0",
"prettier": "3.6.2",
"swagger-typescript-api": "^13.2.7", "swagger-typescript-api": "^13.2.7",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",
@@ -980,9 +981,9 @@
} }
}, },
"node_modules/@eslint/config-array": { "node_modules/@eslint/config-array": {
"version": "0.19.2", "version": "0.21.0",
"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz", "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
"integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==", "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
@@ -995,9 +996,9 @@
} }
}, },
"node_modules/@eslint/config-helpers": { "node_modules/@eslint/config-helpers": {
"version": "0.2.0", "version": "0.3.1",
"resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.0.tgz", "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
"integrity": "sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==", "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"engines": { "engines": {
@@ -1005,9 +1006,9 @@
} }
}, },
"node_modules/@eslint/core": { "node_modules/@eslint/core": {
"version": "0.12.0", "version": "0.15.2",
"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz", "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
"integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==", "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
@@ -1055,13 +1056,16 @@
} }
}, },
"node_modules/@eslint/js": { "node_modules/@eslint/js": {
"version": "9.23.0", "version": "9.34.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.23.0.tgz", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.34.0.tgz",
"integrity": "sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==", "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
},
"funding": {
"url": "https://eslint.org/donate"
} }
}, },
"node_modules/@eslint/object-schema": { "node_modules/@eslint/object-schema": {
@@ -1075,13 +1079,13 @@
} }
}, },
"node_modules/@eslint/plugin-kit": { "node_modules/@eslint/plugin-kit": {
"version": "0.2.7", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz", "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
"integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==", "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@eslint/core": "^0.12.0", "@eslint/core": "^0.15.2",
"levn": "^0.4.1" "levn": "^0.4.1"
}, },
"engines": { "engines": {
@@ -2494,9 +2498,9 @@
} }
}, },
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.14.1", "version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
@@ -3193,20 +3197,20 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "9.23.0", "version": "9.34.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.23.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.34.0.tgz",
"integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==", "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.12.1", "@eslint-community/regexpp": "^4.12.1",
"@eslint/config-array": "^0.19.2", "@eslint/config-array": "^0.21.0",
"@eslint/config-helpers": "^0.2.0", "@eslint/config-helpers": "^0.3.1",
"@eslint/core": "^0.12.0", "@eslint/core": "^0.15.2",
"@eslint/eslintrc": "^3.3.1", "@eslint/eslintrc": "^3.3.1",
"@eslint/js": "9.23.0", "@eslint/js": "9.34.0",
"@eslint/plugin-kit": "^0.2.7", "@eslint/plugin-kit": "^0.3.5",
"@humanfs/node": "^0.16.6", "@humanfs/node": "^0.16.6",
"@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/module-importer": "^1.0.1",
"@humanwhocodes/retry": "^0.4.2", "@humanwhocodes/retry": "^0.4.2",
@@ -3217,9 +3221,9 @@
"cross-spawn": "^7.0.6", "cross-spawn": "^7.0.6",
"debug": "^4.3.2", "debug": "^4.3.2",
"escape-string-regexp": "^4.0.0", "escape-string-regexp": "^4.0.0",
"eslint-scope": "^8.3.0", "eslint-scope": "^8.4.0",
"eslint-visitor-keys": "^4.2.0", "eslint-visitor-keys": "^4.2.1",
"espree": "^10.3.0", "espree": "^10.4.0",
"esquery": "^1.5.0", "esquery": "^1.5.0",
"esutils": "^2.0.2", "esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
@@ -3277,9 +3281,9 @@
} }
}, },
"node_modules/eslint-scope": { "node_modules/eslint-scope": {
"version": "8.3.0", "version": "8.4.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
"integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==", "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
"dev": true, "dev": true,
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
"dependencies": { "dependencies": {
@@ -3294,9 +3298,9 @@
} }
}, },
"node_modules/eslint-visitor-keys": { "node_modules/eslint-visitor-keys": {
"version": "4.2.0", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"engines": { "engines": {
@@ -3307,15 +3311,15 @@
} }
}, },
"node_modules/espree": { "node_modules/espree": {
"version": "10.3.0", "version": "10.4.0",
"resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz", "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
"integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==", "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
"dev": true, "dev": true,
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
"dependencies": { "dependencies": {
"acorn": "^8.14.0", "acorn": "^8.15.0",
"acorn-jsx": "^5.3.2", "acorn-jsx": "^5.3.2",
"eslint-visitor-keys": "^4.2.0" "eslint-visitor-keys": "^4.2.1"
}, },
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5739,6 +5743,22 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prop-types": { "node_modules/prop-types": {
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7140,21 +7160,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/yaml": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
"integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
"dev": true,
"license": "ISC",
"optional": true,
"peer": true,
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/yargs": { "node_modules/yargs": {
"version": "17.7.2", "version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

7
tranga-website/package.json
View File

@@ -6,8 +6,10 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "eslint .", "lint": "eslint . --fix",
"preview": "vite preview" "swagger-api": "swagger-typescript-api generate -p http://127.0.0.1:6531/swagger/v2/swagger.json -o ./src/apiClient --modular",
"prettier:check": "prettier . --check",
"prettier": "prettier . --write"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
@@ -28,6 +30,7 @@
"eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0", "globals": "^15.15.0",
"prettier": "3.6.2",
"swagger-typescript-api": "^13.2.7", "swagger-typescript-api": "^13.2.7",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",

64
tranga-website/src/App.tsx
View File

@@ -1,12 +1,16 @@
import Sheet from '@mui/joy/Sheet'; import Sheet from "@mui/joy/Sheet";
import './App.css' import "./App.css";
import Settings from "./Components/Settings/Settings.tsx"; import Settings from "./Components/Settings/Settings.tsx";
import Header from "./Header.tsx"; import Header from "./Header.tsx";
import { createContext, ReactNode, useEffect, useState } from "react"; import { createContext, ReactNode, useEffect, useState } from "react";
import { V2 } from "./apiClient/V2.ts"; import { V2 } from "./apiClient/V2.ts";
import { ApiContext } from './apiClient/ApiContext.tsx'; import { ApiContext } from "./apiClient/ApiContext.tsx";
import MangaList from "./Components/Mangas/MangaList.tsx"; import MangaList from "./Components/Mangas/MangaList.tsx";
import {FileLibrary, Manga, MangaConnector} from "./apiClient/data-contracts.ts"; import {
FileLibrary,
Manga,
MangaConnector,
} from "./apiClient/data-contracts.ts";
import Search from "./Components/Search.tsx"; import Search from "./Components/Search.tsx";
import { Typography } from "@mui/joy"; import { Typography } from "@mui/joy";
@@ -15,41 +19,43 @@ export const MangaContext = createContext<Manga[]>([]);
export const FileLibraryContext = createContext<FileLibrary[]>([]); export const FileLibraryContext = createContext<FileLibrary[]>([]);
export default function App() { export default function App() {
const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/api"; const apiUriStr =
localStorage.getItem("apiUri") ??
window.location.href.substring(0, window.location.href.lastIndexOf("/")) +
"/api";
const [apiUri, setApiUri] = useState<string>(apiUriStr); const [apiUri, setApiUri] = useState<string>(apiUriStr);
const [Api, setApi] = useState<V2>(new V2({ const [Api, setApi] = useState<V2>(
baseUrl: apiUri new V2({
})); baseUrl: apiUri,
}),
);
const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]); const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]);
const [manga, setManga] = useState<Manga[]>([]); const [manga, setManga] = useState<Manga[]>([]);
const [fileLibraries, setFileLibraries] = useState<FileLibrary[]>([]); const [fileLibraries, setFileLibraries] = useState<FileLibrary[]>([]);
useEffect(() => { useEffect(() => {
Api.mangaConnectorList().then(response => { Api.mangaConnectorList().then((response) => {
if (response.ok) if (response.ok) setMangaConnectors(response.data);
setMangaConnectors(response.data);
}); });
Api.fileLibraryList().then(response => { Api.fileLibraryList().then((response) => {
if (response.ok) if (response.ok) setFileLibraries(response.data);
setFileLibraries(response.data); });
})
Api.queryMangaDownloadingList() Api.queryMangaDownloadingList().then((response) => {
.then(response => { if (response.ok) setManga(response.data);
if (response.ok)
setManga(response.data);
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
localStorage.setItem("apiUri", apiUri); localStorage.setItem("apiUri", apiUri);
if (Api.baseUrl != apiUri) if (Api.baseUrl != apiUri)
setApi(new V2({ setApi(
baseUrl: apiUri new V2({
})); baseUrl: apiUri,
}),
);
}, [apiUri]); }, [apiUri]);
return ( return (
@@ -57,8 +63,7 @@ export default function App () {
<FileLibraryContext value={fileLibraries}> <FileLibraryContext value={fileLibraries}>
<MangaConnectorContext.Provider value={mangaConnectors}> <MangaConnectorContext.Provider value={mangaConnectors}>
<MangaContext.Provider value={manga}> <MangaContext.Provider value={manga}>
{ {Api ? (
Api ?
<Sheet className={"app"}> <Sheet className={"app"}>
<Header> <Header>
<Settings setApiUri={setApiUri} /> <Settings setApiUri={setApiUri} />
@@ -69,8 +74,9 @@ export default function App () {
</MangaList> </MangaList>
</Sheet> </Sheet>
</Sheet> </Sheet>
: <Loading /> ) : (
} <Loading />
)}
</MangaContext.Provider> </MangaContext.Provider>
</MangaConnectorContext.Provider> </MangaConnectorContext.Provider>
</FileLibraryContext> </FileLibraryContext>
@@ -79,7 +85,5 @@ export default function App () {
} }
function Loading(): ReactNode { function Loading(): ReactNode {
return ( return <Typography>Loading</Typography>;
<Typography>Loading</Typography>
);
} }

14
tranga-website/src/Components/Loading.tsx
View File

@@ -6,18 +6,19 @@ export enum LoadingState {
none, none,
loading, loading,
success, success,
failure failure,
} }
export function StateIndicator(state: LoadingState): ReactNode { export function StateIndicator(state: LoadingState): ReactNode {
switch (state) { switch (state) {
case LoadingState.loading: case LoadingState.loading:
return (<CircularProgress />); return <CircularProgress />;
case LoadingState.failure: case LoadingState.failure:
return (<Close />); return <Close />;
case LoadingState.success: case LoadingState.success:
return (<Done />); return <Done />;
default: return null; default:
return null;
} }
} }
@@ -27,6 +28,7 @@ export function StateColor(state : LoadingState) : ColorPaletteProp | undefined
return "danger"; return "danger";
case LoadingState.success: case LoadingState.success:
return "success"; return "success";
default: return undefined; default:
return undefined;
} }
} }

77
tranga-website/src/Components/MangaConnectorLink.tsx
View File

@@ -1,23 +1,61 @@
import {CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react"; import {
import {ChapterMangaConnectorId, MangaConnector, MangaMangaConnectorId} from "../apiClient/data-contracts.ts"; CSSProperties,
ReactNode,
useContext,
useEffect,
useRef,
useState,
} from "react";
import {
ChapterMangaConnectorId,
MangaConnector,
MangaMangaConnectorId,
} from "../apiClient/data-contracts.ts";
import { Link, Tooltip, Typography } from "@mui/joy"; import { Link, Tooltip, Typography } from "@mui/joy";
import { MangaConnectorContext } from "../App.tsx"; import { MangaConnectorContext } from "../App.tsx";
import { ApiContext } from "../apiClient/ApiContext.tsx"; import { ApiContext } from "../apiClient/ApiContext.tsx";
export default function MangaConnectorLink({MangaConnectorId, imageStyle, printName} : {MangaConnectorId : MangaMangaConnectorId | ChapterMangaConnectorId, imageStyle? : CSSProperties, printName?: boolean}) : ReactNode{ export default function MangaConnectorLink({
MangaConnectorId,
imageStyle,
printName,
}: {
MangaConnectorId: MangaMangaConnectorId | ChapterMangaConnectorId;
imageStyle?: CSSProperties;
printName?: boolean;
}): ReactNode {
const mangaConnectorContext = useContext(MangaConnectorContext); const mangaConnectorContext = useContext(MangaConnectorContext);
const [mangaConnector, setMangaConnector] = useState<MangaConnector | undefined>(mangaConnectorContext?.find(c => c.name == MangaConnectorId.mangaConnectorName)); const [mangaConnector, setMangaConnector] = useState<
MangaConnector | undefined
>(
mangaConnectorContext?.find(
(c) => c.name == MangaConnectorId.mangaConnectorName,
),
);
const imageRef = useRef<HTMLImageElement | null>(null); const imageRef = useRef<HTMLImageElement | null>(null);
useEffect(() => { useEffect(() => {
const connector = mangaConnectorContext?.find(c => c.name == MangaConnectorId.mangaConnectorName); const connector = mangaConnectorContext?.find(
(c) => c.name == MangaConnectorId.mangaConnectorName,
);
setMangaConnector(connector); setMangaConnector(connector);
if (imageRef?.current != null) if (imageRef?.current != null)
imageRef.current.setHTMLUnsafe(`<img ref=${imageRef} src=${mangaConnector?.iconUrl} style=${imageStyle}/>`); imageRef.current.setHTMLUnsafe(
`<img ref=${imageRef} src=${mangaConnector?.iconUrl} style=${imageStyle}/>`,
);
}, []); }, []);
return ( return (
<Tooltip title={<Typography>{MangaConnectorId.mangaConnectorName}: <Link href={MangaConnectorId.websiteUrl as string}>{MangaConnectorId.websiteUrl}</Link></Typography>}> <Tooltip
title={
<Typography>
{MangaConnectorId.mangaConnectorName}:{" "}
<Link href={MangaConnectorId.websiteUrl as string}>
{MangaConnectorId.websiteUrl}
</Link>
</Typography>
}
>
<Link href={MangaConnectorId.websiteUrl as string}> <Link href={MangaConnectorId.websiteUrl as string}>
<img ref={imageRef} src={mangaConnector?.iconUrl} style={imageStyle} /> <img ref={imageRef} src={mangaConnector?.iconUrl} style={imageStyle} />
{printName ? <Typography>{mangaConnector?.name}</Typography> : null} {printName ? <Typography>{mangaConnector?.name}</Typography> : null}
@@ -26,16 +64,33 @@ export default function MangaConnectorLink({MangaConnectorId, imageStyle, printN
); );
} }
export function MangaConnectorLinkFromId({MangaConnectorIdId, imageStyle, printName} : {MangaConnectorIdId: string, imageStyle? : CSSProperties, printName?: boolean}) : ReactNode { export function MangaConnectorLinkFromId({
MangaConnectorIdId,
imageStyle,
printName,
}: {
MangaConnectorIdId: string;
imageStyle?: CSSProperties;
printName?: boolean;
}): ReactNode {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [node, setNode] = useState<ReactNode>(null); const [node, setNode] = useState<ReactNode>(null);
useEffect(() => { useEffect(() => {
Api.queryMangaMangaConnectorIdDetail(MangaConnectorIdId).then(response => { Api.queryMangaMangaConnectorIdDetail(MangaConnectorIdId).then(
(response) => {
if (response.ok) if (response.ok)
setNode(<MangaConnectorLink key={response.data.key} MangaConnectorId={response.data} imageStyle={{...imageStyle, width: "25px"}} printName={printName} />); setNode(
}); <MangaConnectorLink
key={response.data.key}
MangaConnectorId={response.data}
imageStyle={{ ...imageStyle, width: "25px" }}
printName={printName}
/>,
);
},
);
}, []); }, []);
return node; return node;

10
tranga-website/src/Components/Mangas/MangaCard.css
View File

@@ -4,9 +4,13 @@
} }
.manga-cover-blur { .manga-cover-blur {
background: linear-gradient(135deg, rgba(245, 169, 184, 0.85) 40%, rgba(91, 206, 250, 0.3)); background: linear-gradient(
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);) 135deg,
backdrop-filter: blur(6px); rgba(245, 169, 184, 0.85) 40%,
rgba(91, 206, 250, 0.3)
);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
)backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
} }

117
tranga-website/src/Components/Mangas/MangaCard.tsx
View File

@@ -8,29 +8,41 @@ import {
Link, Link,
Modal, Modal,
ModalDialog, ModalDialog,
Stack, Tooltip, Stack,
Typography Tooltip,
Typography,
} from "@mui/joy"; } from "@mui/joy";
import { Manga } from "../../apiClient/data-contracts.ts"; import { Manga } from "../../apiClient/data-contracts.ts";
import {Dispatch, ReactNode, SetStateAction, useContext, useState} from "react"; import {
Dispatch,
ReactNode,
SetStateAction,
useContext,
useState,
} from "react";
import "./MangaCard.css"; import "./MangaCard.css";
import MangaConnectorBadge from "./MangaConnectorBadge.tsx"; import MangaConnectorBadge from "./MangaConnectorBadge.tsx";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
import { ApiContext } from "../../apiClient/ApiContext.tsx"; import { ApiContext } from "../../apiClient/ApiContext.tsx";
import MarkdownPreview from '@uiw/react-markdown-preview'; import MarkdownPreview from "@uiw/react-markdown-preview";
import { MangaContext } from "../../App.tsx"; import { MangaContext } from "../../App.tsx";
import { MangaConnectorLinkFromId } from "../MangaConnectorLink.tsx"; import { MangaConnectorLinkFromId } from "../MangaConnectorLink.tsx";
export function MangaCardFromId({ mangaId }: { mangaId: string }) { export function MangaCardFromId({ mangaId }: { mangaId: string }) {
const mangas = useContext(MangaContext); const mangas = useContext(MangaContext);
const manga = mangas.find(manga => manga.key === mangaId); const manga = mangas.find((manga) => manga.key === mangaId);
return <MangaCard manga={manga} /> return <MangaCard manga={manga} />;
} }
export function MangaCard({manga, children} : {manga: Manga | undefined, children? : ReactNode}) { export function MangaCard({
if (manga === undefined) manga,
return PlaceHolderCard(); children,
}: {
manga: Manga | undefined;
children?: ReactNode;
}) {
if (manga === undefined) return PlaceHolderCard();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@@ -52,29 +64,78 @@ export function MangaCard({manga, children} : {manga: Manga | undefined, childre
); );
} }
export function MangaModal({manga, open, setOpen, children}: {manga: Manga | undefined, open: boolean, setOpen: Dispatch<SetStateAction<boolean>>, children?: ReactNode}) { export function MangaModal({
manga,
open,
setOpen,
children,
}: {
manga: Manga | undefined;
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
children?: ReactNode;
}) {
return ( return (
<Modal open={open} onClose={() => setOpen(false)} className={"manga-modal"}> <Modal open={open} onClose={() => setOpen(false)} className={"manga-modal"}>
<ModalDialog style={{width:'100%'}}> <ModalDialog style={{ width: "100%" }}>
<ModalClose /> <ModalClose />
<Tooltip title={<Stack spacing={1}>{manga?.altTitles?.map(title => <Chip>{title.title}</Chip>)}</Stack>}> <Tooltip
<Typography level={"h4"} width={"fit-content"}>{manga?.name}</Typography> title={
<Stack spacing={1}>
{manga?.altTitles?.map((title) => (
<Chip>{title.title}</Chip>
))}
</Stack>
}
>
<Typography level={"h4"} width={"fit-content"}>
{manga?.name}
</Typography>
</Tooltip> </Tooltip>
<Stack direction={"row"} spacing={2}> <Stack direction={"row"} spacing={2}>
<Box key={"Cover"} className={"manga-card"}> <Box key={"Cover"} className={"manga-card"}>
<MangaCover manga={manga} /> <MangaCover manga={manga} />
</Box> </Box>
<Stack key={"Description"} direction={"column"} sx={{width: "calc(100% - 230px)"}}> <Stack
<Stack key={"Tags"} direction={"row"} flexWrap={"wrap"} useFlexGap spacing={0.5}> key={"Description"}
{manga?.mangaConnectorIdsIds?.map((idid) => <MangaConnectorLinkFromId key={idid} MangaConnectorIdId={idid} />)} direction={"column"}
{manga?.mangaTags?.map((tag) => <Chip key={tag.tag}>{tag.tag}</Chip>)} sx={{ width: "calc(100% - 230px)" }}
{manga?.links?.map((link) => <Chip key={link.key}><Link href={link.linkUrl}>{link.linkProvider}</Link></Chip>)} >
<Stack
key={"Tags"}
direction={"row"}
flexWrap={"wrap"}
useFlexGap
spacing={0.5}
>
{manga?.mangaConnectorIdsIds?.map((idid) => (
<MangaConnectorLinkFromId
key={idid}
MangaConnectorIdId={idid}
/>
))}
{manga?.mangaTags?.map((tag) => (
<Chip key={tag.tag}>{tag.tag}</Chip>
))}
{manga?.links?.map((link) => (
<Chip key={link.key}>
<Link href={link.linkUrl}>{link.linkProvider}</Link>
</Chip>
))}
</Stack> </Stack>
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<MarkdownPreview source={manga?.description} style={{background: "transparent"}}/> <MarkdownPreview
source={manga?.description}
style={{ background: "transparent" }}
/>
</Box> </Box>
<Stack sx={{justifySelf: "flex-end", alignSelf: "flex-end"}} spacing={2} direction={"row"}>{children}</Stack> <Stack
sx={{ justifySelf: "flex-end", alignSelf: "flex-end" }}
spacing={2}
direction={"row"}
>
{children}
</Stack>
</Stack> </Stack>
</Stack> </Stack>
</ModalDialog> </ModalDialog>
@@ -97,9 +158,19 @@ function PlaceHolderCard(){
function MangaCover({ manga }: { manga: Manga | undefined }) { function MangaCover({ manga }: { manga: Manga | undefined }) {
const api = useContext(ApiContext); const api = useContext(ApiContext);
const uri = manga ? `${api.baseUrl}/v2/Manga/${manga?.key}/Cover` : "blahaj.png"; const uri = manga
? `${api.baseUrl}/v2/Manga/${manga?.key}/Cover`
: "blahaj.png";
return ( return (
<img src={uri} style={{width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--CardCover-radius)"}} /> <img
src={uri}
style={{
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "var(--CardCover-radius)",
}}
/>
); );
} }

17
tranga-website/src/Components/Mangas/MangaConnectorBadge.tsx
View File

@@ -1,13 +1,22 @@
import { Badge } from "@mui/joy"; import { Badge } from "@mui/joy";
import { Manga } from "../../apiClient/data-contracts.ts"; import { Manga } from "../../apiClient/data-contracts.ts";
import { ReactElement } from "react"; import { ReactElement } from "react";
import "./MangaCard.css" import "./MangaCard.css";
import { MangaConnectorLinkFromId } from "../MangaConnectorLink.tsx"; import { MangaConnectorLinkFromId } from "../MangaConnectorLink.tsx";
export default function MangaConnectorBadge ({manga, children} : {manga: Manga, children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) { export default function MangaConnectorBadge({
manga,
children,
}: {
manga: Manga;
children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined;
}) {
return ( return (
<Badge badgeContent={manga.mangaConnectorIdsIds?.map(id => <MangaConnectorLinkFromId key={id} MangaConnectorIdId={id} />)}> <Badge
badgeContent={manga.mangaConnectorIdsIds?.map((id) => (
<MangaConnectorLinkFromId key={id} MangaConnectorIdId={id} />
))}
>
{children} {children}
</Badge> </Badge>
); );

88
tranga-website/src/Components/Mangas/MangaDownloadDialog.tsx
View File

@@ -1,5 +1,12 @@
import { Manga } from "../../apiClient/data-contracts.ts"; import { Manga } from "../../apiClient/data-contracts.ts";
import {ChangeEvent, Dispatch, ReactNode, useContext, useEffect, useState} from "react"; import {
ChangeEvent,
Dispatch,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { Button, Checkbox, Option, Select, Stack, Typography } from "@mui/joy"; import { Button, Checkbox, Option, Select, Stack, Typography } from "@mui/joy";
import Drawer from "@mui/joy/Drawer"; import Drawer from "@mui/joy/Drawer";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
@@ -20,69 +27,96 @@ export default function ({manga} : {manga: Manga}) : ReactNode{
); );
} }
function DownloadDrawer({manga, open, setOpen}: {manga: Manga, open: boolean, setOpen: Dispatch<boolean>}): ReactNode { function DownloadDrawer({
manga,
open,
setOpen,
}: {
manga: Manga;
open: boolean;
setOpen: Dispatch<boolean>;
}): ReactNode {
const fileLibraries = useContext(FileLibraryContext); const fileLibraries = useContext(FileLibraryContext);
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const onLibraryChange = (_ :any, value: ({} | null)) => { const onLibraryChange = (_: any, value: {} | null) => {
if (value === undefined) if (value === undefined) return;
return;
Api.mangaChangeLibraryCreate(manga.key as string, value as string); Api.mangaChangeLibraryCreate(manga.key as string, value as string);
} };
return ( return (
<Drawer open={open} onClose={() => setOpen(false)}> <Drawer open={open} onClose={() => setOpen(false)}>
<ModalClose /> <ModalClose />
<Sheet sx={{ width: "calc(95% - 60px)", margin: "30px" }}> <Sheet sx={{ width: "calc(95% - 60px)", margin: "30px" }}>
<Typography>Download to Library:</Typography> <Typography>Download to Library:</Typography>
<Select placeholder={"Library"} onChange={onLibraryChange} value={manga.libraryId}> <Select
{fileLibraries?.map(library => ( placeholder={"Library"}
<Option value={library.key} key={library.key}><Typography>{library.libraryName}</Typography> <Typography>({library.basePath})</Typography></Option> onChange={onLibraryChange}
value={manga.libraryId}
>
{fileLibraries?.map((library) => (
<Option value={library.key} key={library.key}>
<Typography>{library.libraryName}</Typography>{" "}
<Typography>({library.basePath})</Typography>
</Option>
))} ))}
</Select> </Select>
<Typography>Download from:</Typography> <Typography>Download from:</Typography>
<Stack> <Stack>
{manga.mangaConnectorIdsIds?.map(id => <DownloadCheckBox key={id} mangaConnectorIdId={id} />)} {manga.mangaConnectorIdsIds?.map((id) => (
<DownloadCheckBox key={id} mangaConnectorIdId={id} />
))}
</Stack> </Stack>
</Sheet> </Sheet>
</Drawer> </Drawer>
); );
} }
function DownloadCheckBox({mangaConnectorIdId} : {mangaConnectorIdId : string}) : ReactNode { function DownloadCheckBox({
mangaConnectorIdId,
}: {
mangaConnectorIdId: string;
}): ReactNode {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [useForDownloading, setUseForDownloading] = useState<boolean>(false); const [useForDownloading, setUseForDownloading] = useState<boolean>(false);
const [loading, setLoading] = useState<LoadingState>(LoadingState.none); const [loading, setLoading] = useState<LoadingState>(LoadingState.none);
useEffect(() => { useEffect(() => {
setLoading(LoadingState.loading); setLoading(LoadingState.loading);
Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => { Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId)
.then((response) => {
if (response.ok) { if (response.ok) {
setUseForDownloading(response.data.useForDownload as boolean); setUseForDownloading(response.data.useForDownload as boolean);
setLoading(LoadingState.none); setLoading(LoadingState.none);
}else } else setLoading(LoadingState.failure);
setLoading(LoadingState.failure); })
}).catch(_ => setLoading(LoadingState.failure)); .catch((_) => setLoading(LoadingState.failure));
}, []); }, []);
const onSelected = (event: ChangeEvent<HTMLInputElement>) => { const onSelected = (event: ChangeEvent<HTMLInputElement>) => {
setLoading(LoadingState.loading); setLoading(LoadingState.loading);
const val = event.currentTarget.checked; const val = event.currentTarget.checked;
Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId).then(response => { Api.queryMangaMangaConnectorIdDetail(mangaConnectorIdId)
.then((response) => {
if (!response.ok) { if (!response.ok) {
setLoading(LoadingState.failure); setLoading(LoadingState.failure);
return; return;
} }
Api.mangaSetAsDownloadFromCreate(response.data.objId, response.data.mangaConnectorName, val) Api.mangaSetAsDownloadFromCreate(
.then(response => { response.data.objId,
response.data.mangaConnectorName,
val,
)
.then((response) => {
if (response.ok) { if (response.ok) {
setUseForDownloading(val); setUseForDownloading(val);
setLoading(LoadingState.success); setLoading(LoadingState.success);
}else } else setLoading(LoadingState.failure);
setLoading(LoadingState.failure); })
}).catch(_ => setLoading(LoadingState.failure)); .catch((_) => setLoading(LoadingState.failure));
}).catch(_ => setLoading(LoadingState.failure)); })
} .catch((_) => setLoading(LoadingState.failure));
};
return ( return (
<Checkbox <Checkbox
@@ -93,8 +127,12 @@ function DownloadCheckBox({mangaConnectorIdId} : {mangaConnectorIdId : string})
onChange={onSelected} onChange={onSelected}
label={ label={
<Typography> <Typography>
<MangaConnectorLinkFromId MangaConnectorIdId={mangaConnectorIdId} printName={true} /> <MangaConnectorLinkFromId
MangaConnectorIdId={mangaConnectorIdId}
printName={true}
/>
</Typography> </Typography>
} /> }
/>
); );
} }

30
tranga-website/src/Components/Mangas/MangaList.tsx
View File

@@ -6,17 +6,28 @@ import {Manga} from "../../apiClient/data-contracts.ts";
import MangaDownloadDialog from "./MangaDownloadDialog.tsx"; import MangaDownloadDialog from "./MangaDownloadDialog.tsx";
import MangaMerge from "./MangaMerge.tsx"; import MangaMerge from "./MangaMerge.tsx";
export default function MangaList ({mangas, children} : {mangas: Manga[], children?: ReactNode}) { export default function MangaList({
mangas,
children,
}: {
mangas: Manga[];
children?: ReactNode;
}) {
return ( return (
<Stack className={"manga-list"} direction={"row"} useFlexGap={true} spacing={2} flexWrap={"wrap"} sx={ <Stack
{ className={"manga-list"}
mx: 'calc(-1 * var(--ModalDialog-padding))', direction={"row"}
px: 'var(--ModalDialog-padding)', useFlexGap={true}
overflowY: 'scroll' spacing={2}
}}> flexWrap={"wrap"}
sx={{
mx: "calc(-1 * var(--ModalDialog-padding))",
px: "var(--ModalDialog-padding)",
overflowY: "scroll",
}}
>
{children} {children}
{mangas?.map(manga => ( {mangas?.map((manga) => (
<MangaCard key={manga.key} manga={manga}> <MangaCard key={manga.key} manga={manga}>
<MangaDownloadDialog manga={manga} /> <MangaDownloadDialog manga={manga} />
<MangaMerge manga={manga} /> <MangaMerge manga={manga} />
@@ -24,5 +35,4 @@ export default function MangaList ({mangas, children} : {mangas: Manga[], childr
))} ))}
</Stack> </Stack>
); );
} }

101
tranga-website/src/Components/Mangas/MangaMerge.tsx
View File

@@ -4,7 +4,15 @@ import Drawer from "@mui/joy/Drawer";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
import { ApiContext } from "../../apiClient/ApiContext.tsx"; import { ApiContext } from "../../apiClient/ApiContext.tsx";
import { MangaCard } from "./MangaCard.tsx"; import { MangaCard } from "./MangaCard.tsx";
import {Alert, Button, Modal, ModalDialog, Stack, Tooltip, Typography} from "@mui/joy"; import {
Alert,
Button,
Modal,
ModalDialog,
Stack,
Tooltip,
Typography,
} from "@mui/joy";
import { KeyboardDoubleArrowRight, Warning } from "@mui/icons-material"; import { KeyboardDoubleArrowRight, Warning } from "@mui/icons-material";
import { LoadingState, StateIndicator } from "../Loading.tsx"; import { LoadingState, StateIndicator } from "../Loading.tsx";
@@ -15,78 +23,99 @@ export default function ({manga} : {manga : Manga | undefined}) : ReactNode {
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
if (manga === undefined || !open) if (manga === undefined || !open) return;
return; Api.queryMangaSimilarNameList(manga.key as string).then((response) => {
Api.queryMangaSimilarNameList(manga.key as string).then(response => {
if (response.ok) if (response.ok)
Api.mangaWithIDsCreate(response.data).then(response => { Api.mangaWithIDsCreate(response.data).then((response) => {
if (response.ok) if (response.ok) setSimilar(response.data);
setSimilar(response.data);
}); });
}); });
}, [open]); }, [open]);
const exit = (manga: Manga) => { const exit = (manga: Manga) => {
setOpen(false); setOpen(false);
setSimilar(similar.filter(m => m.key != manga.key)); setSimilar(similar.filter((m) => m.key != manga.key));
} };
return ( return (
<> <>
<Button onClick={_ => setOpen(true)}> <Button onClick={(_) => setOpen(true)}>Merge</Button>
Merge <Drawer
</Button> size={"lg"}
<Drawer size={"lg"} open={open} onClose={() => setOpen(false)} anchor={"bottom"}> open={open}
onClose={() => setOpen(false)}
anchor={"bottom"}
>
<ModalClose /> <ModalClose />
<Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap> <Stack direction={"row"} spacing={2} flexWrap={"wrap"} useFlexGap>
{similar.map(similarManga => <MangaCard manga={similarManga}> {similar.map((similarManga) => (
<ConfirmationModal manga={manga as Manga} similarManga={similarManga} exit={() => exit(similarManga)} /> <MangaCard manga={similarManga}>
</MangaCard>)} <ConfirmationModal
manga={manga as Manga}
similarManga={similarManga}
exit={() => exit(similarManga)}
/>
</MangaCard>
))}
</Stack> </Stack>
</Drawer> </Drawer>
</> </>
); );
} }
function ConfirmationModal({manga, similarManga, exit} : {manga : Manga, similarManga : Manga, exit: ()=>void}) : ReactNode { function ConfirmationModal({
manga,
similarManga,
exit,
}: {
manga: Manga;
similarManga: Manga;
exit: () => void;
}): ReactNode {
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none); const [loadingState, setLoadingState] = useState<LoadingState>(
LoadingState.none,
);
const merge = () => { const merge = () => {
setLoadingState(LoadingState.loading); setLoadingState(LoadingState.loading);
Api.mangaMergeIntoPartialUpdate(manga.key as string, similarManga.key as string).then(response => { Api.mangaMergeIntoPartialUpdate(
manga.key as string,
similarManga.key as string,
)
.then((response) => {
if (response.ok) { if (response.ok) {
setLoadingState(LoadingState.success); setLoadingState(LoadingState.success);
setOpen(false); setOpen(false);
exit(); exit();
}else } else setLoadingState(LoadingState.failure);
setLoadingState(LoadingState.failure); })
}).catch(_ => setLoadingState(LoadingState.failure)); .catch((_) => setLoadingState(LoadingState.failure));
} };
return <> return (
{ <>
loadingState == LoadingState.success ? {loadingState == LoadingState.success ? (
<Alert <Alert
color="success" color="success"
startDecorator={StateIndicator(LoadingState.success)} startDecorator={StateIndicator(LoadingState.success)}
> >
Merged Successfully! Merged Successfully!
</Alert> </Alert>
: ) : (
<Button onClick={_ => setOpen(true)}> <Button onClick={(_) => setOpen(true)}>Merge into</Button>
Merge into )}
</Button> <Modal open={open} onClose={(_) => setOpen(false)}>
}
<Modal open={open} onClose={_ => setOpen(false)}>
<ModalDialog> <ModalDialog>
<ModalClose /> <ModalClose />
<Typography level={"h2"}>Confirm Merge</Typography> <Typography level={"h2"}>Confirm Merge</Typography>
<Stack direction={"row"} spacing={3} alignItems={"center"}> <Stack direction={"row"} spacing={3} alignItems={"center"}>
<MangaCard manga={manga} /> <MangaCard manga={manga} />
<Typography color={"danger"} level={"h1"}><KeyboardDoubleArrowRight /></Typography> <Typography color={"danger"} level={"h1"}>
<KeyboardDoubleArrowRight />
</Typography>
<MangaCard manga={similarManga} /> <MangaCard manga={similarManga} />
</Stack> </Stack>
<Tooltip title={"THIS CAN NOT BE UNDONE!"}> <Tooltip title={"THIS CAN NOT BE UNDONE!"}>
@@ -95,11 +124,13 @@ function ConfirmationModal({manga, similarManga, exit} : {manga : Manga, similar
disabled={loadingState === LoadingState.loading} disabled={loadingState === LoadingState.loading}
endDecorator={StateIndicator(loadingState)} endDecorator={StateIndicator(loadingState)}
color={"danger"} color={"danger"}
startDecorator={<Warning />}> startDecorator={<Warning />}
>
Merge Merge
</Button> </Button>
</Tooltip> </Tooltip>
</ModalDialog> </ModalDialog>
</Modal> </Modal>
</>; </>
);
} }

101
tranga-website/src/Components/Search.tsx
View File

@@ -1,10 +1,17 @@
import {Dispatch, KeyboardEventHandler, ReactNode, useContext, useState} from "react"; import {
Dispatch,
KeyboardEventHandler,
ReactNode,
useContext,
useState,
} from "react";
import { import {
Badge, Badge,
Button, Button,
Card, Card,
CardContent, CardContent,
CardCover, Chip, CardCover,
Chip,
Input, Input,
Modal, Modal,
ModalDialog, ModalDialog,
@@ -13,7 +20,7 @@ import {
Step, Step,
StepIndicator, StepIndicator,
Stepper, Stepper,
Typography Typography,
} from "@mui/joy"; } from "@mui/joy";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
import { MangaConnectorContext } from "../App.tsx"; import { MangaConnectorContext } from "../App.tsx";
@@ -27,14 +34,17 @@ export default function () : ReactNode {
return ( return (
<Badge badgeContent={"+"}> <Badge badgeContent={"+"}>
<Card onClick={() => {if (!open) setOpen(true)}} className={"manga-card"}> <Card
onClick={() => {
if (!open) setOpen(true);
}}
className={"manga-card"}
>
<CardCover className={"manga-cover"}> <CardCover className={"manga-cover"}>
<img src={"/blahaj.png"} /> <img src={"/blahaj.png"} />
</CardCover> </CardCover>
<CardCover className={"manga-cover-blur"} /> <CardCover className={"manga-cover-blur"} />
<CardContent> <CardContent>Add</CardContent>
Add
</CardContent>
<CardContent> <CardContent>
<SearchDialog open={open} setOpen={setOpen} /> <SearchDialog open={open} setOpen={setOpen} />
</CardContent> </CardContent>
@@ -43,43 +53,51 @@ export default function () : ReactNode {
); );
} }
function SearchDialog ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) : ReactNode { function SearchDialog({
open,
setOpen,
}: {
open: boolean;
setOpen: Dispatch<boolean>;
}): ReactNode {
const mangaConnectors = useContext(MangaConnectorContext); const mangaConnectors = useContext(MangaConnectorContext);
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [selectedMangaConnector, setSelectedMangaConnector] = useState<MangaConnector | undefined>(undefined); const [selectedMangaConnector, setSelectedMangaConnector] = useState<
MangaConnector | undefined
>(undefined);
const [searchTerm, setSearchTerm] = useState<string>(); const [searchTerm, setSearchTerm] = useState<string>();
const [searchResults, setSearchResults] = useState<Manga[]>([]); const [searchResults, setSearchResults] = useState<Manga[]>([]);
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none); const [loadingState, setLoadingState] = useState<LoadingState>(
LoadingState.none,
);
const doTheSearch = () => { const doTheSearch = () => {
if (searchTerm === undefined || searchTerm.length < 1) if (searchTerm === undefined || searchTerm.length < 1) return;
return; if (!isUrl(searchTerm) && selectedMangaConnector === undefined) return;
if (!isUrl(searchTerm) && selectedMangaConnector === undefined)
return;
setLoadingState(LoadingState.loading); setLoadingState(LoadingState.loading);
if (isUrl(searchTerm)) if (isUrl(searchTerm))
Api.searchUrlCreate(searchTerm) Api.searchUrlCreate(searchTerm)
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
setSearchResults([response.data]); setSearchResults([response.data]);
setLoadingState(LoadingState.success); setLoadingState(LoadingState.success);
}else } else setLoadingState(LoadingState.failure);
setLoadingState(LoadingState.failure); })
}).catch(() => setLoadingState(LoadingState.failure)); .catch(() => setLoadingState(LoadingState.failure));
else else
Api.searchDetail(selectedMangaConnector!.name, searchTerm) Api.searchDetail(selectedMangaConnector!.name, searchTerm)
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
setSearchResults(response.data); setSearchResults(response.data);
setLoadingState(LoadingState.success); setLoadingState(LoadingState.success);
}else } else setLoadingState(LoadingState.failure);
setLoadingState(LoadingState.failure); })
}).catch(() => setLoadingState(LoadingState.failure)); .catch(() => setLoadingState(LoadingState.failure));
} };
const isUrl = (url: string) => { const isUrl = (url: string) => {
try { try {
@@ -88,16 +106,20 @@ function SearchDialog ({open, setOpen} : {open: boolean, setOpen: Dispatch<boole
} catch (Error) { } catch (Error) {
return false; return false;
} }
} };
const keyDownCheck: KeyboardEventHandler<HTMLInputElement> = (e) => { const keyDownCheck: KeyboardEventHandler<HTMLInputElement> = (e) => {
if (e.key === "Enter") { if (e.key === "Enter") {
doTheSearch(); doTheSearch();
} }
} };
return ( return (
<Modal sx={{width: "100%", height: "100%"}} open={open} onClose={() => setOpen(false)}> <Modal
sx={{ width: "100%", height: "100%" }}
open={open}
onClose={() => setOpen(false)}
>
<ModalDialog sx={{ width: "80%" }}> <ModalDialog sx={{ width: "80%" }}>
<ModalClose /> <ModalClose />
<Stepper orientation={"vertical"}> <Stepper orientation={"vertical"}>
@@ -105,10 +127,19 @@ function SearchDialog ({open, setOpen} : {open: boolean, setOpen: Dispatch<boole
<Typography>Connector</Typography> <Typography>Connector</Typography>
<Select <Select
disabled={loadingState == LoadingState.loading} disabled={loadingState == LoadingState.loading}
onChange={(_, v) => setSelectedMangaConnector(v as MangaConnector)}> onChange={(_, v) =>
{mangaConnectors?.map(con => ( setSelectedMangaConnector(v as MangaConnector)
}
>
{mangaConnectors?.map((con) => (
<Option value={con}> <Option value={con}>
<Typography><img src={con.iconUrl} style={{maxHeight: "var(--Icon-fontSize)"}} />{con.name}</Typography> <Typography>
<img
src={con.iconUrl}
style={{ maxHeight: "var(--Icon-fontSize)" }}
/>
{con.name}
</Typography>
</Option> </Option>
))} ))}
</Select> </Select>
@@ -119,16 +150,22 @@ function SearchDialog ({open, setOpen} : {open: boolean, setOpen: Dispatch<boole
disabled={loadingState == LoadingState.loading} disabled={loadingState == LoadingState.loading}
onKeyDown={keyDownCheck} onKeyDown={keyDownCheck}
onChange={(e) => setSearchTerm(e.currentTarget.value)} onChange={(e) => setSearchTerm(e.currentTarget.value)}
endDecorator={<Button endDecorator={
<Button
disabled={loadingState == LoadingState.loading} disabled={loadingState == LoadingState.loading}
onClick={doTheSearch} onClick={doTheSearch}
endDecorator={StateIndicator(loadingState)} endDecorator={StateIndicator(loadingState)}
color={StateColor(loadingState)} color={StateColor(loadingState)}
>Search</Button>} >
Search
</Button>
}
/> />
</Step> </Step>
<Step indicator={<StepIndicator>3</StepIndicator>}> <Step indicator={<StepIndicator>3</StepIndicator>}>
<Typography>Result <Chip>{searchResults.length}</Chip></Typography> <Typography>
Result <Chip>{searchResults.length}</Chip>
</Typography>
<MangaList mangas={searchResults} /> <MangaList mangas={searchResults} />
</Step> </Step>
</Stepper> </Stepper>

184
tranga-website/src/Components/Settings/AddNotificationConnector.tsx
View File

@@ -9,19 +9,28 @@ import {
Tab, Tab,
TabList, TabList,
TabPanel, TabPanel,
Tabs Tabs,
} from "@mui/joy"; } from "@mui/joy";
import ModalClose from "@mui/joy/ModalClose"; import ModalClose from "@mui/joy/ModalClose";
import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../apiClient/data-contracts.ts"; import {
GotifyRecord,
NtfyRecord,
PushoverRecord,
} from "../../apiClient/data-contracts.ts";
import { LoadingState, StateColor, StateIndicator } from "../Loading.tsx"; import { LoadingState, StateColor, StateIndicator } from "../Loading.tsx";
export default function ({open, setOpen} : {open: boolean, setOpen: (open: boolean) => void}) { export default function ({
open,
setOpen,
}: {
open: boolean;
setOpen: (open: boolean) => void;
}) {
return ( return (
<Modal open={open} onClose={() => setOpen(false)}> <Modal open={open} onClose={() => setOpen(false)}>
<ModalDialog> <ModalDialog>
<ModalClose /> <ModalClose />
<Tabs sx={{width:'95%'}} defaultValue={"gotify"}> <Tabs sx={{ width: "95%" }} defaultValue={"gotify"}>
<TabList> <TabList>
<Tab value={"gotify"}>Gotify</Tab> <Tab value={"gotify"}>Gotify</Tab>
<Tab value={"ntfy"}>Ntfy</Tab> <Tab value={"ntfy"}>Ntfy</Tab>
@@ -36,15 +45,33 @@ export default function ({open, setOpen} : {open: boolean, setOpen: (open: boole
); );
} }
function NotificationConnectorTab({ value, children, add, state }: { value: string, children: ReactNode, add: (data: any) => void, state: LoadingState }) { function NotificationConnectorTab({
value,
const IsLoading = (state : LoadingState) : boolean => state === LoadingState.loading; children,
add,
state,
}: {
value: string;
children: ReactNode;
add: (data: any) => void;
state: LoadingState;
}) {
const IsLoading = (state: LoadingState): boolean =>
state === LoadingState.loading;
return ( return (
<TabPanel value={value}> <TabPanel value={value}>
<Stack spacing={1}> <Stack spacing={1}>
{children} {children}
<Button onClick={add} endDecorator={StateIndicator(state)} loading={IsLoading(state)} disabled={IsLoading(state)} color={StateColor(state)}>Add</Button> <Button
onClick={add}
endDecorator={StateIndicator(state)}
loading={IsLoading(state)}
disabled={IsLoading(state)}
color={StateColor(state)}
>
Add
</Button>
</Stack> </Stack>
</TabPanel> </TabPanel>
); );
@@ -53,26 +80,50 @@ function NotificationConnectorTab({ value, children, add, state }: { value: stri
function Gotify() { function Gotify() {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [gotifyData, setGotifyData] = useState<GotifyRecord>({}); const [gotifyData, setGotifyData] = useState<GotifyRecord>({});
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none); const [loadingState, setLoadingState] = useState<LoadingState>(
LoadingState.none,
);
const Add = () => { const Add = () => {
setLoadingState(LoadingState.loading); setLoadingState(LoadingState.loading);
Api.notificationConnectorGotifyUpdate(gotifyData) Api.notificationConnectorGotifyUpdate(gotifyData)
.then((response) => { .then((response) => {
if (response.ok) if (response.ok) setLoadingState(LoadingState.success);
setLoadingState(LoadingState.success); else setLoadingState(LoadingState.failure);
else
setLoadingState(LoadingState.failure);
}) })
.catch(_ => setLoadingState(LoadingState.failure)); .catch((_) => setLoadingState(LoadingState.failure));
} };
return ( return (
<NotificationConnectorTab value={"gotify"} add={Add} state={loadingState}> <NotificationConnectorTab value={"gotify"} add={Add} state={loadingState}>
<Input placeholder={"Name"} value={gotifyData.name as string} onChange={(e) => setGotifyData({...gotifyData, name: e.target.value})} /> <Input
<Input placeholder={"https://[...]/message"} value={gotifyData.endpoint as string} onChange={(e) => setGotifyData({...gotifyData, endpoint: e.target.value})} /> placeholder={"Name"}
<Input placeholder={"Apptoken"} type={"password"} value={gotifyData.appToken as string} onChange={(e) => setGotifyData({...gotifyData, appToken: e.target.value})} /> value={gotifyData.name as string}
<Input placeholder={"Priority"} type={"number"} value={gotifyData.priority as number} onChange={(e) => setGotifyData({...gotifyData, priority: e.target.valueAsNumber})} /> onChange={(e) => setGotifyData({ ...gotifyData, name: e.target.value })}
/>
<Input
placeholder={"https://[...]/message"}
value={gotifyData.endpoint as string}
onChange={(e) =>
setGotifyData({ ...gotifyData, endpoint: e.target.value })
}
/>
<Input
placeholder={"Apptoken"}
type={"password"}
value={gotifyData.appToken as string}
onChange={(e) =>
setGotifyData({ ...gotifyData, appToken: e.target.value })
}
/>
<Input
placeholder={"Priority"}
type={"number"}
value={gotifyData.priority as number}
onChange={(e) =>
setGotifyData({ ...gotifyData, priority: e.target.valueAsNumber })
}
/>
</NotificationConnectorTab> </NotificationConnectorTab>
); );
} }
@@ -80,28 +131,56 @@ function Gotify() {
function Ntfy() { function Ntfy() {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [ntfyData, setNtfyData] = useState<NtfyRecord>({}); const [ntfyData, setNtfyData] = useState<NtfyRecord>({});
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none); const [loadingState, setLoadingState] = useState<LoadingState>(
LoadingState.none,
);
const Add = () => { const Add = () => {
setLoadingState(LoadingState.loading); setLoadingState(LoadingState.loading);
Api.notificationConnectorNtfyUpdate(ntfyData) Api.notificationConnectorNtfyUpdate(ntfyData)
.then((response) => { .then((response) => {
if (response.ok) if (response.ok) setLoadingState(LoadingState.success);
setLoadingState(LoadingState.success); else setLoadingState(LoadingState.failure);
else
setLoadingState(LoadingState.failure);
}) })
.catch(_ => setLoadingState(LoadingState.failure)); .catch((_) => setLoadingState(LoadingState.failure));
} };
return ( return (
<NotificationConnectorTab value={"ntfy"} add={Add} state={loadingState}> <NotificationConnectorTab value={"ntfy"} add={Add} state={loadingState}>
<Input placeholder={"Name"} value={ntfyData.name as string} onChange={(e) => setNtfyData({...ntfyData, name: e.target.value})} /> <Input
<Input placeholder={"Endpoint"} value={ntfyData.endpoint as string} onChange={(e) => setNtfyData({...ntfyData, endpoint: e.target.value})} /> placeholder={"Name"}
<Input placeholder={"Topic"} value={ntfyData.topic as string} onChange={(e) => setNtfyData({...ntfyData, topic: e.target.value})} /> value={ntfyData.name as string}
<Input placeholder={"Username"} value={ntfyData.username as string} onChange={(e) => setNtfyData({...ntfyData, username: e.target.value})} /> onChange={(e) => setNtfyData({ ...ntfyData, name: e.target.value })}
<Input placeholder={"Password"} type={"password"} value={ntfyData.password as string} onChange={(e) => setNtfyData({...ntfyData, password: e.target.value})} /> />
<Input placeholder={"Priority"} type={"number"} value={ntfyData.priority as number} onChange={(e) => setNtfyData({...ntfyData, priority: e.target.valueAsNumber})} /> <Input
placeholder={"Endpoint"}
value={ntfyData.endpoint as string}
onChange={(e) => setNtfyData({ ...ntfyData, endpoint: e.target.value })}
/>
<Input
placeholder={"Topic"}
value={ntfyData.topic as string}
onChange={(e) => setNtfyData({ ...ntfyData, topic: e.target.value })}
/>
<Input
placeholder={"Username"}
value={ntfyData.username as string}
onChange={(e) => setNtfyData({ ...ntfyData, username: e.target.value })}
/>
<Input
placeholder={"Password"}
type={"password"}
value={ntfyData.password as string}
onChange={(e) => setNtfyData({ ...ntfyData, password: e.target.value })}
/>
<Input
placeholder={"Priority"}
type={"number"}
value={ntfyData.priority as number}
onChange={(e) =>
setNtfyData({ ...ntfyData, priority: e.target.valueAsNumber })
}
/>
</NotificationConnectorTab> </NotificationConnectorTab>
); );
} }
@@ -109,25 +188,44 @@ function Ntfy() {
function Pushover() { function Pushover() {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [pushoverData, setPushoverData] = useState<PushoverRecord>({}); const [pushoverData, setPushoverData] = useState<PushoverRecord>({});
const [loadingState, setLoadingState] = useState<LoadingState>(LoadingState.none); const [loadingState, setLoadingState] = useState<LoadingState>(
LoadingState.none,
);
const Add = () => { const Add = () => {
setLoadingState(LoadingState.loading); setLoadingState(LoadingState.loading);
Api.notificationConnectorPushoverUpdate(pushoverData) Api.notificationConnectorPushoverUpdate(pushoverData)
.then((response) => { .then((response) => {
if (response.ok) if (response.ok) setLoadingState(LoadingState.success);
setLoadingState(LoadingState.success); else setLoadingState(LoadingState.failure);
else
setLoadingState(LoadingState.failure);
}) })
.catch(_ => setLoadingState(LoadingState.failure)); .catch((_) => setLoadingState(LoadingState.failure));
} };
return ( return (
<NotificationConnectorTab value={"pushover"} add={Add} state={loadingState}> <NotificationConnectorTab value={"pushover"} add={Add} state={loadingState}>
<Input placeholder={"Name"} value={pushoverData.name as string} onChange={(e) => setPushoverData({...pushoverData, name: e.target.value})} /> <Input
<Input placeholder={"User"} value={pushoverData.user as string} onChange={(e) => setPushoverData({...pushoverData, user: e.target.value})} /> placeholder={"Name"}
<Input placeholder={"AppToken"} type={"password"} value={pushoverData.appToken as string} onChange={(e) => setPushoverData({...pushoverData, appToken: e.target.value})} /> value={pushoverData.name as string}
onChange={(e) =>
setPushoverData({ ...pushoverData, name: e.target.value })
}
/>
<Input
placeholder={"User"}
value={pushoverData.user as string}
onChange={(e) =>
setPushoverData({ ...pushoverData, user: e.target.value })
}
/>
<Input
placeholder={"AppToken"}
type={"password"}
value={pushoverData.appToken as string}
onChange={(e) =>
setPushoverData({ ...pushoverData, appToken: e.target.value })
}
/>
</NotificationConnectorTab> </NotificationConnectorTab>
); );
} }

24
tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
View File

@@ -16,20 +16,28 @@ export default function () : ReactNode {
setScheme("warning"); setScheme("warning");
timerRef.current = setTimeout(() => { timerRef.current = setTimeout(() => {
Api.settingsChapterNamingSchemePartialUpdate(e.target.value) Api.settingsChapterNamingSchemePartialUpdate(e.target.value)
.then(response => { .then((response) => {
if (response.ok) if (response.ok) setScheme("success");
setScheme("success"); else setScheme("danger");
else
setScheme("danger");
}) })
.catch(() => setScheme("danger")); .catch(() => setScheme("danger"));
}, 1000); }, 1000);
} };
return ( return (
<SettingsItem title={"Chapter Naming Scheme"}> <SettingsItem title={"Chapter Naming Scheme"}>
<MarkdownPreview style={{backgroundColor: "transparent"}} source={"Placeholders:\n * %M Obj Name\n * %V Volume\n * %C Chapter\n * %T Title\n * %A Author (first in list)\n * %I Chapter Internal ID\n * %i Obj Internal ID\n * %Y Year (Obj)\n *\n * ?_(...) replace _ with a value from above:\n * Everything inside the braces will only be added if the value of %_ is not null"} /> <MarkdownPreview
<Input color={scheme} defaultValue={settings?.chapterNamingScheme as string} placeholder={"Scheme"} onChange={schemeChanged} /> style={{ backgroundColor: "transparent" }}
source={
"Placeholders:\n * %M Obj Name\n * %V Volume\n * %C Chapter\n * %T Title\n * %A Author (first in list)\n * %I Chapter Internal ID\n * %i Obj Internal ID\n * %Y Year (Obj)\n *\n * ?_(...) replace _ with a value from above:\n * Everything inside the braces will only be added if the value of %_ is not null"
}
/>
<Input
color={scheme}
defaultValue={settings?.chapterNamingScheme as string}
placeholder={"Scheme"}
onChange={schemeChanged}
/>
</SettingsItem> </SettingsItem>
); );
} }

17
tranga-website/src/Components/Settings/DownloadLanguage.tsx
View File

@@ -15,19 +15,22 @@ export default function () : ReactNode {
setColor("warning"); setColor("warning");
timerRef.current = setTimeout(() => { timerRef.current = setTimeout(() => {
Api.settingsDownloadLanguagePartialUpdate(e.target.value) Api.settingsDownloadLanguagePartialUpdate(e.target.value)
.then(response => { .then((response) => {
if (response.ok) if (response.ok) setColor("success");
setColor("success"); else setColor("danger");
else
setColor("danger");
}) })
.catch(() => setColor("danger")); .catch(() => setColor("danger"));
}, 1000); }, 1000);
} };
return ( return (
<SettingsItem title={"Download Language"}> <SettingsItem title={"Download Language"}>
<Input color={color} defaultValue={settings?.downloadLanguage as string} placeholder={"Language code (f.e. 'en')"} onChange={languageChanged} /> <Input
color={color}
defaultValue={settings?.downloadLanguage as string}
placeholder={"Language code (f.e. 'en')"}
onChange={languageChanged}
/>
</SettingsItem> </SettingsItem>
); );
} }

18
tranga-website/src/Components/Settings/FlareSolverr.tsx
View File

@@ -15,19 +15,23 @@ export default function () : ReactNode {
setUriColor("warning"); setUriColor("warning");
timerRef.current = setTimeout(() => { timerRef.current = setTimeout(() => {
Api.settingsFlareSolverrUrlCreate(e.target.value) Api.settingsFlareSolverrUrlCreate(e.target.value)
.then(response => { .then((response) => {
if (response.ok) if (response.ok) setUriColor("success");
setUriColor("success"); else setUriColor("danger");
else
setUriColor("danger");
}) })
.catch(() => setUriColor("danger")); .catch(() => setUriColor("danger"));
}, 1000); }, 1000);
} };
return ( return (
<SettingsItem title={"FlareSolverr"}> <SettingsItem title={"FlareSolverr"}>
<Input color={uriColor} defaultValue={settings?.flareSolverrUrl as string} type={"url"} placeholder={"URL"} onChange={uriChanged} /> <Input
color={uriColor}
defaultValue={settings?.flareSolverrUrl as string}
type={"url"}
placeholder={"URL"}
onChange={uriChanged}
/>
</SettingsItem> </SettingsItem>
); );
} }

6
tranga-website/src/Components/Settings/ImageCompression.tsx
View File

@@ -7,7 +7,11 @@ export default function () : ReactNode {
return ( return (
<SettingsItem title={"Image Compression"}> <SettingsItem title={"Image Compression"}>
<Slider sx={{marginTop: "20px"}} valueLabelDisplay={"auto"} defaultValue={settings?.imageCompression}></Slider> <Slider
sx={{ marginTop: "20px" }}
valueLabelDisplay={"auto"}
defaultValue={settings?.imageCompression}
></Slider>
</SettingsItem> </SettingsItem>
); );
} }

20
tranga-website/src/Components/Settings/Maintenance.tsx
View File

@@ -11,23 +11,23 @@ export default function () {
const cleanUnusedManga = () => { const cleanUnusedManga = () => {
setUnusedMangaState(LoadingState.loading); setUnusedMangaState(LoadingState.loading);
Api.maintenanceCleanupNoDownloadMangaCreate() Api.maintenanceCleanupNoDownloadMangaCreate()
.then(r => { .then((r) => {
if (r.ok) if (r.ok) setUnusedMangaState(LoadingState.success);
setUnusedMangaState(LoadingState.success); else setUnusedMangaState(LoadingState.failure);
else })
setUnusedMangaState(LoadingState.failure); .catch((_) => setUnusedMangaState(LoadingState.failure));
}).catch(_ => setUnusedMangaState(LoadingState.failure)); };
}
return ( return (
<SettingsItem title={"Maintenance"}> <SettingsItem title={"Maintenance"}>
<Button <Button
disabled={unusedMangaState == LoadingState.loading} disabled={unusedMangaState == LoadingState.loading}
color={StateColor(unusedMangaState)} color={StateColor(unusedMangaState)}
endDecorator={StateIndicator(unusedMangaState)} endDecorator={StateIndicator(unusedMangaState)}
onClick={cleanUnusedManga}>Cleanup unused Manga</Button> onClick={cleanUnusedManga}
>
Cleanup unused Manga
</Button>
</SettingsItem> </SettingsItem>
); );
} }

12
tranga-website/src/Components/Settings/NotificationConnectors.tsx
View File

@@ -5,12 +5,18 @@ import NotificationConnectors from "./AddNotificationConnector.tsx";
import * as React from "react"; import * as React from "react";
export default function (): ReactNode { export default function (): ReactNode {
const [notificationConnectorsOpen, setNotificationConnectorsOpen] = React.useState(false); const [notificationConnectorsOpen, setNotificationConnectorsOpen] =
React.useState(false);
return ( return (
<SettingsItem title={"Notification Connectors"}> <SettingsItem title={"Notification Connectors"}>
<Button onClick={() => setNotificationConnectorsOpen(true)}>Add Notification Connector</Button> <Button onClick={() => setNotificationConnectorsOpen(true)}>
<NotificationConnectors open={notificationConnectorsOpen} setOpen={setNotificationConnectorsOpen} /> Add Notification Connector
</Button>
<NotificationConnectors
open={notificationConnectorsOpen}
setOpen={setNotificationConnectorsOpen}
/>
</SettingsItem> </SettingsItem>
); );
} }

54
tranga-website/src/Components/Settings/Settings.tsx
View File

@@ -1,16 +1,27 @@
import ModalClose from '@mui/joy/ModalClose'; import ModalClose from "@mui/joy/ModalClose";
import { import {
Accordion, Accordion,
AccordionDetails, AccordionDetails,
AccordionGroup, AccordionGroup,
AccordionSummary, Button, ColorPaletteProp, AccordionSummary,
Button,
ColorPaletteProp,
DialogContent, DialogContent,
DialogTitle, Input, DialogTitle,
Modal, ModalDialog Input,
Modal,
ModalDialog,
} from "@mui/joy"; } from "@mui/joy";
import './Settings.css'; import "./Settings.css";
import * as React from "react"; import * as React from "react";
import {createContext, Dispatch, ReactNode, useContext, useEffect, useState} from "react"; import {
createContext,
Dispatch,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
import { TrangaSettings } from "../../apiClient/data-contracts.ts"; import { TrangaSettings } from "../../apiClient/data-contracts.ts";
import { ApiContext } from "../../apiClient/ApiContext.tsx"; import { ApiContext } from "../../apiClient/ApiContext.tsx";
import NotificationConnectors from "./NotificationConnectors.tsx"; import NotificationConnectors from "./NotificationConnectors.tsx";
@@ -21,9 +32,15 @@ import DownloadLanguage from "./DownloadLanguage.tsx";
import ChapterNamingScheme from "./ChapterNamingScheme.tsx"; import ChapterNamingScheme from "./ChapterNamingScheme.tsx";
import Maintenance from "./Maintenance.tsx"; import Maintenance from "./Maintenance.tsx";
export const SettingsContext = createContext<TrangaSettings|undefined>(undefined); export const SettingsContext = createContext<TrangaSettings | undefined>(
undefined,
);
export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetStateAction<string>>}) { export default function Settings({
setApiUri,
}: {
setApiUri: Dispatch<React.SetStateAction<string>>;
}) {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
const [settings, setSettings] = useState<TrangaSettings>(); const [settings, setSettings] = useState<TrangaSettings>();
@@ -45,12 +62,12 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetSta
setApiUri(e.target.value); setApiUri(e.target.value);
setApiUriColor("success"); setApiUriColor("success");
}, 1000); }, 1000);
} };
const ModalStyle: SxProps = { const ModalStyle: SxProps = {
width: "80%", width: "80%",
height: "80%" height: "80%",
} };
return ( return (
<SettingsContext.Provider value={settings}> <SettingsContext.Provider value={settings}>
@@ -67,7 +84,8 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetSta
placeholder={"http(s)://"} placeholder={"http(s)://"}
type={"url"} type={"url"}
defaultValue={Api.baseUrl} defaultValue={Api.baseUrl}
onChange={apiUriChanged} /> onChange={apiUriChanged}
/>
</SettingsItem> </SettingsItem>
<ImageCompression /> <ImageCompression />
<FlareSolverr /> <FlareSolverr />
@@ -83,13 +101,17 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch<React.SetSta
); );
} }
export function SettingsItem({title, children} : {title: string, children: ReactNode}) { export function SettingsItem({
title,
children,
}: {
title: string;
children: ReactNode;
}) {
return ( return (
<Accordion> <Accordion>
<AccordionSummary>{title}</AccordionSummary> <AccordionSummary>{title}</AccordionSummary>
<AccordionDetails> <AccordionDetails>{children}</AccordionDetails>
{children}
</AccordionDetails>
</Accordion> </Accordion>
); );
} }

82
tranga-website/src/Header.tsx
View File

@@ -1,33 +1,89 @@
import Sheet from "@mui/joy/Sheet"; import Sheet from "@mui/joy/Sheet";
import { Link, Stack, Typography } from "@mui/joy"; import { Link, Stack, Typography } from "@mui/joy";
import { ReactElement, useContext } from "react"; import { ReactElement, useContext } from "react";
import './Header.css'; import "./Header.css";
import { Article, GitHub } from "@mui/icons-material"; import { Article, GitHub } from "@mui/icons-material";
import { ApiContext } from "./apiClient/ApiContext.tsx"; import { ApiContext } from "./apiClient/ApiContext.tsx";
export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement { export default function Header({
children,
}: {
children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined;
}): ReactElement {
const Api = useContext(ApiContext); const Api = useContext(ApiContext);
return ( return (
<Sheet className={"header"}> <Sheet className={"header"}>
<Stack direction={"row"} spacing={2} sx={{width: "100%", alignItems: "center", justifyContent: "space-between"}} useFlexGap> <Stack
direction={"row"}
spacing={2}
sx={{
width: "100%",
alignItems: "center",
justifyContent: "space-between",
}}
useFlexGap
>
<Stack sx={{ flexGrow: 1, flexBasis: 1 }} direction={"row"} spacing={2}> <Stack sx={{ flexGrow: 1, flexBasis: 1 }} direction={"row"} spacing={2}>
{children} {children}
</Stack> </Stack>
<Stack sx={{flexGrow: 1, height: "100%", flexBasis: 1, justifyContent: "center"}} direction={"row"}> <Stack
<img src={"/blahaj.png"} style={{cursor: "grab", maxHeight: "100%"}}/> sx={{
<Typography level={"h2"} sx={{ flexGrow: 1,
background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))", height: "100%",
flexBasis: 1,
justifyContent: "center",
}}
direction={"row"}
>
<img
src={"/blahaj.png"}
style={{ cursor: "grab", maxHeight: "100%" }}
/>
<Typography
level={"h2"}
sx={{
background:
"linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))",
WebkitBackgroundClip: "text", WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent", WebkitTextFillColor: "transparent",
fontWeight: "bold", fontWeight: "bold",
cursor: "default" cursor: "default",
}}>Tranga</Typography> }}
>
Tranga
</Typography>
</Stack> </Stack>
<Stack sx={{flexGrow: 1, flexBasis: 1, justifyContent: "flex-end"}} direction={"row"} spacing={2}> <Stack
<Link target={"_blank"} href={"https://github.com/C9Glax/tranga"} color={"neutral"} height={"min-content"} ><GitHub /> Server</Link> sx={{ flexGrow: 1, flexBasis: 1, justifyContent: "flex-end" }}
<Link target={"_blank"} href={"https://github.com/C9Glax/tranga-website"} color={"neutral"} height={"min-content"} ><GitHub /> Website</Link> direction={"row"}
<Link target={"_blank"} href={Api.baseUrl + "/swagger"} color={"neutral"} height={"min-content"} ><Article />Swagger</Link> spacing={2}
>
<Link
target={"_blank"}
href={"https://github.com/C9Glax/tranga"}
color={"neutral"}
height={"min-content"}
>
<GitHub /> Server
</Link>
<Link
target={"_blank"}
href={"https://github.com/C9Glax/tranga-website"}
color={"neutral"}
height={"min-content"}
>
<GitHub /> Website
</Link>
<Link
target={"_blank"}
href={Api.baseUrl + "/swagger"}
color={"neutral"}
height={"min-content"}
>
<Article />
Swagger
</Link>
</Stack> </Stack>
</Stack> </Stack>
</Sheet> </Sheet>

21
tranga-website/src/apiClient/SettingsContext.tsx
View File

@@ -2,13 +2,15 @@ import {createContext, useContext, useState} from "react";
import { TrangaSettings } from "./data-contracts.ts"; import { TrangaSettings } from "./data-contracts.ts";
import { ApiContext } from "./ApiContext.tsx"; import { ApiContext } from "./ApiContext.tsx";
const [settingsPromise, setSettingsPromise] = useState<Promise<TrangaSettings | undefined>>(); const [settingsPromise, setSettingsPromise] =
useState<Promise<TrangaSettings | undefined>>();
const [settings, setSettings] = useState<TrangaSettings>(); const [settings, setSettings] = useState<TrangaSettings>();
const API = useContext(ApiContext); const API = useContext(ApiContext);
export const SettingsContext = createContext<{ GetSettings: () => Promise<TrangaSettings | undefined> }>( export const SettingsContext = createContext<{
{ GetSettings: () => Promise<TrangaSettings | undefined>;
}>({
GetSettings: (): Promise<TrangaSettings | undefined> => { GetSettings: (): Promise<TrangaSettings | undefined> => {
const promise = settingsPromise; const promise = settingsPromise;
if (promise) return promise; if (promise) return promise;
@@ -17,15 +19,14 @@ export const SettingsContext = createContext<{ GetSettings: () => Promise<Tranga
console.log(`Fetching settings`); console.log(`Fetching settings`);
API.settingsList() API.settingsList()
.then(result => { .then((result) => {
if (!result.ok) if (!result.ok) throw new Error(`Error fetching settings`);
throw new Error(`Error fetching settings`);
setSettings(result.data); setSettings(result.data);
resolve(result.data); resolve(result.data);
}).catch(reject); })
.catch(reject);
}); });
setSettingsPromise(p); setSettingsPromise(p);
return p; return p;
} },
} });
);

18
tranga-website/src/main.tsx
View File

@@ -1,10 +1,10 @@
import { createRoot } from 'react-dom/client' import { createRoot } from "react-dom/client";
import './index.css' import "./index.css";
import App from './App.tsx' import App from "./App.tsx";
// @ts-ignore // @ts-ignore
import '@fontsource/inter'; import "@fontsource/inter";
import { CssVarsProvider } from '@mui/joy/styles'; import { CssVarsProvider } from "@mui/joy/styles";
import CssBaseline from '@mui/joy/CssBaseline'; import CssBaseline from "@mui/joy/CssBaseline";
import { StrictMode } from "react"; import { StrictMode } from "react";
import { trangaTheme } from "./theme.ts"; import { trangaTheme } from "./theme.ts";
@@ -22,8 +22,4 @@ export default function MyApp() {
); );
} }
createRoot(document.getElementById("root")!).render(<MyApp />);
createRoot(document.getElementById('root')!).render(
<MyApp />
);

65
tranga-website/src/theme.ts
View File

@@ -1,11 +1,10 @@
import { extendTheme } from '@mui/joy/styles'; import { extendTheme } from "@mui/joy/styles";
export const trangaTheme = extendTheme({ export const trangaTheme = extendTheme({
"colorSchemes": { colorSchemes: {
"light": { light: {
"palette": { palette: {
"primary": { primary: {
"50": "#FCE5EA", "50": "#FCE5EA",
"100": "#FBDDE3", "100": "#FBDDE3",
"200": "#F9CBD4", "200": "#F9CBD4",
@@ -15,9 +14,9 @@ export const trangaTheme = extendTheme({
"600": "#C48793", "600": "#C48793",
"700": "#AC7681", "700": "#AC7681",
"800": "#93656E", "800": "#93656E",
"900": "#7B555C" "900": "#7B555C",
}, },
"neutral": { neutral: {
"50": "#E6E6E6", "50": "#E6E6E6",
"100": "#CCCCCC", "100": "#CCCCCC",
"200": "#B3B3B3", "200": "#B3B3B3",
@@ -28,11 +27,11 @@ export const trangaTheme = extendTheme({
"700": "#333333", "700": "#333333",
"800": "#191919", "800": "#191919",
"900": "#000", "900": "#000",
"plainColor": "var(--joy-palette-neutral-50)", plainColor: "var(--joy-palette-neutral-50)",
"plainHoverBg": "var(--joy-palette-neutral-700)", plainHoverBg: "var(--joy-palette-neutral-700)",
"outlinedColor": "var(--joy-palette-neutral-50)", outlinedColor: "var(--joy-palette-neutral-50)",
}, },
"success": { success: {
"50": "#cef0fe", "50": "#cef0fe",
"100": "#bdebfd", "100": "#bdebfd",
"200": "#9de2fc", "200": "#9de2fc",
@@ -42,9 +41,9 @@ export const trangaTheme = extendTheme({
"600": "#49a5c8", "600": "#49a5c8",
"700": "#4090af", "700": "#4090af",
"800": "#2e677d", "800": "#2e677d",
"900": "#245264" "900": "#245264",
}, },
"danger": { danger: {
"50": "#f2c0b3", "50": "#f2c0b3",
"100": "#ea9680", "100": "#ea9680",
"200": "#e68166", "200": "#e68166",
@@ -54,9 +53,9 @@ export const trangaTheme = extendTheme({
"600": "#aa2400", "600": "#aa2400",
"700": "#951f00", "700": "#951f00",
"800": "#6b1700", "800": "#6b1700",
"900": "#400d00" "900": "#400d00",
}, },
"warning": { warning: {
"50": "#ffebdd", "50": "#ffebdd",
"100": "#ffd7bb", "100": "#ffd7bb",
"200": "#ffc29a", "200": "#ffc29a",
@@ -66,23 +65,23 @@ export const trangaTheme = extendTheme({
"600": "#cc7b45", "600": "#cc7b45",
"700": "#995c34", "700": "#995c34",
"800": "#663e22", "800": "#663e22",
"900": "#331f11" "900": "#331f11",
}, },
"background": { background: {
"body": "var(--joy-palette-neutral-900)", body: "var(--joy-palette-neutral-900)",
"surface": "var(--joy-palette-neutral-900)", surface: "var(--joy-palette-neutral-900)",
"popup": "var(--joy-palette-neutral-800)" popup: "var(--joy-palette-neutral-800)",
}, },
"text": { text: {
"primary": "var(--joy-palette-neutral-50)", primary: "var(--joy-palette-neutral-50)",
"secondary": "var(--joy-palette-success-200)", secondary: "var(--joy-palette-success-200)",
"tertiary": "var(--joy-palette-primary-200)", tertiary: "var(--joy-palette-primary-200)",
"icon": "var(--joy-palette-primary-50)" icon: "var(--joy-palette-primary-50)",
}
}
}, },
"dark": { },
"palette": {} },
} dark: {
} palette: {},
}) },
},
});

10
tranga-website/vite.config.ts
View File

@@ -1,10 +1,10 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
server: { server: {
host: '127.0.0.1', host: "127.0.0.1",
} },
}) });