Skip to content

RECIRCLE / frontend-pilot

Go to a project
Commit 75b4454a by Chif Gergő
Options

Add router and Detail page

parent 9ec117c0
Showing with 187 additions and 36 deletions
package-lock.json
......@@ -3647,6 +3647,15 @@
"sha.js": "^2.4.8"
}
},
"create-react-context": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
"integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
"requires": {
"fbjs": "^0.8.0",
"gud": "^1.0.0"
}
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
......@@ -5682,6 +5691,11 @@
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"gzip-size": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
......@@ -5856,6 +5870,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
"integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^2.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^0.4.0"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
......@@ -10292,6 +10319,52 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-router": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz",
"integrity": "sha512-6EQDakGdLG/it2x9EaCt9ZpEEPxnd0OCLBHQ1AcITAAx7nCnyvnzf76jKWG1s2/oJ7SSviUgfWHofdYljFexsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"create-react-context": "^0.2.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.0.tgz",
"integrity": "sha512-wSpja5g9kh5dIteZT3tUoggjnsa+TPFHSMrpHXMpFsaHhQkm/JNVGh2jiF9Dkh4+duj4MKCkwO6H08u6inZYgQ==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.0.tgz",
......@@ -10696,6 +10769,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"resolve-pathname": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
......@@ -11826,6 +11904,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-invariant": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
"integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
},
"tiny-warning": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
"integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
......@@ -12268,6 +12356,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......
package.json
......@@ -7,6 +7,8 @@
"grommet-controls": "^1.1.19",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0",
"typeface-roboto": "0.0.54"
......
src/views/App.js
import React, { useState } from "react";
import { Grommet, Box, ResponsiveContext, Grid } from "grommet";
import { Grommet, Box, ResponsiveContext } from "grommet";
import theme from "../style/Theme";
import PageHeader from "./PageHeader";
import SideMenu from "./SideMenu";
import InstanceView from "./InstanceView";
import TemplateView from "./TemplateView";
import Main from "./Main";
import { BrowserRouter as Router} from "react-router-dom";
function App() {
const [showSideBar, setShowSideBar] = useState(false);
return (
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
<Box fill>
<PageHeader
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
/>
<Box direction="row" flex overflow={{ horizontal: "hidden" }}>
<SideMenu
<Router>
<Grommet theme={theme} full>
<ResponsiveContext.Consumer>
{size => (
<Box fill>
<PageHeader
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
/>
<Grid
areas={[
{ name: "instances", start: [0, 0], end: [0, 0] },
{ name: "templates", start: [1, 0], end: [1, 0] }
]}
columns={["flex", "flex"]}
rows={["flex"]}
gap="small"
margin="small"
>
<Box gridArea="instances">
<InstanceView size={size} />
</Box>
<Box gridArea="templates">
<TemplateView size={size} />
</Box>
</Grid>
<Box direction="row" flex overflow={{ horizontal: "hidden" }}>
<SideMenu
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
/>
<Main size={size}/>
</Box>
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
)}
</ResponsiveContext.Consumer>
</Grommet>
</Router>
);
}
......
src/views/Home.js 0 → 100644
import React from 'react'
import { Grid, Box } from 'grommet'
import InstanceView from './InstanceView'
import TemplateView from './TemplateView'
const Main = (props) => {
return(<Grid
areas={[
{ name: "instances", start: [0, 0], end: [0, 0] },
{ name: "templates", start: [1, 0], end: [1, 0] }
]}
columns={["flex", "flex"]}
rows={["flex"]}
gap="small"
margin="small"
>
<Box gridArea="instances">
<InstanceView size={props.size} />
</Box>
<Box gridArea="templates">
<TemplateView size={props.size} />
</Box>
</Grid>);
}
export default Main;
\ No newline at end of file
src/views/InstanceDetail.js 0 → 100644
import React, { useState, useEffect } from 'react'
import { Heading } from 'grommet'
export const InstanceDetail = ({match}) => {
const [instance, setInstance] = useState({})
useEffect(() => {
console.log(match.params.instanceid)
fetch("http://vm.niif.cloud.bme.hu:20778/api/v1/instances/"+match.params.instanceid)
.then((data) => data.json())
.then((data) => setInstance(data))
}, [])
return(
<div>
<Heading >Name: {instance.name}</Heading>
<Heading >Description: {instance.description}</Heading>
<Heading >Access method:{instance.access_method}</Heading>
<Heading >System: {instance.system}</Heading>
<Heading >Suspend at: {instance.time_of_suspend}</Heading>
<Heading >Delete at: {instance.time_of_delete}</Heading>
</div>
);
}
export default InstanceDetail;
src/views/InstanceView.js
......@@ -3,8 +3,9 @@ import { Box, Heading, Button } from "grommet";
import { Card } from "grommet-controls";
import LoadingWrapper from "./LoadingWrapper";
import { ChapterAdd } from "grommet-icons";
import { withRouter } from "react-router"
const InstanceView = () => {
const InstanceView = ({history}) => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
......@@ -38,6 +39,7 @@ const InstanceView = () => {
elevation="medium"
pad="medium"
border={{ size: "none" }}
onClick= {() => history.push('/instance/' + e.id)}
>
<Card.CardTitle>{e.name}</Card.CardTitle>
<Card.CardContent>{e.name}</Card.CardContent>
......@@ -48,4 +50,4 @@ const InstanceView = () => {
);
};
export default InstanceView;
export default withRouter(InstanceView);
src/views/Main.js 0 → 100644
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home'
import InstanceDetail from "./InstanceDetail"
const Main = (props) => {
return(
<Switch>
<Route exact path="/" component={Home} />
<Route path="/instance/:instanceid" component={InstanceDetail} />
</Switch>
);
}
export default Main;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment