diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index ad8fcf9a72464421bb2a467cd1c4b32aa9244db0..e33c0719080791141275454fc12fff9edc7bb9c7 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -1,18 +1,35 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import Stepper from '../Stepper.js'
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
-import {Button} from '@material-ui/core'
-import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
-import Divider from '@material-ui/core/Divider';
-import {ButtonCancelar} from './PartTwo.js'
+import { Button } from '@material-ui/core'
+import { RightSideStrikedH3, LeftSideStrikedH3 } from '../LoginContainerFunction.js'
+import { ButtonCancelar } from './PartTwo.js'
import axios from 'axios'
import FormInput from '../FormInput.js'
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from "@material-ui/styles";
-export function sortDict (dict) {
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
+
+export function sortDict(dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
@@ -27,13 +44,14 @@ const extractUFInfo = (ufs, name) => {
abbreviation = obj.abbreviation
}
}
- return {id : id, abbreviation : abbreviation}
+ return { id: id, abbreviation: abbreviation }
}
-export default function PartOne (props) {
+export default function PartOne(props) {
+ const classes = useStyles();
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
- const handleSetStates = (states) => {setStates(states)}
+ const handleSetStates = (states) => { setStates(states) }
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
@@ -42,33 +60,34 @@ export default function PartOne (props) {
//stores a single user selected state
const [uf, setUF] = useState(
{
- algumFoiEscolhido : false,
- name : '',
- abbreviation : ''
+ algumFoiEscolhido: false,
+ name: '',
+ abbreviation: ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
- algumFoiEscolhido : false,
- name : ''
+ algumFoiEscolhido: false,
+ name: ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
- codigoInvalido : false,
- value : ''
+ codigoInvalido: false,
+ value: ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
- setCodigoINEP({...codigoINEP,
- codigoInvalido : false,
- value : code
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: false,
+ value: code
})
}
@@ -76,12 +95,13 @@ export default function PartOne (props) {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
- ).then( (response) => {
+ ).then((response) => {
handleSubmit()
}, (error) => {
- setCodigoINEP({...codigoINEP,
- codigoInvalido : true,
- value : ''
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: true,
+ value: ''
})
}
)
@@ -92,128 +112,152 @@ export default function PartOne (props) {
}
//on render component, call simcaq api and update ufList
- useEffect ( () => {
+ useEffect(() => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
- ).then( (response) => {
+ ).then((response) => {
console.log(sortDict(response.data.result))
handleSetStates(sortDict(response.data.result))
},
- (error) => console.log('erro acessando api do simcaq (estados)'))
+ (error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
- const {id, abbreviation} = extractUFInfo(ufList, ufName)
+ const { id, abbreviation } = extractUFInfo(ufList, ufName)
console.log(id, abbreviation)
- setUF({...uf,
- algumFoiEscolhido : true,
- name : ufName,
- abbreviation : abbreviation
- }
+ setUF({
+ ...uf,
+ algumFoiEscolhido: true,
+ name: ufName,
+ abbreviation: abbreviation
+ }
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
- ).then( (response) => {
+ ).then((response) => {
handleSetMunicipioList(sortDict(response.data.result))
- }, (error) => console.log('erro acessando api do simcaq (cidades)')
+ }, (error) => console.log('erro acessando api do simcaq (cidades)')
)
}
const handleChooseCity = (event) => {
const cityName = event.target.value
console.log(cityName)
- setMunicipio({...municipio,
- algumFoiEscolhido : true,
- name : cityName
- }
+ setMunicipio({
+ ...municipio,
+ algumFoiEscolhido: true,
+ name: cityName
+ }
)
}
return (
<>
- {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Procure sua UF</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={uf.name}
- onChange={handleChooseUF}
- >
- {
- ufList.map( (ufs)=>
- <MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Busque o seu municÃpio</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={municipio.name}
- onChange={handleChooseCity}
- >
- {
- municipioList.map( (cidades)=>
- <MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
- <ButtonConfirmar
- onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
- >
- BUSCAR</ButtonConfirmar>
- </div>
- </form>
+ {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Procure sua UF </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar sua UF</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={uf.name}
+ onChange={handleChooseUF}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ ufList.map((ufs) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Busque o seu municÃpio </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar seu municÃpio</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={municipio.name}
+ onChange={handleChooseCity}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ municipioList.map((cidades) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
+ <ButtonConfirmar
+ contrast={props.contrast}
+ onClick={((uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
+ >
+ BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
</Content>
- <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
- <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
+ <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+ <LeftSideStrikedH3 contrast={props.contrast} /><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3 contrast={props.contrast} />
</div>
{/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
<Content>
<form>
<p>Localize pelo código INEP da escola:</p>
- <FormControl required style={{width:"100%"}}>
- <FormInput
- inputType={'text'}
- name={'Código INEP'}
- value={codigoINEP.value}
- handleChange = {handleCodigoINEP}
- placeholder={'Código INEP'}
- required={true}
- error={codigoINEP.codigoInvalido}
- help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
- >
- </FormInput>
+ <FormControl required style={{ width: "100%" }}>
+ <FormInput
+ contrast={props.contrast}
+ inputType={'text'}
+ name={'Código INEP'}
+ value={codigoINEP.value}
+ handleChange={handleCodigoINEP}
+ placeholder={'Código INEP'}
+ required={true}
+ error={codigoINEP.codigoInvalido}
+ help={codigoINEP.codigoInvalido ? <span style={{ color: 'red' }}>código INEP inválido</span> : ''}
+ >
+ </FormInput>
</FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
<ButtonConfirmar
- onClick={validateINEP}
+ contrast={props.contrast}
+ onClick={validateINEP}
>
- BUSCAR</ButtonConfirmar>
+ BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
<ButtonsArea>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
+
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
@@ -257,34 +301,19 @@ export const Content = styled.div`
}
`
export const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bolder !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
- font-size : 14px !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration : none !important;
- overflow : hidden !important;
- display : inline-block !important;
- position : relative !important;
cursor : pointer !important;
- min-height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- align-items : center !important;
text-align : center !important;
- border-radius : 3px !important;
- box-sizing : border-box !important;
- border : 0 !important;
`
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 4dc30604264bb51d3b51704b5be14fcd9c2d25dc..a65b424b9b304c7d0a208dc01b2010030c082e2d 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -1,36 +1,38 @@
-import React, {useState} from 'react'
-import {Content} from './PartOne.js'
-import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
+import React, { useState } from 'react'
+import { Content } from './PartOne.js'
+import { ButtonCancelar, ButtonGrey } from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
-export default function PartThree (props) {
+export default function PartThree(props) {
const [phoneNumber, setPhoneNumber] = useState(
{
- flagInvalid : false,
- number : ''
+ flagInvalid: false,
+ number: ''
}
)
const handleChangePhoneNumber = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setPhoneNumber({...phoneNumber,
- flagInvalid : (input.length < 10 ? true : false),
- number : (input.length > 10 ? phoneNumber.number : input),
+ const input = event.target.value;
+ setPhoneNumber({
+ ...phoneNumber,
+ flagInvalid: (input.length < 10 ? true : false),
+ number: (input.length > 10 ? phoneNumber.number : input),
})
}
- const [cpf, setCpf] = useState( {
- flagInvalid : false,
- number : ''
+ const [cpf, setCpf] = useState({
+ flagInvalid: false,
+ number: ''
})
const handleChangeCpf = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setCpf({...cpf,
- flagInvalid : (input.length < 11 ? true : false),
- number : (input.length > 11 ? cpf.number : input),
+ const input = event.target.value;
+ setCpf({
+ ...cpf,
+ flagInvalid: (input.length < 11 ? true : false),
+ number: (input.length > 11 ? cpf.number : input),
})
}
@@ -43,65 +45,69 @@ export default function PartThree (props) {
return (
<>
- {console.log(props)}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o telefone da escola:</p>
- <FormInput
- inputType={'text'}
- pattern="[0-9]"
- name={'DDD e Número'}
- placeholder={'Exemplo: 4112345678'}
- value={phoneNumber.number}
- handleChange={handleChangePhoneNumber}
- error={phoneNumber.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o seu CPF</p>
- <FormInput
- inputType={'text'}
- name={'11 dÃgitos'}
- placeholder={'11 dÃgitos'}
- value={cpf.number}
- handleChange={handleChangeCpf}
- mask={'999.999.999-99'}
- error={cpf.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o telefone da escola:</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ pattern="[0-9]"
+ name={'DDD e Número'}
+ placeholder={'Exemplo: 4112345678'}
+ value={phoneNumber.number}
+ handleChange={handleChangePhoneNumber}
+ error={phoneNumber.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o seu CPF</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ name={'11 dÃgitos'}
+ placeholder={'11 dÃgitos'}
+ value={cpf.number}
+ handleChange={handleChangeCpf}
+ mask={'999.999.999-99'}
+ error={cpf.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "space-evenly", paddingTop: "10px", paddingBottom: "10px" }}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={((cpf.flagInvalid || phoneNumber.flagInvalid) ? () => { console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid) } : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ </div>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
+ </div>
</div>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
- </div>
- </div>
- </form>
+ </form>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
+ cursor : pointer !important;
text-align : center !important;
- align-items : center !important;
-
`
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index a4e68d4a6de2ad449ab9cfd9e999b321cd546379..c2f634ed38c73d03f3959cfca9ce2ca8bfb29d18 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -1,97 +1,99 @@
-import React, {useState, useEffect} from 'react'
-import {Content, ButtonsArea} from './PartOne.js'
-import Divider from '@material-ui/core/Divider';
+import React, { useState, useEffect } from 'react'
+import { Content, ButtonsArea } from './PartOne.js'
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
import axios from 'axios'
-import {simcaqAPIurl} from '../../env'
-import {sortDict} from './PartOne.js'
+import { simcaqAPIurl } from '../../env'
+import { sortDict } from './PartOne.js'
-export default function PartTwo (props) {
+export default function PartTwo(props) {
const [schoolList, setSchoolList] = useState([])
+ const [state, setState] = useState('');
+ const [city, setCity] = useState('');
- useEffect ( () => {
+ useEffect(() => {
const code = (props.info.inep_code || '')
const uf = (props.info.school_uf.abbreviation || '')
const municipio = (props.info.school_city || '')
- //console.log(code, uf, municipio)
+
+ setState(uf);
+ setCity(municipio);
- //if user searched by inep code
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
- ).then ((response) => {
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por inep code')
- )}
+ ).then((response) => {
+ console.log(response.data.result)
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por inep code')
+ )
+ }
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
- ).then((response)=> {
- //console.log(response.data.result)
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
- )}
+ ).then((response) => {
+ console.log(response.data.result)
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
+ )
+ }
}, [])
const onClickTable = (city_name, id, name, state_name) => {
+ console.log(id);
props.handleBuscar(city_name, id, name, state_name)
}
return (
<>
- {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
</Content>
<Content>
<InputContainer>
- <p>Selecione a sua escola:</p>
+ <p>Selecione a sua escola da UF: {state} e do municÃpio: {city}:</p>
- <CustomizedTables
- columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
- rows={schoolList} onClickTable={onClickTable}
- />
+ <CustomizedTables
+ contrast={props.contrast}
+ columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
+ rows={schoolList} onClickTable={onClickTable}
+ />
</InputContainer>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: '#666' } : { color: "white" }} />
<ButtonsArea>
- <ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
- color: #666 !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family: 'Roboto',sans-serif !important;
- font-size: 14px !important;
font-weight: bold !important;
- height: 36px !important;
border-radius: 3px !important;
- padding-left: 16px !important;
- padding-right: 16px !important;
`
export const ButtonGrey = styled(Button)`
- background-color : #fff !important;
- border : 1.5px #666 solid !important;
- color : #666 !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "1.5px #666 solid !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
text-align : center !important;
- align-items : center !important;
-
`
const InputContainer = styled.div`
diff --git a/src/Components/PageProfessorComponents/SuccessfulRequest.js b/src/Components/PageProfessorComponents/SuccessfulRequest.js
index ffd481b450846b031f7a209df95675646eaaa022..8d243f7677a92f52a5ed1ce7c9c3543e9de63869 100644
--- a/src/Components/PageProfessorComponents/SuccessfulRequest.js
+++ b/src/Components/PageProfessorComponents/SuccessfulRequest.js
@@ -1,29 +1,29 @@
import React from 'react'
import styled from 'styled-components'
-import {ButtonConfirmar} from './PartOne.js'
+import { ButtonConfirmar } from './PartOne.js'
//Image Import
import { Comentarios } from "ImportImages.js";
-export default function SuccessfulRequest (props) {
+export default function SuccessfulRequest(props) {
const h4Text = 'Obrigado por fazer parte dessa rede!'
const pText = 'Em breve você poderá publicar os seus próprios reursos educacionais digitais. O MEC analisará as suas informações junto a escola e você será avisada(o) aqui na plataforma e em seu email: '
const redirect = () => {
props.history.push('/')
}
-
+
return (
- <div style={{maxWidth:"575px", padding : "0 36px"}}>
- <div style={{display : "flex", flexDirection : "column"}}>
+ <div style={{ maxWidth: "575px", padding: "0 36px" }}>
+ <div style={{ display: "flex", flexDirection: "column" }}>
<StyledH4>{h4Text}</StyledH4>
<TextDiv>
<p>{pText} <b>{props.email}</b>.</p>
</TextDiv>
- <div style={{display : 'flex', flexDirection : 'row', justifyContent : "center"}}>
- <ButtonConfirmar onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
+ <div style={{ display: 'flex', flexDirection: 'row', justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
</div>
- <ImageDiv/>
+ <ImageDiv />
</div>
</div>
)
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index b1315b9844bdd5726e5b7589c1adf6be80d87417..a50f700cc1ea897a999f52ff1d2ca7fe4fae0783 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -1,53 +1,107 @@
-import React from 'react'
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
import styled from 'styled-components'
+import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
+
+export default function CustomizedSteppers(props) {
-export default function Stepper (props) {
+ function isInFinalSTep(step) {
+ return step === 3;
+ }
return (
- <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
- <FeedbackUpload>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
{
- props.items.map((item)=>
- <div className={"page-selector " + (item.selected ? 'selected' : '')} >
- {item.value}
- </div>
- )
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
}
- </FeedbackUpload>
- </div>
- )
+ </MainGrid >
+ );
}
-const FeedbackUpload = styled.div`
- width : 280px;
- display : flex;
- background :#e5e5e5;
- flex-direction : row;
- justify-content : space-between;
- height : 50px;
- align-items : center;
- padding : 7px;
- border-radius : 50px;
- margin-top : 20px;
-
- .page-selector {
- height : 36px;
- width : 36px;
- background : #fff;
- border-radius : 50%;
- color : #00bcd4;
- line-height : 32px;
- font-size : 20px;
- font-weight : 500;
- border: solid 3px #00bcd4;
- text-align: center;
- align-items : center;
- vertical-align:middle;
- }
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
- .selected {
- background : #00bcd4;
- color : #fff;
- border-color : #00bcd4;
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
}
+
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
+
diff --git a/src/Components/Table.js b/src/Components/Table.js
index 773a5fffb85387a8a4571b6e80b087c85104c944..e9aca6ccc07690c0ae723878f3156970e7025017 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useState } from 'react';
+import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -23,59 +23,97 @@ const StyledTableCell = withStyles(theme => ({
},
}))(TableCell);
-const StyledTableRow = withStyles(theme => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
+const ContrastStyledTableCell = withStyles(theme => ({
+ head: {
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ fontSize: 15,
+ letterSpacing: .01
},
-}))(TableRow);
-
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
-const useStyles = makeStyles({
- table: {
- minWidth: 970,
+const ContrastStyledTableCellBody = withStyles(theme => ({
+ body: {
+ fontSize: 14,
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ letterSpacing: .01
},
-});
+}))(TableCell);
+
+
export default function CustomizedTables(props) {
- const classes = useStyles();
+ const [columns, setColumns] = useState([]);
const onClick = (row) => {
- const {city_name, id, name, state_name} = row
- props.onClickTable(city_name, id, name, state_name)
+ const { city_name, id, name, state_name } = row
+ props.onClickTable(city_name, id, name, state_name)
}
+ useEffect(() => {
+ const updatedColumns = [...props.columns];
+ updatedColumns.splice(2, 2);
+ setColumns(updatedColumns);
+ }, [])
+
return (
- <>
- <TableContainer component={Paper}>
- <Table className={classes.table} aria-label="customized table">
- <TableHead>
- <TableRow>
+ <>
+ <TableContainer component={Paper}>
+ <Table aria-label="customized table">
+ <TableHead>
+ <TableRow>
+ {
+ columns.map((column) =>
+ props.contrast === "" ?
+ <StyledTableCell align="left">{column}</StyledTableCell>
+ :
+ <ContrastStyledTableCell align="left">{column}</ContrastStyledTableCell>
+ )
+ }
+ </TableRow>
+ </TableHead>
+ <TableBody>
{
- props.columns.map( (column)=>
- <StyledTableCell align="left">{column}</StyledTableCell>
- )
+ props.contrast === "" ?
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <StyledTableCell component="th" scope="row">
+ {row.id}
+ </StyledTableCell>
+ <StyledTableCell align="left">{row.name}</StyledTableCell>
+ {/* <StyledTableCell align="left">{row.state_name}</StyledTableCell>
+ <StyledTableCell align="left">{row.city_name}</StyledTableCell> */}
+ </TableRow>
+ })
+ :
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <ContrastStyledTableCellBody component="th" scope="row">
+ {row.id}
+ </ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.name}</ContrastStyledTableCellBody>
+ {/* <ContrastStyledTableCellBody align="left">{row.state_name}</ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.city_name}</ContrastStyledTableCellBody> */}
+ </TableRow>
+ })
}
- </TableRow>
- </TableHead>
- <TableBody>
- {props.rows.map(row => (
- <>
- {console.log(row)}
- <StyledTableRow onClick={() => onClick(row)} key={row.id}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="left">{row.name}</StyledTableCell>
- <StyledTableCell align="left">{row.state_name}</StyledTableCell>
- <StyledTableCell align="left">{row.city_name}</StyledTableCell>
- </StyledTableRow>
- </>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ </TableBody>
+ </Table>
+ </TableContainer>
</>
);
}
+
+
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index 95c1ff20bf76ee1a7aa5965175c3ab07dee9529f..a4acce469786ff8af28648a0d4a31f4751a1a83e 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -51,7 +51,10 @@ export default function CustomizedSteppers(props) {
<div className={props.activeStep === index ? "currStep" : "finalStep"}>
{
index < props.activeStep ?
- <Check style={{ color: 'white' }} /> : index
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index}
+ </span>
}
</div>
</Grid>
@@ -98,6 +101,7 @@ const MainGrid = styled(Grid)`
align-items: center;
border: 2px solid white;
border-radius: 50%;
+ color: white;
}
`
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index b1e360262cb0a7c910a75575041e7f7e6939cf0d..9c9a2554bf9c0ea8b5a7e8901be3cd8d906c8efd 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -1,18 +1,18 @@
-import React, {useState,useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import Paper from '@material-ui/core/Paper';
import PartOne from '../Components/PageProfessorComponents/PartOne.js'
import PartTwo from '../Components/PageProfessorComponents/PartTwo.js'
import PartThree from '../Components/PageProfessorComponents/PartThree.js'
import SuccessfulRequest from '../Components/PageProfessorComponents/SuccessfulRequest.js'
import ModalConfirmarProfessor from '../Components/PageProfessorComponents/ModalConfirmarProfessor.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
-export default function PageProfessor (props) {
- const {state} = useContext(Store)
+export default function PageProfessor(props) {
+ const { state } = useContext(Store)
const [modalOpen, toggleModal] = useState(false)
const handleModal = () => {
- toggleModal(!modalOpen) ;
+ toggleModal(!modalOpen);
}
const redirect = () => {
@@ -24,39 +24,36 @@ export default function PageProfessor (props) {
teacher_cpf: '',
school_phone: '',
school_name: '',
- school_city : '',
- school_uf : {
- abbreviation : '',
- name : ''
+ school_city: '',
+ school_uf: {
+ abbreviation: '',
+ name: ''
},
inep_code: ''
}
)
- const [stepper, handleStepper] = useState(
- [ {value : '1', selected : true}, {value : '2', selected : false}, {value : '3', selected : false}, {value : '4', selected : false}]
- )
- const toggleStepper = (selected1, selected2, selected3, selected4) => {
- handleStepper(
- [
- {value : '1', selected : selected1},
- {value : '2', selected : selected2},
- {value : '3', selected : selected3},
- {value : '4', selected : selected4}
- ]
- )
+ const [activeStep, setActiveStep] = useState(0);
+
+ const incrementStep = () => {
+ setActiveStep((previous) => previous + 1);
+ }
+
+ const decrementStep = () => {
+ setActiveStep((previous) => previous - 1);
}
const handleBuscarParteUm = (ufAbbreviation, ufName, nomeMunicipio, inep) => {
- setRegisterInformation({...registerInformation,
- school_uf : {
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
abbreviation: (ufAbbreviation ? ufAbbreviation : ''),
- name : (ufName ? ufName : '')
+ name: (ufName ? ufName : '')
},
- school_city : (nomeMunicipio ? nomeMunicipio : ''),
- inep_code : (inep ? inep : '')
+ school_city: (nomeMunicipio ? nomeMunicipio : ''),
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, true, false, false)
+ incrementStep()
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
@@ -64,20 +61,22 @@ export default function PageProfessor (props) {
const prev_state_name = registerInformation.school_uf.name
const prev_city_name = registerInformation.school_city.name
- setRegisterInformation({...registerInformation,
- school_uf : {
- abbreviation : uf_abbreviation,
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
+ abbreviation: uf_abbreviation,
name: (state_name ? state_name : prev_state_name)
},
- school_city :(city_name ? city_name : prev_city_name),
+ school_city: (city_name ? city_name : prev_city_name),
school_name: (school_name ? school_name : ''),
- inep_code : (inep ? inep : '')
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, false, true, false)
+ incrementStep();
}
const handleParteTres = (phone, cpf) => {
- setRegisterInformation({...registerInformation,
+ setRegisterInformation({
+ ...registerInformation,
teacher_cpf: (cpf ? cpf : ''),
school_phone: (phone ? phone : ''),
})
@@ -88,74 +87,75 @@ export default function PageProfessor (props) {
props.history.push('/perfil/atualizacoes')
}
- function handleSuccessfulSubmit (data) {
+ function handleSuccessfulSubmit(data) {
toggleModal()
- toggleStepper(false, false, false, true)
+ incrementStep();
}
const handleFinalSubmit = () => {
const url = `/users/teacher_request`
+ console.log(registerInformation)
const payload = {
- city : registerInformation.school_city.name,
- cpf : registerInformation.teacher_cpf,
- inep_id : registerInformation.inep_code,
- phone : registerInformation.school_phone,
- school : registerInformation.school_name,
- uf : registerInformation.school_uf.name
+ city: registerInformation.school_city,
+ cpf: registerInformation.teacher_cpf.toString(),
+ inep_id: registerInformation.inep_code.toString(),
+ phone: registerInformation.school_phone.toString(),
+ school: registerInformation.school_name,
+ uf: registerInformation.school_uf.name,
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) =>{console.log(error)})
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
}
return (
<>
- {
- state.userAgreedToPublicationTerms?
- (
- <>
- <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal}
- info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
- cancelar = {() => {toggleModal()}}
- />
- <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
- <div style={{display: "flex", justifyContent:"center", paddingTop:"5vh", paddingBottom:"5vh"}}>
- <Paper elevation={3} style= {{width:"max-content"}}>
- <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
- {stepper[0].selected &&
- <PartOne stepper={stepper} handleBuscar={handleBuscarParteUm}
- handleCancelar={handleCancelar}
- />
- }
- {stepper[1].selected &&
- <PartTwo stepper={stepper}
- info={registerInformation} goBack={toggleStepper}
- handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
- />
- }
- {stepper[2].selected &&
- <PartThree stepper={stepper} goBack={toggleStepper}
- handleCancelar={handleCancelar} info={registerInformation}
- handleSubmit={handleParteTres}
- />
- }
- {
- stepper[3].selected &&
- <SuccessfulRequest email={state.currentUser.email} history={props.history}/>
- }
- </div>
- </Paper>
+ {
+ state.userAgreedToPublicationTerms ?
+ (
+ <>
+ <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal}
+ info={registerInformation} confirmar={() => { handleFinalSubmit() }}
+ cancelar={() => { toggleModal() }}
+ />
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4", color: "#666" } : { backgroundColor: "black", color: "white" }}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "5vh", paddingBottom: "5vh" }}>
+ <Paper elevation={3} style={state.contrast === "" ? { width: "max-content" } : { width: "max-content", backgroundColor: "black", color: "white", border: '1px solid white' }}>
+ <div style={{ paddingRight: "15px", paddingLeft: "15px" }}>
+ {activeStep === 0 &&
+ <PartOne contrast={state.contrast} activeStep={activeStep} handleBuscar={handleBuscarParteUm}
+ handleCancelar={handleCancelar}
+ />
+ }
+ {activeStep === 1 &&
+ <PartTwo activeStep={activeStep} contrast={state.contrast}
+ info={registerInformation} goBack={decrementStep}
+ handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
+ />
+ }
+ {activeStep === 2 &&
+ <PartThree activeStep={activeStep} goBack={decrementStep} contrast={state.contrast}
+ handleCancelar={handleCancelar} info={registerInformation}
+ handleSubmit={handleParteTres}
+ />
+ }
+ {
+ activeStep === 3 &&
+ <SuccessfulRequest email={state.currentUser.email} history={props.history} contrast={state.contrast} />
+ }
+ </div>
+ </Paper>
+ </div>
</div>
- </div>
- </>
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
+ </>
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
</>
)
}