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
This commit is contained in:
Theal0 2021-05-03 12:09:31 +02:00
parent f117c7a983
commit 926c9c1a41
15 changed files with 203 additions and 64 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Scodoc Mobile"
/> />
<!-- Including the bootstrap css via CDN --> <!-- Including the bootstrap css via CDN -->
<link <link
@ -16,7 +16,7 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous" 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 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

View File

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

View File

@ -4,17 +4,43 @@ import './Style.css'
import SearchStudent from "./SearchStudent"; import SearchStudent from "./SearchStudent";
class ChoixDept extends Component { 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() { render() {
return ( return (
<div className="wrapper"> <div className="wrapper">
<h1>Choix du département</h1> <h1>Choix du département</h1>
<div id="wrapDept"> <div id="wrapDept">
<Link to="/Scolarite"> <Link to="/RT/Scolarite">
Département Réseaux et Télécommunications Département Réseaux et Télécommunications
</Link> </Link>
</div> </div>
<div id="wrapDept"> <div id="wrapDept">
<Link to="/Scolarite"> <Link to="/GC/Scolarite">
Département Génie Civil Département Génie Civil
</Link> </Link>
</div> </div>

16
src/ScoDoc/Etudiant.js Normal file
View File

@ -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

View File

@ -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 Acceuil from "./GestionSemestre/Acceuil";
import Absences from "./GestionSemestre/Absences"; import Absences from "./GestionSemestre/Absences";
import Eleves from "./GestionSemestre/Eleves"; import Eleves from "./GestionSemestre/Eleves";
import ScoNavBar from "./ScoNavBar"; import ScoNavBar from "./ScoNavBar";
import {Link} from "react-router-dom";
class GestionSemestre extends Component { class GestionSemestre extends Component {
render() { render() {
return ( return (
<div> <div>
<ScoNavBar/> <ScoNavBar/>
<div className="wrapper"> <div>
<Tabs defaultActiveKey="Acceuil" id="controlled-tab-example"> <Tabs defaultActiveKey="Acceuil" id="controlled-tab-example">
<Tab eventKey="Acceuil" title="Acceuil"> <Tab eventKey="Acceuil" title="Acceuil">
<Acceuil /> <Acceuil />
@ -23,6 +24,13 @@ class GestionSemestre extends Component {
</Tab> </Tab>
</Tabs> </Tabs>
</div> </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> </div>
) )
} }

View File

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

View File

@ -1,4 +1,5 @@
import React, {Component} from "react"; import React, {Component} from "react";
import '../Style.css'
class Acceuil extends Component { class Acceuil extends Component {
constructor(props) { constructor(props) {
@ -10,7 +11,11 @@ class Acceuil extends Component {
} }
componentWillMount() { 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', method: 'GET',
verify: false, verify: false,
credentials: 'include', credentials: 'include',
@ -18,19 +23,18 @@ class Acceuil extends Component {
.then(response => .then(response =>
response.json().then(data => ({ response.json().then(data => ({
data: data, data: data,
status: response.status
}) })
).then(res => { ).then(res => {
this.setState({ semestre: res.data[0]}); this.setState({ semestre: res.data[0]});
console.log(res.data)
console.log(this.state.semestre)
})); }));
} }
render() { render() {
return ( return (
<div className="wrapper"> <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> </div>
) )
} }

View File

@ -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 { 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() { 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>
)
} }
} }

View File

@ -1,6 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import './Style.css' import './Style.css'
import ChoixDept from "./ChoixDept"; import ChoixDept from "./ChoixDept";
import ScoNavBar from "./ScoNavBar";
class Login extends Component { class Login extends Component {
constructor(props) { constructor(props) {
@ -27,7 +28,9 @@ class Login extends Component {
let login = this.state.login let login = this.state.login
let pass = this.state.pass let pass = this.state.pass
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite', { let BASE_URL = window.$api_url
fetch(BASE_URL, {
method: 'GET', method: 'GET',
verify: false, verify: false,
credentials: 'include', credentials: 'include',
@ -48,24 +51,34 @@ class Login extends Component {
render() { render() {
return ( 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> </div>
} }
{this.state.status !== 200 && {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> </div>
}{this.state.status === 200 &&
<ChoixDept/>
} }
<div>
{this.state.status === 200 &&
<ScoNavBar/>
}{this.state.status === 200 &&
<ChoixDept/>
}
</div>
</div> </div>
) )
} }

View File

@ -1,7 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Link, Redirect} from "react-router-dom"; import {Link, Redirect} from "react-router-dom";
import './Style.css' import './Style.css'
import {Nav, Navbar, Button} from 'react-bootstrap' import {Nav, Navbar, Button, Container} from 'react-bootstrap'
class ScoNavBar extends Component { class ScoNavBar extends Component {
constructor(props) { constructor(props) {
@ -13,7 +13,9 @@ class ScoNavBar extends Component {
} }
logout() { 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 => console.log(res.body))
.then(res => {return <Redirect to="/" />}) .then(res => {return <Redirect to="/" />})
.catch(console.log) .catch(console.log)
@ -22,15 +24,26 @@ class ScoNavBar extends Component {
render() { render() {
return ( return (
<Navbar bg="light" expand="sm"> <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> </Navbar>
) )
} }

View File

@ -22,7 +22,9 @@ class Scolarite extends Component {
} */ } */
componentWillMount() { 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', method: 'GET',
verify: false, verify: false,
credentials: 'include', credentials: 'include',
@ -66,14 +68,14 @@ class Scolarite extends Component {
return ( return (
<div className="col-12" key={index} id="wrapDept"> <div className="col-12" key={index} id="wrapDept">
{sem.etat !== 0 ? {sem.etat !== 0 ?
<Link to="/Scolarite/GestionSem"> <Link to={`${sem.formsemestre_id}/GestionSem`}>
<h3>{sem.titre} [{sem.modalite}]</h3> <h3>{sem.titre} [{sem.modalite}]</h3>
<p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p> <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
</Link> </Link>
: null} : null}
</div> </div>
) )
})} },)}
</Card.Body> </Card.Body>
</Accordion.Collapse> </Accordion.Collapse>
</Card> </Card>

View File

@ -1,5 +1,5 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Redirect} from "react-router-dom"; import {Link, Redirect} from "react-router-dom";
import {Row, Col} from "react-bootstrap" import {Row, Col} from "react-bootstrap"
class SearchStudent extends Component { class SearchStudent extends Component {
@ -15,12 +15,16 @@ class SearchStudent extends Component {
this.searchStudent = this.searchStudent.bind(this); this.searchStudent = this.searchStudent.bind(this);
} }
handleChangeSearch(e) { handleChangeSearch(e) {
this.setState({ search: e.target.value }); this.setState({ search: e.target.value });
} }
searchStudent() { 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", method: "GET",
credentials: "include", credentials: "include",
}) })
@ -43,8 +47,6 @@ class SearchStudent extends Component {
} }
result() { result() {
console.log(this.state.students)
if (this.state.toast === true) { if (this.state.toast === true) {
return ( return (
<div id="wrapDept"> <div id="wrapDept">
@ -53,13 +55,17 @@ class SearchStudent extends Component {
) )
} else if (this.state.search_status === 2) { } else if (this.state.search_status === 2) {
return ( 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>
) )
} }
} }

View File

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

View File

@ -3,14 +3,16 @@ import {Switch, Route} from 'react-router-dom';
import Scolarite from './ScoDoc/Scolarite.js' import Scolarite from './ScoDoc/Scolarite.js'
import Login from './ScoDoc/Login' import Login from './ScoDoc/Login'
import GestionSemestre from "./ScoDoc/GestionSemestre"; import GestionSemestre from "./ScoDoc/GestionSemestre";
import Etudiant from "./ScoDoc/Etudiant";
const Main = () => { const Main = () => {
return ( return (
<Switch> <Switch>
<Route exact path='/' component={Login}/> <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> </Switch>
); );
} }