jo4marseille · JordanDeledda · Nov 14, 2022 · Nov 14, 2022 · Nov 14, 2022 · Nov 14, 2022
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/HACKATON OLYMTRIP (2).pdf b/HACKATON OLYMTRIP (2).pdf
diff --git a/HACKATON OLYMTRIP.pdf b/HACKATON OLYMTRIP.pdf
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# code4marseille_srednet
+Project code4marseille Srednet
+
+**Expériences locales**
+- nos athlètes  : comment connaître les licenciés, les clubs
+- Tourisme, pendant avant après : prolonger son séjour...
+- Accompagner les fédérations
+- Accueillir les accompagnants
+- Les retombées (sociales et économiques)
+
+
+Input
+- Une épreuve
+- Une date ou une période
+
+Output
+- Une rubrique logements
+- Une rubrique agenda / événements
+- Une rubrique activités
+- Une rubrique club
diff --git a/front/.gitignore b/front/.gitignore
@@ -1,9 +1,11 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+.gitignore
 # dependencies
 /node_modules
+/.idea
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/front/public/img/AWS.png b/front/public/img/AWS.png
diff --git a/front/public/img/Bouches-du-Rhône_13_logo.png b/front/public/img/Bouches-du-Rhône_13_logo.png
diff --git a/front/public/img/Flèche OLYMTRIP.png b/front/public/img/Flèche OLYMTRIP.png
diff --git a/front/public/img/Logo_JO_d'été_-_Paris_2024.svg.png b/front/public/img/Logo_JO_d'été_-_Paris_2024.svg.png
diff --git a/front/public/img/Voyage_Privé.svg.png b/front/public/img/Voyage_Privé.svg.png
diff --git a/front/public/img/code4marseille.png b/front/public/img/code4marseille.png
diff --git a/front/public/img/inco.png b/front/public/img/inco.png
diff --git a/front/public/img/logo_olymtrip.png b/front/public/img/logo_olymtrip.png
diff --git a/front/public/img/provencetourisme.png b/front/public/img/provencetourisme.png
diff --git a/front/public/index.html b/front/public/index.html
@@ -2,42 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./logo_olymtrip.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       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.
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-      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>Olymtrip</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/front/public/logo192.png b/front/public/logo192.png
diff --git a/front/public/logo512.png b/front/public/logo512.png
diff --git a/front/public/logo_olymtrip.ico b/front/public/logo_olymtrip.ico
diff --git a/front/public/manifest.json b/front/public/manifest.json
@@ -1,25 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+    "short_name": "ST",
+    "name": "Site Name",
+    "icons": [
+      {
+        "src": "logo_olymtrip.ico",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-icon"
+      }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+  }
diff --git a/front/public/robots.txt b/front/public/robots.txt
diff --git a/front/src/App.css b/front/src/App.css
diff --git a/front/src/App.js b/front/src/App.js
@@ -1,24 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
+import Header from "./components/header/Header";
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Home from "./pages/Home";
+import Footer from "./components/footer/Footer";
+import Clubs from "./pages/Clubs";
 
 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>
+    <BrowserRouter>
+        <Header/>
+        <Routes>
+            <Route path={"/home"} element={<Home/>} />
+            <Route path={"/clubs"} element={<Clubs/>} />
+            <Route path={"/*"} element={<Home/>} />
+        </Routes>
+        <Footer/>
+    </BrowserRouter>
   );
 }
 

