Ajout de gestion de bulletin
This commit is contained in:
parent
52e54e1c60
commit
4b0c3cf1b9
|
@ -5,6 +5,7 @@ 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";
|
import {Link} from "react-router-dom";
|
||||||
|
import Bulletin from "./GestionSemestre/Bulletin";
|
||||||
|
|
||||||
class GestionSemestre extends Component {
|
class GestionSemestre extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
@ -19,12 +20,15 @@ class GestionSemestre extends Component {
|
||||||
<Tab eventKey="Absences" title="Absences">
|
<Tab eventKey="Absences" title="Absences">
|
||||||
<Absences />
|
<Absences />
|
||||||
</Tab>
|
</Tab>
|
||||||
|
<Tab eventKey="Bulletin" title="Bulletins">
|
||||||
|
<Bulletin />
|
||||||
|
</Tab>
|
||||||
<Tab eventKey="Eleves" title="Eleves">
|
<Tab eventKey="Eleves" title="Eleves">
|
||||||
<Eleves />
|
<Eleves />
|
||||||
</Tab>
|
</Tab>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
<footer className="fixed-bottom">
|
<footer>
|
||||||
<div style={{background: "#cccccc", padding: "5px"}}>
|
<div style={{background: "#cccccc", padding: "5px"}}>
|
||||||
<Link to={`/${window.location.href.split('/')[3]}/Scolarite`}>
|
<Link to={`/${window.location.href.split('/')[3]}/Scolarite`}>
|
||||||
<Button type="button" className="btn waves-effect waves-light btn-primary">Retour au choix de semestre</Button>
|
<Button type="button" className="btn waves-effect waves-light btn-primary">Retour au choix de semestre</Button>
|
||||||
|
|
|
@ -0,0 +1,158 @@
|
||||||
|
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
|
|
@ -1,9 +1,5 @@
|
||||||
/* BASIC */
|
/* BASIC */
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: #56baed;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Poppins", sans-serif;
|
font-family: "Poppins", sans-serif;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
@ -96,13 +92,6 @@ a {
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
/* Margin bottom by footer height */
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FORM TYPOGRAPHY*/
|
|
||||||
|
|
||||||
input[type=button], button[type=submit], input[type=reset] {
|
input[type=button], button[type=submit], input[type=reset] {
|
||||||
background-color: #56baed;
|
background-color: #56baed;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -174,10 +163,6 @@ input[type=text]::placeholder, input[type=password]::placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* OTHERS */
|
|
||||||
|
|
||||||
*:focus {
|
*:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
@ -188,4 +173,19 @@ input[type=text]::placeholder, input[type=password]::placeholder {
|
||||||
|
|
||||||
.mySelect {
|
.mySelect {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallRow {
|
||||||
|
line-height: 60%;
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ueRow {
|
||||||
|
background: #5bc0de ;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: lightgray;
|
||||||
}
|
}
|
Loading…
Reference in New Issue