diff --git a/package-lock.json b/package-lock.json
index 6836f210a6a084a1fdb412f96e423426098d6f81..d60ef1778374a5ad9cf3f88a17906551649952d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@auth/unstorage-adapter": "^1.6.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@fontsource/roboto": "^5.0.14",
"@mui/icons-material": "^5.15.19",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.15.19",
@@ -37,7 +38,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.1.0",
- "@openapitools/openapi-generator-cli": "^2.9.0",
+ "@openapitools/openapi-generator-cli": "^2.7.0",
"@types/node": "^18.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
@@ -1097,6 +1098,11 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
+ "node_modules/@fontsource/roboto": {
+ "version": "5.0.14",
+ "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.14.tgz",
+ "integrity": "sha512-zHAxlTTm9RuRn9/StwclFJChf3z9+fBrOxC3fw71htjHP1BgXNISwRjdJtAKAmMe5S2BzgpnjkQR93P9EZYI/Q=="
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -1634,14 +1640,13 @@
}
},
"node_modules/@nestjs/axios": {
- "version": "3.0.1",
- "resolved": "https://registry.npmjs.org/@nestjs/axios/-/axios-3.0.1.tgz",
- "integrity": "sha512-VlOZhAGDmOoFdsmewn8AyClAdGpKXQQaY1+3PGB+g6ceurGIdTxZgRX3VXc1T6Zs60PedWjg3A82TDOB05mrzQ==",
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@nestjs/axios/-/axios-3.0.2.tgz",
+ "integrity": "sha512-Z6GuOUdNQjP7FX+OuV2Ybyamse+/e0BFdTWBX5JxpBDKA+YkdLynDgG6HTF04zy6e9zPa19UX0WA2VDoehwhXQ==",
"dev": true,
"peerDependencies": {
"@nestjs/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
"axios": "^1.3.1",
- "reflect-metadata": "^0.1.12",
"rxjs": "^6.0.0 || ^7.0.0"
}
},
@@ -1911,17 +1916,17 @@
}
},
"node_modules/@openapitools/openapi-generator-cli": {
- "version": "2.12.0",
- "resolved": "https://registry.npmjs.org/@openapitools/openapi-generator-cli/-/openapi-generator-cli-2.12.0.tgz",
- "integrity": "sha512-1msjEK5y5zVNbDvbCQNY5Un7KUdhZ/2fhMGgToOQUF1gQOOHQVZ9ALXJkd9STb+wlV/1Cr/UVM56d85NOUMstA==",
+ "version": "2.13.4",
+ "resolved": "https://registry.npmjs.org/@openapitools/openapi-generator-cli/-/openapi-generator-cli-2.13.4.tgz",
+ "integrity": "sha512-4JKyrk55ohQK2FcuZbPdNvxdyXD14jjOIvE8hYjJ+E1cHbRbfXQXbYnjTODFE52Gx8eAxz8C9icuhDYDLn7nww==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
- "@nestjs/axios": "3.0.1",
+ "@nestjs/axios": "3.0.2",
"@nestjs/common": "10.3.0",
"@nestjs/core": "10.3.0",
"@nuxtjs/opencollective": "0.3.2",
- "axios": "1.6.5",
+ "axios": "1.6.8",
"chalk": "4.1.2",
"commander": "8.3.0",
"compare-versions": "4.1.4",
@@ -1929,6 +1934,7 @@
"console.table": "0.10.0",
"fs-extra": "10.1.0",
"glob": "7.2.3",
+ "https-proxy-agent": "7.0.4",
"inquirer": "8.2.6",
"lodash": "4.17.21",
"reflect-metadata": "0.1.13",
@@ -1946,10 +1952,22 @@
"url": "https://opencollective.com/openapi_generator"
}
},
+ "node_modules/@openapitools/openapi-generator-cli/node_modules/axios": {
+ "version": "1.6.8",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+ "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+ "dev": true,
+ "dependencies": {
+ "follow-redirects": "^1.15.6",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/@openapitools/openapi-generator-cli/node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+ "deprecated": "Glob versions prior to v9 are no longer supported",
"dev": true,
"dependencies": {
"fs.realpath": "^1.0.0",
@@ -3535,6 +3553,18 @@
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
}
},
+ "node_modules/agent-base": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+ "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+ "dev": true,
+ "dependencies": {
+ "debug": "^4.3.4"
+ },
+ "engines": {
+ "node": ">= 14"
+ }
+ },
"node_modules/ajv": {
"version": "8.12.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
@@ -3901,11 +3931,11 @@
}
},
"node_modules/axios": {
- "version": "1.6.5",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
- "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+ "version": "1.7.4",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+ "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
"dependencies": {
- "follow-redirects": "^1.15.4",
+ "follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
@@ -7361,6 +7391,19 @@
"node": ">= 0.12.0"
}
},
+ "node_modules/https-proxy-agent": {
+ "version": "7.0.4",
+ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+ "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+ "dev": true,
+ "dependencies": {
+ "agent-base": "^7.0.2",
+ "debug": "4"
+ },
+ "engines": {
+ "node": ">= 14"
+ }
+ },
"node_modules/human-signals": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
diff --git a/package.json b/package.json
index 1a37b25cfb520f990bf4e8ec6cd33c98bb78009e..1eecb80bb75c8c50d893ae110282d185d2ebe8fc 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"@auth/unstorage-adapter": "^1.6.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
+ "@fontsource/roboto": "^5.0.14",
"@mui/icons-material": "^5.15.19",
"@mui/lab": "^5.0.0-alpha.85",
"@mui/material": "^5.15.19",
@@ -44,7 +45,7 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.1.0",
- "@openapitools/openapi-generator-cli": "^2.9.0",
+ "@openapitools/openapi-generator-cli": "^2.7.0",
"@types/node": "^18.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index 1629ada5623dc4cf793b2865f0f09eddbc5db524..17ba58517e3b6e1cd5db11daf7cde444dcda9415 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,26 +1,23 @@
// import * as React from 'react'
-import { experimentalStyled as styled, alpha } from '@mui/material/styles'
+import React, { useContext } from 'react'
+import { useRouter } from 'next/router'
+import { experimentalStyled as styled } from '@mui/material/styles'
import AppBar from '@mui/material/AppBar'
import Box from '@mui/material/Box'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import Paper from '@mui/material/Paper'
-import Grid from '@mui/material/Grid'
import Avatar from '@mui/material/Avatar'
import IconButton from '@mui/material/IconButton'
import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined'
import LightModeOutlined from '@mui/icons-material/LightModeOutlined'
import { ColorModeContext } from '@contexts'
-import React, { useContext } from 'react'
-import { useRouter } from 'next/router'
import FormControl from '@mui/material/FormControl'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Link from 'next/link'
-import QueryPanel from 'src/components/header/QueryPanel'
-
-const info = ('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.')
+import ContentArea from '@components/ContentArea'
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@@ -38,27 +35,25 @@ export default function Index () {
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
- <Avatar
+ <Avatar
alt="FDO logo graphic"
- src="images/logo-fdo-white.png"></Avatar>
+ src="images/logo-fdo-white.png">
+ </Avatar>
<Typography
variant="h6"
noWrap
component="div"
marginLeft={2}
- sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
- >
+ sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
FDO MANAGER
</Typography>
-
<Stack
direction="row"
width="80%"
justifyContent="flex-end"
alignItems="center"
- gap="14px"
- >
- <FormControl sx={{ minWidth: 64 }}>
+ gap="14px">
+ <FormControl sx={{ minWidth: 64 }}>
<Select
disableUnderline
defaultValue={currentLocale}
@@ -66,71 +61,39 @@ export default function Index () {
variant="standard"
sx={{
color: 'inherit',
- '& .MuiSvgIcon-root': {
- color: 'inherit'
- },
- '& .MuiStack-root > .MuiTypography-root': {
- display: {
- xs: 'none',
- sm: 'block'
- }
- }
- }}
- >
- {[...(locales ?? [])].sort().map((lang: string) => (
- // @ts-expect-error
- <MenuItem
- component={Link}
- href={{ pathname, query }}
- locale={lang}
- selected={currentLocale === lang}
- key={lang}
- defaultValue={lang}
- value={lang}
- >
- <Typography>
- {lang === 'en' ? 'English' : 'German'}
- </Typography>
- </MenuItem>
- ))}
+ '& .MuiSvgIcon-root': { color: 'inherit' },
+ '& .MuiStack-root > .MuiTypography-root': { display: { xs: 'none', sm: 'block' } }
+ }} >
+ {[...(locales ?? [])].sort().map((lang: string) => (
+ // @ts-expect-error
+ <MenuItem
+ component={Link}
+ href={{ pathname, query }}
+ locale={lang}
+ selected={currentLocale === lang}
+ key={lang}
+ defaultValue={lang}
+ value={lang} >
+ <Typography>
+ {lang === 'en' ? 'English' : 'German'}
+ </Typography>
+ </MenuItem>
+ ))}
</Select>
</FormControl>
- </Stack>
+ </Stack>
<Stack marginLeft={2}>
- <IconButton
+ <IconButton
color="inherit"
onClick={() => {
setMode()
- }}
-
- >
+ }} >
{mode === 'dark' ? <LightModeOutlined /> : <DarkModeOutlined />}
</IconButton>
- </Stack>
+ </Stack>
</Toolbar>
</AppBar>
-
- <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
- <Grid item xs={6}>
- <Item>
- <h1>Projektinfo mit Atomgrafik</h1><br />{info}
-
- </Item>
- <Item>
- <QueryPanel/>
-
- </Item>
- </Grid>
- </Grid>
-
- <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
- <Grid item xs={6}>
- <Item><h2>Beispiel Use Case 1</h2>{info}<br/>{info}<br/></Item>
- </Grid>
- <Grid item xs={6}>
- <Item><h2>Beispiel Use Case 2</h2>{info}<br/>{info}<br/></Item>
- </Grid>
- </Grid>
+ <ContentArea/>
</Box>
)
}
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6d9c1c4a1c3d6ea6f85ef3c54ac1bbdc18600571
--- /dev/null
+++ b/src/components/Content.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+export default function Types () {
+ return (
+ <Box sx={{ width: '100%', maxWidth: 500 }}>
+
+ <Typography variant="subtitle1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur
+ </Typography>
+
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+ neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
+ quasi quidem quibusdam.
+ </Typography>
+
+ <Typography variant="button" display="block" gutterBottom>
+ button text
+ </Typography>
+ <Typography variant="caption" display="block" gutterBottom>
+ caption text
+ </Typography>
+ <Typography variant="overline" display="block" gutterBottom>
+ overline text
+ </Typography>
+ </Box>
+ )
+}
diff --git a/src/components/ContentArea.tsx b/src/components/ContentArea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a12d0c4d96ce5c03a760746e0327ac0bbe1d6ca8
--- /dev/null
+++ b/src/components/ContentArea.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { styled } from '@mui/material/styles'
+import Grid from '@mui/material/Grid'
+import Paper from '@mui/material/Paper'
+import Box from '@mui/material/Box'
+import QueryPanel from './header/QueryPanel'
+import Content from 'src/components/Content'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+
+const Item = styled(Paper)(({ theme }) => ({
+ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+ ...theme.typography.body2,
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary
+}))
+
+export default function RowAndColumnSpacing () {
+ return (
+ <Box alignItems="center">
+ <Grid container spacing={2} columns={10} justifyContent="center" alignItems="center" marginTop={2}>
+ <Grid item xs={6}>
+ <Item>
+ <Typography variant="h3" gutterBottom marginTop={2}>
+ Lorem Ipsum Main Heading
+ </Typography><br/>
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
+ neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
+ quasi quidem quibusdam.
+ </Typography><br/>
+ <QueryPanel/><br/><br/>
+ <Divider /><br/><br/>
+ <Typography variant="body1" gutterBottom>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+ blanditiis tenetur unde suscipit.
+ </Typography><br/>
+ <Typography variant="button" display="block" gutterBottom fontSize={19}>
+ Enter FDO Manager
+ </Typography>
+ </Item>
+ </Grid>
+ </Grid>
+
+ <Grid container spacing={2} columns={20} justifyContent="center" alignItems="center" marginTop={2}>
+ <Grid item xs={6}>
+ <Item><Content/></Item>
+ </Grid>
+ <Grid item xs={6}>
+ <Item><Content/></Item>
+ </Grid>
+ </Grid>
+ </Box>
+ )
+}