theal/ScoDocMobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

Modifications mineures des pages existantes

Browse Source 
Ajout de la barre de recherche fonctionnelle
Ajout de la page GestionSemestre
This commit is contained in:
Theal0 2021-04-30 13:56:53 +02:00
parent c6d537354f
commit f117c7a983
10 changed files with 198 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -42,4 +42,7 @@ Pour éviter des erreurs 404 liées à l'arborescence React:
Pages de login et choix du département
### /Scolarité
Choix de la formation et barre de recherche d'élèves
Choix de la formation et barre de recherche d'élèves
### /Scolarité/GestionSem
Page principale de la gestion d'un semestre

5
src/ScoDoc/ChoixDept.js
View File

@ -1,6 +1,7 @@
import {Link} from "react-router-dom";
import React, {Component} from "react";
import './Style.css'
import SearchStudent from "./SearchStudent";
class ChoixDept extends Component {
render() {
@ -17,6 +18,10 @@ class ChoixDept extends Component {
Département Génie Civil
</Link>
</div>
<div id="wrapDept">
<h3>Recherche d'élèves</h3>
<SearchStudent/>
</div>
</div>
);
}

31
src/ScoDoc/GestionSemestre.js Normal file
View File

@ -0,0 +1,31 @@
import {Component} from "react";
import {Tabs, Tab} from "react-bootstrap"
import Acceuil from "./GestionSemestre/Acceuil";
import Absences from "./GestionSemestre/Absences";
import Eleves from "./GestionSemestre/Eleves";
import ScoNavBar from "./ScoNavBar";
class GestionSemestre extends Component {
render() {
return (
<div>
<ScoNavBar/>
<div className="wrapper">
<Tabs defaultActiveKey="Acceuil" id="controlled-tab-example">
<Tab eventKey="Acceuil" title="Acceuil">
<Acceuil />
</Tab>
<Tab eventKey="Absences" title="Absences">
<Absences />
</Tab>
<Tab eventKey="Eleves" title="Eleves">
<Eleves />
</Tab>
</Tabs>
</div>
</div>
)
}
}
export default GestionSemestre

9
src/ScoDoc/GestionSemestre/Absences.js Normal file
View File

@ -0,0 +1,9 @@
import {Component} from "react";
class Absences extends Component {
render() {
return (<div>Absences</div>)
}
}
export default Absences

39
src/ScoDoc/GestionSemestre/Acceuil.js Normal file
View File

@ -0,0 +1,39 @@
import React, {Component} from "react";
class Acceuil extends Component {
constructor(props) {
super(props);
this.state = {
semestre: {},
students: [],
};
}
componentWillMount() {
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=SEM144', {
method: 'GET',
verify: false,
credentials: 'include',
})
.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>
</div>
)
}
}
export default Acceuil

9
src/ScoDoc/GestionSemestre/Eleves.js Normal file
View File

@ -0,0 +1,9 @@
import {Component} from "react";
class Eleves extends Component {
render() {
return (<div>Eleves</div>)
}
}
export default Eleves

1
src/ScoDoc/Login.js
View File

@ -1,5 +1,4 @@
import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css'
import ChoixDept from "./ChoixDept";

78
src/ScoDoc/Scolarite.js
View File

