mirror of
https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git
synced 2024-12-23 23:31:49 +01:00
section sources by lang
This commit is contained in:
parent
6f2f228e08
commit
c842c51fb6
@ -77,7 +77,7 @@ fun getSourceList(): List<SourceDataClass> {
|
||||
SourceDataClass(
|
||||
it[SourceTable.id].value.toString(),
|
||||
it[SourceTable.name],
|
||||
Locale(it[SourceTable.lang]).getDisplayLanguage(Locale(it[SourceTable.lang])),
|
||||
it[SourceTable.lang],
|
||||
getExtensionIconUrl(ExtensionTable.select { ExtensionTable.id eq it[SourceTable.extension] }.first()[ExtensionTable.apkName]),
|
||||
getHttpSource(it[SourceTable.id].value).supportsLatest
|
||||
)
|
||||
|
@ -13,5 +13,7 @@ module.exports = {
|
||||
|
||||
// Indent props with 4 spaces
|
||||
'react/jsx-indent-props': ['error', 4],
|
||||
|
||||
'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }]
|
||||
},
|
||||
};
|
||||
|
@ -9,11 +9,12 @@ import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogActions from '@material-ui/core/DialogActions';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import Checkbox from '@material-ui/core/Checkbox';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import FormGroup from '@material-ui/core/FormGroup';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import FilterListIcon from '@material-ui/icons/FilterList';
|
||||
import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import { langCodeToName } from '../util/language';
|
||||
|
||||
const useStyles = makeStyles(() => createStyles({
|
||||
paper: {
|
||||
@ -72,21 +73,22 @@ export default function ExtensionLangSelect(props: IProps) {
|
||||
open={open}
|
||||
>
|
||||
<DialogTitle>Enabled Languages</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<FormGroup>
|
||||
<DialogContent dividers style={{ padding: 0 }}>
|
||||
<List>
|
||||
{allLangs.map((lang) => (
|
||||
<FormControlLabel
|
||||
control={(
|
||||
<Checkbox
|
||||
<ListItem key={lang}>
|
||||
<ListItemText primary={langCodeToName(lang)} />
|
||||
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
checked={mShownLangs.indexOf(lang) !== -1}
|
||||
onChange={(e) => handleChange(e, lang)}
|
||||
color="default"
|
||||
/>
|
||||
)}
|
||||
label={lang}
|
||||
/>
|
||||
</ListItemSecondaryAction>
|
||||
|
||||
</ListItem>
|
||||
))}
|
||||
</FormGroup>
|
||||
</List>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
|
@ -10,6 +10,7 @@ import Button from '@material-ui/core/Button';
|
||||
import Avatar from '@material-ui/core/Avatar';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import useLocalStorage from '../util/useLocalStorage';
|
||||
import { langCodeToName } from '../util/language';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
@ -67,7 +68,7 @@ export default function SourceCard(props: IProps) {
|
||||
{name}
|
||||
</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{lang}
|
||||
{langCodeToName(lang)}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -8,6 +8,7 @@ import NavbarContext from '../context/NavbarContext';
|
||||
import client from '../util/client';
|
||||
import useLocalStorage from '../util/useLocalStorage';
|
||||
import ExtensionLangSelect from '../components/ExtensionLangSelect';
|
||||
import { defualtLangs, langCodeToName, langSortCmp } from '../util/language';
|
||||
|
||||
const allLangs: string[] = [];
|
||||
|
||||
@ -19,7 +20,7 @@ function groupExtensions(extensions: IExtension[]) {
|
||||
extensions.forEach((extension) => {
|
||||
if (result[extension.lang] === undefined) {
|
||||
result[extension.lang] = [];
|
||||
allLangs.push(extension.lang);
|
||||
if (extension.lang !== 'all') { allLangs.push(extension.lang); }
|
||||
}
|
||||
if (extension.installed) {
|
||||
result.installed.push(extension);
|
||||
@ -28,14 +29,10 @@ function groupExtensions(extensions: IExtension[]) {
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
// put english first for convience
|
||||
allLangs.sort(langSortCmp);
|
||||
|
||||
function defualtLangs() {
|
||||
return [
|
||||
'all',
|
||||
'en',
|
||||
];
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function Extensions() {
|
||||
@ -72,32 +69,30 @@ export default function Extensions() {
|
||||
}
|
||||
}, [extensionsRaw]);
|
||||
|
||||
if (extensions.length === 0) {
|
||||
if (Object.entries(extensions).length === 0) {
|
||||
return <h3>loading...</h3>;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{
|
||||
Object.entries(extensions).map(([lang, list]) => (
|
||||
<>
|
||||
{['installed', ...shownLangs].indexOf(lang) !== -1
|
||||
(['installed', ...shownLangs].indexOf(lang) !== -1
|
||||
&& (
|
||||
<>
|
||||
<h1 key={lang} style={{ marginLeft: 25 }}>{lang}</h1>
|
||||
<React.Fragment key={lang}>
|
||||
<h1 key={lang} style={{ marginLeft: 25 }}>
|
||||
{langCodeToName(lang)}
|
||||
</h1>
|
||||
{(list as IExtension[]).map((it) => (
|
||||
<ExtensionCard
|
||||
key={it.apkName}
|
||||
extension={it}
|
||||
// eslint-disable-next-line max-len
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
notifyInstall={() => {
|
||||
triggerUpdate();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) }
|
||||
</>
|
||||
</React.Fragment>
|
||||
))
|
||||
))
|
||||
}
|
||||
</>
|
||||
|
@ -37,16 +37,15 @@ function TabPanel(props: TabPanelProps) {
|
||||
}
|
||||
|
||||
export default function Library() {
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Library'); setAction(<></>); }, []);
|
||||
|
||||
const [tabs, setTabs] = useState<IMangaCategory[]>([]);
|
||||
const [tabNum, setTabNum] = useState<number>(0);
|
||||
|
||||
// a hack so MangaGrid doesn't stop working. I won't change it in case
|
||||
// if I do manga pagination for library..
|
||||
const [lastPageNum, setLastPageNum] = useState<number>(1);
|
||||
useEffect(() => {
|
||||
setTitle('Library');
|
||||
}, []);
|
||||
|
||||
const handleTabChange = (newTab: number) => {
|
||||
setTabNum(newTab);
|
||||
|
@ -10,8 +10,10 @@ import NavbarContext from '../context/NavbarContext';
|
||||
import client from '../util/client';
|
||||
|
||||
export default function Manga() {
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Manga'); setAction(<></>); }, []);
|
||||
|
||||
const { id } = useParams<{id: string}>();
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
|
||||
const [manga, setManga] = useState<IManga>();
|
||||
const [chapters, setChapters] = useState<IChapter[]>([]);
|
||||
|
@ -19,8 +19,10 @@ const style = {
|
||||
const range = (n:number) => Array.from({ length: n }, (value, key) => key);
|
||||
|
||||
export default function Reader() {
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Reader'); setAction(<></>); }, []);
|
||||
|
||||
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
|
||||
const [pageCount, setPageCount] = useState<number>(-1);
|
||||
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();
|
||||
|
@ -21,7 +21,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
}));
|
||||
|
||||
export default function SearchSingle() {
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
|
||||
|
||||
const { sourceId } = useParams<{sourceId: string}>();
|
||||
const classes = useStyles();
|
||||
const [error, setError] = useState<boolean>(false);
|
||||
|
@ -2,7 +2,7 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import React, { useContext, useState } from 'react';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import List from '@material-ui/core/List';
|
||||
import InboxIcon from '@material-ui/icons/Inbox';
|
||||
import Brightness6Icon from '@material-ui/icons/Brightness6';
|
||||
@ -24,8 +24,9 @@ function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
|
||||
}
|
||||
|
||||
export default function Settings() {
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
setTitle('Settings');
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Settings'); setAction(<></>); }, []);
|
||||
|
||||
const { darkTheme, setDarkTheme } = useContext(DarkTheme);
|
||||
const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
@ -47,7 +48,7 @@ export default function Settings() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<List component="nav" style={{ padding: 0 }}>
|
||||
<List style={{ padding: 0 }}>
|
||||
<ListItemLink href="/settings/categories">
|
||||
<ListItemIcon>
|
||||
<InboxIcon />
|
||||
|
@ -9,8 +9,10 @@ import NavbarContext from '../context/NavbarContext';
|
||||
import client from '../util/client';
|
||||
|
||||
export default function SourceMangas(props: { popular: boolean }) {
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Source'); setAction(<></>); }, []);
|
||||
|
||||
const { sourceId } = useParams<{sourceId: string}>();
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
const [mangas, setMangas] = useState<IManga[]>([]);
|
||||
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
|
||||
const [lastPageNum, setLastPageNum] = useState<number>(1);
|
||||
|
@ -3,16 +3,53 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import ExtensionLangSelect from '../components/ExtensionLangSelect';
|
||||
import SourceCard from '../components/SourceCard';
|
||||
import NavbarContext from '../context/NavbarContext';
|
||||
import client from '../util/client';
|
||||
import { defualtLangs, langCodeToName, langSortCmp } from '../util/language';
|
||||
import useLocalStorage from '../util/useLocalStorage';
|
||||
|
||||
function sourceToLangList(sources: ISource[]) {
|
||||
const result: string[] = [];
|
||||
|
||||
sources.forEach((source) => {
|
||||
if (result.indexOf(source.lang) === -1 && langCodeToName(source.lang) !== 'Error') { result.push(source.lang); }
|
||||
});
|
||||
|
||||
result.sort(langSortCmp);
|
||||
return result;
|
||||
}
|
||||
|
||||
function groupByLang(sources: ISource[]) {
|
||||
const result = {} as any;
|
||||
sources.forEach((source) => {
|
||||
if (result[source.lang] === undefined) { result[source.lang] = [] as ISource[]; }
|
||||
result[source.lang].push(source);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export default function Sources() {
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
setTitle('Sources');
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
|
||||
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', defualtLangs());
|
||||
|
||||
const [sources, setSources] = useState<ISource[]>([]);
|
||||
const [fetched, setFetched] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle('Sources');
|
||||
setAction(
|
||||
<ExtensionLangSelect
|
||||
shownLangs={shownLangs}
|
||||
setShownLangs={setShownLangs}
|
||||
allLangs={sourceToLangList(sources)}
|
||||
/>,
|
||||
);
|
||||
}, [shownLangs, sources]);
|
||||
|
||||
useEffect(() => {
|
||||
client.get('/api/v1/source/list')
|
||||
.then((response) => response.data)
|
||||
@ -23,5 +60,22 @@ export default function Sources() {
|
||||
if (fetched) return (<h3>No sources found. Install Some Extensions first.</h3>);
|
||||
return (<h3>loading...</h3>);
|
||||
}
|
||||
return <>{sources.map((it) => <SourceCard source={it} />)}</>;
|
||||
return (
|
||||
<>
|
||||
{/* eslint-disable-next-line max-len */}
|
||||
{Object.entries(groupByLang(sources)).sort((a, b) => langSortCmp(a[0], b[0])).map(([lang, list]) => (
|
||||
shownLangs.indexOf(lang) !== -1 && (
|
||||
<React.Fragment key={lang}>
|
||||
<h1 key={lang} style={{ marginLeft: 25 }}>{langCodeToName(lang)}</h1>
|
||||
{(list as ISource[]).map((source) => (
|
||||
<SourceCard
|
||||
key={source.id}
|
||||
source={source}
|
||||
/>
|
||||
))}
|
||||
</React.Fragment>
|
||||
)
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -40,8 +40,9 @@ const getItemStyle = (isDragging, draggableStyle, palette) => ({
|
||||
});
|
||||
|
||||
export default function Categories() {
|
||||
const { setTitle } = useContext(NavbarContext);
|
||||
setTitle('Categories');
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
useEffect(() => { setTitle('Categories'); setAction(<></>); }, []);
|
||||
|
||||
const [categories, setCategories] = useState([]);
|
||||
const [categoryToEdit, setCategoryToEdit] = useState(-1); // -1 means new category
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
50
webUI/react/src/util/language.tsx
Normal file
50
webUI/react/src/util/language.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
export const ISOLanguages = [
|
||||
{ code: 'all', name: 'All', nativeName: 'All' },
|
||||
{ code: 'installed', name: 'Installed', nativeName: 'Installed' },
|
||||
|
||||
{ code: 'en', name: 'English', nativeName: 'English' },
|
||||
{ code: 'ca', name: 'Catalan; Valencian', nativeName: 'Català' },
|
||||
{ code: 'de', name: 'German', nativeName: 'Deutsch' },
|
||||
{ code: 'es', name: 'Spanish; Castilian', nativeName: 'Español' },
|
||||
{ code: 'fr', name: 'French', nativeName: 'Français' },
|
||||
{ code: 'id', name: 'Indonesian', nativeName: 'Indonesia' },
|
||||
{ code: 'it', name: 'Italian', nativeName: 'Italiano' },
|
||||
{ code: 'pt', name: 'Portuguese', nativeName: 'Português' },
|
||||
{ code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt' },
|
||||
{ code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
|
||||
{ code: 'ru', name: 'Russian', nativeName: 'русский' },
|
||||
{ code: 'ar', name: 'Arabic', nativeName: 'العربية' },
|
||||
{ code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
|
||||
{ code: 'th', name: 'Thai', nativeName: 'ไทย' },
|
||||
{ code: 'zh', name: 'Chinese', nativeName: '中文' },
|
||||
{ code: 'ja', name: 'Japanese', nativeName: '日本語' },
|
||||
{ code: 'ko', name: 'Korean', nativeName: '한국어' },
|
||||
];
|
||||
|
||||
export function langCodeToName(code: string): string {
|
||||
for (let i = 0; i < ISOLanguages.length; i++) {
|
||||
if (ISOLanguages[i].code === code) return ISOLanguages[i].nativeName;
|
||||
}
|
||||
return 'Error';
|
||||
}
|
||||
|
||||
export function defualtLangs() {
|
||||
return [
|
||||
// todo: infer this from the browser
|
||||
'en',
|
||||
];
|
||||
}
|
||||
|
||||
export const langSortCmp = (a: string, b: string) => {
|
||||
// puts english first for convience
|
||||
const aLang = langCodeToName(a);
|
||||
const bLang = langCodeToName(b);
|
||||
|
||||
if (a === 'en') return -1;
|
||||
if (b === 'en') return 1;
|
||||
return aLang > bLang ? 1 : -1;
|
||||
};
|
Loading…
Reference in New Issue
Block a user