Gestion de lien de l'API par une variable globale (dans index.js)

Les pages et requetes sont désormais dynamiques
Finitions de certaines fonctions

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Scodoc Mobile"
     />
     <!-- Including the bootstrap css via CDN -->
     <link
@@ -16,7 +16,7 @@
             integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
             crossorigin="anonymous"
     >
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/scologo.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/

public/manifest.json

@@ -8,14 +8,9 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "scologo.png",
       "type": "image/png",
-      "sizes": "192x192"
+      "sizes": "84x126"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/ScoDoc/ChoixDept.js

@@ -4,17 +4,43 @@ import './Style.css'
 import SearchStudent from "./SearchStudent";
 
 class ChoixDept extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            depts: [],
+        };
+    }
+
+    componentWillMount() {
+        let dept = window.location.href.split('/')[3]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json', {
+            method: 'GET',
+            verify: false,
+            credentials: 'include',
+        })
+            .then(response =>
+                response.json().then(data => ({
+                        data: data,
+                        status: response.status
+                    })
+                ).then(res => {
+                    this.setState({ depts: res.data })
+                    console.log(res.data);
+                }));
+    }
+
     render() {
         return (
             <div className="wrapper">
                 <h1>Choix du département</h1>
                 <div id="wrapDept">
-                    <Link to="/Scolarite">
+                    <Link to="/RT/Scolarite">
                         Département Réseaux et Télécommunications
                     </Link>
                 </div>
                 <div id="wrapDept">
-                    <Link to="/Scolarite">
+                    <Link to="/GC/Scolarite">
                         Département Génie Civil
                     </Link>
                 </div>

src/ScoDoc/Etudiant.js

@@ -0,0 +1,16 @@
+import {Component} from "react";
+import './Style.css'
+import ScoNavBar from "./ScoNavBar";
+
+class Etudiant extends Component {
+    render() {
+        return(
+            <div>
+                <ScoNavBar/>
+                <div>TODO</div>
+            </div>
+        )
+    }
+}
+
+export default Etudiant

src/ScoDoc/GestionSemestre.js

@@ -1,16 +1,17 @@
-import {Component} from "react";
+import React, {Component} from "react";
-import {Tabs, Tab} from "react-bootstrap"
+import {Tabs, Tab, Button} from "react-bootstrap"
 import Acceuil from "./GestionSemestre/Acceuil";
 import Absences from "./GestionSemestre/Absences";
 import Eleves from "./GestionSemestre/Eleves";
 import ScoNavBar from "./ScoNavBar";
+import {Link} from "react-router-dom";
 
 class GestionSemestre extends Component {
     render() {
         return (
             <div>
                 <ScoNavBar/>
-                <div className="wrapper">
+                <div>
                     <Tabs defaultActiveKey="Acceuil" id="controlled-tab-example">
                         <Tab eventKey="Acceuil" title="Acceuil">
                             <Acceuil />
@@ -23,6 +24,13 @@ class GestionSemestre extends Component {
                         </Tab>
                     </Tabs>
                 </div>
+                <footer className="fixed-bottom">
+                    <div style={{background: "#cccccc", padding: "5px"}}>
+                        <Link to="..">
+                            <Button type="button" className="btn waves-effect waves-light btn-primary">Retour au choix de semestre</Button>
+                        </Link>
+                    </div>
+                </footer>
             </div>
         )
     }

src/ScoDoc/GestionSemestre/Absences.js

@@ -1,8 +1,13 @@
-import {Component} from "react";
+import React, {Component} from "react";
+import '../Style.css'
 
 class Absences extends Component {
     render() {
-        return (<div>Absences</div>)
+        return (
+            <div className="wrapper">
+                <h1 id="pageTitle">Gestion des absences</h1>
+            </div>
+        )
     }
 }
 

src/ScoDoc/GestionSemestre/Acceuil.js

@@ -1,4 +1,5 @@
 import React, {Component} from "react";
+import '../Style.css'
 
 class Acceuil extends Component {
     constructor(props) {
@@ -10,7 +11,11 @@ class Acceuil extends Component {
     }
 
     componentWillMount() {
-        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=SEM144', {
+        let dept = window.location.href.split('/')[3]
+        let sem = window.location.href.split('/')[5]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept +
+            '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem, {
             method: 'GET',
             verify: false,
             credentials: 'include',
@@ -18,19 +23,18 @@ class Acceuil extends Component {
             .then(response =>
                 response.json().then(data => ({
                         data: data,
-                        status: response.status
                     })
                 ).then(res => {
                     this.setState({ semestre: res.data[0]});
-                    console.log(res.data)
-                    console.log(this.state.semestre)
                 }));
     }
 
     render() {
         return (
             <div className="wrapper">
-                <h1>{this.state.semestre.titre}</h1>
+                <h1 id="pageTitle">{this.state.semestre.titre}<br/>
+                    Semestre {this.state.semestre.semestre_id} en {this.state.semestre.modalite}<br/>
+                    (Responsable: {this.state.semestre.responsables})</h1>
             </div>
         )
     }

src/ScoDoc/GestionSemestre/Eleves.js

@@ -1,8 +1,55 @@
-import {Component} from "react";
+import React, {Component} from "react";
+import {Row, Col} from "react-bootstrap"
+import '../Style.css'
+import {Link} from "react-router-dom";
 
 class Eleves extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            students: [],
+        };
+    }
+
+    componentWillMount() {
+        let dept = window.location.href.split('/')[3]
+        let sem = window.location.href.split('/')[5]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept +
+            '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem, {
+            method: 'GET',
+            verify: false,
+            credentials: 'include',
+        })
+            .then(response =>
+                response.json().then(data => ({
+                        data: data,
+                    })
+                ).then(res => {
+                    this.setState({ students: res.data});
+                    console.log(res.data)
+                }));
+    }
+
     render() {
-        return (<div>Eleves</div>)
+        return (
+            <div className="wrapper">
+                <h1 id="pageTitle">Liste des élèves</h1>
+                <div className="container">
+                    <div className="row">
+                        {this.state.students.map((student, index) => {
+                            return (
+                                <div className="col-sm" key={index} id="wrapDept">
+                                    <Link to={`/${window.location.href.split('/')[3]}/Scolarite/Etudiant/${student.etudid}`}>
+                                        {student.nom_disp} {student.prenom}
+                                    </Link>
+                                </div>
+                            )
+                        },)}
+                    </div>
+                </div>
+            </div>
+        )
     }
 }
 

src/ScoDoc/Login.js

@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import './Style.css'
 import ChoixDept from "./ChoixDept";
+import ScoNavBar from "./ScoNavBar";
 
 class Login extends Component {
     constructor(props) {
@@ -27,7 +28,9 @@ class Login extends Component {
         let login = this.state.login
         let pass = this.state.pass
 
-        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite', {
+        let BASE_URL = window.$api_url
+
+        fetch(BASE_URL, {
             method: 'GET',
             verify: false,
             credentials: 'include',
@@ -48,24 +51,34 @@ class Login extends Component {
 
     render() {
         return (
-            <div className="wrapper">
+            <div>
-                {(this.state.status !== 0 && this.state.status !==200) &&
+                {(this.state.status !== 0 && this.state.status !== 200) &&
-                <div id="errorMsg">
+                <div className="wrapper">
-                    <h2 id="loginTitle">{ "⚠️" } Login ou mot de passe incorrect</h2>
+                    <div id="errorMsg">
+                        <h2 id="loginTitle">{"⚠️"} Login ou mot de passe incorrect</h2>
+                    </div>
                 </div>
                 }
                 {this.state.status !== 200 &&
-                <div id="formContent">
+                <div className="wrapper">
-                    <h2 id="loginTitle">Connexion a ScoDoc</h2>
+                    <div id="formContent">
-                    <form>
+                        <h2 id="loginTitle">Connexion a ScoDoc</h2>
-                        <input type="text" id="login" placeholder="Identifiant" onChange={this.handleChangeLogin}/>
+                        <form>
-                        <input type="password" id="password" placeholder="Mot de passe" onChange={this.handleChangePass}/>
+                            <input type="text" id="login" placeholder="Identifiant" onChange={this.handleChangeLogin}/>
-                        <button type="submit" value="Log In" onClick={this.checkCredentials}>Log in</button>
+                            <input type="password" id="password" placeholder="Mot de passe"
-                    </form>
+                                   onChange={this.handleChangePass}/>
+                            <button type="submit" value="Log In" onClick={this.checkCredentials}>Log in</button>
+                        </form>
+                    </div>
                 </div>
-                }{this.state.status === 200 &&
-                    <ChoixDept/>
                 }
+                <div>
+                    {this.state.status === 200 &&
+                    <ScoNavBar/>
+                    }{this.state.status === 200 &&
+                    <ChoixDept/>
+                    }
+                </div>
             </div>
         )
     }

src/ScoDoc/ScoNavBar.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import {Link, Redirect} from "react-router-dom";
 import './Style.css'
-import {Nav, Navbar, Button} from 'react-bootstrap'
+import {Nav, Navbar, Button, Container} from 'react-bootstrap'
 
 class ScoNavBar extends Component {
     constructor(props) {
@@ -13,7 +13,9 @@ class ScoNavBar extends Component {
     }
 
     logout() {
-        fetch("https://scodoc.dev.net/ScoDoc/acl_users/logout")
+        let BASE_URL = window.$api_url
+
+        fetch(BASE_URL + "acl_users/logout")
             .then(res => console.log(res.body))
             .then(res => {return <Redirect to="/" />})
             .catch(console.log)
@@ -22,15 +24,26 @@ class ScoNavBar extends Component {
     render() {
         return (
             <Navbar bg="light" expand="sm">
-                <Navbar.Brand>ScoDoc</Navbar.Brand>
+                <Container>
-                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                    <Navbar.Brand>
-                <Navbar.Collapse id="basic-navbar-nav">
+                        <img
-                    <Nav className="ml-auto">
+                            alt="ScodocLogo"
-                        <Link to="/">
+                            src="https://scodoc.dev.net/ScoDoc/static/icons/scologo_img.png"
-                            <Button variant="primary" onClick={() => {this.logout()}}>Déconnexion</Button>
+                            width="20"
-                        </Link>
+                            height="30"
-                    </Nav>
+                            className="d-inline-block align-top"
-                </Navbar.Collapse>
+                        />{' '}
+                        ScoDoc
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                    <Navbar.Collapse id="basic-navbar-nav">
+                        <Nav className="ml-auto">
+                            <Link to="/">
+                                <Button variant="primary" onClick={() => {this.logout()}}>Déconnexion</Button>
+                            </Link>
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
             </Navbar>
         )
     }

src/ScoDoc/Scolarite.js

@@ -22,7 +22,9 @@ class Scolarite extends Component {
     } */
 
     componentWillMount() {
-        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/formsemestre_list?format=json', {
+        let dept = window.location.href.split('/')[3]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json', {
             method: 'GET',
             verify: false,
             credentials: 'include',
@@ -66,14 +68,14 @@ class Scolarite extends Component {
                                     return (
                                         <div className="col-12" key={index} id="wrapDept">
                                         {sem.etat !== 0 ?
-                                            <Link to="/Scolarite/GestionSem">
+                                            <Link to={`${sem.formsemestre_id}/GestionSem`}>
                                             <h3>{sem.titre} [{sem.modalite}]</h3>
                                             <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
                                             </Link>
                                         : null}
                                         </div>
                                     )
-                                })}
+                                },)}
                             </Card.Body>
                         </Accordion.Collapse>
                     </Card>

src/ScoDoc/SearchStudent.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {Redirect} from "react-router-dom";
+import {Link, Redirect} from "react-router-dom";
 import {Row, Col} from "react-bootstrap"
 
 class SearchStudent extends Component {
@@ -15,12 +15,16 @@ class SearchStudent extends Component {
         this.searchStudent = this.searchStudent.bind(this);
     }
 
+
     handleChangeSearch(e) {
         this.setState({ search: e.target.value });
     }
 
     searchStudent() {
-        fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/search_etud_by_name?term=' + this.state.search +'&format=json', {
+        let dept = window.location.href.split('/')[3]
+        let BASE_URL = window.$api_url
+        fetch(BASE_URL + dept +
+            '/Scolarite/Notes/search_etud_by_name?term=' + this.state.search +'&format=json', {
             method: "GET",
             credentials: "include",
         })
@@ -43,8 +47,6 @@ class SearchStudent extends Component {
     }
 
     result() {
-        console.log(this.state.students)
-
         if (this.state.toast === true) {
             return (
                 <div id="wrapDept">
@@ -53,13 +55,17 @@ class SearchStudent extends Component {
             )
         } else if (this.state.search_status === 2) {
             return (
-                <div id="wrapDept">
+                <Col>
-                    <Col>
+                    {this.state.students.map((student, index) => {
-                        {this.state.students.map((student, index) => {
+                        return (
-                            return (<Row><span>{student.label}</span></Row>);
+                            <Row id="wrapDept">
-                        })}
+                                <Link to={`/${window.location.href.split('/')[3]}/Scolarite/Etudiant/${student.value}`}>
-                    </Col>
+                                    <span>{student.label}</span>
-                </div>
+                                </Link>
+                            </Row>
+                        );
+                    })}
+                </Col>
             )
         }
     }

src/index.js

@@ -5,6 +5,8 @@ import reportWebVitals from './reportWebVitals';
 import Main from "./main";
 import 'bootstrap/dist/css/bootstrap.min.css'
 
+window.$api_url = 'https://scodoc.dev.net/ScoDoc/' // Global variable
+
 ReactDOM.render(
   <BrowserRouter>
       <Main />

src/main.js

@@ -3,14 +3,16 @@ import {Switch, Route} from 'react-router-dom';
 import Scolarite from './ScoDoc/Scolarite.js'
 import Login from './ScoDoc/Login'
 import GestionSemestre from "./ScoDoc/GestionSemestre";
+import Etudiant from "./ScoDoc/Etudiant";
 
 
 const Main = () => {
     return (
         <Switch>
             <Route exact path='/' component={Login}/>
-            <Route exact path='/Scolarite' component={Scolarite}/>
+            <Route exact path='/:DEPT/Scolarite' component={Scolarite}/>
-            <Route exact path='/Scolarite/GestionSem' component={GestionSemestre}/>
+            <Route exact path='/:DEPT/Scolarite/Etudiant/:EtudId' component={Etudiant}/>
+            <Route exact path='/:DEPT/Scolarite/:SEM/GestionSem' component={GestionSemestre}/>
         </Switch>
     );
 }