season add component and some else
This commit is contained in:
parent
949946a1b7
commit
3b56a160fc
0
mybookmark.ui/src/api/CommonPropertiesHelper.tsx
Normal file
0
mybookmark.ui/src/api/CommonPropertiesHelper.tsx
Normal file
@ -1,35 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -1,9 +0,0 @@
|
||||
// import React from 'react'
|
||||
|
||||
export default function Menu() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
import {ReactNode, useEffect, useState} from "react";
|
||||
// import { NameItem, NameType } from "../../../api/models/Types";
|
||||
import { NameItem } from "../../../api/models/Types";
|
||||
import {GetName} from "../../../api/CommonPropertiesHelper.tsx";
|
||||
import {Link} from "react-router-dom";
|
||||
import {MdVideoLibrary} from "react-icons/md";
|
||||
|
||||
export type TitleNames = {
|
||||
titleElement: ReactNode | null
|
||||
// titleString: string
|
||||
namesUsed: Array<NameItem>,
|
||||
};
|
||||
|
||||
export interface IGetTitleNamesProps {
|
||||
titleNames: Array<NameItem>,
|
||||
titleId: string,
|
||||
seasonNames?: Array<NameItem> | null | undefined,
|
||||
seasonId?: string | null | undefined,
|
||||
episodeNames?: Array<NameItem> | null | undefined,
|
||||
episodeId?: string | null | undefined,
|
||||
userLanguageId?: string | null | undefined,
|
||||
returnToEdit?: boolean | null | undefined,
|
||||
}
|
||||
|
||||
export function NameBreadcrumpsComponent(props: IGetTitleNamesProps){
|
||||
const [seasonExists, setSeasonExists] = useState<boolean>(false);
|
||||
const [episodeExists, setEpisodeExists] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setSeasonExists(props.seasonNames != null && props.seasonId != null && props.seasonId != '');
|
||||
setEpisodeExists(props.episodeNames != null && props.episodeId != null && props.episodeId != '');
|
||||
}, [props])
|
||||
|
||||
return (
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol className="breadcrumb">
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
<Link to={'/'} className=''>
|
||||
<MdVideoLibrary/>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
<Link to={`/library/anime/${props.titleId}`} className=''>
|
||||
{GetItemName(props.titleNames, props.userLanguageId)}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
{seasonExists &&
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
<Link to={`${(props.returnToEdit == true) ? '/admin' : ''}/library/anime/${props.titleId}/season/${props.seasonId}`} className=''>
|
||||
{GetItemName(props.seasonNames ?? [], props.userLanguageId)}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
|
||||
{episodeExists &&
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
<Link to={`/library/anime/${props.titleId}${seasonExists ? `season/${props.seasonId}` : ''}episode/${props.episodeId}`} className=''>
|
||||
{GetItemName(props.episodeNames ?? [], props.userLanguageId)}
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
|
||||
{/*<li className="breadcrumb-item active" aria-current="page">*/}
|
||||
{/* {*/}
|
||||
{/* <Link to={`/admin/library/anime/title/${props.titleId}/season/`}*/}
|
||||
{/* className='dropdown-item-text link-light link-offset-2 link-body-emphasis link-underline-opacity-25 link-underline-opacity-75-hover'>*/}
|
||||
{/* <div className='row justify-content-between'>*/}
|
||||
{/* <div className='col-auto pe-0'>Добавить сезон</div>*/}
|
||||
{/* <div className='col-auto ps-0 text-info'><FaArrowUpRightFromSquare/></div>*/}
|
||||
{/* </div>*/}
|
||||
{/* </Link>*/}
|
||||
{/* }*/}
|
||||
{/*</li>*/}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
function GetItemName(names: Array<NameItem>, languageId: string | null | undefined): ReactNode {
|
||||
const titleNames = GetName(names, languageId);
|
||||
|
||||
if (titleNames != null) {
|
||||
if (titleNames.nameInUserLanguage != null) {
|
||||
if (titleNames.nameOriginal != null) {
|
||||
return (
|
||||
<>
|
||||
<span className="user-select-all">{titleNames.nameInUserLanguage}</span> / <span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
|
||||
</>
|
||||
);
|
||||
}
|
||||
else{
|
||||
return (
|
||||
<>
|
||||
<span className="user-select-all">{titleNames.nameInUserLanguage}</span>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
else if (titleNames.nameOriginal != null){
|
||||
return (
|
||||
<>
|
||||
<span className="user-select-all">{titleNames.nameOriginal}</span> [{titleNames.languageCodeIso3}]
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<span>NO NAME</span>
|
||||
);
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
// import React from 'react'
|
||||
|
||||
function titleShort() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default titleShort
|
||||
Loading…
Reference in New Issue
Block a user