ScoDocMobile/src/ScoDoc/GestionSemestre/Bulletin.js

158 lines
6.3 KiB
JavaScript

import React, {Component} from "react";
import Select from "react-select";
import {Table} from "react-bootstrap"
import '../Style.css'
class Bulletin extends Component {
constructor(props) {
super(props);
this.state = {
selectOptions: [],
id: "",
name: '',
bltn: {},
datue: {},
loaded: false
};
this.getData = this.getData.bind(this);
this.getJsonData = this.getJsonData.bind(this);
}
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 => {
res.data.map((student, index) => {
let joined = this.state.selectOptions.concat({label: student.nom_disp + " " + student.prenom, value: student.etudid});
this.setState({selectOptions: joined})
})
})
);
}
getJsonData () {
this.setState({bltn: require('..\\..\\json\\bltn.json')}, () => {
let ls = {}
for (let elm in this.state.bltn.decision_ue) {
elm = this.state.bltn.decision_ue[elm]
ls[elm.acronyme] = elm.titre
}
this.setState({datue: ls}, () => {
this.setState({loaded: true})
})
})
}
getData() {
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_bulletinetud?formsemestre_id=' +
sem +'&etudid=' + this.state.id +'&format=json', {
method: 'GET',
verify: false,
credentials: 'include',
})
.then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
this.setState({ bltn: res.data }, () => {
let ls = {}
for (let elm in this.state.bltn.decision_ue) {
elm = this.state.bltn.decision_ue[elm]
ls[elm.acronyme] = elm.titre
}
this.setState({datue: ls}, () => {
this.setState({loaded: true})
})
})
})
);
}
handleSelectChange(e){
this.setState({id:e.value, name:e.label}, () => {this.getData()})
}
render() {
return (
<div className="wrapper">
<h1 id="pageTitle">Bulletins de notes</h1>
<Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
{this.state.loaded === true &&
<div>
<h2>Bulletin de {this.state.name}</h2>
<Table responsive="sm">
<thead>
<tr>
<th colSpan="3"/>
<th>Rang</th>
<th colSpan="2">Promotion</th>
<th>Note/20</th>
<th>Coef.</th>
</tr>
<tr className="smallRow">
<th colSpan="4"/>
<th>Mini</th>
<th>Maxi</th>
<th colSpan="2"/>
</tr>
<tr className="bigRow">
<th colSpan="3">Moyenne générale</th>
<th>{this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</th>
<th>{this.state.bltn.note.min}</th>
<th>{this.state.bltn.note.max}</th>
<th>{this.state.bltn.note.value}</th>
<th/>
</tr>
</thead>
{this.state.bltn.ue.map((ue, index) => {
return (
<tbody>
<tr className="ueRow">
<td colSpan="3">{ue.acronyme} - {this.state.datue[ue.acronyme]}</td>
<td>{ue.rang}/{this.state.bltn.rang.ninscrits}</td>
<td>{ue.note.min}</td>
<td>{ue.note.max}</td>
<td>{ue.note.value}</td>
<td>{/*Coef*/}</td>
</tr>
{ue.module.map((mod, index) => {
return (
<tr>
<td colSpan="3">{mod.titre}</td>
<td>{mod.rang.value}/{this.state.bltn.rang.ninscrits}</td>
<td>{mod.note.min}</td>
<td>{mod.note.max}</td>
<td>{mod.note.value}</td>
<td>{mod.coefficient}</td>
</tr>
)
})}
</tbody>
)
})}
</Table>
</div>
}
</div>
)
}
}
export default Bulletin