Merge pull request #8 from williamquintas/development

v1.0.0
Ateixs · May 17, 2022 · 5721b28 · 5721b28
2 parents f237753 + f95f1a2
commit 5721b28
Show file tree

Hide file tree

Showing 39 changed files with 9,820 additions and 28,042 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_GOOGLE_API_KEY = "string"
diff --git a/.gitignore b/.gitignore
@@ -14,10 +14,12 @@
 # misc
 .DS_Store
 .env.local
+.env.development
 .env.development.local
 .env.test.local
 .env.production.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,24 +3,28 @@
   "version": "0.1.0",
   "private": false,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@googlemaps/react-wrapper": "^1.1.33",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.7.0",
+    "@types/google.maps": "^3.48.8",
+    "@types/node": "^17.0.32",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "papaparse": "^5.3.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "6",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "typescript": "^4.6.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-scripts start"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,22 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Paths viewer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -0,0 +1,49 @@
+import { Box } from "@mui/material";
+import { FunctionComponent, useState } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import FilesSelectionPage from "../../pages/FilesSelection/FilesSelection";
+import MapViewerPage from "../../pages/MapViewer/MapViewer";
+import Footer from "../Footer/Footer";
+import Header from "../Header/Header";
+
+export interface ICoordinatesData {
+  date?: string;
+  time?: string;
+  id?: string;
+  line?: string;
+  latitude?: string;
+  longitude?: string;
+  speed?: string;
+}
+export interface IFile {
+  filename: string;
+  color: string;
+  data?: ICoordinatesData[];
+}
+
+const App: FunctionComponent = () => {
+  const [files, setFiles] = useState<IFile[]>([]);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+      }}
+    >
+      <Header />
+      <Routes>
+        <Route
+          path="/"
+          element={<FilesSelectionPage files={files} setFiles={setFiles} />}
+        />
+        <Route path="/map" element={<MapViewerPage files={files} />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+      <Footer />
+    </Box>
+  );
+};
+
+export default App;
diff --git a/src/components/ColorPicker/ColorPicker.css b/src/components/ColorPicker/ColorPicker.css
@@ -0,0 +1,18 @@
+.color-picker {
+  margin-left: 8px;
+}
+
+.color-picker div {
+  display: flex !important;
+}
+
+label#color-picker-label {
+  padding-left: 10px;
+}
+
+.color-circle {
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  margin-right: 8px;
+}
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,68 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+import { FunctionComponent } from "react";
+import "./ColorPicker.css";
+
+export const Colors = {
+  Gray: "#212529",
+  Red: "#c92a2a",
+  Pink: "#a61e4d",
+  Grape: "#862e9c",
+  Violet: "#5f3dc4",
+  Indigo: "#364fc7",
+  Blue: "#1864ab",
+  Cyan: "#0b7285",
+  Teal: "#087f5b",
+  Green: "#2b8a3e",
+  Lime: "#5c940d",
+  Yellow: "#e67700",
+  Orange: "#d9480f",
+};
+
+interface ColorPickerProps {
+  selectedColor: string;
+  onChangeColor: (evt: SelectChangeEvent) => void;
+}
+
+const ColorPicker: FunctionComponent<ColorPickerProps> = ({
+  selectedColor,
+  onChangeColor,
+}) => {
+  return (
+    <FormControl sx={{ m: 1, minWidth: 120 }}>
+      <InputLabel id="color-picker-label">Color</InputLabel>
+      <Select
+        size="small"
+        labelId="color-picker-label"
+        className="color-picker"
+        label="Color"
+        value={selectedColor}
+        onChange={onChangeColor}
+      >
+        {Object.keys(Colors).map((color) => (
+          <MenuItem
+            key={color}
+            value={Colors[color]}
+            sx={{
+              color: Colors[color],
+            }}
+          >
+            <div
+              className="color-circle"
+              style={{
+                backgroundColor: Colors[color],
+              }}
+            ></div>
+            {color}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+export default ColorPicker;
diff --git a/src/components/CoordinatesList/CoordinatesList.tsx b/src/components/CoordinatesList/CoordinatesList.tsx
@@ -0,0 +1,50 @@
+import { Circle, ExpandLess, ExpandMore } from "@mui/icons-material";
+import {
+  Collapse,
+  Container,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import { Fragment, FunctionComponent, useState } from "react";
+import { IFile } from "../App/App";
+
+interface CoordinatesListProps {
+  file: IFile;
+}
+const CoordinatesList: FunctionComponent<CoordinatesListProps> = ({ file }) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { filename, data, color } = file;
+
+  return (
+    <Fragment>
+      <ListItemButton
+        onClick={() => {
+          setOpen(!open);
+        }}
+        sx={{ backgroundColor: "#f1f3f5" }}
+      >
+        <ListItemIcon sx={{ minWidth: 0, mr: 2, color }}>
+          <Circle fontSize="small" />
+        </ListItemIcon>
+        <ListItemText primary={filename} />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <Container sx={{ maxHeight: 200, overflow: "auto" }}>
+          <List component="div" disablePadding>
+            {data?.map((row, index) => (
+              <ListItemText
+                key={`coordinate-${index}`}
+                primary={`${row.latitude}, ${row.longitude}`}
+              />
+            ))}
+          </List>
+        </Container>
+      </Collapse>
+    </Fragment>
+  );
+};
+
+export default CoordinatesList;
diff --git a/src/components/FileUploadButton/FileUploadButton.css b/src/components/FileUploadButton/FileUploadButton.css
@@ -0,0 +1,3 @@
+input {
+  display: none;
+}