front merge

hivaze · Nov 6, 2021 · dac8ec6 · dac8ec6
1 parent d371572
commit dac8ec6
Show file tree

Hide file tree

Showing 11 changed files with 1,313 additions and 457 deletions.
diff --git a/front/README.md b/front/README.md
@@ -9,7 +9,7 @@ In the project directory, you can run:
 ### `yarn start`
 
 Runs the app in the development mode.\
-Open [http://localhost:1022](http://localhost:1022) to view it in the browser.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.

diff --git a/front/package.json b/front/package.json
@@ -1,56 +1,51 @@
 {
-    "name": "reac-app",
-    "version": "0.1.0",
-    "private": true,
-    "dependencies": {
-        "@2gis/mapgl": "^1.19.1",
-        "@mapbox/mapbox-gl-language": "^1.0.0",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^12.1.2",
-        "@testing-library/user-event": "^13.5.0",
-        "axios": "^0.23.0",
-        "google-map-react": "^2.1.10",
-        "leaflet": "^1.7.1",
-        "mapbox-gl": "^2.5.1",
-        "react": "^17.0.2",
-        "react-date-picker": "^8.3.4",
-        "react-datepicker": "^4.3.0",
-        "react-dom": "^17.0.2",
-        "react-google-maps": "^9.4.5",
-        "react-leaflet": "3.2.0",
-        "react-map-gl": "^6.1.17",
-        "react-mapbox-gl": "^5.1.1",
-        "react-modal": "^3.14.3",
-        "react-scripts": "^4.0.3",
-        "react-select": "^5.1.0",
-        "react-simple-maps": "^2.3.0",
-        "web-vitals": "^2.1.2"
-    },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "devDependencies": {
-        "yarn-upgrade-all": "^0.5.4"
-    }
-}
+  "name": "reac-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@wojtekmaj/react-daterange-picker": "^3.3.2",
+    "axios": "^0.23.0",
+    "mapbox-gl": "^2.5.1",
+    "react": "^17.0.2",
+    "react-date-range": "^1.4.0",
+    "react-dom": "^17.0.2",
+    "react-map-gl": "^6.1.17",
+    "react-mapbox-gl": "^5.1.1",
+    "react-modal": "^3.14.3",
+    "react-scripts": "^4.0.3",
+    "react-scroll": "^1.8.4",
+    "react-select": "^5.1.0",
+    "react-simple-maps": "^2.3.0",
+    "web-vitals": "^2.1.2"
+  },
+  "scripts": {
+    "start": "set PORT=1022 && react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "yarn-upgrade-all": "^0.5.4"
+  }
+}
diff --git a/front/src/list-component/list.css b/front/src/list-component/list.css
@@ -6,6 +6,10 @@
     box-sizing: border-box;
 }
 
+.Focus {
+    border: 3px solid red !important;
+}
+
 .listDiv {
     min-width: 600px;
     max-width: 600px;

diff --git a/front/src/list-component/list.js b/front/src/list-component/list.js
@@ -1,41 +1,62 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import './list.css';
-const API_URL = process.env.REACT_APP_API_URL || "http://localhost:1022";
 
-export default class ListComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        let dataTemp = this.props.data;
-        const data = dataTemp.data;
-        const action = this.props.action
-        console.log(data);
-        return (
-            <div className="listContainer">
-                <div className="listDiv">
-                    {data !== null ?
-                        data.map((el) => (
-                            <button ket={el.filename} className="listButton">
-                                {el.address !== '' ?
-                                    <p className="listAddress">
-                                        {el.address}
-                                    </p>
-                                    : null}
+export default function ListComponent(props) {
+    const data = props.data.data;
+    const action = props.action1;
+    const [markerId, setMarkerId] = useState('');
+    const setLat = props.setLat;
+    const setLng = props.setLng;
+
+    let options = {
+        year: 'long',
+        month: 'long',
+        day: 'long',
+        timezone: 'UTC'
+    };
+
+    let map = props.map;
+
+    console.log(data);
+    return (
+        <div className="listContainer">
+            <div className="listDiv" id={'list_container'}>
+                {data !== [] && data !== undefined && data !== null ? data.map((el, index) => (
+                    el.timestamp !== 0 && el.lonlat[0] !== 0 && el.lonlat[1] !== 0 ?
+                        <button name={'img_' + index} id={index} key={el.filename} className="listButton"
+                                onClick={() => {
+                                    setLng(el.lonlat[0]);
+                                    setLat(el.lonlat[1]);
+                                    if (markerId !== '' && markerId !== null) {
+                                        document.getElementById('marker_' + markerId).classList.remove("FocusMarker");
+                                    }
+                                    setMarkerId(index);
+                                    document.getElementById('marker_' + index).classList.add('FocusMarker');
+                                }}
+                        >
+                            {el.address !== '' ?
                                 <p className="listAddress">
-                                    {el.timestamp}
+                                    {el.address}
                                 </p>
-                                <img src={`http://${API_URL}/api/image/` + el.filename} alt="" />
-                            </button>
-                        ))
-                        : null}
-                </div>
-                <div className="listResetDiv">
-                    <button className="listReset" onClick={action}>
-                        Попробовать еще раз
-                    </button>
-                </div>
+                                : null}
+                            <p className="listAddress">
+                                {new Date(el.timestamp * 1000).toLocaleDateString()}
+                            </p>
+                            {el.breed !== "" ?
+                                <p>
+                                    {el.breed}
+                                </p>
+                            : null}
+                            <img src={"http://5.228.244.67:1022/api/image/" + el.filename} alt=""/>
+                        </button>
+                        : null
+                )) : null}
+            </div>
+            <div className="listResetDiv">
+                <button className="listReset" onClick={() => action(undefined)}>
+                    Попробовать еще раз
+                </button>
             </div>
-        )
-    }
-}
+        </div>
+    )
+}