Create statistics view (#6)

.gitignore

@@ -22,4 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode
+.idea

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-map-gl": "^6.1.1",
     "@types/react-router-dom": "^5.3.1",
+    "@types/react-vis": "^1.11.9",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
     "babel-eslint": "^10.1.0",
@@ -68,6 +69,7 @@
     "react-redux": "^7.2.5",
     "react-refresh": "^0.8.3",
     "react-router-dom": "^5.3.0",
+    "react-vis": "^1.11.7",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.0.5",

src/App.tsx

@@ -1,38 +1,32 @@
 import * as React from 'react';
-import { useState } from 'react';
-import ReactMapGL from 'react-map-gl';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 
+import HomePage from './features/page/home/HomePage';
+import SimulationList from './features/page/simulation-list/SimulationList';
 import SimulationPage from './features/simulation/components/SimulationPage';
+import CompareSimulationsPageWrapper from './features/simulation/statistics/CompareSimulationsPageWrapper';
+import StatisticsPageWrapper from './features/simulation/statistics/StatisticsPageWrapper';
 
-type ViewPort = {
-  width: number;
-  height: number;
-  latitude: number;
-  longitude: number;
-  zoom: number;
-};
 
 function App(): JSX.Element {
-  const [viewport, setViewport] = useState<ViewPort>({
-    width: 1500,
-    height: 1000,
-    latitude: 37.7577,
-    longitude: -122.4376,
-    zoom: 8,
-  });
 
   return (
     <BrowserRouter>
       <Switch>
-        <Route path="/simulations">
+        <Route path="/simulations/all">
+          <SimulationList />
+        </Route>
+        <Route path="/simulations/create">
           <SimulationPage/>
         </Route>
+        <Route path="/simulations/compare">
+          <CompareSimulationsPageWrapper/>
+        </Route>
+        <Route path="/statistics">
+          <StatisticsPageWrapper/>
+        </Route>
         <Route path="/">
-              <ReactMapGL
-          {...viewport}
-          onViewportChange={(nextViewport: ViewPort) => setViewport(nextViewport)}
-      />
+          <HomePage />
         </Route>
       </Switch>
     </BrowserRouter>

src/features/page/home/HomePage.tsx

@@ -0,0 +1,65 @@
+import {
+  Button, Typography, Box, styled, 
+} from '@mui/material';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+
+import CreateSimulationDialog from './dialogs/CreateSimulationDialog';
+
+const MainContainer = styled(Box)(() => ({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  textAlign: 'center',
+}));
+
+const SectionBox = styled(Box)(() => ({
+  margin: '10px',
+}));
+
+const ActionButton = styled(Button)(() => ({
+  padding: '10px',
+  margin: '10px',
+}));
+
+export default function HomePage(): JSX.Element{
+
+  const [newSimulationDialogOpened, setNewSimulationDialogOpened] = useState(false);
+  const history = useHistory();
+
+  const onViewSimulationsClicked = () => {
+    history.push('/simulations/all');
+  };
+
+  return (
+        <MainContainer>
+            <SectionBox>
+                <Typography variant="h1">
+                    Kraksim v2
+                </Typography>
+                <Typography variant="h4">
+                    Traffic Simulator
+                </Typography>
+            </SectionBox>
+            <SectionBox>
+                <ActionButton variant='contained' onClick={() => setNewSimulationDialogOpened(true)}>
+                    Create new simulation
+                </ActionButton>
+                <CreateSimulationDialog 
+                  open={newSimulationDialogOpened} 
+                  onClose={() => setNewSimulationDialogOpened(false)} 
+                />
+                <ActionButton variant='contained' onClick={onViewSimulationsClicked}>
+                    View simulation statistics
+                </ActionButton>
+                <ActionButton variant='contained'>
+                    Compare simulations
+                </ActionButton>
+            </SectionBox>
+        </MainContainer>
+  );
+}

src/features/page/home/dialogs/CreateSimulationDialog.tsx

@@ -0,0 +1,48 @@
+import {
+  Dialog, 
+  DialogTitle, 
+  DialogContent, 
+  DialogContentText, 
+  DialogActions, 
+  Button, 
+  DialogProps, 
+  Select, 
+  MenuItem, 
+} from '@mui/material';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useGetAllMapsBasicInfoQuery } from '../../../map/mapApi';
+
+export default function CreateSimulationDialog({ open, onClose }: DialogProps): JSX.Element{
+
+  const { data } = useGetAllMapsBasicInfoQuery();
+  const [mapId, setMapId] = useState(''); 
+  const history = useHistory();
+
+  const handleClick = () => {
+    history.push(`/simulations/create?mapId=${mapId}`);
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+        <DialogTitle>Select Map</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            To create a simulation, select a map for it
+          </DialogContentText>
+            <Select
+                id="select-map"
+                value={mapId}
+                label="Map"
+                onChange={(e) => setMapId(e.target.value)}
+            >
+            {data?.map(({ id, name }) => <MenuItem key={id} value={id}>{name}</MenuItem>)}
+            </Select>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClick} disabled={mapId.length === 0}>Confirm</Button>
+        </DialogActions>
+    </Dialog>
+  );
+}

src/features/page/simulation-list/SimulationList.tsx

@@ -0,0 +1,39 @@
+import {
+  TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, 
+} from '@mui/material';
+import React from 'react';
+
+import { useGetAllSimulationsQuery } from '../../simulation/simulationApi';
+
+export default function SimulationList() : JSX.Element {
+
+  const { data } = useGetAllSimulationsQuery();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>ID</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Map ID</TableCell>
+            <TableCell>Type</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data?.map((row) => (
+            <TableRow
+              key={row.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell>{row.id}</TableCell>
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.mapId}</TableCell>
+              <TableCell>{row.type}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/features/simulation/components/form/SimulationFormWrapper.tsx

@@ -1,33 +1,19 @@
-import { InputLabel, MenuItem } from '@mui/material';
-import React, { useState } from 'react';
+import React from 'react';
 
-import { useGetAllMapsBasicInfoQuery } from '../../../map/mapApi';
+import { useUrlParamsQuery } from '../../../common/hooks';
 
-import { FormSelect } from './common';
 import CreateSimulationForm from './CreateSimulationForm';
 
 
 export default function SimulationFormWrapper(): JSX.Element{
 
-  const { data } = useGetAllMapsBasicInfoQuery();
-  const [selectedMapId, setSelectedMapId] = useState('');
-  const parsedId = selectedMapId === '' ? null : parseInt(selectedMapId);
+  const selectedMapId = useUrlParamsQuery().get('mapId');
+  const parsedId = selectedMapId === null ? null : parseInt(selectedMapId);
   return (
         <div>
-            { data && 
-              <div>
-                <h1>Select Map for a new Simulation</h1>
-                <InputLabel htmlFor="mapId">Map</InputLabel>
-                <FormSelect 
-                  name="mapId"
-                  value={selectedMapId} 
-                  onChange={(e) => setSelectedMapId(e.target.value as string)} 
-                  label="Map">
-                  {data.map(({ id, name }) => <MenuItem value={id}>{name}</MenuItem>)}
-                </FormSelect>
-              </div>
-            }
-            {parsedId && <CreateSimulationForm mapId={parsedId}/>}
+            {parsedId ? 
+            <CreateSimulationForm mapId={parsedId}/> : 
+            <div>Sorry, no valid mapId found in querystring</div>}
         </div>
   );
 }