jo4marseille · razorbak10 · Nov 14, 2022 · Nov 14, 2022 · Nov 14, 2022 · Nov 14, 2022
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
+    "bootstrap-cards": "^1.16.0",
+    "mapbox-gl": "^2.11.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-map-gl": "^7.0.19",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +40,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "css-loader": "^6.7.2",
+    "style-loader": "^3.3.1"
   }
 }
diff --git a/front/public/index.html b/front/public/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -10,11 +11,17 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
+<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <!--
       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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/front/src/App.js b/front/src/App.js
@@ -1,25 +1,36 @@
 import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+
+import './assets/App.css';
+import Bio from './components/Bio';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import MapRtm from './components/MapRtm';
+import Tri from './components/Tri';
+import Card from './components/Card';
 
 function App() {
+
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+<Router>
+
+<Switch>
+    <Route exact path="/bio" component={Bio}></Route>
+    <Route exact path="/footer" component={Footer}></Route>
+    <Route exact path="/header" component={Header}></Route>
+    <Route exact path="/MapRtm" component={MapRtm}></Route>
+    <Route exact path="/tri" component={Tri}></Route>
+    <Route exact path="/card" component={Card}></Route>
+
+
+
+
+  </Switch>
+</Router>
   );
 }
 
 export default App;
+
+
diff --git a/front/src/App.test.js b/front/src/App.test.js
diff --git a/front/src/App.css → front/src/assets/App.css b/front/src/App.css → front/src/assets/App.css
diff --git a/front/src/assets/Header.css b/front/src/assets/Header.css
@@ -0,0 +1,42 @@
+.my-navbar {
+  height: 80px;
+  width: 100%;
+  background-color: #00A651;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-family: 'Poppins', sans-serif;
+}
+
+.navbar-container {
+  display: flex;
+  flex: 1 1;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30px;
+}
+
+a > img {
+  max-width: 280px;
+}
+
+ul {
+  list-style: none;
+  display: flex;
+}
+
+ul > li {
+ padding: 15px;
+}
+
+li > a {
+  text-decoration: none;
+  color: white;
+}
+
+li > a:hover {
+  font-weight: 600;
+  border-bottom: white solid 2px;
+  color: white;
+}
diff --git a/front/src/assets/MapBio.css b/front/src/assets/MapBio.css
@@ -0,0 +1,3 @@
+.map-container {
+    height: 400px;
+    }
diff --git a/front/src/assets/footer.css b/front/src/assets/footer.css
@@ -0,0 +1,32 @@
+.footer {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border: 1px solid #707070;
+  padding-bottom: 40px;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  flex-basis: 30%;
+  text-align: center;
+  padding: 10px;
+}
+
+.footer img {
+  height: 70px;
+  object-fit: contain;
+}
+
+.smaller {
+  height: 40px !important;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
diff --git a/front/src/assets/images/AWS.png b/front/src/assets/images/AWS.png
diff --git a/front/src/assets/images/code4marseille.png b/front/src/assets/images/code4marseille.png
diff --git a/front/src/assets/images/conso.png b/front/src/assets/images/conso.png
diff --git a/front/src/assets/images/departement13.png b/front/src/assets/images/departement13.png
diff --git a/front/src/assets/images/geoloc-marker.png b/front/src/assets/images/geoloc-marker.png
diff --git a/front/src/assets/images/inco.png b/front/src/assets/images/inco.png
diff --git a/front/src/assets/images/logo_jo4marseille.png b/front/src/assets/images/logo_jo4marseille.png
diff --git a/front/src/assets/images/marina-marker.png b/front/src/assets/images/marina-marker.png
diff --git a/front/src/assets/images/metro-marker.png b/front/src/assets/images/metro-marker.png
diff --git a/front/src/assets/images/provencetourisme.png b/front/src/assets/images/provencetourisme.png
diff --git a/front/src/assets/images/tram-marker.png b/front/src/assets/images/tram-marker.png
diff --git a/front/src/assets/images/velodrome-marker.png b/front/src/assets/images/velodrome-marker.png
diff --git a/front/src/assets/images/voyage_prive.png b/front/src/assets/images/voyage_prive.png
diff --git a/front/src/components/Bio.js b/front/src/components/Bio.js
@@ -0,0 +1,82 @@
+import React, {useState, useEffect, useReducer} from 'react'
+import MapBio from './MapBio';
+import './bio.css'
+
+
+function Bio() {
+
+    const [data, setData] = useState({});
+    const [fin, setFin] = useState([]);
+    const [lng, setLng] = useState(5.385010);
+const [lat, setLat] = useState(43.267833);
+const [zoom, setZoom] = useState(13);
+
+
+
+
+    useEffect(() => {
+
+        const requestOptions = {
+            method: 'GET',
+        };
+        fetch('https://opendata.agencebio.org/api/gouv/operateurs/?activite=Restauration&lat=43.296482&lng=5.36978&nb=50&filtrerRestaurants=1', requestOptions)
+            .then(response => response.json())
+            .then((response) => {
+              console.log(response);
+              setData(response)
+                let final = []
+                response.items.map((data) => {
+                    final.push({
+                      "type" : "Restaurant",
+                      "nom"  : data.denominationcourante,
+                      "latitude" : data.adressesOperateurs[0].lat,
+                      "longitude":data.adressesOperateurs[0].long,
+                      "adresse": data.adressesOperateurs[0].ville + " , " + data.adressesOperateurs[0].codePostal
+                    }
+                    )
+                })
+                setFin(final)
+                console.log(final)
+
+            }).catch(function(error) {
+              console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
+            });
+
+    }, [])
+
+const findLoc = (lon, lat, zoom, event) => {
+  event.preventDefault()
+setLng(lon)
+setLat(lat)
+setZoom(zoom)
+console.log(lon, lat, zoom)
+}
+
+  return (
+
+    <div> <h1 style={{fontFamily: "'Poppins', sans-serif"}}>Restaurants BIO :</h1>
+
+    <div className='row'>
+
+    <div className='col-6 border'> <div className='listbox'>
+{fin.map((data) => {
+return (<div> <div className="card" >
+<div className="card-body">
+  <h5 className="card-title">{data.nom}</h5>
+  <h6 className="card-title">{data.adresse}</h6>
+  <button className="btn btn-dark" onClick={(e) => findLoc(data.longitude,data.latitude, 14,e)} >Find Location</button>
+</div>
+</div></div>)
+})}</div>
+</div>
+    <div className='col-6' id='staticMap'><MapBio lon={lng} lat ={lat} zoom ={zoom}/></div>
+
+    </div>
+
+
+
+    </div>
+  )
+}
+
+export default Bio
diff --git a/front/src/components/Card.js b/front/src/components/Card.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+import Card from 'react-bootstrap/Card';
+import Map from './MapRtm';
+import MapBio from './Bio';
+
+
+function FinalCard() {
+  return (
+        <div className='my-containt'>
+          <Card style={{backgroundColor:  '#fff', marginBottom: '80px', height: '700px', border: "solid #0282C8 12px" , borderRadius: "100px 0px", boxShadow: "0 3px 10px #000000a6", overflow: 'hidden'}}
+            className="text-center">
+
+            <Card.Header style={{backgroundImage: 'url("https://i.ibb.co/H71FK9S/conso.png")',
+                                backgroundColor: '#0282C8',
+                                height: '150px',
+                                backgroundPosition: 'center',
+                                backgroundSize: 'cover',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'}}>
+
+                                <h2 style={{color: '#fff', fontSize: '60px', textShadow: "2px 2px 7px rgba(0,0,0,0.6)"}}>Consommation Responsable</h2>
+            </Card.Header>
+
+            <Card.Body style={{backgroundColor:  '#f3f3f3d8', borderRadius: "0px 0px 20px 0px", display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+
+              <Card.Title style={{fontFamily: "'Poppins', sans-serif", fontSize: '24px'}}> Réduire votre émission de co2 </Card.Title>
+
+              <MapBio/>
+
+            </Card.Body>
+          </Card>
+
+          <Card style={{backgroundColor:  '#fff', marginBottom: '80px', height: '700px', border: "solid #00A651 12px" , borderRadius: "100px 0px", boxShadow: "0 3px 10px #000000a6", overflow: 'hidden'}}
+            className="text-center">
+
+            <Card.Header style={{backgroundImage: 'url("https://i.postimg.cc/nL96n3zm/transport.png")',
+                                backgroundColor: '#00A651',
+                                height: '150px',
+                                backgroundPosition: 'center',
+                                backgroundSize: 'cover',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'}}>
+
+                                <h2 style={{color: '#fff', fontSize: '60px', textShadow: "2px 2px 7px rgba(0,0,0,0.6)"}}>Mobilité Durable</h2>
+            </Card.Header>
+
+            <Card.Body style={{backgroundColor:  '#f3f3f3d8', borderRadius: "0px 0px 20px 0px", display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+
+              <Card.Title style={{fontFamily: "'Poppins', sans-serif", fontSize: '24px'}}> Réduire votre émission de co2 </Card.Title>
+
+              <Map/>
+
+            </Card.Body>
+          </Card>
+        </div>
+      );
+}
+
+export default FinalCard;
+
+
diff --git a/front/src/components/Footer.js b/front/src/components/Footer.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import '../assets/footer.css';
+import Aws from "../assets/images/AWS.png";
+import Departement13 from "../assets/images/departement13.png";
+import Code4marseille from "../assets/images/code4marseille.png";
+import Inco from "../assets/images/inco.png";
+import Provencetourisme from "../assets/images/provencetourisme.png";
+import Voyage_prive from "../assets/images/voyage_prive.png";
+
+function Footer() {
+  return (
+    <footer class="footer">
+
+        <a href="https://www.departement13.fr/" target="_blank">
+          <img src={Departement13} alt="d13" />
+        </a>
+        <a href="https://www.voyage-prive.com/" target="_blank">
+        <img src={Voyage_prive} alt="voyage privé" />
+        </a>
+        <a href="https://aws.amazon.com/fr/?nc2=h_lg" target="_blank">
+        <img src={Aws} alt="aws" />
+        </a>
+        <a href="https://www.myprovence.fr/" target="_blank">
+        <img class="smaller" src={Provencetourisme} alt="my provence"  />
+        </a>
+        <a href="https://inco-group.co/" target="_blank">
+        <img class="smaller" src={Inco} alt="inco" />
+        </a>
+        <a href="https://code4marseille.fr/" target="_blank">
+        <img src={Code4marseille} alt="code4marseille"  />
+        </a>
+    </footer>
+  )
+}
+
+export default Footer