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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

4
public/index.html
View File

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

9
public/manifest.json
View File

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

30
src/ScoDoc/ChoixDept.js
View File

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

14
src/ScoDoc/GestionSemestre.js
View File

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

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

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

14
src/ScoDoc/GestionSemestre/Acceuil.js
View File

@ -1,4 +1,5 @@
import React, {Component} from "react";
import '../Style.css'
class Acceuil extends Component {
constructor(props) {
@ -10,7 +11,11 @@ class Acceuil extends Component {
}
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',
verify: false,
credentials: 'include',
@ -18,19 +23,18 @@ class Acceuil extends Component {
.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>
<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>
)
}

51
src/ScoDoc/GestionSemestre/Eleves.js
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 {
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() {
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>
)
}
}

41
src/ScoDoc/Login.js
View File

@ -1,6 +1,7 @@
import React, {Component} from "react";
import './Style.css'
import ChoixDept from "./ChoixDept";
import ScoNavBar from "./ScoNavBar";
class Login extends Component {
constructor(props) {
@ -27,7 +28,9 @@ class Login extends Component {
let login = this.state.login
let pass = this.state.pass
fetch('https://scodoc.dev.net/ScoDoc/RT/Scolarite', {
let BASE_URL = window.$api_url
fetch(BASE_URL, {
method: 'GET',
verify: false,
credentials: 'include',
@ -48,24 +51,34 @@ class Login extends Component {
render() {
return (
<div className="wrapper">
{(this.state.status !== 0 && this.state.status !==200) &&
<div id="errorMsg">
<h2 id="loginTitle">{ "⚠️" } Login ou mot de passe incorrect</h2>
<div>
{(this.state.status !== 0 && this.state.status !== 200) &&
<div className="wrapper">
<div id="errorMsg">
<h2 id="loginTitle">{"⚠️"} Login ou mot de passe incorrect</h2>
</div>
</div>
}
{this.state.status !== 200 &&
<div id="formContent">
<h2 id="loginTitle">Connexion a ScoDoc</h2>
<form>
<input type="text" id="login" placeholder="Identifiant" onChange={this.handleChangeLogin}/>
<input type="password" id="password" placeholder="Mot de passe" onChange={this.handleChangePass}/>
<button type="submit" value="Log In" onClick={this.checkCredentials}>Log in</button>
</form>
<div className="wrapper">
<div id="formContent">
<h2 id="loginTitle">Connexion a ScoDoc</h2>
<form>
<input type="text" id="login" placeholder="Identifiant" onChange={this.handleChangeLogin}/>
<input type="password" id="password" placeholder="Mot de passe"
onChange={this.handleChangePass}/>
<button type="submit" value="Log In" onClick={this.checkCredentials}>Log in</button>
</form>
</div>
</div>
}{this.state.status === 200 &&
<ChoixDept/>
}
<div>
{this.state.status === 200 &&
<ScoNavBar/>
}{this.state.status === 200 &&
<ChoixDept/>
}
</div>
</div>
)
}

35
src/ScoDoc/ScoNavBar.js
View File

@ -1,7 +1,7 @@
import React, {Component} from "react";
import {Link, Redirect} from "react-router-dom";
import './Style.css'
import {Nav, Navbar, Button} from 'react-bootstrap'
import {Nav, Navbar, Button, Container} from 'react-bootstrap'
class ScoNavBar extends Component {
constructor(props) {
@ -13,7 +13,9 @@ class ScoNavBar extends Component {
}
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 => {return <Redirect to="/" />})
.catch(console.log)
@ -22,15 +24,26 @@ class ScoNavBar extends Component {
render() {
return (
<Navbar bg="light" expand="sm">
<Navbar.Brand>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.Brand>
<img
alt="ScodocLogo"
src="https://scodoc.dev.net/ScoDoc/static/icons/scologo_img.png"
width="20"
height="30"
className="d-inline-block align-top"
/>{' '}
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>
)
}

8
src/ScoDoc/Scolarite.js
View File

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

28
src/ScoDoc/SearchStudent.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Redirect} from "react-router-dom";
import {Link, Redirect} from "react-router-dom";
import {Row, Col} from "react-bootstrap"
class SearchStudent extends Component {
@ -15,12 +15,16 @@ class SearchStudent extends Component {
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', {
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",
credentials: "include",
})
@ -43,8 +47,6 @@ class SearchStudent extends Component {
}
result() {
console.log(this.state.students)
if (this.state.toast === true) {
return (
<div id="wrapDept">
@ -53,13 +55,17 @@ class SearchStudent extends Component {
)
} 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>
<Col>
{this.state.students.map((student, index) => {
return (
<Row id="wrapDept">
<Link to={`/${window.location.href.split('/')[3]}/Scolarite/Etudiant/${student.value}`}>
<span>{student.label}</span>
</Link>
</Row>
);
})}
</Col>
)
}
}

2
src/index.js
View File

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

6
src/main.js
View File

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