diff --git a/front/src/App.test.js b/front/src/App.test.js
diff --git a/front/src/components/clubCards/ClubCardBlue.jsx b/front/src/components/clubCards/ClubCardBlue.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import "./clublist.css";
+import { getObjets, getModifies } from "../../utils/element";
+
+const ClubCardBlue = (props) => {
+  return (
+    <div>
+      <div className="infoClub impair">
+        <div className="name">
+          <h2>{props.libelleFr}</h2>
+          <p>
+            {props.adresse1}, {props.codePostal}
+          </p>
+        </div>
+        <img src={props.image} alt="logo equipe" />
+        <div className="contact">
+          <h3>Contact</h3>
+          <p>{props.contact}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClubCardBlue;
diff --git a/front/src/components/clubCards/ClubCardRed.jsx b/front/src/components/clubCards/ClubCardRed.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import "./clublist.css";
+import { getObjets, getModifies } from "../../utils/element";
+
+const ClubCardBlue = (props) => {
+  return (
+    <div>
+      <div
+        className="infoClub pair"
+      >
+        <div className="contact">
+          <h3>Contact</h3>
+          <p>{props.contact}</p>
+        </div>
+        <img src={props.image} alt="logo equipe" />
+
+        <div className="name">
+          <h2>{props.libelleFr}</h2>
+          <p>
+            {props.adresse1}, {props.codePostal}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClubCardBlue;
diff --git a/front/src/components/clubCards/ClubList.jsx b/front/src/components/clubCards/ClubList.jsx
@@ -0,0 +1,101 @@
+import React from "react";
+import "./clublist.css";
+import { getObjets, getModifies } from "../../utils/element";
+import ClubCardBlue from "./ClubCardBlue";
+import ClubCardRed from "./ClubCardRed";
+
+const ClubList = () => {
+  //   const objectList = [getObjets()[0], getObjets()[1]];
+  const objectList = [
+    {
+      nom: {
+        libelleFr: "Olympique de Marseille",
+      },
+      localisation: {
+        adresse: {
+          adresse1: "33 Traverse de La Marine, Marseille",
+          codePostal: "13012",
+        },
+      },
+      contact: "digital@om.net",
+      image: "https://koifaire.com/images/imgcat/407/1.jpg",
+    },
+    {
+      nom: {
+        libelleFr: "Soccer Plus",
+      },
+      localisation: {
+        adresse: {
+          adresse1: "Route Nationale 8, Gemenos",
+          codePostal: "13420",
+        },
+      },
+      contact: "contact@soccer-plus.com",
+      image: "https://koifaire.com/images/imgcat/407/2.jpg",
+    },
+    {
+      nom: {
+        libelleFr: "Etoile sportive de cuges",
+      },
+      localisation: {
+        adresse: {
+          adresse1: "Chemin de Notre Dame, Cuges les pins",
+          codePostal: "13780",
+        },
+      },
+      contact: "contact@etoile-sportive.com",
+      image: "https://koifaire.com/images/imgcat/407/2.jpg",
+    },
+  ];
+  console.log(objectList[0]);
+  return (
+    <div className="clubs">
+      <h1>CLUBS</h1>
+      {objectList.map((element, index) =>
+        index % 2 == 0 ? (
+          <ClubCardBlue
+            libelleFr={element.nom.libelleFr}
+            adresse1={element.localisation.adresse.adresse1}
+            codePostal={element.localisation.adresse.codePostal}
+            contact={element.contact}
+            image={element.image}
+          />
+        ) : (
+          <ClubCardRed
+            libelleFr={element.nom.libelleFr}
+            adresse1={element.localisation.adresse.adresse1}
+            codePostal={element.localisation.adresse.codePostal}
+            contact={element.contact}
+            image={element.image}
+          />
+        )
+      )}
+    </div>
+  );
+};
+
+/* <div className="infoClub pair">
+                <div className="contact">
+                    <h3>Contact</h3>
+                    <p>example@example.com</p>
+                </div>
+                <img src="/img/Logo_JO_d'été_-_Paris_2024.svg.png" alt="logo equipe" />
+                <div className="name">
+                    <h2>{object.nom.libelleFr}</h2>
+                    <p>{object.localisation.adresse.adresse1}, {object.localisation.adresse.codePostal}</p>
+                </div>
+            </div> */
+
+// <div className="infoClub impair">
+//     <div className="name">
+//         <h2>{element.nom.libelleFr}</h2>
+//         <p>{element.localisation.adresse.adresse1}, {element.localisation.adresse.codePostal}</p>
+//     </div>
+//     <img src="/img/Logo_JO_d'été_-_Paris_2024.svg.png" alt="logo equipe" />
+//     <div className="contact">
+//         <h3>Contact</h3>
+//         <p>example@example.com</p>
+//     </div>
+// </div>
+
+export default ClubList;