diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 7765fcec0d09d58a4eb38136bd0e6b1f8156e7ae..73b9f823e520aefc8e3a2ade0ed4ccbb2fc75858 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -29,6 +29,10 @@ import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
+import colecoes_obj from './FormationMaterialsResources/formationMaterials';
+import ExpandedMaterial from './ExpandedMaterials';
+
+const materials = colecoes_obj();
class ReqResources extends Component {
constructor(props) {
@@ -164,6 +168,16 @@ class ReqCollections extends Component {
}
class SubPages extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ currMaterial: {
+ open: false,
+ material: {}
+ },
+ };
+ }
+
areaRender() {
switch (this.props.banner) {
case "Recursos":
@@ -206,6 +220,25 @@ class SubPages extends Component {
</React.Fragment>
);
case "Materiais":
+
+ const HandleExpandMaterial = (id) => {
+ if (id !== this.state.currMaterial.material.id)
+ this.setState({
+ currMaterial: {
+ open: true,
+ material: { ...materials[id] }
+ }
+ })
+ else
+ this.setState({
+ currMaterial: {
+ open: false,
+ material: {}
+ }
+ })
+ }
+
+
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
@@ -243,22 +276,32 @@ class SubPages extends Component {
showStatus={false}
>
<Row>
- <Col md={3}>
- <MaterialCard name="oioi" />
- </Col>
- <Col md={3}>
- <MaterialCard name="oioi" />
- </Col>
- <Col md={3}>
- <MaterialCard name="oioi" />
- </Col>
- <Col md={3}>
- <MaterialCard name="oioi" />
- </Col>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={HandleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
</Row>
</Carousel>
+ {
+ this.state.currMaterial.open ?
+ <ExpandedMaterial material={this.state.currMaterial.material} />
+ :
+ null
+ }
</Container>
- </React.Fragment>
+ </React.Fragment >
);
case "Colecoes":
return (
@@ -302,4 +345,6 @@ class SubPages extends Component {
return <div>{this.areaRender()}</div>;
}
}
+
+
export default SubPages;
diff --git a/src/Components/ExpandedMaterialCard.js b/src/Components/ExpandedMaterialCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..120cdfa3bacf3a0a7b4ea8ddb95b73a77fa7d508
--- /dev/null
+++ b/src/Components/ExpandedMaterialCard.js
@@ -0,0 +1,67 @@
+/*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 Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardActions from '@material-ui/core/CardActions';
+import Typography from '@material-ui/core/Typography';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+
+export default function MaterialCard(props) {
+
+ const [expanded, setExpanded] = useState(false);
+
+ const thumb = require(`../../public/${props.thumb}`)
+
+ return (
+ <Card>
+ <img style={{maxHeight : "100%", maxWidth:"100%"}} src={thumb} alt="thumbnail do recurso" />
+ <CardContent style={{ height: "50px"}}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <Button
+ color="secondary"
+ endIcon={expanded ? <ExpandLessRoundedIcon /> : <ExpandMoreRoundedIcon />}
+ >
+
+ Ver módulos
+ </Button>
+ </CardActions>
+ </Card >
+ )
+}
+
+const SizedBox = styled.div`
+ width : 5px;
+`
+const Title = styled(Typography)`
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-bottom: 10px;
+ font-size: 1.2em;
+ line-height: 1.1;
+ max-height: 46px;
+ color: #666;
+`
\ No newline at end of file
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
new file mode 100644
index 0000000000000000000000000000000000000000..3cf9b5253312dab18728d8a246c1c46eb32a7ed3
--- /dev/null
+++ b/src/Components/ExpandedMaterials.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import ExpandedMaterialCard from './ExpandedMaterialCard';
+import Paper from '@material-ui/core/Paper';
+import Library from '@material-ui/icons/LibraryBooks';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ '& > *': {
+ margin: theme.spacing(0.5),
+ },
+ },
+}));
+
+const ExpandedMaterial = (props) => {
+ const material = { ...props.material };
+ const classes = useStyles();
+
+ return (
+ <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+ <Grid container direction="row" spacing={2}>
+ <Grid item direction="column" xs={4}>
+ <Grid item>
+ <Title variant="body2">
+ {
+ material.name
+ }
+ </Title>
+ </Grid>
+ <SizedHeightBox />
+ <Grid item>
+ <ChipsDiv className={classes.root}>
+ {
+ material.tags.map((tag, index) => {
+ return (
+ <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
+ )
+ })
+ }
+ </ChipsDiv>
+ </Grid>
+ <SizedHeightBox2 />
+ <Grid item direction="column" style={{ color: '#E5E7E9', fontWeight: "500" }}>
+ <DevelopedByDiv>
+ {
+ `Desenvolvido por: ${material.developed}`
+ }
+ </DevelopedByDiv>
+ <SizedHeightBox3 />
+ <Button variant="contained" color="secondary">
+ Ver todos
+ </Button>
+ </Grid>
+ </Grid>
+ <Grid item direction="column" xs={8}>
+ <Grid container direction="row" alignItems="center">
+ <Library style={{ color: "White" }} />
+ <SizedWidthBox />
+ <Title>
+ {material.topics.length} módulos
+ </Title>
+ </Grid>
+ <SizedHeightBox />
+ <Grid container direction="row" spacing={3}>
+ {/* <Grid item md={3}>
+ <ExpandedMaterialCard
+ name={material.topics[1].pre_title + material.topics[1].title}
+ thumb={material.topics[1].img}
+ />
+ </Grid> */}
+ {
+ material.topics.map((material, index) => {
+ return (
+ <Grid item key={index} md={4}>
+ <ExpandedMaterialCard
+ name={material.pre_title + material.title}
+ thumb={material.img}
+ />
+ </Grid>
+ )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+}
+
+const Title = styled.h3`
+ color: White;
+ font-weight: 500;
+ padding : 0;
+ margin : 0;
+`
+const DevelopedByDiv = styled.div`
+`
+
+const ChipsDiv = styled.div`
+ margin-left : -5px;
+`
+const SizedHeightBox = styled.div`
+ height : 3em;
+`
+const SizedHeightBox2 = styled.div`
+ height : 2em;
+`
+const SizedHeightBox3 = styled.div`
+ height : 0.5em;
+`
+const SizedWidthBox = styled.div`
+ width : 5px;
+`
+
+export default ExpandedMaterial;
\ No newline at end of file
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index c5353a918fd0f5aafdf7b2e532c82cfa93cb4b85..ae90a16f8375fef7d4b2b5e111ca7fc700f6e0d2 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -16,40 +16,78 @@ 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, {Component} from 'react';
+import React, {useState} from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
import Typography from '@material-ui/core/Typography';
-import livro from "../img/laranja/LIVRO_DIGITAL.jpg";
import Library from '@material-ui/icons/LibraryBooks';
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import Grid from '@material-ui/core/Grid';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+export default function MaterialCard(props) {
-class MaterialCard extends Component {
- constructor(props) {
- super(props);
- this.state={
- thumbnail: livro,
- };
- }
- render(){
- return (
- <Card>
- <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
- <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
- <Typography variant="body2" color="textSecondary" component="p" style={{overflow: "hidden", fontSize: "0.8em"}}>
- {this.props.name}
- </Typography>
- </CardContent>
- <CardActions style={{justifyContent: "space-between"}}>
- <Library style={{color:"#e81f4f"}} />
- </CardActions>
- <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
- <Typography>Expandir??</Typography>
- </CardActions>
- </Card>
- );}
- }
-
-
-export default MaterialCard;
+ const [expanded, setExpanded] = useState(false);
+
+ const thumb = require(`../../public/${props.thumb}`)
+
+ return (
+ <Card>
+ <img src={thumb} alt="thumbnail do recurso" />
+ <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+ <Grid item>
+ <Rating
+ name="customized-empty"
+ value={props.score}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ readOnly
+ />
+ </Grid>
+ <Grid container direction="row" alignItems="center">
+ <Library style={{ color: "#e81f4f" }} />
+ <SizedBox />
+ <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+ {props.modules.length} módulos
+ </Typography>
+ </Grid>
+ </Grid>
+ </CardActions>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <Button
+ color="secondary"
+ endIcon={expanded ? <ExpandLessRoundedIcon/> : <ExpandMoreRoundedIcon/>}
+ onClick={() => props.handleExpand(props.id)}
+ >
+
+ Ver módulos
+ </Button>
+ </CardActions>
+ </Card >
+ )
+}
+
+const SizedBox = styled.div`
+ width : 5px;
+`
+const Title = styled(Typography)`
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-bottom: 10px;
+ font-size: 1.2em;
+ line-height: 1.1;
+ max-height: 46px;
+ color: #666;
+`
\ No newline at end of file