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)

Browse Source 
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>
);
}