-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Create New Language Select page * Change Variable Data * Edit Statement Page * Created Navbar, erase unnecessary codes * Create main statement page * Fix query detecting logic * Fix errors * Fix quotation * Apply mobile-responsive * Fix sx mobile responsive to direction, and change xs to sm * Fix lint warnings
- Loading branch information
Showing
4 changed files
with
223 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { | ||
Button, | ||
Paper, | ||
Stack, | ||
TextField, | ||
Typography, | ||
ButtonGroup, | ||
} from '@mui/material'; | ||
|
||
// As same as Polygon, the page link is same for creating new language and editing existed language | ||
// It can be divided into two pages if needed | ||
|
||
export default function EditStatement({ | ||
language, | ||
languageName, | ||
}: { | ||
language: string; | ||
languageName: string; | ||
}) { | ||
// have to fetch the statement and tutorial from the server by the language | ||
return ( | ||
<Paper> | ||
<Stack direction='column' px={4} py={2} gap={2}> | ||
<Stack direction='column'> | ||
<Stack | ||
direction={{ sm: 'column', md: 'row' }} | ||
gap={2} | ||
px={2} | ||
justifyContent='space-between' | ||
> | ||
<Typography variant='h6'> | ||
Edit {languageName}({language}) Statement | ||
</Typography> | ||
<ButtonGroup variant='text' sx={{ justifyContent: 'flex-end' }}> | ||
<Button>In LaTex</Button> | ||
<Button>In HTML</Button> | ||
<Button>In PDF</Button> | ||
</ButtonGroup> | ||
</Stack> | ||
<Typography variant='caption' px={2}> | ||
It is recommended to use simple TeX, “Preview in HTML” feature | ||
supports only subset of TeX markup | ||
</Typography> | ||
</Stack> | ||
<TextField id='prob_name' label='Name' fullWidth /> | ||
<TextField id='legend' label='Legend' rows={10} multiline fullWidth /> | ||
<TextField | ||
id='input_format' | ||
label='Input Format' | ||
rows={5} | ||
multiline | ||
fullWidth | ||
/> | ||
<TextField | ||
id='output_format' | ||
label='Output Format' | ||
rows={5} | ||
multiline | ||
fullWidth | ||
/> | ||
<TextField id='scoring' label='Scoring' rows={10} multiline fullWidth /> | ||
<TextField id='notes' label='Notes' rows={5} multiline fullWidth /> | ||
<TextField id='tutorial' label='Tutorial' rows={10} multiline fullWidth /> | ||
<Button variant='contained'>Save</Button> | ||
</Stack> | ||
</Paper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
'use client'; | ||
|
||
import { Button, Paper, Stack, TextField, Autocomplete, Link } from '@mui/material'; | ||
import { useState } from 'react'; | ||
|
||
// As same as Polygon, the page link is same for creating new language and editing existed language | ||
// It can be divided into two pages if needed | ||
|
||
export default function NewLanguage({ | ||
languageList, | ||
existedLanguageList, | ||
}: { | ||
languageList: { label: string; value: string }[]; | ||
existedLanguageList: { label: string; value: string }[]; | ||
}) { | ||
// cloneClicked variable is used to show the existedLanguageList when the user wants to clone | ||
const [cloneClicked, setCloneClicked] = useState(false); | ||
return ( | ||
<Paper> | ||
<Stack direction='column' px={4} py={2} gap={2}> | ||
<Autocomplete | ||
id='language_setting' | ||
options={languageList.filter( | ||
(lang) => | ||
!existedLanguageList.find( | ||
(existedLang) => existedLang.value === lang.value, | ||
), | ||
)} | ||
getOptionLabel={(option) => option.label} | ||
renderInput={(params) => ( | ||
<TextField | ||
{...params} | ||
label='Language' | ||
helperText={ | ||
!cloneClicked && ( | ||
<> | ||
If you want to clone statement and tutorial from existing,{' '} | ||
<Link href='#' onClick={() => setCloneClicked(true)}> | ||
click here | ||
</Link> | ||
</> | ||
) | ||
} | ||
/> | ||
)} | ||
/> | ||
{cloneClicked && ( | ||
<Autocomplete | ||
id='existed_language_setting' | ||
options={existedLanguageList} | ||
getOptionLabel={(option) => option.label} | ||
renderInput={(params) => ( | ||
<TextField {...params} label='Clone from language' /> | ||
)} | ||
/> | ||
)} | ||
<Button variant='contained'>Create</Button> | ||
</Stack> | ||
</Paper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { Tabs, Tab, Box, Button, Stack, ButtonGroup } from '@mui/material'; | ||
|
||
export default function StatementNavbar({ | ||
existedLanguageList, | ||
language, | ||
}: { | ||
existedLanguageList: { label: string; value: string }[]; | ||
language: string; | ||
}) { | ||
return ( | ||
<Box sx={{ width: '100%' }}> | ||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||
<Stack | ||
direction={{ sm: 'column', md: 'row' }} | ||
gap={2} | ||
p={2} | ||
justifyContent='space-between' | ||
> | ||
<Tabs value={language}> | ||
{existedLanguageList.map((lang) => ( | ||
<Tab | ||
label={lang.label} | ||
value={lang.value} | ||
href={'?language=' + lang.value} | ||
key={lang.value} | ||
/> | ||
))} | ||
</Tabs> | ||
<ButtonGroup | ||
variant='text' | ||
sx={{ flexWrap: 'wrap', justifyContent: 'flex-end' }} | ||
> | ||
<Button>Edit With Preview</Button> | ||
<Button>Review</Button> | ||
<Button>Delete Current</Button> | ||
<Button href='?language='>Create New</Button> | ||
</ButtonGroup> | ||
</Stack> | ||
</Box> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
'use client'; | ||
|
||
import { Stack } from '@mui/material'; | ||
import { useSearchParams } from 'next/navigation'; | ||
import { useState } from 'react'; | ||
|
||
import NewLanguage from './NewLanguage'; | ||
import EditStatement from './EditStatement'; | ||
import StatementNavbar from './StatementNavbar'; | ||
|
||
// languageList variable is all-supported languages | ||
// if it needs to be fetched from the server, it should be done in the useEffect hook | ||
const languageList = [ | ||
{ label: 'Korean', value: 'ko' }, | ||
{ label: 'English', value: 'en' }, | ||
{ label: 'Japanese', value: 'ja' }, | ||
{ label: 'Chinese', value: 'zh' }, | ||
{ label: 'Vietnamese', value: 'vi' }, | ||
{ label: 'Russian', value: 'ru' }, | ||
{ label: 'French', value: 'fr' }, | ||
]; | ||
|
||
export default function Problem() { | ||
// existedLanguageList variable is the list of languages that already have statements and tutorials | ||
// it should be fetched from the server in the useEffect hook | ||
const [existedLanguageList] = useState([ | ||
{ label: 'English', value: 'en' }, | ||
{ label: 'French', value: 'fr' }, | ||
]); | ||
// get query parameters | ||
const searchParams = useSearchParams(); | ||
const [language] = useState(searchParams.get('language') || ''); | ||
return ( | ||
<Stack mt={2} gap={4}> | ||
<StatementNavbar existedLanguageList={existedLanguageList} language={language} /> | ||
{!existedLanguageList.find((lang) => lang.value === language) && ( | ||
<NewLanguage | ||
languageList={languageList} | ||
existedLanguageList={existedLanguageList} | ||
/> | ||
)} | ||
{existedLanguageList.find((lang) => lang.value === language) && ( | ||
<EditStatement | ||
language={language} | ||
languageName={ | ||
existedLanguageList.find((lang) => lang.value === language)?.label || '' | ||
} | ||
/> | ||
)} | ||
</Stack> | ||
); | ||
} |