Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • portalmec/portalmec-react
  • rfhferreira/cleaning-portal-mec-react
2 results
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1717 additions and 227 deletions
src/Components/HelpCenter/TabsPlataformaMEC/Which.js
View file @ d47d2fa6
...@@ -16,36 +16,35 @@ GNU Affero General Public License for more details. ...@@ -16,36 +16,35 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { Component, useState, useEffect } from 'react'; import React from "react";
import styled from 'styled-components'; import styled from "styled-components";
const parcas = [ const parcas = [
{parceiro: "- Portal do Profesor"}, { parceiro: "- Portal do Profesor" },
{parceiro:"- Domínio Público;"}, { parceiro: "- Domínio Público;" },
{parceiro: "- Banco internacional de objetos educacionais;"}, { parceiro: "- Banco internacional de objetos educacionais;" },
{parceiro:"- TV Escola;"} { parceiro: "- TV Escola;" }
] ];
export default function Which(props) { export default function Which(props) {
return( return (
<Card> <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> <link
<div style={{marginBottom: "9px"}}> href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span> <span>{props.title}</span>
</div> </div>
<p> <p>
A plataforma integra os Recursos Educacionais Digitais dos principais portais abertos. Conheça alguns deles: A plataforma integra os Recursos Educacionais Digitais dos principais
portais abertos. Conheça alguns deles:
</p> </p>
<ul> <ul>
{parcas.map((item)=> {parcas.map(item => (
<li>{item.parceiro}</li> <li>{item.parceiro}</li>
))}
)}
</ul> </ul>
</Card> </Card>
); );
} }
...@@ -53,7 +52,7 @@ export default function Which(props) { ...@@ -53,7 +52,7 @@ export default function Which(props) {
const Card = styled.div` const Card = styled.div`
margin-bottom: 5px; margin-bottom: 5px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 30px; padding: 30px;
color: #666; color: #666;
span { span {
...@@ -61,8 +60,6 @@ const Card = styled.div` ...@@ -61,8 +60,6 @@ const Card = styled.div`
font-weight: bold; font-weight: bold;
} }
ul { ul {
padding-left: 0 !important; padding-left: 0 !important;
margin-top: 0; margin-top: 0;
...@@ -79,7 +76,4 @@ const Card = styled.div` ...@@ -79,7 +76,4 @@ const Card = styled.div`
margin: 0 0 10px; margin: 0 0 10px;
font-size: 15px; font-size: 15px;
} }
`;
`
\ No newline at end of file
src/Components/IllegalContentModal.js
View file @ d47d2fa6
...@@ -112,7 +112,7 @@ export default function IllegalContentModal (props) { ...@@ -112,7 +112,7 @@ export default function IllegalContentModal (props) {
<Fade in={props.open}> <Fade in={props.open}>
<StyledDivContainer > <StyledDivContainer >
<StyledDivContent> <StyledDivContent>
<StyledH2>{state.loginInfo.username}!</StyledH2> <StyledH2>{state.currentUser.username}!</StyledH2>
<div> <div>
<StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph> <StyledParagraph>Seu recurso não está de acordo com os termos</StyledParagraph>
</div> </div>
......
src/Components/LoadingSpinner.js 0 → 100644
View file @ d47d2fa6
import React from 'react';
import LoadingGif from '../img/loading_busca.gif'
const LoadingSpinner = (props) => (
<div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
<img src={LoadingGif} />
<span style={{textTransform:"uppercase"}}>{props.text}</span>
</div>
);
export default LoadingSpinner;
src/Components/LoginContainer.js
View file @ d47d2fa6
...@@ -24,6 +24,7 @@ import styled from 'styled-components' ...@@ -24,6 +24,7 @@ import styled from 'styled-components'
import {device} from './device.js' import {device} from './device.js'
import LabeledCheckbox from './Checkbox.js' import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js" import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
//arrumar isso //arrumar isso
const responseGoogle = (response) => { const responseGoogle = (response) => {
...@@ -35,9 +36,9 @@ class LoginContainer extends Component { ...@@ -35,9 +36,9 @@ class LoginContainer extends Component {
super(props); super(props);
this.state = { this.state = {
email : "", email : localStorage.getItem("@portalmec/email") || "",
senha : "", senha : localStorage.getItem("@portalmec/senha") ||"",
checkboxChecked : true checkboxChecked : false
}; };
this.handleChecked = this.handleChecked.bind(this) this.handleChecked = this.handleChecked.bind(this)
} }
...@@ -54,8 +55,9 @@ class LoginContainer extends Component { ...@@ -54,8 +55,9 @@ class LoginContainer extends Component {
onSubmit = (e) => { onSubmit = (e) => {
e.preventDefault(); e.preventDefault();
const login = this.state
this.props.handleLoginInfo(this.state); this.props.handleLoginInfo(login);
this.setState({ this.setState({
email: "", email: "",
...@@ -64,8 +66,11 @@ class LoginContainer extends Component { ...@@ -64,8 +66,11 @@ class LoginContainer extends Component {
} }
handleChecked = (e) => { handleChecked = (e) => {
const value = !this.state.checkboxChecked
console.log(this.state.checkboxChecked)
console.log(value)
this.setState({ this.setState({
checkboxChecked : !this.state.checkboxChecked checkboxChecked :value
}) })
} }
...@@ -73,15 +78,16 @@ class LoginContainer extends Component { ...@@ -73,15 +78,16 @@ class LoginContainer extends Component {
return ( return (
<ContainerStyled > <ContainerStyled >
<DialogHeaderStyled> <DialogHeaderStyled>
<span style={{width:"32px"}}/>
<H2Styled> Entrar <H2Styled> Entrar
<StyledCloseModalButton onClick={this.props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</H2Styled> </H2Styled>
<StyledCloseModalButton onClick={this.props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</DialogHeaderStyled> </DialogHeaderStyled>
<div style={{paddingTop: "20px"}}> <DialogContentDiv>
<div style={{marginTop:"0"}}> <SocialConnectDiv>
<StyledGoogleLoginButton <StyledGoogleLoginButton
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com" clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
...@@ -89,50 +95,54 @@ class LoginContainer extends Component { ...@@ -89,50 +95,54 @@ class LoginContainer extends Component {
onFailure={responseGoogle} onFailure={responseGoogle}
cookiePolicy={'single_host_origin'} cookiePolicy={'single_host_origin'}
> >
<span style={{textTransform:"none", fontSize:"13px"}}>Usando o Google</span> <span style={{textTransform:"none", fontSize:"13px", color : "#666"}}>Usando o Google</span>
</StyledGoogleLoginButton> </StyledGoogleLoginButton>
</div> </SocialConnectDiv>
</div>
<H3Div>
<H3Styled> <H3Styled>
<RightSideStrikedH3/> <RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span> <span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/> <LeftSideStrikedH3/>
</H3Styled> </H3Styled>
</H3Div>
<form ref="form" onSubmit={this.onSubmit}>
<FormInput <form ref="form" onSubmit={this.onSubmit}>
inputType={"text"} <FormInput
name={"email"} inputType={"text"}
value={this.state.email} name={"email"}
placeholder={"E-mail *"} value={this.state.email}
handleChange={e => this.handleChange(e)} placeholder={"E-mail"}
/> handleChange={e => this.handleChange(e)}
<br/> required={true}
<FormInput />
inputType={"password"} <br/>
name={"senha"} <FormInput
value={this.state.senha} inputType={"password"}
placeholder={"Senha *"} name={"senha"}
handleChange={e => this.handleChange(e)} value={this.state.senha}
/> placeholder={"Senha"}
<br/> handleChange={e => this.handleChange(e)}
required={true}
<RememberRecover> />
<LabeledCheckbox label={<StyledSpan>Lembrar-me</StyledSpan>} onchange={this.handleChecked}/> <br/>
<span style={{paddingTop:"15px"}}>Esqueceu a senha?<a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></span>
</RememberRecover> <RememberRecover>
<LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={this.handleChecked} />
<ConfirmContainerStyled> <UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
<StyledLoginButton onClick={e => this.onSubmit(e)} variant="contained"> </RememberRecover>
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton> <ConfirmContainerStyled>
</ConfirmContainerStyled> <StyledLoginButton type="submit" variant="contained">
</form> <span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
<DialogFooterStyled> </ConfirmContainerStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>CADASTRE-SE</StyledAnchor></span> </form>
</DialogFooterStyled>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => this.switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled> </ContainerStyled>
) )
} }
...@@ -144,24 +154,68 @@ const ContainerStyled = styled.div` ...@@ -144,24 +154,68 @@ const ContainerStyled = styled.div`
box-sizing : border-box; box-sizing : border-box;
background-color : white; background-color : white;
max-width : none; max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
min-height : 550px;
align : center; align : center;
padding-left : 25px; padding : 10px;
padding-right:25px;
padding-bottom:10px;
border-radius: 4px; border-radius: 4px;
line-height : 20px;
font-size : 14px;
@media ${device.mobileM} { @media ${device.mobileM} {
width : 100%; width : 100%;
height : 100%; height : 100%;
} }
` `
const DialogHeaderStyled = styled.div` export const DialogHeaderStyled = styled.div`
text-align : center; text-align : center;
display : inline-flex; display : flex;
flex-direction : row;
justify-content : space-between; justify-content : space-between;
padding : 10px 26px 0 26px; padding : 10px 26px 0 26px;
height : 64px; height : 64px;
` `
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
`
export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
export const SocialConnectDiv = styled.div`
margin-top : 0;
display : flex;
flex-direction : row;
`
export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
:hover {
background-color: #f4f4f4 !important;
}
`
const DialogFooterStyled = styled.div` const DialogFooterStyled = styled.div`
box-sizing : border-box; box-sizing : border-box;
...@@ -174,17 +228,6 @@ const DialogFooterStyled = styled.div` ...@@ -174,17 +228,6 @@ const DialogFooterStyled = styled.div`
line-height : 1.42857143 line-height : 1.42857143
` `
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
padding: 10px 26px 0 26px;
text-align: center;
letter-spacing: .005em;
`
const RightSideStrikedH3 = styled.div` const RightSideStrikedH3 = styled.div`
display : inline-block; display : inline-block;
...@@ -203,13 +246,10 @@ const LeftSideStrikedH3 = styled.div` ...@@ -203,13 +246,10 @@ const LeftSideStrikedH3 = styled.div`
margin-left : 5px; margin-left : 5px;
width : 45%; width : 45%;
` `
const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color: fff; export const H3Div = styled.div`
border : 1px solid rgb(66, 133, 244); margin-top : 0;
box-shadow: 0 0 0 1px #4285f4 !important; margin-bottom : 10px;
:hover {
background-color: #f4f4f4 !important;
}
` `
const H3Styled = styled.h3` const H3Styled = styled.h3`
...@@ -224,24 +264,14 @@ const StyledAnchor = styled.a` ...@@ -224,24 +264,14 @@ const StyledAnchor = styled.a`
color : #00bcd4; color : #00bcd4;
text-decoration : none; text-decoration : none;
` `
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px;
background : transparent;
min-width: 0 !important;
width : 40px;
`
const ConfirmContainerStyled = styled.div` const ConfirmContainerStyled = styled.div`
display : flex; display : flex;
margin-top : 10px; margin-top : 10px;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
box-sizing : border-box;
` `
const StyledLoginButton = styled(Button)` const StyledLoginButton = styled(Button)`
background-color: #00bcd4 !important; background-color : #00bcd4 !important;
box-shadow : none !important; box-shadow : none !important;
outline: none !important; outline: none !important;
border : 0 !important; border : 0 !important;
...@@ -259,15 +289,32 @@ const StyledLoginButton = styled(Button)` ...@@ -259,15 +289,32 @@ const StyledLoginButton = styled(Button)`
} }
` `
const RememberRecover = styled.div` const RememberRecover = styled.div`
display : flex; display : flex;
justify-content : space-between; justify-content : space-between;
font-size: 12px; font-size: 12px;
font-weight : 400; font-weight : 400;
margin-bottom: 16px;
` `
const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
color : #666;
`
const UserForgotTheirPasswordSpan = styled.span`
margin-top : 1em;
font-size : 12px;
font-weight : 400;
text-align : right;
color : #666;
`
const StyledSpan = styled.span` const StyledSpan = styled.span`
font-size: 12px; font-size : 12px;
font-weight: 400; font-weight : 400;
padding-top: 2px; padding-top : 2px;
` `
src/Components/LoginContainerFunction.js 0 → 100644
View file @ d47d2fa6
/*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, {useState} from "react";
import GoogleLogin from 'react-google-login'
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
import {device} from './device.js'
import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
import ValidateUserInput from '../Components/FormValidationFunction.js'
export default function LoginContainer (props) {
const [formEmail, setEmail] = useState(
{
key : false,
value : localStorage.getItem("@portalmec/email") || "",
}
)
const [formSenha, setSenha] = useState(
{
key : false,
value : localStorage.getItem("@portalmec/senha") ||""
}
)
const [checkboxControl, setCheckbox] = useState(false)
const switchModal = (e) => {
e.preventDefault()
props.handleClose()
props.openSignUp()
}
const handleChange = (e, type) => {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
if(type === 'email') {
setEmail({...formEmail,
key : flag,
value : userInput
})
console.log(formEmail)
}
else if(type === 'password') {
setSenha({...formSenha,
key : flag,
value : userInput
})
console.log(formSenha)
}
}
const limpaCamposForm = () => {
setEmail({...formEmail,
key : false,
value : ''
});
setSenha({...formSenha,
key : false,
value : ''
})
}
const onSubmit = (e) => {
e.preventDefault()
const login = {email : formEmail.value, senha : formSenha.value, checkbox : checkboxControl}
if (!(formEmail.key || formSenha.key)) {
props.handleLoginInfo(login)
limpaCamposForm()
}
}
//arrumar isso
const responseGoogle = (response) => {
console.log(response);
}
return (
<div>
<ContainerStyled >
<DialogHeaderStyled>
<span style={{width:"32px"}}/>
<H2Styled> Entrar
</H2Styled>
<StyledCloseModalButton onClick={props.handleClose}>
<CloseIcon/>
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
<StyledGoogleLoginButton
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
>
<span style={{textTransform:"none", fontSize:"13px", color : "#666"}}>Usando o Google</span>
</StyledGoogleLoginButton>
</SocialConnectDiv>
<H3Div>
<H3Styled>
<RightSideStrikedH3/>
<span style={{verticalAlign:"middle"}}>ou</span>
<LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form onSubmit={e => onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={formEmail.value}
placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')}
required={true}
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.value.length == 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
/>
<br/>
<FormInput
inputType={"password"}
name={"senha"}
value={formSenha.value}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'password')}
required={true}
error = {formSenha.key}
help = {formSenha.key ? (formSenha.value.length == 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mínimo 8 caracteres.") : ""}
/>
<br/>
<RememberRecover>
<LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
<UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
</RememberRecover>
<ConfirmContainerStyled>
<StyledLoginButton type="submit" variant="contained">
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
<DialogFooterStyled>
<span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
</div>
)
}
const ContainerStyled = styled.div`
box-sizing : border-box;
background-color : white;
max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
align : center;
padding : 10px;
border-radius: 4px;
line-height : 20px;
font-size : 14px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
}
`
export const DialogHeaderStyled = styled.div`
text-align : center;
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
`
const H2Styled = styled.h2`
align-self : center;
color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
`
export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
width : 40px;
`
export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
export const SocialConnectDiv = styled.div`
margin-top : 0;
display : flex;
flex-direction : row;
`
export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
:hover {
background-color: #f4f4f4 !important;
}
`
const DialogFooterStyled = styled.div`
box-sizing : border-box;
font-family : 'Roboto', sans serif;
margin : 20px -20px;
padding-top : 20px;
border-top : 1px #e5e5e5 solid;
justify-content : center;
text-align : center;
line-height : 1.42857143
`
export const RightSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
width : 45%;
`
export const LeftSideStrikedH3 = styled.div`
display : inline-block;
border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
width : 45%;
`
export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
`
const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
color : #666;
margin : 10px 0;
`
const StyledAnchor = styled.a`
color : #00bcd4;
text-decoration : none;
`
const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
`
const StyledLoginButton = styled(Button)`
background-color : #00bcd4 !important;
box-shadow : none !important;
outline: none !important;
border : 0 !important;
overflow : hidden !important;
width : 35% !important;
display : inline-block !important;
font-family : 'Roboto', sans serif !important;
font-size: 14px !important;
height : 36px !important;
align-items : center !important;
border-radius: 3px !important;
align-self : 50% !important;
:hover {
background-color : #00acc1 !important;
}
`
const RememberRecover = styled.div`
display : flex;
justify-content : space-between;
font-size: 12px;
font-weight : 400;
`
const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
color : #666;
`
const UserForgotTheirPasswordSpan = styled.span`
margin-top : 1em;
font-size : 12px;
font-weight : 400;
text-align : right;
color : #666;
`
const StyledSpan = styled.span`
font-size : 12px;
font-weight : 400;
padding-top : 2px;
`
src/Components/LoginModal.js
View file @ d47d2fa6
...@@ -16,16 +16,18 @@ GNU Affero General Public License for more details. ...@@ -16,16 +16,18 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useContext} from 'react'; import React, {useContext, useState} from 'react';
import { Button } from '@material-ui/core'; import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal'; import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop'; import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade'; import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components' import styled from 'styled-components'
import LoginContainer from './LoginContainer' import LoginContainer from './LoginContainerFunction.js'
import {Store} from '../Store.js' import {Store} from '../Store.js'
import axios from 'axios' import axios from 'axios'
import {apiUrl} from '../env'; import {apiUrl} from '../env';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
const StyledLogin = styled(Modal)` const StyledLogin = styled(Modal)`
margin : 0 !important; margin : 0 !important;
...@@ -38,9 +40,22 @@ const StyledLogin = styled(Modal)` ...@@ -38,9 +40,22 @@ const StyledLogin = styled(Modal)`
border-radius : 4px; border-radius : 4px;
` `
export function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function LoginModal (props){ export default function LoginModal (props){
const {state, dispatch} = useContext(Store) const {state, dispatch} = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
const handleCloseSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
handleSnackbar(false);
}
const handleLoginInfo = (login) => { const handleLoginInfo = (login) => {
axios.post(`${apiUrl}/auth/sign_in`, axios.post(`${apiUrl}/auth/sign_in`,
...@@ -53,22 +68,41 @@ export default function LoginModal (props){ ...@@ -53,22 +68,41 @@ export default function LoginModal (props){
type: "USER_LOGGED_IN", type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn, userLoggedIn: !state.userIsLoggedIn,
login: { login: {
username : login.username, id : response.data.id,
email : login.email, username : response.data.data.name,
email : response.data.data.email,
accessToken : response.headers['access-token'], accessToken : response.headers['access-token'],
client : response.headers.client clientToken : response.headers.client,
userAvatar : response.data.data.avatar_file_name,
userCover : response.data.data.cover_file_name
} }
} }
) )
props.handleClose(); props.handleClose();
props.openSnackbar();
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
sessionStorage.setItem('@portalmec/clientToken', response.headers.client,)
sessionStorage.setItem('@portalmec/id', response.data.data.id)
sessionStorage.setItem('@portalmec/username', response.data.data.name)
sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
if (login.checkboxChecked) {
localStorage.setItem('@portalmec/email', login.email)
localStorage.setItem('@portalmec/senha', login.senha) //MUDAR ISSO ASAP
}
}, (error) => { }, (error) => {
console.log(':()') {handleSnackbar(true)}
} }
) )
} }
return ( return (
<>
<Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
<Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
</Snackbar>
<StyledLogin <StyledLogin
aria-labelledby="transition-modal-title" aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description" aria-describedby="transition-modal-description"
...@@ -82,12 +116,13 @@ export default function LoginModal (props){ ...@@ -82,12 +116,13 @@ export default function LoginModal (props){
timeout: 500, timeout: 500,
}} }}
> >
<Fade in={props.open}> <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
<LoginContainer handleClose={props.handleClose} <LoginContainer handleClose={props.handleClose}
openSignUp={props.openSignUp} openSignUp={props.openSignUp}
handleLoginInfo={handleLoginInfo} handleLoginInfo={handleLoginInfo}
/> />
</Fade> </Zoom>
</StyledLogin> </StyledLogin>
</>
) )
} }
src/Components/MenuBar.js
View file @ d47d2fa6
...@@ -29,7 +29,7 @@ import styled from 'styled-components' ...@@ -29,7 +29,7 @@ import styled from 'styled-components'
import { Store } from '../Store'; import { Store } from '../Store';
import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Notifications from "./Notifications.js" import Notifications from "./Notifications.js"
import CustomizedMenus from './MenuList' import MenuList from './MenuList'
const ContainerStyled = styled(Container)` const ContainerStyled = styled(Container)`
*{ text-decoration: none } *{ text-decoration: none }
...@@ -51,6 +51,7 @@ const ButtonPublicarRecurso = styled(Button)` ...@@ -51,6 +51,7 @@ const ButtonPublicarRecurso = styled(Button)`
border : 1px transparent solid; border : 1px transparent solid;
background-color : #ff7f00 !important; background-color : #ff7f00 !important;
align-content : center; align-content : center;
font-weight : 500 !important;
text-transform: capitalize !important; text-transform: capitalize !important;
font-stretch : expanded; font-stretch : expanded;
max-width: 200 !important; max-width: 200 !important;
...@@ -81,6 +82,7 @@ const Left = styled.span ` ...@@ -81,6 +82,7 @@ const Left = styled.span `
` `
const ButtonPubRecursoStyled = styled(Button)` const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
border : 1.5px #666 solid !important; border : 1.5px #666 solid !important;
color: #666; color: #666;
box-shadow: none; box-shadow: none;
...@@ -107,13 +109,12 @@ export default function MenuBar(props){ ...@@ -107,13 +109,12 @@ export default function MenuBar(props){
] ]
const minhaArea = [ const minhaArea = [
{ name: "Perfil e Atividades", href: "/perfil/atualizacoes"}, { name: "Perfil e Atividades", href: "/perfil", value : '0'},
{ name: "Recursos Publicados", href: "/perfil/recursos-publicados"}, { name: "Recursos Publicados", href: "/perfil", value : '1'},
{ name: "Favoritos", href: "/perfil/favoritos"}, { name: "Favoritos", href: "/perfil", value : '2'},
{ name: "Coleções", href: "/perfil/colecoes"}, { name: "Coleções", href: "/perfil", value : '3'},
{ name: "Rede", href: "/perfil/rede"}, { name: "Rede", href: "/perfil", value : '4'},
{ name: "Configurações", href: "/perfil/cofiguracoes/editarperfil"}, { name: "Configurações", href: "/editarperfil"},
{ name: "Sair", href:"/"}
] ]
return( return(
...@@ -137,7 +138,7 @@ export default function MenuBar(props){ ...@@ -137,7 +138,7 @@ export default function MenuBar(props){
<Link to="/termos-publicar-recurso"> <Link to="/termos-publicar-recurso">
<ButtonPublicarRecurso> <ButtonPublicarRecurso>
<CloudUploadIcon style={{color:"white", marginLeft : "0"}}/> <CloudUploadIcon style={{color:"white", marginLeft : "0"}}/>
<span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"100"}} > <span style={{color : "#fff", textAlign: "center", alignSelf : "center", fontWeight:"500"}} >
PUBLICAR RECURSO PUBLICAR RECURSO
</span> </span>
...@@ -149,7 +150,7 @@ export default function MenuBar(props){ ...@@ -149,7 +150,7 @@ export default function MenuBar(props){
<Notifications/> <Notifications/>
</div> </div>
<CustomizedMenus items={minhaArea}/> <MenuList items={minhaArea}/>
</> </>
] ]
......
src/Components/MenuList.js
View file @ d47d2fa6
...@@ -42,7 +42,7 @@ const OverrideButton = styled(Button)` ...@@ -42,7 +42,7 @@ const OverrideButton = styled(Button)`
text-transform : none !important; text-transform : none !important;
` `
export default function CustomizedMenus(props) { export default function MenuList(props) {
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const { state, dispatch } = useContext(Store) const { state, dispatch } = useContext(Store)
...@@ -55,6 +55,7 @@ export default function CustomizedMenus(props) { ...@@ -55,6 +55,7 @@ export default function CustomizedMenus(props) {
}; };
const handleLogout = () => { const handleLogout = () => {
localStorage.removeItem('@portalmec/username');
dispatch( { dispatch( {
type: 'USER_LOGGED_OUT', type: 'USER_LOGGED_OUT',
userLoggedOut: !state.userIsLoggedIn, userLoggedOut: !state.userIsLoggedIn,
...@@ -77,7 +78,16 @@ export default function CustomizedMenus(props) { ...@@ -77,7 +78,16 @@ export default function CustomizedMenus(props) {
onMouseEnter={handleClick} onMouseEnter={handleClick}
> >
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/> {
state.currentUser.userAvatar == '' || state.currentUser.userAvatar == null ?
(
<img src={Profile} alt={''} style={{maxWidth:"50px", maxHeight:"50px", borderRadius:"25px"}}/>
):
(
<img src={state.currentUser.userAvatar} alt={''}/>
)
}
<span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Área </span> <KeyboardArrowDownIcon/> <span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Área </span> <KeyboardArrowDownIcon/>
</OverrideButton> </OverrideButton>
...@@ -98,10 +108,13 @@ export default function CustomizedMenus(props) { ...@@ -98,10 +108,13 @@ export default function CustomizedMenus(props) {
{ {
props.items.map((item)=> props.items.map((item)=>
<Link key={item.name} to={item.href} style={{textDecoration:"none"}} ><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link> <Link to={{
) pathname : item.href,
state : item.value
}} style={{textDecoration:"none"}} ><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}}>{item.name}</MenuItem></Link>
)
} }
<Button onClick={handleLogout} style={{layout:"row", layoutAlign:"space-between-center"}}> <MenuItem>Sair<ExitToAppIcon style={{align:"right"}}/></MenuItem></Button> <StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair>
</Menu> </Menu>
...@@ -109,6 +122,37 @@ export default function CustomizedMenus(props) { ...@@ -109,6 +122,37 @@ export default function CustomizedMenus(props) {
); );
} }
const StyledButtonSair = styled(Button)`
height : 31px;
width : 177px;
layout : row;
.listItem {
width : 100% !important;
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
color : #a5a5a5 !important;
padding : 5px 20px !important;
}
`
const StyledExitToAppIcon = styled(ExitToAppIcon) `
fontSize : 24px;
color : rgb(162,165,165);
align : right;
display : flex;
justify-content : flex-end;
`
const StyledMenuItem = styled(MenuItem)`
display : flex !important;
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
color : #a5a5a5 !important;
padding : 5px 20px !important;
`
//import React from 'react'; //import React from 'react';
//import Button from '@material-ui/core/Button'; //import Button from '@material-ui/core/Button';
//import ClickAwayListener from '@material-ui/core/ClickAwayListener'; //import ClickAwayListener from '@material-ui/core/ClickAwayListener';
......
src/Components/ModalAlterarAvatar.js 0 → 100644
View file @ d47d2fa6
/*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, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
import Profile from '../img/default_profile0.png'
import ComponentAlterarAvatar from './ComponentAlterarAvatar.js'
const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
`
export default function ModarAlterarAvatar (props){
const {state, dispatch} = useContext(Store)
const [avatarFile, setFile] = useState('')
const handleLoginInfo = (login) => {
axios.post(`${apiUrl}`,
{
}
).then( (response) => {
dispatch ({
}, (error) => {
}
)
})
}
const handleFile = (selectorFiles : FileList) => {
console.log(selectorFiles)
{/*setFile()*/}
}
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation={true}
centered={true}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
userAvatar={state.currentUser.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
/>
</Fade>
</StyledModal>
)
}
src/Components/PageProfessorComponents/ModalConfirmarProfessor.js 0 → 100644
View file @ d47d2fa6
/*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, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import axios from 'axios'
import {apiUrl} from '../../env';
import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
`
export default function ModalConfirmarProfessor (props){
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation={true}
centered={true}
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<>
<ConfirmarProfessorComponent>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h2>Confirme os Dados</h2>
<Button style={{marginRight:"-8px", color:"000"}} onClick={props.handleClose}>
<CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
</Button>
</HeaderDiv>
<DialogContentDiv>
<ContainerCentralized>
<p><strong>Município - UF:</strong> {props.info.school_uf.name} - {props.info.school_city} </p>
<p><strong>Escola:</strong> {props.info.school_name}</p>
<p><strong>Telefone da Escola:</strong> {props.info.school_phone}</p>
<p><strong>Seu CPF:</strong> {props.info.teacher_cpf}</p>
<ButtonsDiv>
<ConfirmButton onClick ={props.confirmar}>CONFIRMAR</ConfirmButton>
<CancelButton onClick = {props.cancelar}>CANCELAR</CancelButton>
</ButtonsDiv>
</ContainerCentralized>
</DialogContentDiv>
</ConfirmarProfessorComponent>
</>
</Fade>
</StyledModal>
)
}
const CancelButton = styled(Button)`
width : 140px !important;
color :#666 !important;
font-family : Roboto,sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 16px !important;
padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
display : inline-block !important;
`
const ConfirmButton = styled(Button)`
width : 140px !important;
background-color : #00bcd4 !important;
color : #fff !important;
font-family : Roboto,sans-serif !important;
font-size : 14px !important;
font-weight : 500 !important;
height : 36px !important;
border-radius : 3px !important;
padding-left : 32px !important;
padding-right : 32px !important;
outline : none !important;
margin : 6px 8px !important;
display : inline-block !important;
`
const ButtonsDiv = styled.div`
margin-top : 10px;
display : flex;
justify-content : center;
`
const ContainerCentralized = styled.div`
margin-top : 0;
padding-left : 20px;
padding-right : 30px;
p {
font-size : 15px;
margin : 0 0 10px;
}
`
const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
`
const HeaderDiv = styled.div`
text-align : center;
display : flex;
justify-content : space-between;
padding : 10px 26px 0 26px;
h2 {
font-size : 26px;
font-weight : lighter;
}
`
const ConfirmarProfessorComponent = styled.div`
min-width : 600px;
border-radius : 4px;
background-color : #fff;
color : #666;
`
src/Components/PageProfessorComponents/PartOne.js 0 → 100644
View file @ d47d2fa6
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 axios from 'axios'
import FormInput from '../FormInput.js'
export function sortDict (dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
}
const extractUFInfo = (ufs, name) => {
var id = ''
var abbreviation = ''
for (const obj of ufs) {
if (obj.name === name) {
id = obj.id
abbreviation = obj.abbreviation
}
}
return {id : id, abbreviation : abbreviation}
}
export default function PartOne (props) {
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
const handleSetStates = (states) => {setStates(states)}
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
const handleSetMunicipioList = (municipios) => setMunicipioList(municipios)
//stores a single user selected state
const [uf, setUF] = useState(
{
algumFoiEscolhido : false,
name : '',
abbreviation : ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
algumFoiEscolhido : false,
name : ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
codigoInvalido : false,
value : ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
setCodigoINEP({...codigoINEP,
codigoInvalido : false,
value : code
})
}
const validateINEP = () => {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
).then( (response) => {
handleSubmit()
}, (error) => {
setCodigoINEP({...codigoINEP,
codigoInvalido : true,
value : ''
})
}
)
}
const handleSubmit = () => {
console.log('handle submit : ', uf.abbreviation, uf.name, municipio.name, codigoINEP.value)
props.handleBuscar(uf.abbreviation, uf.name, municipio.name, codigoINEP.value)
}
//on render component, call simcaq api and update ufList
useEffect ( () => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
).then( (response) => {
console.log(sortDict(response.data.result))
handleSetStates(sortDict(response.data.result))
},
(error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
const {id, abbreviation} = extractUFInfo(ufList, ufName)
console.log(id, abbreviation)
setUF({...uf,
algumFoiEscolhido : true,
name : ufName,
abbreviation : abbreviation
}
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
).then( (response) => {
handleSetMunicipioList(sortDict(response.data.result))
}, (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
}
)
}
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>
</Content>
<div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
</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>
<div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
<ButtonConfirmar
onClick={validateINEP}
>
BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
<Divider/>
<ButtonsArea>
<ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
padding-top : 10px;
padding-bottom : 10px;
`
const StrikeSpan = styled.span`
vertical-align : middle;
font-family : Roboto;
font-style : normal;
font-weight : 500;
line-height : 22px;
font-size : 15px;
letter-spacing : .01em;
`
export const Content = styled.div`
margin-top : 16px;
margin-bottom : 16px;
margin-right : 10%;
margin-left : 10%;
h4 {
text-align : center;
magin-bottom : 20px;
font-family: Roboto;
font-style : normal;
font-weight : 300;
line-height : 36px;
font-size : 26px;
margin-top : 20px;
}
p {
font-family : Roboto;
font-style : normal;
font-weight : 400;
line-height : 21px;
font-size : 15px;
}
`
export const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !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;
`
src/Components/PageProfessorComponents/PartThree.js 0 → 100644
View file @ d47d2fa6
import React, {useState} from 'react'
import {Content, ButtonsArea} from './PartOne.js'
import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
import {Button} from '@material-ui/core'
export default function PartThree (props) {
const [phoneNumber, setPhoneNumber] = useState(
{
flagInvalid : false,
number : ''
}
)
const handleChangePhoneNumber = (event) => {
const input = event.target.value.replace(/\D/,'')
setPhoneNumber({...phoneNumber,
flagInvalid : (input.length < 9 ? true : false),
number : (input.length > 9 ? phoneNumber.number : input),
})
}
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 handleSubmit = () => {
const submit_phone = phoneNumber.number
const submit_cpf = cpf.number
props.handleSubmit(submit_phone, submit_cpf)
}
return (
<>
{console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
<form style={{textAlign:"start"}}>
<span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
<FormControl required style={{width:"100%"}}>
<p>Inserir o telefone da escola:</p>
<FormInput
inputType={'text'}
pattern="[0-9]"
name={'DDD e Número'}
placeholder={'DDD e Número'}
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>
</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>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
background-color : #00bcd4 !important;
color : #fff !important;
box-shadow : none !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;
`
src/Components/PageProfessorComponents/PartTwo.js 0 → 100644
View file @ d47d2fa6
import React, {useState, useEffect} from 'react'
import {Content, ButtonsArea} from './PartOne.js'
import Divider from '@material-ui/core/Divider';
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
import {Button} from '@material-ui/core'
import axios from 'axios'
import {simcaqAPIurl} from '../../env'
import {sortDict} from './PartOne.js'
export default function PartTwo (props) {
const [schoolList, setSchoolList] = useState([])
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)
//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')
)}
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)
)}
}, [])
const onClickTable = (city_name, id, name, state_name) => {
props.handleBuscar(city_name, id, name, state_name)
}
return (
<>
{console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
<Stepper items={props.stepper}/>
</Content>
<Content>
<InputContainer>
<p>Selecione a sua escola:</p>
<CustomizedTables
columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
rows={schoolList} onClickTable={onClickTable}
/>
</InputContainer>
</Content>
<Divider/>
<ButtonsArea>
<ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
<ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
color: #666 !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;
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`
max-width : 970px;
display : block;
flex : auto;
`
src/Components/PageProfessorComponents/SuccessfulRequest.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import styled from 'styled-components'
import {ButtonConfirmar} from './PartOne.js'
import Comentarios from '../../img/comentarios.png'
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"}}>
<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>
<ImageDiv/>
</div>
</div>
)
}
const ImageDiv = styled.div`
height : 500px;
background-image : url(${Comentarios});
background-repeat : no-repeat;
background-position : center center;
`
const TextDiv = styled.div`
display : flex;
flex-direction : row;
p {
text-align : justify;
font-family: Roboto;
font-style : normal;
font-weight : 400;
line-height : 21px;
font-size : 15px;
margin : 0 0 10px;
}
`
const StyledH4 = styled.h4`
font-family : Roboto;
font-style : normal;
font-weight : 300;
line-height : 36px;
font-size : 26px;
margin-top : 20px;
margin-bottom : 20px;
`
src/Components/PasswordRecoveryComponents/Default.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
error = {props.error}
/>
<div style={{display:"flex", justifyContent:"center"}}>
<CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
src/Components/PasswordRecoveryComponents/Error.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
<p>{props.email}</p>
<p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
error = {props.error}
/>
<div style={{display:"flex", justifyContent:"center"}}>
<CompletarCadastroButton onClick={(e) => props.onSubmit(e, props.value)}>BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
src/Components/PasswordRecoveryComponents/Success.js 0 → 100644
View file @ d47d2fa6
import React from 'react'
import {CompletarCadastroButton} from '../TabPanels/TabPanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
export default function Default (props) {
return (
<div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
<h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
<p> Enviamos um link para <span style={{color:"#00bcd4"}}>{props.email}</span> que permite alterar sua senha. </p>
<p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
<p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
</div>
)
}
src/Components/PublicationPermissionsContent.js
View file @ d47d2fa6
...@@ -31,7 +31,7 @@ export default function PublicationPermissionsContent (props) { ...@@ -31,7 +31,7 @@ export default function PublicationPermissionsContent (props) {
<p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então, <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as políticas de conteúdos, estando então,
a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu a partir desse momento passível de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das políticas de conteúdo estabelecidas
(<a href="termos-de-uso#publicacoes-de-usuario"><strong>Políticas de Conteúdo</strong></a>) (<a href="/termos" style={{color:"initial"}}><strong>Políticas de Conteúdo</strong></a>)
</p> </p>
<Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}> <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
......
src/Components/ResourceCard.js
View file @ d47d2fa6
...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details. ...@@ -16,15 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License 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/>.*/ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {Component} from 'react'; import React, { Component } from "react";
import './CardsAnimation.css'; import "./CardsAnimation.css";
import {Container} from 'react-grid-system'; import { Container } from "react-grid-system";
import Card from '@material-ui/core/Card'; import Card from "@material-ui/core/Card";
import CardContent from '@material-ui/core/CardContent'; import CardContent from "@material-ui/core/CardContent";
import CardActions from '@material-ui/core/CardActions'; import CardActions from "@material-ui/core/CardActions";
import IconButton from '@material-ui/core/IconButton'; import IconButton from "@material-ui/core/IconButton";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
import FavoriteIcon from '@material-ui/icons/Favorite'; import FavoriteIcon from "@material-ui/icons/Favorite";
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg"; import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg"; import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg"; import aplicativo from "../img/laranja/APP.jpg";
...@@ -39,104 +39,152 @@ import outros from "../img/laranja/OUTROS.jpg"; ...@@ -39,104 +39,152 @@ import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg"; import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg"; import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg"; import video from "../img/laranja/VIDEO.jpg";
import Rating from '@material-ui/lab/Rating'; import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from '@material-ui/icons/StarBorder'; import StarBorderIcon from "@material-ui/icons/StarBorder";
import {apiDomain} from '../env'; import { apiDomain } from "../env";
import AddIcon from '@material-ui/icons/CreateNewFolder'; import AddIcon from "@material-ui/icons/CreateNewFolder";
import Options from './CardOptions' import Options from "./CardOptions";
import Video from '@material-ui/icons/OndemandVideo'; import Video from "@material-ui/icons/OndemandVideo";
import noAvatar from "../img/default_profile.png"; import noAvatar from "../img/default_profile.png";
const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao}, const types = [
{label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}] { label: "Animação", thumb: animacao },
const slideStyle={ { label: "Apresentação", thumb: apresentacao },
{ label: "Aplicativo", thumb: aplicativo },
{ label: "Áudio", thumb: audio },
{ label: "Vazio", thumb: vazio },
{ label: "Imagem", thumb: imagem },
{ label: "Gráfico", thumb: grafico },
{ label: "Jogo", thumb: jogo },
{ label: "Livro", thumb: livro },
{ label: "Livro digital", thumb: livro },
{ label: "Mapa", thumb: mapa },
{ label: "Outros", thumb: outros },
{ label: "Software Educacional", thumb: software },
{ label: "Software", thumb: software },
{ label: "Texto", thumb: texto },
{ label: "Vídeo", thumb: video }
];
const slideStyle = {
height: "50px", height: "50px",
width: "50px", width: "50px",
backgroundColor: "white", backgroundColor: "white",
borderRadius: "50%", borderRadius: "50%"
}; };
const publisherStyle={ const publisherStyle = {
color: "white", color: "white",
paddinLeft: "30px", paddinLeft: "30px",
fontSize: "15px", fontSize: "15px"
}; };
class ResourceCard extends Component { class ResourceCard extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state = {
thumbnail: null, thumbnail: null,
userStyle: "animatiOff", userStyle: "animatiOff",
userAvatar: null, userAvatar: null
}; };
} }
renderType(type){ renderType(type) {
if (!this.state.thumbnail && !this.props.thumbnail ) { if (!this.state.thumbnail && !this.props.thumbnail) {
var aux = types.find(function(element){ return element.label === type}); var aux = types.find(function(element) {
this.setState({thumbnail: aux.thumb}); return element.label === type;
});
this.setState({ thumbnail: aux.thumb });
} }
if (!this.state.thumbnail && this.props.thumbnail ) { if (!this.state.thumbnail && this.props.thumbnail) {
this.setState({thumbnail: apiDomain + this.props.thumbnail}); this.setState({ thumbnail: apiDomain + this.props.thumbnail });
} }
} }
onHover(){ onHover() {
this.setState({userStyle: "animatiOn"}); this.setState({ userStyle: "animatiOn" });
} }
onIddle(){ onIddle() {
this.setState({userStyle: "animatiOff"}) this.setState({ userStyle: "animatiOff" });
} }
defAvatar(){ defAvatar() {
if (!this.state.userAvatar && (!this.props.avatar.length)){ if (!this.state.userAvatar && !this.props.avatar.length) {
this.setState({userAvatar: noAvatar}); this.setState({ userAvatar: noAvatar });
} }
if (!this.state.userAvatar && (this.props.avatar) ) { if (!this.state.userAvatar && this.props.avatar) {
this.setState({userAvatar:apiDomain+this.props.avatar}); this.setState({ userAvatar: apiDomain + this.props.avatar });
} }
} }
render(){ render() {
this.renderType(this.props.type); this.renderType(this.props.type);
this.defAvatar(); this.defAvatar();
return ( return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} > <Card
<Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}> onMouseOver={this.onHover.bind(this)}
<div className={this.state.userStyle}> onMouseOut={this.onIddle.bind(this)}
<img style={slideStyle} src={this.state.userAvatar} alt="Avatar"/> >
<Typography style={publisherStyle}>Enviado por: <br/>{this.props.author}</Typography> <Container
</div> style={{
<img src={this.state.thumbnail} style={{height:"100%"}} alt="thumbnail do recurso"/> padding: "0px",
</Container> height: "175px",
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}> backgroundColor: "#ff7f00"
<Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}> }}
{this.props.name} >
</Typography> <div className={this.state.userStyle}>
</CardContent> <img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
<Container style={{textAlign: "left"}}> <Typography style={publisherStyle}>
Enviado por: <br />
<Rating {this.props.author}
name="customized-empty" </Typography>
value={this.props.rating*10} </div>
precision={0.5} <img
emptyIcon={<StarBorderIcon fontSize="inherit" />} src={this.state.thumbnail}
/> style={{ height: "100%" }}
</Container> alt="thumbnail do recurso"
<CardActions style={{justifyContent: "space-between", padding: "0px"}}> />
{ this.props.type ==="Vídeo" </Container>
? <Video style={{color:"#ff7f00"}} /> <CardContent
: <br/>} style={{ height: "60%", textAlign: "left", paddingBottom: "0px" }}
<IconButton aria-label="Favoritar" size="small"> >
<FavoriteIcon /> <Typography
</IconButton> variant="body2"
</CardActions> color="textSecondary"
<CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}> component="p"
style={{ height: "45px", overflow: "hidden", fontSize: "0.8em" }}
<IconButton aria-label="Guardar" size="small"> >
<AddIcon /> {this.props.name}
</IconButton> </Typography>
<Options/> </CardContent>
</CardActions> <Container style={{ textAlign: "left" }}>
</Card> <Rating
);} name="customized-empty"
} value={this.props.rating * 10}
precision={0.5}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Container>
<CardActions
style={{ justifyContent: "space-between", padding: "0px" }}
>
{this.props.type === "Vídeo" ? (
<Video style={{ color: "#ff7f00" }} />
) : (
<br />
)}
<IconButton aria-label="Favoritar" size="small">
<FavoriteIcon />
</IconButton>
</CardActions>
<CardActions
style={{
borderTop: "1px solid #e5e5e5",
justifyContent: "space-between"
}}
>
<IconButton aria-label="Guardar" size="small">
<AddIcon />
</IconButton>
<Options />
</CardActions>
</Card>
);
}
}
export default ResourceCard; export default ResourceCard;
src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js 0 → 100644
View file @ d47d2fa6
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
color: "#666"
}
}));
export default function SearchEPCompCurriculum() {
const classes = useStyles();
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const filtrosComponente = [
{ exemplo: "Arte", value: "0" },
{ exemplo: "Biologia", value: "1" },
{ exemplo: "Ciências da Natureza", value: "2" },
{ exemplo: "Direitos Humanos", value: "3" },
{ exemplo: "Educação Ambiental", value: "4" },
{ exemplo: "Educação do Campo", value: "5" },
{ exemplo: "Educação Especial", value: "6" },
{ exemplo: "Educação Física", value: "7" },
{ exemplo: "Educação Indígena", value: "8" },
{ exemplo: "Educação Quilombola", value: "9" },
{ exemplo: "Educação Sexual", value: "10" },
{ exemplo: "Ensino Religioso", value: "11" },
{ exemplo: "Filosofia", value: "12" },
{ exemplo: "Física", value: "13" },
{ exemplo: "Geografia", value: "14" },
{ exemplo: "História", value: "15" },
{ exemplo: "Informática", value: "16" },
{ exemplo: "Língua Espanhola", value: "17" },
{ exemplo: "Língua Inglesa", value: "18" },
{ exemplo: "Língua Portuguesa", value: "19" },
{ exemplo: "Matemática", value: "20" },
{ exemplo: "Outras Línguas", value: "21" },
{ exemplo: "Outros", value: "22" },
{ exemplo: "Química", value: "23" },
{ exemplo: "Sociologia", value: "24" }
];
return (
<List className={classes.root}>
{filtrosComponente.map(item => {
const labelId = `checkbox-list-label-${item.value}`;
return (
<ListItem
key={item.exemplo}
role={undefined}
dense
button
onClick={handleToggle(item.value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(item.value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={item.exemplo} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="comments"></IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}