From 6049ec998343788996f83b4eb240d3501dbd106a Mon Sep 17 00:00:00 2001
From: Aymeric Chaumont <aymeric.chaumont@student-cs.fr>
Date: Tue, 5 Jul 2022 16:04:50 +0200
Subject: [PATCH] added waiting time component, fixed waiting time back routes,
added front .env
---
backend/.env.template | 2 +-
backend/db/crud.py | 8 ++-
backend/docker-compose.yml | 2 +-
backend/main.py | 2 +-
frontend/.env.template | 2 +
frontend/package-lock.json | 72 +++++++++++++++++++++-----
frontend/package.json | 1 +
frontend/src/components/Timetable.js | 2 +-
frontend/src/components/WaitingTime.js | 26 ++++++++++
frontend/src/components/index.js | 3 +-
frontend/src/styles/Timetable.css | 7 +++
frontend/src/styles/WaitingTime.css | 19 +++++++
frontend/src/views/Eiffel.js | 14 ++++-
13 files changed, 140 insertions(+), 20 deletions(-)
create mode 100644 frontend/.env.template
create mode 100644 frontend/src/components/WaitingTime.js
create mode 100644 frontend/src/styles/WaitingTime.css
diff --git a/backend/.env.template b/backend/.env.template
index 87b242d..3c404ba 100644
--- a/backend/.env.template
+++ b/backend/.env.template
@@ -6,4 +6,4 @@ MYSQL_ROOT_PASSWORD=rootpassword
DB_HOST=localhost
DB_PORT=3306
-WEB_ROOT=http://localhost:8000
\ No newline at end of file
+WEB_ROOT=http://localhost:3000
\ No newline at end of file
diff --git a/backend/db/crud.py b/backend/db/crud.py
index b90c047..02e961e 100644
--- a/backend/db/crud.py
+++ b/backend/db/crud.py
@@ -17,4 +17,10 @@ def create_record(new_record: schemas.RecordBase, db: Session):
db.add(db_record)
db.commit()
db.refresh(db_record)
- return db_record
\ No newline at end of file
+ return db_record
+
+
+def get_waiting_time(place: str, db: Session):
+ """ Get the last estimated waiting time for the given place """
+ db_record = db.query(models.Records).filter(models.Records.place == place).order_by(models.Records.date.desc()).one()
+ return db_record.waiting_time
diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml
index 76308ff..1ef4211 100644
--- a/backend/docker-compose.yml
+++ b/backend/docker-compose.yml
@@ -8,7 +8,7 @@ services:
env_file: .env
command: ["mysqld", "--authentication-policy=mysql_native_password"]
ports:
- - "3306:3306"
+ - "3307:3306"
volumes:
- mysql-db:/var/lib/mysql
diff --git a/backend/main.py b/backend/main.py
index 5aeddc9..c808a6f 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -89,4 +89,4 @@ async def estimate_(id: str) -> float:
pred_map = np.squeeze(model.predict(input_image))
count_prediction = np.sum(pred_map)
return count_prediction
-"""
\ No newline at end of file
+"""
diff --git a/frontend/.env.template b/frontend/.env.template
new file mode 100644
index 0000000..7a3df20
--- /dev/null
+++ b/frontend/.env.template
@@ -0,0 +1,2 @@
+REACT_APP_BASE_URL_BACK=http://localhost:3001/api
+REACT_APP_BASE_URL_FRONT=http://localhost:3000
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9f7ff56..992e115 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^14.2.0",
+ "axios": "^0.27.2",
"bootstrap": "^5.1.3",
"eslint": "^8.18.0",
"history": "^5.3.0",
@@ -5737,6 +5738,28 @@
"node": ">=12"
}
},
+ "node_modules/axios": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+ "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+ "dependencies": {
+ "follow-redirects": "^1.14.9",
+ "form-data": "^4.0.0"
+ }
+ },
+ "node_modules/axios/node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7938,14 +7961,6 @@
"tslib": "^2.0.3"
}
},
- "node_modules/dotenv": {
- "version": "10.0.0",
- "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
- "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
- "engines": {
- "node": ">=10"
- }
- },
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -16536,6 +16551,14 @@
}
}
},
+ "node_modules/react-scripts/node_modules/dotenv": {
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+ "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/react-side-effect": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
@@ -24982,6 +25005,27 @@
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
"integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
},
+ "axios": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+ "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+ "requires": {
+ "follow-redirects": "^1.14.9",
+ "form-data": "^4.0.0"
+ },
+ "dependencies": {
+ "form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "requires": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ }
+ }
+ }
+ },
"axobject-query": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -26627,11 +26671,6 @@
"tslib": "^2.0.3"
}
},
- "dotenv": {
- "version": "10.0.0",
- "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
- "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
- },
"dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -32951,6 +32990,13 @@
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
+ },
+ "dependencies": {
+ "dotenv": {
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+ "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+ }
}
},
"react-side-effect": {
diff --git a/frontend/package.json b/frontend/package.json
index def2739..2591c0b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^14.2.0",
+ "axios": "^0.27.2",
"bootstrap": "^5.1.3",
"eslint": "^8.18.0",
"history": "^5.3.0",
diff --git a/frontend/src/components/Timetable.js b/frontend/src/components/Timetable.js
index 23a123a..92a0911 100644
--- a/frontend/src/components/Timetable.js
+++ b/frontend/src/components/Timetable.js
@@ -7,7 +7,7 @@ import styles from "../styles/Timetable.css"
export default function Timetable (schedule) {
const timetable = schedule.schedule;
return(
- <div style={{ borderRadius: '5px', width: '500px', textAlign: 'center' }}>
+ <div className = "timetable">
<Table className="table table-striped table-bordered">
<tbody>
<tr>
diff --git a/frontend/src/components/WaitingTime.js b/frontend/src/components/WaitingTime.js
new file mode 100644
index 0000000..a2401b5
--- /dev/null
+++ b/frontend/src/components/WaitingTime.js
@@ -0,0 +1,26 @@
+import React from "react"
+import axios from "axios"
+
+import styles from "../styles/WaitingTime.css"
+
+
+export default function WaitingTime({place}) {
+ const baseURL = process.env.REACT_APP_BASE_URL_BACK + '/' + place + "/waiting_time";
+ const [post, setPost] = React.useState(null);
+
+ React.useEffect(() => {
+ axios.get(baseURL).then((response) => {
+ setPost(Math.round(response.data / 60));
+ console.log(response.data)
+ });
+ }, []);
+
+ if (!post) return null;
+ return (
+ <div className="parent">
+ <div className="waiting-time">
+ Temps d'attente estimé à <b>{post} minutes</b>.
+ </div>
+ </div>
+ )
+}
diff --git a/frontend/src/components/index.js b/frontend/src/components/index.js
index 6c78013..02b59c9 100644
--- a/frontend/src/components/index.js
+++ b/frontend/src/components/index.js
@@ -1,3 +1,4 @@
export { default as Header } from "./Header"
export { default as Footer } from "./Footer"
-export { default as Timetable } from "./Timetable"
\ No newline at end of file
+export { default as Timetable } from "./Timetable"
+export { default as WaitingTime } from "./WaitingTime"
\ No newline at end of file
diff --git a/frontend/src/styles/Timetable.css b/frontend/src/styles/Timetable.css
index e69de29..fe1502d 100644
--- a/frontend/src/styles/Timetable.css
+++ b/frontend/src/styles/Timetable.css
@@ -0,0 +1,7 @@
+.timetable{
+ display: inline-block;
+ border-radius: 5px;
+ width: 500px;
+ text-align: center;
+ margin-top: 50px;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/WaitingTime.css b/frontend/src/styles/WaitingTime.css
new file mode 100644
index 0000000..34caaad
--- /dev/null
+++ b/frontend/src/styles/WaitingTime.css
@@ -0,0 +1,19 @@
+.parent{
+ display: flex;
+ justify-content: center;
+}
+
+.waiting-time{
+ display: block;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ font-size: large;
+ border: solid;
+ border-radius: 20px;
+ border-width: 2px;
+ padding: 10px;
+ max-width: 500px;
+ justify-content: center;
+ padding-left: 30px;
+ padding-right: 30px;
+}
\ No newline at end of file
diff --git a/frontend/src/views/Eiffel.js b/frontend/src/views/Eiffel.js
index 50cb1ff..f05bf46 100644
--- a/frontend/src/views/Eiffel.js
+++ b/frontend/src/views/Eiffel.js
@@ -1,6 +1,7 @@
import React from "react"
import Timetable from "../components/Timetable"
+import WaitingTime from "../components/WaitingTime"
export default function Eiffel(props) {
@@ -9,7 +10,18 @@ export default function Eiffel(props) {
<h2>
RU Eiffel
</h2>
- <Timetable schedule={ {'LundiMidi': '11h30 - 13h'} }/>
+ <WaitingTime place="eiffel" />
+ <Timetable schedule={ {
+ 'LundiMidi': '11h30 - 14h',
+ 'LundiSoir': '18h30 - 21h',
+ 'MardiMidi': '11h30 - 14h',
+ 'MardiSoir': '18h30 - 21h',
+ 'MercrediMidi': '11h30 - 14h',
+ 'MercrediSoir': '18h30 - 21h',
+ 'JeudiMidi': '11h30 - 14h',
+ 'JeudiSoir': '18h30 - 21h',
+ 'VendrediMidi': '11h30 - 14h',
+ 'VendrediSoir': '18h30 - 21h'} }/>
</div>
)
}
\ No newline at end of file
--
GitLab