@ -1,23 +1,18 @@
import React, {Component} from "react";
import {Link, Redirect} from "react-router-dom";
import {Link} from "react-router-dom";
import './Style.css'
import ScoNavBar from "./ScoNavBar";
import {Accordion, Card, Button, Toast} from 'react-bootstrap'
import SearchStudent from './SearchStudent'
import {Accordion, Card, Button} from 'react-bootstrap'
class Scolarite extends Component {
constructor(props) {
super(props);
this.state = {
search: "",
// Status possibles:
// 0: Vide - 1: Pas de resultat - 2: Plusieurs resultats
search_status: 0,
semestres: [],
students: [],
toast: false
};
this.handleChangeSearch = this.handleChangeSearch.bind(this);
this.searchStudent = this.searchStudent.bind(this);
this.dismissToast = this.dismissToast.bind(this);
this.getData = this.getData.bind(this);
}
@ -50,41 +45,6 @@ class Scolarite extends Component {
this.setState({toast: false})
}
handleChangeSearch(e) {
this.setState({ search: e.target.value });
}
searchStudent(e) {
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite/Notes/search_etud_by_name?format=json', {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({term: this.state.search})
})
.then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
this.setState({ students: res.data });
console.log(this.state.students)
}));
let result = 0
console.log(this.state.students)
if (result === 0) {
this.setState({search_status: 1, toast: true});
} else if (result === 1) {
// Redirection sur la page de l'étudiant
return <Redirect to="/" />
} else {
this.setState({search_status: 2});
// Liste des élèves trouvés avec liens
}
}
render() {
return (
<div>
@ -102,14 +62,18 @@ class Scolarite extends Component {
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
{this.state.semestres.map((sem, index) => (
<div className="col-12" key={index} id="wrapDept">
<Link to="/">
{this.state.semestres.map((sem, index) => {
return (
<div className="col-12" key={index} id="wrapDept">
{sem.etat !== 0 ?
<Link to="/Scolarite/GestionSem">
<h3>{sem.titre} [{sem.modalite}]</h3>
<p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
</Link>
</div>
))}
</Link>
: null}
</div>
)
})}
</Card.Body>
</Accordion.Collapse>
</Card>
@ -121,19 +85,7 @@ class Scolarite extends Component {
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>
<div className="input-group">
<input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
<div className="input-group-append">
<button type="button" className="btn waves-effect waves-light btn-primary" onClick={this.searchStudent}>
Rechercher
</button>
</div>
</div>
{this.state.toast === true &&
<Toast onClick={this.dismissToast} style={{opacity: "70%"}}>
<Toast.Body>Aucun élève trouvé</Toast.Body>
</Toast>
}
<SearchStudent />
</Card.Body>
</Accordion.Collapse>
</Card>
@ -147,7 +99,7 @@ class Scolarite extends Component {
</div>
</footer>
</div>
)
);
}
}

84
src/ScoDoc/SearchStudent.js
View File

@ -0,0 +1,84 @@
import React, {Component} from "react";
import {Redirect} from "react-router-dom";
import {Row, Col} from "react-bootstrap"
class SearchStudent extends Component {
constructor(props) {
super(props);
this.state = {
students: [],
// Status possibles:
// 0: Vide - 1: Pas de resultat - 2: Plusieurs resultats
search_status: 0,
};
this.handleChangeSearch = this.handleChangeSearch.bind(this)
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', {
method: "GET",
credentials: "include",
})
.then(response =>
response.json().then(data => ({data: data,})
).then(res => {
this.setState({ students: res.data });
console.log(this.state.students)
}))
.then(res => {
if (this.state.students.length === 0) {
this.setState({search_status: 1, toast: true});
} else if (this.state.students.length === 1) {
return <Redirect to="/" />
} else {
this.setState({search_status: 2, toast: false});
}
})
this.setState({searched: true})
}
result() {
console.log(this.state.students)
if (this.state.toast === true) {
return (
<div id="wrapDept">
Aucun élève trouvé
</div>
)
} else if (this.state.search_status === 2) {
return (
<div id="wrapDept">
<Col>
{this.state.students.map((student, index) => {
return (<Row><span>{student.label}</span></Row>);
})}
</Col>
</div>
)
}
}
render() {
return (
<div className="wrapper">
<div className="input-group">
<input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
<div className="input-group-append">
<button type="button" className="btn waves-effect waves-light btn-primary" onClick={this.searchStudent}>
Rechercher
</button>
</div>
</div>
{this.result()}
</div>
)
}
}
export default SearchStudent

3
src/main.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import {Switch, Route} from 'react-router-dom';
import Scolarite from './ScoDoc/Scolarite.js'
import ChoixDept from './ScoDoc/ChoixDept.js'
import Login from './ScoDoc/Login'
import GestionSemestre from "./ScoDoc/GestionSemestre";
const Main = () => {
@ -10,6 +10,7 @@ const Main = () => {
<Switch>
<Route exact path='/' component={Login}/>
<Route exact path='/Scolarite' component={Scolarite}/>
<Route exact path='/Scolarite/GestionSem' component={GestionSemestre}/>
</Switch>
);
}