Compare commits

..

No commits in common. "master" and "v1" have entirely different histories.
master ... v1

23 changed files with 400 additions and 3408 deletions

View File

@ -1,405 +0,0 @@
# Classes
## `/`
<dl>
<dt><a href="#ChoixDept">ChoixDept</a></dt>
<dd><p>Page de choix du département</p>
</dd>
<dt><a href="#Etudiant">Etudiant</a></dt>
<dd><p>Page d&#39;information d&#39;un étudiant&#39;</p>
</dd>
<dt><a href="#GestionSemestre">GestionSemestre</a></dt>
<dd><p>Page de gestion du semestre</p>
</dd>
<dt><a href="#Login">Login</a></dt>
<dd><p>Page de Login</p>
</dd>
<dt><a href="#Scolarite">Scolarite</a></dt>
<dd><p>Page de choix du semestre</p>
</dd>
<dt><a href="#ScoNavBar">ScoNavBar</a></dt>
<dd><p>Barre de navigation</p>
</dd>
<dt><a href="#SearchStudent">SearchStudent</a></dt>
<dd><p>Module de recherche d&#39;étudiant</p>
</dd>
</dl>
## `/GestionSemestre`
<dl>
<dt><a href="#Absences">Absences</a></dt>
<dd><p>Page de gestion des absences</p>
</dd>
<dt><a href="#Accueil">Accueil</a></dt>
<dd><p>Page d&#39;accueil de la gestion du semestre</p>
</dd>
<dt><a href="#Bulletin">Bulletin</a></dt>
<dd><p>Page de présentation des bulletins étudiants</p>
</dd>
<dt><a href="#Etudiants">Etudiants</a></dt>
<dd><p>Page de présentation des étudiants inscrits au semestre</p>
</dd>
</dl>
## `/GestionSemestre/Absences`
<dl>
<dt><a href="#JustAbs">JustAbs</a></dt>
<dd><p>Module de justification des absences</p>
</dd>
<dt><a href="#SaisieAbs">SaisieAbs</a></dt>
<dd><p>Module de saisie des absences</p>
</dd>
<dt><a href="#SupprAbs">SupprAbs</a></dt>
<dd><p>Module de suppression des absences</p>
</dd>
</dl>
<br>
---
# Functions
<dl>
<dt><a href="#get">get(url)</a><code>Promise.&lt;Response&gt;</code></dt>
<dd><p>Lance une requête GET a l&#39;URL donnée en paramètre et retourne une Promise.</p>
</dd>
<dt><a href="#getLogin">getLogin(url, login, pass)</a><code>Promise.&lt;Response&gt;</code></dt>
<dd><p>Lance une requête GET a l&#39;URL donnée en paramètre et retourne une Promise.
Dans ce cas particulier, on ajoute un header d&#39;authentification.</p>
</dd>
<dt><a href="#getJson">getJson(url)</a><code>Promise.&lt;{data: any}&gt;</code></dt>
<dd><p>Lance une requête GET a l&#39;URL donnée en paramètre et retourne les données JSON d&#39;une Promise.</p>
</dd>
<dt><a href="#post">post(url, data)</a><code>Promise.&lt;Response&gt;</code></dt>
<dd><p>Lance une requête POST a l&#39;URL donnée en paramètre et retourne une Promise.</p>
</dd>
</dl>
<br>
---
## `/`
<a name="ChoixDept"></a>
## ChoixDept
Page de choix du département
**Kind**: global class
<a name="ChoixDept+getData"></a>
### choixDept.getData()
Recupère la liste des départements depuis l'API
**Kind**: instance method of [<code>ChoixDept</code>](#ChoixDept)
<a name="Etudiant"></a>
## Etudiant
Page d'information d'un étudiant'
**Kind**: global class
<a name="Etudiant+getData"></a>
### etudiant.getData()
Recupère les données de l'étudiant depuis l'API
**Kind**: instance method of [<code>Etudiant</code>](#Etudiant)
<a name="GestionSemestre"></a>
## GestionSemestre
Page de gestion du semestre
**Kind**: global class
<a name="GestionSemestre+getData"></a>
### gestionSemestre.getData()
Recupère la liste des étudiants inscrits au semestre pour le Select depuis l'API
**Kind**: instance method of [<code>GestionSemestre</code>](#GestionSemestre)
<a name="Login"></a>
## Login
Page de Login
**Kind**: global class
<a name="Login+checkCredentials"></a>
### login.checkCredentials(e)
Verifie la validité des identifiants depuis l'API
**Kind**: instance method of [<code>Login</code>](#Login)
| Param | Type |
| --- | --- |
| e | <code>event</code> |
<a name="Scolarite"></a>
## Scolarite
Page de choix du semestre
**Kind**: global class
<a name="Scolarite+getData"></a>
### scolarite.getData()
Recupère la liste des semestres depuis l'API
**Kind**: instance method of [<code>Scolarite</code>](#Scolarite)
<a name="ScoNavBar"></a>
## ScoNavBar
Barre de navigation
**Kind**: global class
<a name="SearchStudent"></a>
## SearchStudent
Module de recherche d'étudiant
**Kind**: global class
* [SearchStudent](#SearchStudent)
* [.searchStudent(search)](#SearchStudent+searchStudent)
* [.result()](#SearchStudent+result) ⇒ <code>JSX.Element</code>
<a name="SearchStudent+searchStudent"></a>
### searchStudent.searchStudent(search)
Lance une recherche de l'étudiant depuis l'API
**Kind**: instance method of [<code>SearchStudent</code>](#SearchStudent)
| Param | Type | Description |
| --- | --- | --- |
| search | <code>String</code> | Texte recherché |
<a name="SearchStudent+result"></a>
### searchStudent.result() ⇒ <code>JSX.Element</code>
Presentation du résultat
**Kind**: instance method of [<code>SearchStudent</code>](#SearchStudent)
**Returns**: <code>JSX.Element</code> - - Resultat au format JSX
<br>
---
## `/GestionSemestre`
<a name="Absences"></a>
## Absences
Page de gestion des absences
**Kind**: global class
* [Absences](#Absences)
* [.openModal(key, data)](#Absences+openModal)
* [.getData()](#Absences+getData)
<a name="Absences+openModal"></a>
### absences.openModal(key, data)
Gère l'ouverture des Modal
**Kind**: instance method of [<code>Absences</code>](#Absences)
| Param | Type | Description |
| --- | --- | --- |
| key | <code>String</code> | Correspond au type de modal [isOpen, isDelOpen, isJustOpen] |
| data | <code>Object</code> | Objet contenant les données à transmettre |
<a name="Absences+getData"></a>
### absences.getData()
Recupère les données d'absences depuis l'API
**Kind**: instance method of [<code>Absences</code>](#Absences)
<a name="Accueil"></a>
## Accueil
Page d'accueil de la gestion du semestre
**Kind**: global class
<a name="Accueil+getData"></a>
### accueil.getData()
Recupère les données du semestre selectionné depuis l'API
**Kind**: instance method of [<code>Accueil</code>](#Accueil)
<a name="Bulletin"></a>
## Bulletin
Page de présentation des bulletins étudiants
**Kind**: global class
* [Bulletin](#Bulletin)
* [.getData()](#Bulletin+getData)
* [.getPdf()](#Bulletin+getPdf)
<a name="Bulletin+getData"></a>
### bulletin.getData()
Recupère les données de bulletin depuis l'API
**Kind**: instance method of [<code>Bulletin</code>](#Bulletin)
<a name="Bulletin+getPdf"></a>
### bulletin.getPdf()
Recupère les données de bulletin en tant que "blob" pour un PDF depuis l'API
**Kind**: instance method of [<code>Bulletin</code>](#Bulletin)
<a name="Etudiants"></a>
## Etudiants
Page de présentation des étudiants inscrits au semestre
**Kind**: global class
<a name="Etudiants+getData"></a>
### etudiants.getData()
Recupère la liste des étudiants inscrits au semestre depuis l'API
**Kind**: instance method of [<code>Etudiants</code>](#Etudiants)
<br>
---
## `/GestionSemestre/Absences`
<a name="JustAbs"></a>
## JustAbs
Module de justification des absences
**Kind**: global class
* [JustAbs](#JustAbs)
* [.onFormSubmit](#JustAbs+onFormSubmit)
* [.postData(data)](#JustAbs+postData)
<a name="JustAbs+onFormSubmit"></a>
### justAbs.onFormSubmit
Gestion des données du formulaire
**Kind**: instance property of [<code>JustAbs</code>](#JustAbs)
| Param | Type |
| --- | --- |
| e | <code>Event</code> |
<a name="JustAbs+postData"></a>
### justAbs.postData(data)
Envoie une requête POST a l'API
**Kind**: instance method of [<code>JustAbs</code>](#JustAbs)
| Param | Type | Description |
| --- | --- | --- |
| data | <code>String</code> | Données à envoyer sous la forme param1=val1&param2=val2... |
<a name="SaisieAbs"></a>
## SaisieAbs
Module de saisie des absences
**Kind**: global class
* [SaisieAbs](#SaisieAbs)
* [.onFormSubmit](#SaisieAbs+onFormSubmit)
* [.postData(data)](#SaisieAbs+postData)
<a name="SaisieAbs+onFormSubmit"></a>
### saisieAbs.onFormSubmit
Gestion des données du formulaire
**Kind**: instance property of [<code>SaisieAbs</code>](#SaisieAbs)
| Param | Type |
| --- | --- |
| e | <code>Event</code> |
<a name="SaisieAbs+postData"></a>
### saisieAbs.postData(data)
Envoie une requête POST a l'API
**Kind**: instance method of [<code>SaisieAbs</code>](#SaisieAbs)
| Param | Type | Description |
| --- | --- | --- |
| data | <code>String</code> | Données à envoyer sous la forme param1=val1&param2=val2... |
<a name="SupprAbs"></a>
## SupprAbs
Module de suppression des absences
**Kind**: global class
<a name="SupprAbs+postData"></a>
### supprAbs.postData(data)
Envoie une requête POST a l'API
**Kind**: instance method of [<code>SupprAbs</code>](#SupprAbs)
| Param | Type | Description |
| --- | --- | --- |
| data | <code>String</code> | Données à envoyer sous la forme param1=val1&param2=val2... |
<br>
---
## Global
<a name="get"></a>
## get(url) ⇒ <code>Promise.&lt;Response&gt;</code>
Lance une requête GET a l'URL donnée en paramètre et retourne une Promise.
**Kind**: global function
| Param | Type | Description |
| --- | --- | --- |
| url | <code>String</code> | URL de la requête |
<a name="getLogin"></a>
## getLogin(url, login, pass) ⇒ <code>Promise.&lt;Response&gt;</code>
Lance une requête GET a l'URL donnée en paramètre et retourne une Promise. Dans ce cas particulier, on ajoute un header d'authentification.
**Kind**: global function
| Param | Type | Description |
| --- | --- | --- |
| url | <code>String</code> | URL de la requête |
| login | <code>String</code> | Identifiant |
| pass | <code>String</code> | Mot de passe |
<a name="getJson"></a>
## getJson(url) ⇒ <code>Promise.&lt;{data: any}&gt;</code>
Lance une requête GET a l'URL donnée en paramètre et retourne les données JSON d'une Promise.
**Kind**: global function
| Param | Type | Description |
| --- | --- | --- |
| url | <code>String</code> | URL de la requête |
<a name="post"></a>
## post(url, data) ⇒ <code>Promise.&lt;Response&gt;</code>
Lance une requête POST a l'URL donnée en paramètre et retourne une Promise.
**Kind**: global function
| Param | Type | Description |
| --- | --- | --- |
| url | <code>String</code> | URL de la requête |
| data | <code>String</code> | Données de la requête au format "param1=val1&param2=val2..." |

View File

@ -2,25 +2,25 @@
## Description ## Description
Version mobile de l'application web ScoDoc (v1.7) Version mobile de l'application web ScoDoc (v1)
### Fonctionnalités: ### Fonctionnalités:
- Login - Login
- Choix de département / formation - Choix de département / formation
- Affichage des profils étudiants - Affichage des profils étudiants
- Recherche d'élèves | Filtrage par groupe de TD/TP - Recherche d'élèves
- Affichage des bulletins de notes - Affichage des bulletins de notes
- Gestion des absences - Gestion des absences
### Installation
Le contenu du dossier `build` devrait se situer dans `Scodoc\static\mobile`.
Le dossier `build` est disponible dans les [releases](https://scodoc.org/git/theal/ScoDocMobile/releases) du projet ou à générer depuis les sources.
## Usage ## Usage
`npm run build` > Génère un dossier `build` avec le contenu du site en prod. Modifier le fichier index.js (ligne 8) afin de mettre l'endpoint de l'API ScoDoc
`npm install` > Crée un dossier `build` avec le contenu du site en prod
### Dans le cadre d'un serveur web Apache
Le contenu du dossier `build` doit etre la racine du site web.
## Arborescence ## Arborescence

2422
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,17 +8,12 @@
"@testing-library/react": "^11.2.6", "@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"i": "^0.3.6",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"js-cookies": "^1.0.4", "js-cookies": "^1.0.4",
"jsdoc": "^3.6.7",
"jsdoc-to-markdown": "^7.0.1",
"postcss": "^8.2.15",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^1.5.2", "react-bootstrap": "^1.5.2",
"react-device-detect": "^1.17.0", "react-device-detect": "^1.17.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-lazy-load-image-component": "^1.5.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"react-select": "^4.3.0", "react-select": "^4.3.0",
@ -28,8 +23,7 @@
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject"
"docs": "jsdoc2md ./src > docs.md"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

BIN
public/logo192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/logo512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -1,9 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import './Style.css' import './Style.css'
import {getJson} from './Request'
/** Page de choix du département */
class ChoixDept extends Component { class ChoixDept extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -14,18 +12,21 @@ class ChoixDept extends Component {
} }
componentWillMount() { componentWillMount() {
this.getData()
}
/**
* Recupère la liste des départements depuis l'API
*/
getData() {
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + 'list_depts?format=json') fetch(BASE_URL + 'list_depts?format=json', {
.then(res => { method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
this.setState({ depts: res.data }) this.setState({ depts: res.data })
}); }));
} }
render() { render() {
@ -37,7 +38,7 @@ class ChoixDept extends Component {
{this.state.depts.map((dept, index) => { {this.state.depts.map((dept, index) => {
return ( return (
<div className="col-sm" key={index} id="wrapDept"> <div className="col-sm" key={index} id="wrapDept">
<Link to={`/${dept}/Scolarite`}> <Link to={`/ScoDoc/static/mobile/${dept}/Scolarite`}>
Département {dept} Département {dept}
</Link> </Link>
</div> </div>

View File

@ -1,11 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css' import './Style.css'
import ScoNavBar from "./ScoNavBar"; import ScoNavBar from "./ScoNavBar";
import {getJson} from "./Request";
import {Button} from "react-bootstrap";
/** Page d'information d'un étudiant' */
class Etudiant extends Component { class Etudiant extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -21,28 +17,43 @@ class Etudiant extends Component {
} }
componentWillMount() { componentWillMount() {
this.getData() let dept = window.location.href.split('/')[6]
} let etudid = window.location.href.split('/')[9]
/**
* Recupère les données de l'étudiant depuis l'API
*/
getData() {
let dept = window.location.href.split('/')[7]
let etudid = window.location.href.split('/')[10]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/Notes/etud_info?format=json&etudid=' + etudid) fetch(BASE_URL + dept + '/Scolarite/Notes/etud_info?format=json&etudid=' + etudid, {
.then(res => { method: 'GET',
this.setState({ etud: res.data, formation: res.data.insemestre }) verify: false,
credentials: 'include',
})
.then(response =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
this.setState({ etud: res.data })
this.setState({ formation: res.data.insemestre })
// Recuperation des données de semestres pour la formation d'un étudiant // Recuperation des données de semestres pour la formation d'un étudiant
res.data.insemestre.map((sem) => { res.data.insemestre.map((sem, index) => {
getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem.formsemestre_id) fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem.formsemestre_id, {
.then(res => { method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
response.json().then(data => ({
// Traitement des données JSON
data: data,
status: response.status
}))
).then(res => {
let joined = this.state.semestres.concat(res.data[0]); let joined = this.state.semestres.concat(res.data[0]);
this.setState({ semestres: joined, loaded: true }) this.setState({ semestres: joined, loaded: true })
}) })
}) })
}) })
);
} }
render() { render() {
@ -54,7 +65,7 @@ class Etudiant extends Component {
<h1>{this.state.etud.nomprenom}</h1> <h1>{this.state.etud.nomprenom}</h1>
<img <img
alt={`${this.state.etud.nomprenom}`} alt={`${this.state.etud.nomprenom}`}
src={`/ScoDoc/${window.location.href.split('/')[7]}/Scolarite/Notes/${this.state.etud.photo_url}`} src={`/ScoDoc/${window.location.href.split('/')[6]}/Scolarite/Notes/${this.state.etud.photo_url}`}
width="102" width="102"
height="128" height="128"
className="d-inline-block align-top" className="d-inline-block align-top"
@ -65,10 +76,10 @@ class Etudiant extends Component {
this.state.etud.email !== "" || this.state.etud.emailperso !== "" ? this.state.etud.email !== "" || this.state.etud.emailperso !== "" ?
<div className="col-sm"> <div className="col-sm">
<h4>Contact</h4> <h4>Contact</h4>
{this.state.etud.telephone !== "" && <><a href={'tel:' + this.state.etud.telephone}>Téléphone: {this.state.etud.telephone}</a><br/></>} {this.state.etud.telephone !== "" && <a href={'tel:' + this.state.etud.telephone}>Téléphone: {this.state.etud.telephone}</a>}<br/>
{this.state.etud.telephonemobile !== "" && <><a href={'tel:' + this.state.etud.telephonemobile}>Mobile: {this.state.etud.telephonemobile}</a><br/></>} {this.state.etud.telephonemobile !== "" && <a href={'tel:' + this.state.etud.telephonemobile}>Mobile: {this.state.etud.telephonemobile}</a>}<br/>
{this.state.etud.email !== "" && <><a href={'mailto:' + this.state.etud.email}>Mail étudiant: {this.state.etud.email}</a><br/></>} {this.state.etud.email !== "" && <a href={'mailto:' + this.state.etud.email}>Mail étudiant: {this.state.etud.email}</a>}<br/>
{this.state.etud.emailperso !== "" && <><a href={'mailto:' + this.state.etud.emailperso}>Mail personnel: {this.state.etud.emailperso}</a><br/></>} {this.state.etud.emailperso !== "" && <a href={'mailto:' + this.state.etud.emailperso}>Mail personnel: {this.state.etud.emailperso}</a>}<br/>
</div> </div>
: :
<div className="col-sm">Aucun contact disponible</div> <div className="col-sm">Aucun contact disponible</div>
@ -107,33 +118,22 @@ class Etudiant extends Component {
return ( return (
<div> <div>
<b>{sem.titreannee}</b><br/> <b>{sem.titreannee}</b><br/>
{sem.date_debut} - {sem.date_fin}<br/> {sem.date_debut} - {sem.date_fin}
{this.state.etud.insemestre[index].groupes !== "" && this.state.etud.insemestre[index].groupes &&
"Groupes: " + this.state.etud.insemestre[index].groupes
}
<h5>Liens</h5>
<Link to={{
pathname: `/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`,
tab: "Absences",
etudid: window.location.href.split('/')[10],
name: this.state.etud.nomprenom
}}>
<Button variant="primary" style={{"margin-right": "2px", "margin-bottom": "2px"}}>Vers Absences</Button>
</Link>
<Link to={{
pathname: `/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`,
tab: "Bulletin",
etudid: window.location.href.split('/')[10],
name: this.state.etud.nomprenom
}}>
<Button variant="primary" style={{"margin-left": "2px", "margin-bottom": "2px"}}>Vers bulletin</Button>
</Link>
</div> </div>
) )
})} })}
</div> </div>
} }
</div> </div>
{/* TODO: Lien vers la gestion des absences
<div id="wrapDept" className="col-sm">
<Link to="">
<div className="col-sm">
Gestion des absences
</div>
</Link>
</div>
*/}
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,14 +1,12 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Tabs, Tab, Nav, NavItem, NavLink} from "react-bootstrap" import {Tabs, Tab} from "react-bootstrap"
import Accueil from "./GestionSemestre/Accueil"; import Accueil from "./GestionSemestre/Accueil";
import Absences from "./GestionSemestre/Absences"; import Absences from "./GestionSemestre/Absences";
import Etudiants from "./GestionSemestre/Etudiants"; import Eleves from "./GestionSemestre/Eleves";
import ScoNavBar from "./ScoNavBar"; import ScoNavBar from "./ScoNavBar";
import Bulletin from "./GestionSemestre/Bulletin"; import Bulletin from "./GestionSemestre/Bulletin";
import Select from "react-select"; import Select from "react-select";
import {getJson} from "./Request";
/** Page de gestion du semestre */
class GestionSemestre extends Component { class GestionSemestre extends Component {
constructor(props){ constructor(props){
super(props) super(props)
@ -16,38 +14,33 @@ class GestionSemestre extends Component {
selectOptions: [], selectOptions: [],
id: "", id: "",
name: '', name: '',
defaulttab: "Accueil",
defaultsel: "",
loading: true
} }
} }
componentWillMount() { componentWillMount() {
this.getData() // Recuperation de la liste des semestres
let dept = window.location.href.split('/')[6]
if (this.props.location.tab) { let sem = window.location.href.split('/')[8]
this.setState({defaulttab: this.props.location.tab, defaultsel: this.props.location.etudid,
id: this.props.location.etudid, name: this.props.location.name
})
}
}
/**
* Recupère la liste des étudiants inscrits au semestre pour le Select depuis l'API
*/
getData() {
let dept = window.location.href.split('/')[7]
let sem = window.location.href.split('/')[9]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem) fetch(BASE_URL + dept +
.then(res => { '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem, {
this.setState({students: res.data}) method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
})
).then(res => {
// Création d'une liste pour le select // Création d'une liste pour le select
res.data.map((student) => { res.data.map((student, index) => {
let joined = this.state.selectOptions.concat({label: student.nom_disp + " " + student.prenom, value: student.etudid}); let joined = this.state.selectOptions.concat({label: student.nom_disp + " " + student.prenom, value: student.etudid});
this.setState({selectOptions: joined, loading: false}) this.setState({selectOptions: joined})
}) })
}) })
);
} }
handleSelectChange(e){ handleSelectChange(e){
@ -63,16 +56,12 @@ class GestionSemestre extends Component {
{/* Selection de l'étudiant pour les sous-composants */} {/* Selection de l'étudiant pour les sous-composants */}
<div className="col-sm" id="wrapDept"> <div className="col-sm" id="wrapDept">
Choix de l'étudiant Choix de l'étudiant
<Select className="mySelect" <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
isLoading={this.state.loading}
options={this.state.selectOptions}
onChange={this.handleSelectChange.bind(this)}
value={this.state.selectOptions.find(option => option.value === this.state.defaultsel)} />
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<Tabs fill defaultActiveKey={this.state.defaulttab} id="controlled-tab-example" variant="pills"> <Tabs defaultActiveKey="Accueil" id="controlled-tab-example">
<Tab eventKey="Accueil" title="Accueil" > <Tab eventKey="Accueil" title="Accueil" >
<Accueil /> <Accueil />
</Tab> </Tab>
@ -82,8 +71,8 @@ class GestionSemestre extends Component {
<Tab eventKey="Bulletin" title="Bulletins"> <Tab eventKey="Bulletin" title="Bulletins">
<Bulletin id={this.state.id} name={this.state.name}/> <Bulletin id={this.state.id} name={this.state.name}/>
</Tab> </Tab>
<Tab eventKey="Etud" title="Etudiants"> <Tab eventKey="Eleves" title="Eleves">
<Etudiants students={this.state.students}/> <Eleves />
</Tab> </Tab>
</Tabs> </Tabs>
</div> </div>

View File

@ -1,12 +1,10 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Button, Spinner, Col} from 'react-bootstrap' import {Button, Col} from 'react-bootstrap'
import '../Style.css' import '../Style.css'
import SaisieAbs from "./Absences/SaisieAbs"; import SaisieAbs from "./Absences/SaisieAbs";
import SupprAbs from "./Absences/SupprAbs"; import SupprAbs from "./Absences/SupprAbs";
import JustAbs from "./Absences/JustAbs"; import JustAbs from "./Absences/JustAbs";
import {getJson} from "../Request";
/** Page de gestion des absences */
class Absences extends Component { class Absences extends Component {
constructor(props){ constructor(props){
super(props) super(props)
@ -22,16 +20,13 @@ class Absences extends Component {
abs: [], abs: [],
absjust: [], absjust: [],
// Données d'une absence selectionnée // Données d'une absence selectionnée
data: {}, data: {}
// En cours de recuperation de données
loading: false
} }
} }
// Recuperation des données en cas de changement de props (dans notre cas, changement d'étudiant.e) // Recuperation des données en cas de changement de props (dans notre cas, changement d'élève)
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id) { if (prevProps.id !== this.props.id) {
this.setState({loading: true})
this.getData(); this.getData();
} }
} }
@ -41,11 +36,6 @@ class Absences extends Component {
if (this.props.id !== "") {this.getData()} if (this.props.id !== "") {this.getData()}
} }
/**
* Gère l'ouverture des Modal
* @param key {String} - Correspond au type de modal [isOpen, isDelOpen, isJustOpen]
* @param data {Object} - Objet contenant les données à transmettre
*/
openModal(key, data) { openModal(key, data) {
this.setState({[key]: true}, () => setTimeout(() => { this.setState({[key]: true}, () => setTimeout(() => {
this.setState({[key]: false}) this.setState({[key]: false})
@ -53,19 +43,52 @@ class Absences extends Component {
if (data) {this.setState({data: data})} if (data) {this.setState({data: data})}
} }
/**
* Recupère les données d'absences depuis l'API
*/
getData() { getData() {
let dept = window.location.href.split('/')[7] this.getAbs()
this.getAbsJust()
}
getAbs() {
let dept = window.location.href.split('/')[6]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
if (this.state.id !== "") { if (this.state.id !== "") {
// Recuperation des absences non-justifiées fetch(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=0&etudid=" + this.props.id, {
getJson(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=0&etudid=" + this.props.id) method: 'GET',
.then(res => this.setState({abs: res.data})); verify: false,
// Recuperation des absences justifiées credentials: 'include',
getJson(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=1&etudid=" + this.props.id) })
.then(res => this.setState({absjust: res.data, loading: false})); .then(response =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
})
).then(res => {
// Recuperation de la liste des absences
this.setState({abs: res.data})
})
);
}
}
getAbsJust() {
let dept = window.location.href.split('/')[6]
let BASE_URL = window.$api_url
if (this.state.id !== "") {
fetch(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&absjust_only=1&etudid=" + this.props.id, {
method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
})
).then(res => {
// Recuperation de la liste des absences
this.setState({absjust: res.data})
})
);
} }
} }
@ -95,13 +118,10 @@ class Absences extends Component {
<span>🗘</span> <span>🗘</span>
</Button> </Button>
</h4> </h4>
{this.state.loading === true && {(this.state.abs.length === 0 && this.state.absjust.length === 0 && this.props.name !== "") &&
<Spinner animation="border"/> <h6>Aucune absence de l'élève</h6>
} }
{(this.state.abs.length + this.state.absjust.length === 0 && this.props.name !== "" && this.state.loading === false) && {this.state.abs.map((abs, index) => {
<h6>Aucune absence de l'étudiant.e</h6>
}
{this.state.abs.map((abs) => {
return ( return (
<div className="col-sm" id="wrapDept"> <div className="col-sm" id="wrapDept">
<Col> <Col>
@ -133,7 +153,7 @@ class Absences extends Component {
</div> </div>
) )
})} })}
{this.state.absjust.map((abs) => { {this.state.absjust.map((abs, index) => {
return ( return (
<div className="col-sm" id="wrapDept"> <div className="col-sm" id="wrapDept">
<Col> <Col>

View File

@ -1,8 +1,6 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Button, Col, Form, Modal} from "react-bootstrap"; import {Button, Col, Form, Modal} from "react-bootstrap";
import {post} from "../../Request";
/** Module de justification des absences */
class JustAbs extends Component { class JustAbs extends Component {
constructor(props){ constructor(props){
super(props) super(props)
@ -30,22 +28,20 @@ class JustAbs extends Component {
} }
} }
/**
* Envoie une requête POST a l'API
* @param data {String} - Données à envoyer sous la forme param1=val1&param2=val2...
*/
postData(data) { postData(data) {
let dept = window.location.href.split('/')[7] let dept = window.location.href.split('/')[6]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
post(BASE_URL + dept + "/Scolarite/Absences/doJustifAbsence", data) fetch(BASE_URL + dept + "/Scolarite/Absences/doJustifAbsence", {
method: 'POST',
verify: false,
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: data
})
// Fermeture du modal // Fermeture du modal
this.setState({isOpen: false}) this.setState({isOpen: false})
} }
/**
* Gestion des données du formulaire
* @param e {Event}
*/
onFormSubmit = e => { onFormSubmit = e => {
// Traitement du formulaire // Traitement du formulaire
// Empeche le bouton de rediriger ou actualiser la page // Empeche le bouton de rediriger ou actualiser la page

View File

@ -1,8 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Button, Col, Form, Modal} from "react-bootstrap"; import {Button, Col, Form, Modal} from "react-bootstrap";
import {post} from "../../Request"; import Absences from '../Absences'
/** Module de saisie des absences */
class SaisieAbs extends Component { class SaisieAbs extends Component {
constructor(props){ constructor(props){
super(props) super(props)
@ -26,10 +25,6 @@ class SaisieAbs extends Component {
} }
} }
/**
* Gestion des données du formulaire
* @param e {Event}
*/
onFormSubmit = e => { onFormSubmit = e => {
// Traitement du formulaire // Traitement du formulaire
// Empeche le bouton de rediriger ou actualiser la page // Empeche le bouton de rediriger ou actualiser la page
@ -62,14 +57,16 @@ class SaisieAbs extends Component {
} }
} }
/**
* Envoie une requête POST a l'API
* @param data {String} - Données à envoyer sous la forme param1=val1&param2=val2...
*/
postData(data) { postData(data) {
let dept = window.location.href.split('/')[7] let dept = window.location.href.split('/')[6]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
post(BASE_URL + dept + "/Scolarite/Absences/doSignaleAbsence", data) fetch(BASE_URL + dept + "/Scolarite/Absences/doSignaleAbsence", {
method: 'POST',
verify: false,
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: data
})
.then(response => { .then(response => {
if (response.status === 200) { if (response.status === 200) {
// Fermeture du modal // Fermeture du modal

View File

@ -1,8 +1,6 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Button, Modal} from "react-bootstrap"; import {Button, Modal} from "react-bootstrap";
import {post} from "../../Request";
/** Module de suppression des absences */
class SupprAbs extends Component { class SupprAbs extends Component {
constructor(props){ constructor(props){
super(props) super(props)
@ -24,16 +22,18 @@ class SupprAbs extends Component {
} }
} }
/**
* Envoie une requête POST a l'API
* @param data {String} - Données à envoyer sous la forme param1=val1&param2=val2...
*/
postData() { postData() {
let dept = window.location.href.split('/')[7] let dept = window.location.href.split('/')[6]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
let data = "datedebut=" + this.props.data.date + "&datefin=" + this.props.data.date + let data = "datedebut=" + this.props.data.date + "&datefin=" + this.props.data.date +
"&demijournee=" + this.props.data.demijournee + "&etudid=" + this.state.etudid "&demijournee=" + this.props.data.demijournee + "&etudid=" + this.state.etudid
post(BASE_URL + dept + "/Scolarite/Absences/doAnnuleAbsence", data) fetch(BASE_URL + dept + "/Scolarite/Absences/doAnnuleAbsence", {
method: 'POST',
verify: false,
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: data
})
// Fermeture du modal // Fermeture du modal
this.setState({isOpen: false}) this.setState({isOpen: false})
} }

View File

@ -1,66 +1,39 @@
import React, {Component} from "react"; import React, {Component} from "react";
import '../Style.css' import '../Style.css'
import {getJson} from "../Request";
import {Spinner} from "react-bootstrap";
/** Page d'accueil de la gestion du semestre */
class Accueil extends Component { class Accueil extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
semestre: {}, semestre: {},
resp: [],
loading: true
}; };
} }
componentWillMount() { componentWillMount() {
this.setState({loading: true}) let dept = window.location.href.split('/')[6]
this.getData() let sem = window.location.href.split('/')[8]
}
/**
* Recupère les données du semestre selectionné depuis l'API
*/
getData() {
let dept = window.location.href.split('/')[7]
let sem = window.location.href.split('/')[9]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
// Recuperation des infos de semestre fetch(BASE_URL + dept +
getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem) '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem, {
.then(res => { method: 'GET',
this.setState({ semestre: res.data[0], resp_l: res.data[0].responsables}); verify: false,
// Recuperation des noms complets des responsables credentials: 'include',
res.data[0].responsables.map((resp) =>
getJson(BASE_URL + dept + '/Scolarite/Users/user_info?format=json&user_name=' + resp)
.then(res => {
let joined = this.state.resp.concat(res.data.nomplogin)
this.setState({resp: joined, loading: false})
}) })
.catch(error => { .then(response =>
this.setState({resp: this.state.resp_l, loading: false}) response.json().then(data => ({
data: data,
}) })
) ).then(res => {
}) this.setState({ semestre: res.data[0]});
}));
} }
render() { render() {
return ( return (
<div className="wrapper"> <div className="wrapper">
{this.state.loading === false ?
<h1 id="pageTitle">{this.state.semestre.titre}<br/> <h1 id="pageTitle">{this.state.semestre.titre}<br/>
Semestre {this.state.semestre.semestre_id} en {this.state.semestre.modalite}<br/> Semestre {this.state.semestre.semestre_id} en {this.state.semestre.modalite}<br/>
{this.state.resp.length === 1 ? "Responsable: (" : "Responsables ("} (Responsable: {this.state.semestre.responsables})</h1>
{this.state.resp.map((resp, index) => {
if (index !== this.state.resp.length-1) {return (resp + ", ")}
else {return (resp + ")")}
})}
</h1>
:
// En cas de chargement
<Spinner animation="border"/>
}
</div> </div>
) )
} }

View File

@ -1,31 +1,34 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Table, Button, Dropdown, Spinner} from "react-bootstrap" import {Table, Button, Dropdown} from "react-bootstrap"
import '../Style.css' import '../Style.css'
import {get, getJson} from "../Request";
/** Page de présentation des bulletins étudiants */
class Bulletin extends Component { class Bulletin extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
bltn: {}, bltn: {},
datue: {}, datue: {},
loaded: false, loaded: false
loading: false
}; };
this.getData = this.getData.bind(this); this.getData = this.getData.bind(this);
} }
/**
* Recupère les données de bulletin depuis l'API
*/
getData() { getData() {
let dept = window.location.href.split('/')[7] let dept = window.location.href.split('/')[6]
let sem = window.location.href.split('/')[9] let sem = window.location.href.split('/')[8]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=' + sem +'&etudid=' + fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=' +
this.props.id +'&format=json') sem +'&etudid=' + this.props.id +'&format=json', {
.then(res => { method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
// Recuperation des données du bulletin // Recuperation des données du bulletin
this.setState({ bltn: res.data }, () => { this.setState({ bltn: res.data }, () => {
// Recuperation d'un tableau CodeUE | NomUE // Recuperation d'un tableau CodeUE | NomUE
@ -36,21 +39,24 @@ class Bulletin extends Component {
} }
this.setState({datue: ls}, () => { this.setState({datue: ls}, () => {
// Marquage du bulletin comme "chargé" // Marquage du bulletin comme "chargé"
this.setState({loaded: true, loading: false}) this.setState({loaded: true})
}) })
}) })
}) })
);
} }
/** // Recuperation du bulletin au format PDF
* Recupère les données de bulletin en tant que "blob" pour un PDF depuis l'API
*/
getPdf() { getPdf() {
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
let dept = window.location.href.split('/')[7] let dept = window.location.href.split('/')[6]
let sem = window.location.href.split('/')[9] let sem = window.location.href.split('/')[8]
get(BASE_URL + dept + "/Scolarite/Notes/formsemestre_bulletinetud?formsemestre_id=" + sem + fetch( BASE_URL + dept + "/Scolarite/Notes/formsemestre_bulletinetud?" +
"&etudid=" + this.props.id + "&format=pdf&version=selectedevals") "formsemestre_id=" + sem + "&etudid=" + this.props.id + "&format=pdf&version=selectedevals", {
method: 'GET',
verify: false,
credentials: 'include',
})
.then( res => res.blob() ) .then( res => res.blob() )
.then( blob => { .then( blob => {
let file = window.URL.createObjectURL(blob); let file = window.URL.createObjectURL(blob);
@ -58,10 +64,9 @@ class Bulletin extends Component {
}); });
} }
// Recuperation des données en cas de changement de props (dans notre cas, changement d'étudiant.e) // Recuperation des données en cas de changement de props (dans notre cas, changement d'élève)
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id) { if (prevProps.id !== this.props.id) {
this.setState({loading: true})
this.getData(); this.getData();
} }
} }
@ -77,9 +82,6 @@ class Bulletin extends Component {
<div style={{"margin-bottom": "20px"}}> <div style={{"margin-bottom": "20px"}}>
<h1 id="pageTitle">Bulletins de notes</h1> <h1 id="pageTitle">Bulletins de notes</h1>
</div> </div>
{this.state.loading === true && this.state.loaded === false &&
<Spinner animation="border"/>
}
{this.state.loaded === true && {this.state.loaded === true &&
<div> <div>
<Table responsive="sm"> <Table responsive="sm">
@ -99,15 +101,13 @@ class Bulletin extends Component {
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href="#">Min: {this.state.bltn.note.min}</Dropdown.Item> <Dropdown.Item href="#">Min: {this.state.bltn.note.min}</Dropdown.Item>
<Dropdown.Item href="#">Max: {this.state.bltn.note.max}</Dropdown.Item> <Dropdown.Item href="#">Max: {this.state.bltn.note.max}</Dropdown.Item>
{this.state.bltn.hasOwnProperty('rang') &&
<Dropdown.Item href="#">Classement: {this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item> <Dropdown.Item href="#">Classement: {this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
}
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</th> </th>
</tr> </tr>
</thead> </thead>
{this.state.bltn.ue.map((ue) => { {this.state.bltn.ue.map((ue, index) => {
return ( return (
<tbody> <tbody>
<tr className="ueRow"> <tr className="ueRow">
@ -121,14 +121,12 @@ class Bulletin extends Component {
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href="#">Min: {ue.note.min}</Dropdown.Item> <Dropdown.Item href="#">Min: {ue.note.min}</Dropdown.Item>
<Dropdown.Item href="#">Max: {ue.note.max}</Dropdown.Item> <Dropdown.Item href="#">Max: {ue.note.max}</Dropdown.Item>
{ue.hasOwnProperty('rang') &&
<Dropdown.Item href="#">Classement: {ue.rang}/{this.state.bltn.rang.ninscrits}</Dropdown.Item> <Dropdown.Item href="#">Classement: {ue.rang}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
}
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</td> </td>
</tr> </tr>
{ue.module.map((mod) => { {ue.module.map((mod, index) => {
return ( return (
<tr> <tr>
<td colSpan="3">{mod.titre.replace("&apos;", "'")}</td> <td colSpan="3">{mod.titre.replace("&apos;", "'")}</td>
@ -141,9 +139,7 @@ class Bulletin extends Component {
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href="#">Min: {mod.note.min}</Dropdown.Item> <Dropdown.Item href="#">Min: {mod.note.min}</Dropdown.Item>
<Dropdown.Item href="#">Max: {mod.note.max}</Dropdown.Item> <Dropdown.Item href="#">Max: {mod.note.max}</Dropdown.Item>
{mod.hasOwnProperty('rang') &&
<Dropdown.Item href="#">Classement: {mod.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item> <Dropdown.Item href="#">Classement: {mod.rang.value}/{this.state.bltn.rang.ninscrits}</Dropdown.Item>
}
<Dropdown.Item href="#">Coefficient: {mod.coefficient}</Dropdown.Item> <Dropdown.Item href="#">Coefficient: {mod.coefficient}</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>

View File

@ -0,0 +1,73 @@
import React, {Component} from "react";
import '../Style.css'
import {Link} from "react-router-dom";
class Eleves extends Component {
constructor(props) {
super(props);
this.state = {
// Liste des élèves inscrits au semestre
students: [],
};
}
componentWillMount() {
let dept = window.location.href.split('/')[6]
let sem = window.location.href.split('/')[8]
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 =>
// Traitement des données JSON
response.json().then(data => ({
data: data,
})
).then(res => {
// Gestion des données sous forme de tableau a deux colonnes
const dat = res.data.map((x,i) => {
return i % 2 === 0 ? res.data.slice(i, i+2) : null;
}).filter(x => x != null);
this.setState({ students: dat});
}));
}
render() {
return (
<div className="wrapper">
<h1 id="pageTitle">Liste des élèves</h1>
<div className="container">
{this.state.students.map((students, index) => {
// Creation du tableau de deux colonnes
return (
<div className="row justify-content-center">
{students.map((etud, index) => {
return (
<div className="col" key={index} id="wrapDept">
<Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/Etudiant/${etud.etudid}`}>
{/* Recuperation de la photo de l'etudiant */}
<img
alt={`${etud.nom_disp} ${etud.prenom}`}
src={`/ScoDoc/RT/Scolarite/Notes/get_photo_image?etudid=${etud.etudid}`}
width="102"
height="128"
className="d-inline-block align-top"
/>{' '}<br/>
{etud.nom_disp} {etud.prenom}
</Link>
</div>
)
})}
</div>
)
})}
</div>
</div>
)
}
}
export default Eleves

View File

@ -1,170 +0,0 @@
import React, {Component} from "react";
import {LazyLoadImage} from 'react-lazy-load-image-component';
import '../Style.css'
import {Link} from "react-router-dom";
import {getJson} from "../Request";
import {Spinner} from "react-bootstrap";
import Select from "react-select";
// CONSTANTES DE STYLE SELECT GROUP
const groupStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
};
const groupBadgeStyles = {
backgroundColor: '#EBECF0',
borderRadius: '2em',
color: '#172B4D',
display: 'inline-block',
fontSize: 12,
fontWeight: 'normal',
lineHeight: '1',
minWidth: 1,
padding: '0.16666666666667em 0.5em',
textAlign: 'center',
};
const formatGroupLabel = data => (
<div style={groupStyles}>
<span>{data.label}</span>
<span style={groupBadgeStyles}>{data.options.length}</span>
</div>
);
/** Page de présentation des étudiants inscrits au semestre */
class Etudiants extends Component {
constructor(props) {
super(props);
this.state = {
// Liste des étudiants inscrits au semestre
students: [],
// Gestion du select
selectOptions: [{label: "Groupe: Aucun", value: "Default"}],
id: "",
name: '',
};
}
componentWillMount() {
this.getData()
}
componentDidUpdate(prevProps) {
if (prevProps !== this.props) {
if (this.props.students.length && this.state.students.length === 0) {
const dat = this.props.students.map((x,i) => {
return i % 2 === 0 ? this.props.students.slice(i, i+2) : null;
}).filter(x => x != null);
this.setState({ students: dat});
}
}
}
/**
* Recupère la liste des groupes du semestre depuis l'API
*/
getData() {
let dept = window.location.href.split('/')[7]
let sem = window.location.href.split('/')[9]
let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/formsemestre_partition_list?format=json&formsemestre_id=' + sem)
.then(res => {
// eslint-disable-next-line array-callback-return
res.data.map((part) => {
// Ajout de la catégorie
let new_part = {label: part.partition_name, options: []}
// Ajout des groupes
// eslint-disable-next-line array-callback-return
part.group.map((group) => {
new_part.options.push({label: group.group_name, value: group.group_id})
})
// Ajout au state
let joined = this.state.selectOptions.concat(new_part);
this.setState({ selectOptions: joined})
})
})
}
/**
* Recupère la liste des étudiants dans un groupe depuis l'API
*/
getStudents() {
let dept = window.location.href.split('/')[7]
let group = this.state.id
let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/groups_view?with_codes=1&format=json&group_ids=' + group)
.then(res => {
const dat = res.data.map((x,i) => {
return i % 2 === 0 ? res.data.slice(i, i+2) : null;
}).filter(x => x != null);
this.setState({students: dat});
})
}
/**
* Gestion des données du Select
*/
handleSelectChange(e){
this.setState({id:e.value, name:e.label}, () => {
if (this.state.id !== "Default") {this.getStudents()}
else {
if (this.props.students.length) {
const dat = this.props.students.map((x,i) => {
return i % 2 === 0 ? this.props.students.slice(i, i+2) : null;
}).filter(x => x != null);
this.setState({ students: dat});
}
}
})
}
render() {
return (
<div className="wrapper">
<h1 id="pageTitle">Liste des étudiants</h1>
<div className="container">
<Select
defaultValue={this.state.selectOptions[0]}
options={this.state.selectOptions}
formatGroupLabel={formatGroupLabel}
onChange={this.handleSelectChange.bind(this)}
/>
{this.state.students.length !== 0 ?
this.state.students.map((students) => {
// Creation du tableau de deux colonnes
return (
<div className="row justify-content-center">
{students.map((etud, index) => {
return (
<div className="col" key={index} id="wrapDept">
<Link to={`/${window.location.href.split('/')[7]}/Scolarite/Etudiant/${etud.etudid}`}>
{/* Recuperation de la photo de l'etudiant */}
<LazyLoadImage
alt={`${etud.nom_disp} ${etud.prenom}`}
src={`/ScoDoc/${window.location.href.split('/')[7]}/Scolarite/Notes/get_photo_image?etudid=${etud.etudid}`}
width="102"
height="128"
className="d-inline-block align-top"
/>{' '}<br/>
{etud.nom_disp} {etud.prenom}
</Link>
</div>
)
})}
</div>
)
})
:
<div className="row justify-content-center">
<Spinner animation="border"/>
</div>
}
</div>
</div>
)
}
}
export default Etudiants

View File

@ -3,9 +3,7 @@ import { isMobile } from 'react-device-detect';
import './Style.css' import './Style.css'
import ChoixDept from "./ChoixDept"; import ChoixDept from "./ChoixDept";
import ScoNavBar from "./ScoNavBar"; import ScoNavBar from "./ScoNavBar";
import {getLogin} from "./Request";
/** Page de Login */
class Login extends Component { class Login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -27,10 +25,6 @@ class Login extends Component {
this.setState({ pass: e.target.value }); this.setState({ pass: e.target.value });
} }
/**
* Verifie la validité des identifiants depuis l'API
* @param e {event}
*/
checkCredentials(e) { checkCredentials(e) {
e.preventDefault(); e.preventDefault();
@ -39,7 +33,15 @@ class Login extends Component {
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getLogin(BASE_URL, login, pass) fetch(BASE_URL, {
method: 'GET',
verify: false,
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa(login + ":" + pass)
},
})
.then(res => { .then(res => {
this.setState({ status: res["status"] }); this.setState({ status: res["status"] });
}) })

View File

@ -1,67 +0,0 @@
/**
* Lance une requête GET a l'URL donnée en paramètre et retourne une Promise.
* @param url {String} - URL de la requête
* @returns {Promise<Response>}
*/
export function get(url) {
return (
fetch(url, {
method: 'GET',
verify: false,
credentials: 'include',
})
)
}
/**
* Lance une requête GET a l'URL donnée en paramètre et retourne une Promise.
* Dans ce cas particulier, on ajoute un header d'authentification.
* @param url {String} - URL de la requête
* @param login {String} - Identifiant
* @param pass {String} - Mot de passe
* @returns {Promise<Response>}
*/
export function getLogin(url, login, pass) {
return (
fetch(url, {
method: 'GET',
verify: false,
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + btoa(login + ":" + pass)
},
})
)
}
/**
* Lance une requête GET a l'URL donnée en paramètre et retourne les données JSON d'une Promise.
* @param url {String} - URL de la requête
* @returns {Promise<{data: any}>}
*/
export function getJson(url) {
return get(url)
.then(response => response.json()
.then(data => ({data: data}))
.then(res => {return res})
);
}
/**
* Lance une requête POST a l'URL donnée en paramètre et retourne une Promise.
* @param url {String} - URL de la requête
* @param data {String} - Données de la requête au format "param1=val1&param2=val2..."
* @returns {Promise<Response>}
*/
export function post(url, data) {
return (
fetch(url, {
method: 'POST',
verify: false,
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: data
})
)
}

View File

@ -3,7 +3,6 @@ import {Nav, Navbar, Button, Container} from 'react-bootstrap'
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import './Style.css' import './Style.css'
/** Barre de navigation */
class ScoNavBar extends Component { class ScoNavBar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -37,21 +36,13 @@ class ScoNavBar extends Component {
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto"> <Nav className="ml-auto">
<Button variant="outline-primary" href="/ScoDoc" style={{"margin": "1px"}}>Version Desktop</Button> <Nav.Link href="/ScoDoc">Version Desktop</Nav.Link>
{window.location.href.split('/').length > 9 && <Button variant="primary" onClick={() => {this.logout()}}>Déconnexion</Button>
<Button
variant="outline-primary"
href={"/ScoDoc/static/mobile/#/" + window.location.href.split('/')[7] + "/Scolarite"}
style={{"margin": "1px"}}>
Retour au choix de semestre
</Button>
}
<Button variant="primary" style={{"margin": "1px"}} onClick={() => {this.logout()}}>Déconnexion</Button>
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
</Container> </Container>
{this.state.logout === true && {this.state.logout === true &&
<Redirect push to="/"/> <Redirect push to={window.$api_url + 'static/mobile/'}/>
} }
</Navbar> </Navbar>
) )

View File

@ -4,9 +4,7 @@ import './Style.css'
import ScoNavBar from "./ScoNavBar"; import ScoNavBar from "./ScoNavBar";
import SearchStudent from './SearchStudent' import SearchStudent from './SearchStudent'
import {Accordion, Card, Button} from 'react-bootstrap' import {Accordion, Card, Button} from 'react-bootstrap'
import {getJson} from "./Request";
/** Page de choix du semestre */
class Scolarite extends Component { class Scolarite extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -16,25 +14,34 @@ class Scolarite extends Component {
toast: false toast: false
}; };
this.dismissToast = this.dismissToast.bind(this); this.dismissToast = this.dismissToast.bind(this);
this.getData = this.getData.bind(this);
} }
componentWillMount() { componentWillMount() {
this.getData() let dept = window.location.href.split('/')[6]
}
/**
* Recupère la liste des semestres depuis l'API
*/
getData () {
let dept = window.location.href.split('/')[7]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json') fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json', {
.then(res => { method: 'GET',
this.setState({ semestres: res.data }); verify: false,
credentials: 'include',
}) })
.then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
this.setState({ semestres: res.data });
}));
} }
dismissToast = () => this.setState({toast: false}) getData () {
return this.state.semestres
}
dismissToast() {
this.setState({toast: false})
}
render() { render() {
return ( return (
@ -56,16 +63,15 @@ class Scolarite extends Component {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
{this.state.semestres.map((sem, index) => { {this.state.semestres.map((sem, index) => {
if (sem.etat === "1") { if(sem.etat === "1")
return ( return (
<div className="col-sm" key={index} id="wrapDept"> <div className="col-sm" key={index} id="wrapDept">
<Link to={`/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`}> <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/${sem.formsemestre_id}/GestionSem`}>
<h4>{sem.titre} [{sem.modalite}]</h4> <h4>{sem.titre} [{sem.modalite}]</h4>
<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>
</div> </div>
) )
}
})} })}
</div> </div>
</div> </div>
@ -74,23 +80,22 @@ class Scolarite extends Component {
</Card> </Card>
<Card> <Card>
<Card.Header> <Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1"> <Accordion.Toggle as={Button} variant="link" eventKey="0">
Semestres passés Semestres passés
</Accordion.Toggle> </Accordion.Toggle>
</Card.Header> </Card.Header>
<Accordion.Collapse eventKey="1"> <Accordion.Collapse eventKey="1">
<Card.Body> <Card.Body>
{this.state.semestres.map((sem, index) => { {this.state.semestres.map((sem, index) => {
if (sem.etat !== "1") { if(sem.etat !== "1")
return ( return (
<div className="col-12" key={index} id="wrapDept"> <div className="col-12" key={index} id="wrapDept">
<Link to={`/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`}> <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/${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>
</div> </div>
) )
}
})} })}
</Card.Body> </Card.Body>
</Accordion.Collapse> </Accordion.Collapse>

View File

@ -1,9 +1,7 @@
import React, {Component} from "react"; import React, {Component} from "react";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Row, Col} from "react-bootstrap" import {Row, Col} from "react-bootstrap"
import {getJson} from "./Request";
/** Module de recherche d'étudiant */
class SearchStudent extends Component { class SearchStudent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -22,47 +20,46 @@ class SearchStudent extends Component {
this.setState({ search: e.target.value }); this.setState({ search: e.target.value });
} }
/** searchStudent() {
* Lance une recherche de l'étudiant depuis l'API let dept = window.location.href.split('/')[6]
* @param search {String} - Texte recherché
*/
searchStudent(search) {
let dept = window.location.href.split('/')[7]
let BASE_URL = window.$api_url let BASE_URL = window.$api_url
getJson(BASE_URL + dept + '/Scolarite/Notes/search_etud_by_name?term=' + search +'&format=json') fetch(BASE_URL + dept +
'/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 => { .then(res => {
this.setState({ students: res.data }); this.setState({ students: res.data });
if (this.state.students.length === 0) { if (this.state.students.length === 0) {
this.setState({search_status: 1, toast: true}); this.setState({search_status: 1, toast: true});
} else { } else {
this.setState({search_status: 2, toast: false}); this.setState({search_status: 2, toast: false});
} }
}) }))
this.setState({searched: true}) this.setState({searched: true})
} }
/**
* Presentation du résultat
* @returns {JSX.Element} - Resultat au format JSX
*/
result() { result() {
if (this.state.toast === true) { if (this.state.toast === true) {
return ( return (
<div id="wrapDept"> <div id="wrapDept">
Aucun étudiant trouvé Aucun élève trouvé
</div> </div>
) )
} else if (this.state.search_status === 2) { } else if (this.state.search_status === 2) {
return ( return (
<Col> <Col>
{this.state.students.map((student) => { {this.state.students.map((student, index) => {
return ( return (
<Row id="wrapDept"> <Row id="wrapDept">
<Link to={`/${window.location.href.split('/')[7]}/Scolarite/Etudiant/${student.value}`}> <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/Etudiant/${student.value}`}>
<span>{student.label}</span> <span>{student.label}</span>
</Link> </Link>
</Row> </Row>
) );
})} })}
</Col> </Col>
) )
@ -75,7 +72,7 @@ class SearchStudent extends Component {
<div className="input-group"> <div className="input-group">
<input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/> <input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
<div className="input-group-append"> <div className="input-group-append">
<button type="button" className="btn waves-effect waves-light btn-primary" onClick={() => {this.searchStudent(this.state.search)}}> <button type="button" className="btn waves-effect waves-light btn-primary" onClick={() => {this.searchStudent()}}>
Rechercher Rechercher
</button> </button>
</div> </div>

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {HashRouter, Route} from 'react-router-dom'; 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";
@ -8,18 +8,12 @@ import Etudiant from "./ScoDoc/Etudiant";
const Main = () => { const Main = () => {
return ( return (
/*<HashRouter> <Switch>
<Route exact path='/ScoDoc/static/mobile' component={Login}/> <Route exact path='/ScoDoc/static/mobile' component={Login}/>
<Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite' component={Scolarite}/> <Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite' component={Scolarite}/>
<Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite/Etudiant/:EtudId' component={Etudiant}/> <Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite/Etudiant/:EtudId' component={Etudiant}/>
<Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite/:SEM/GestionSem' component={GestionSemestre}/> <Route exact path='/ScoDoc/static/mobile/:DEPT/Scolarite/:SEM/GestionSem' component={GestionSemestre}/>
</HashRouter>*/ </Switch>
<HashRouter>
<Route exact path='/' component={Login}/>
<Route exact path='/:DEPT/Scolarite' component={Scolarite}/>
<Route exact path='/:DEPT/Scolarite/Etudiant/:EtudId' component={Etudiant}/>
<Route exact path='/:DEPT/Scolarite/:SEM/GestionSem' component={GestionSemestre}/>
</HashRouter>
); );
} }