added waiting time component, fixed waiting time back routes, added front .env

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

backend/db/crud.py

@@ -18,3 +18,9 @@ def create_record(new_record: schemas.RecordBase, db: Session):
     db.commit()
     db.refresh(db_record)
     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

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
 

frontend/.env.template

+REACT_APP_BASE_URL_BACK=http://localhost:3001/api
+REACT_APP_BASE_URL_FRONT=http://localhost:3000
\ No newline at end of file

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": {

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",

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>

frontend/src/components/WaitingTime.js

+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>
+    )
+}

frontend/src/components/index.js

 export { default as Header } from "./Header"
 export { default as Footer } from "./Footer"
 export { default as Timetable } from "./Timetable"
+export { default as WaitingTime } from "./WaitingTime"
\ No newline at end of file

frontend/src/styles/Timetable.css

+.timetable{
+    display: inline-block;
+    border-radius: 5px;
+    width: 500px;
+    text-align: center;
+    margin-top: 50px;
+}
\ No newline at end of file

frontend/src/styles/WaitingTime.css

+.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

frontend/src/views/Eiffel.js

 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