diff --git a/src/App.js b/src/App.js
index e507548954f20a91c1ef86676e066ef52dbde465..c4ffd8534a3bf1739d7dd72283f1b59a95747895 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,6 +40,7 @@ import { Store } from './Store'
import TermsPage from './Pages/TermsPage.js'
import PublicationPermissionsPage from './Pages/PublicationPermissionsPage.js'
import TabPlataformaMEC from './Pages/TabsHelp/TabPlataformaMEC';
+import ItemStore from './Pages/ItemStore.js'
import EditProfilePage from './Pages/EditProfilePage.js'
import PublicUserPage from './Pages/PublicUserPage.js'
@@ -99,7 +100,7 @@ export default function App(){
<Route path="/plataforma-mec" component={TabPlataformaMEC}/>
<Route path="/recuperar-senha" component={PasswordRecoveryPage}/>
<Route path='/professor' component={PageProfessor}/>
- <Route path="/usuario-publico/:userId" component={PublicUserPage}/>
+ <Route path='/loja' component={ItemStore} />
</Switch>
<EcFooter/>
<GNUAGPLfooter/>
diff --git a/src/Components/AchievementDescriptionCard.js b/src/Components/AchievementDescriptionCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..3af102fe901acb8f237a4ba1d1637caaf30c97fd
--- /dev/null
+++ b/src/Components/AchievementDescriptionCard.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import { Grid } from '@material-ui/core'
+import RequirementDialog from './RequirementsDialog.js';
+
+export default function AchievementDescriptionCard(props) {
+ return (
+ <Paper elevation={3}>
+ <Grid container direction="row" justify="space-around" alignItems="center">
+ <Grid item xs={3}>
+ <AchievementImg src={props.src}/>
+ </Grid>
+ <Grid item xs={7}>
+ <AchievementTitle>{props.title}</AchievementTitle>
+ <AchievementDescription>{props.description}</AchievementDescription>
+ <RequirementDialog
+ title={props.title}
+ description={props.description}
+ requirements={props.requirements}
+ />
+ </Grid>
+ </Grid>
+ </Paper>
+ );
+}
+
+const AchievementImg = styled.img`
+ border-radius: 100px;
+ width: 100px;
+ height: 100px;
+ margin: 30px;
+`
+
+const AchievementTitle = styled.h2`
+`
+
+const AchievementDescription = styled.p`
+`
diff --git a/src/Components/ItemCard.js b/src/Components/ItemCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..21f87f4f9e0bc70f04145db5ff832961e1f383cf
--- /dev/null
+++ b/src/Components/ItemCard.js
@@ -0,0 +1,57 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import gem from '../img/gamification/gem.svg';
+import ItemCardAction from './ItemCardAction.js';
+
+const ItemImage = styled.img`
+ border-radius: 150;
+ max-width: 100%;
+`
+
+const ItemName = styled.h3`
+ font-size: 0.8em;
+ font-weight: lighter;
+ color: #666666;
+`
+
+const ItemDescription = styled.p`
+ font-size: 0.5em;
+ color: #666666;
+`
+
+
+export default function ItemCard (props) {
+ return (
+ <Grid item xs={9} sm={2}>
+ <Card style={{textAlign: 'center'}}>
+ <CardContent>
+ <ItemImage src={props.src}/>
+ <ItemName>{props.name}</ItemName>
+ <ItemDescription>{props.description}</ItemDescription>
+ <ItemCardAction operation={props.action}/>
+ </CardContent>
+ </Card>
+ </Grid>
+ )
+}
diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
new file mode 100644
index 0000000000000000000000000000000000000000..c5e9f41d67a65b1f1a1c81a037504baaae581219
--- /dev/null
+++ b/src/Components/ItemCardAction.js
@@ -0,0 +1,177 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+import Button from '@material-ui/core/Button';
+import gem from '../img/gamification/gem.svg';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import axios from 'axios'
+import {apiUrl} from '../env';
+
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+const actionStyle = (operation) => {
+ var stl = {
+ fontSize: '0.5em',
+ paddingTop: '1em',
+ marginBottom: 0,
+ fontWeight: 'bold',
+ cursor: 'pointer'
+ }
+ stl.color = operation != 'buy' ? '#02a5c3' : '#666666';
+ return stl;
+}
+
+const GemImg = styled.img`
+ height: 23px;
+ position: relative;
+ top: 8px;
+ padding-right: 5px;
+`
+
+const GemSpan = styled.span`
+ color: red;
+`
+
+export default function ItemCardAction (props) {
+ const [success, setSuccess] = useState(false);
+ const [failure, setFailure] = useState(false);
+ const [message, setMessage] = useState("");
+ const [info, setInfo] = useState(false);
+ const [item_id, setItemID] = useState(0);
+ const [last_operation, setLastOperation] = useState();
+ const [open_dialog, setOpenDialog] = useState(false);
+ const nonPurchaseMessage = <span>Item {last_operation == 'equip' ? 'retirado' : 'equipado'}. <a onClick={revertLastOperation}>Desfazer</a></span>;
+
+
+ const handleClose = (snackbar) => {
+ if (snackbar == 'success')
+ setSuccess(false);
+ else if (snackbar == 'info')
+ setInfo(false);
+ else
+ setFailure(false);
+ }
+
+ const revertLastOperation = () => {
+ manageItemAndShowSnackbar(last_operation == 'equip' ? 'unequip' : 'equip',
+ setInfo,
+ nonPurchaseMessage,
+ 'Erro');
+ }
+
+ const manageItemAndShowSnackbar = (operation, setSnackbar, successMessage, failureMessage) => {
+ axios.patch(apiUrl + '/users/' + operation + '_item?id=' + item_id).then(
+ response => {
+ if (response.status == 200) {
+ setSnackbar(true);
+ setMessage(successMessage);
+ } else {
+ setFailure(true);
+ setMessage(failureMessage);
+ }
+ }
+ );
+ setLastOperation(operation == 'purchase' ? last_operation : (operation == 'equip' ? 'unequip' : 'equip'));
+ }
+
+ const handleClickBuyItem = () => {
+ setOpenDialog(false);
+ manageItemAndShowSnackbar('purchase', setSuccess, <span>Item comprado.</span>,
+ <span>Compra falhou. Tente novamente</span>);
+ }
+
+ const handleDialogClose = () => {
+ setOpenDialog(false);
+ }
+
+ const handleClick = () => {
+ // this will become an axios get
+ if (props.operation == 'unequip')
+ manageItemAndShowSnackbar('unequip', setInfo, nonPurchaseMessage, 'Erro');
+ else if (props.operation == 'equip')
+ manageItemAndShowSnackbar('equip', setInfo, nonPurchaseMessage, 'Erro');
+ else if (props.operation == 'buy') {
+ setOpenDialog(true);
+ }
+ }
+
+ return (
+ <div>
+ <Snackbar open={info} autoHideDuration={6000} onClose={() => handleClose('info')}>
+ <Alert onClose={handleClose} severity="info">
+ {message}
+ </Alert>
+ </Snackbar>
+ <Snackbar open={success} autoHideDuration={6000} onClose={() => handleClose('success')}>
+ <Alert onClose={handleClose} severity="success">
+ {message}
+ </Alert>
+ </Snackbar>
+ <Snackbar open={failure} autoHideDuration={6000} onClose={() => handleClose('failure')}>
+ <Alert onClose={handleClose} severity="error">
+ {message}
+ </Alert>
+ </Snackbar>
+ <span style={actionStyle(props.operation)} onClick={handleClick}>
+ {props.operation == 'buy' ? <GemImg src={gem}/> : <span/>}
+ {props.operation == 'buy' ? "COMPRAR" :
+ props.operation == 'equip' ? "USAR" : "TIRAR"}
+ </span>
+ <Dialog
+ open={open_dialog}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
+ <DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
+ <DialogContent>
+ <DialogContentText id="alert-dialog-description">
+ <strong>Esta compra não envolve nenhum dinheiro real.</strong>
+
+ <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
+ <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
+ <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
+
+ <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleDialogClose} color="primary">
+ Cancelar
+ </Button>
+ <Button onClick={handleClickBuyItem} color="primary" autoFocus>
+ Comprar
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </div>
+ )
+}
diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3e03e8e4fbcbf3a6a442a433896bb1191334030
--- /dev/null
+++ b/src/Components/ItemCarousel.js
@@ -0,0 +1,71 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import ItemCard from './ItemCard.js';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import IconButton from '@material-ui/core/IconButton';
+
+//url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
+export default function ItemCarousel (props) {
+ const [left, setLeft] = useState(0);
+ const [right, setRight] = useState(5);
+
+ const goLeft = () => {
+ setRight(right == 0 ? props.items.length-1 : right-1);
+ setLeft(left == 0 ? props.items.length-1 : left-1);
+ }
+
+ const goRight = () => {
+ setRight(right == props.items.length-1 ? 0 : right+1);
+ setLeft(left == props.items.length-1 ? 0 : left+1);
+ }
+
+ return (
+ <Grid
+ item container
+ direction="row"
+ justify="center"
+ alignItems="center"
+ xs={12}
+ spacing={3}
+ >
+ <IconButton onClick={goLeft}>
+ <ArrowBackIcon/>
+ </IconButton>
+ {(left > right ?
+ props.items.slice(left, props.items.length).concat(props.items.slice(0, right))
+ : props.items.slice(left, right)
+ ).map((i) => {
+ return <ItemCard
+ src={i.src}
+ action={i.action}
+ name={i.name}
+ description={i.description}/>
+ })}
+ <IconButton onClick={goRight}>
+ <ArrowForwardIcon/>
+ </IconButton>
+ </Grid>
+ )
+}
diff --git a/src/Components/LevelDescriptionCard.js b/src/Components/LevelDescriptionCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..90e43b78d1343e2e5fa971349e87bc7b175b54e4
--- /dev/null
+++ b/src/Components/LevelDescriptionCard.js
@@ -0,0 +1,77 @@
+import React, { Component, useState, useEffect } from 'react';
+
+import {Container} from 'react-grid-system';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+
+import styled from 'styled-components'
+import ShinyProgressBar from './ShinyProgressBar.js'
+import { Grid } from '@material-ui/core'
+
+import axios from 'axios';
+import { apiUrl } from '../env';
+
+export default function LevelDescriptionCard(props) {
+
+ return (
+ <LevelDescDiv>
+ <Grid container direction="row" justify="space-between" alignItems="center">
+ <Grid item xs={6} md={4}>
+ <CurrentLevelNumber>
+ NÃvel {props.level}
+ </CurrentLevelNumber>
+ <CurrentLevelXP>
+ XP {props.xp}
+ </CurrentLevelXP>
+ </Grid>
+ <Grid item xs={6} md={4} alignContent='flex-end'>
+ <CurrentCoins>
+ {props.coins} COINS
+ </CurrentCoins>
+ <NextLevelXP>
+ {props.xp_to_next_lvl} XP PARA O NÃVEL {props.level+1}
+ </NextLevelXP>
+ </Grid>
+ <ShinyProgressBar percentage={props.bar_size} />
+ </Grid>
+ </LevelDescDiv>
+ );
+}
+
+const NextLevelXP = styled.p`
+ text-align: right;
+ font-size: large;
+ font-weight: 500;
+ color: #575757;
+ margin-right: 30px;
+`
+
+const CurrentCoins = styled.p`
+ text-align: right;
+ font-size: x-large;
+ font-weight: 500;
+ color: #575757;
+ margin-right: 30px;
+`
+
+const CurrentLevelInfo = styled.div`
+ background-color: red;
+`
+const CurrentLevelNumber = styled.h1`
+ font-weight: 500;
+ font-size: 40px;
+ color: #646464;
+ margin-left: 30px;
+`
+
+const CurrentLevelXP = styled.h2`
+ font-size: x-large;
+ font-weight: 500;
+ color: #00A5B9;
+ margin-left: 30px;
+`
+
+const LevelDescDiv = styled.div`
+ margin: 20px;
+ padding: 20px;
+`
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index c63affdfb0e8bc74f2f062d5fb8d69a9545c860f..d7787a8c65f222bd3a58bbd34c721a34f4ab443c 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -110,11 +110,11 @@ export default function MenuBar(props){
const minhaArea = [
{ name: "Perfil e Atividades", href: "/perfil", value : '0'},
- { name: "Recursos Publicados", href: "/perfil", value : '1'},
- { name: "Favoritos", href: "/perfil", value : '2'},
- { name: "Coleções", href: "/perfil", value : '3'},
- { name: "Rede", href: "/perfil", value : '4'},
- { name: "Curadoria", href: "/perfil", value : '5'},
+ { name: "Status e Conquistas", href: "/perfil", value: '1'},
+ { name: "Recursos Publicados", href: "/perfil", value : '2'},
+ { name: "Favoritos", href: "/perfil", value : '3'},
+ { name: "Coleções", href: "/perfil", value : '4'},
+ { name: "Rede", href: "/perfil", value : '5'},
{ name: "Configurações", href: "/editarperfil"},
]
@@ -126,7 +126,10 @@ export default function MenuBar(props){
<Dropdown name="Ajuda" items={menuAjuda}/>
<a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
<ButtonStyled >Educação Conectada</ButtonStyled>
- </a>
+ </a>
+ <a href="/loja">
+ <ButtonStyled>Lojinha</ButtonStyled>
+ </a>
<ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
</Left>
<Right>
diff --git a/src/Components/RequirementsDialog.js b/src/Components/RequirementsDialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..a8f5f208cf28c0ac536b66e959013887eb543f7d
--- /dev/null
+++ b/src/Components/RequirementsDialog.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+
+const useStyles = makeStyles(theme => ({
+ form: {
+ display: 'flex',
+ flexDirection: 'column',
+ margin: 'auto',
+ width: 'fit-content',
+ },
+ formControl: {
+ marginTop: theme.spacing(2),
+ minWidth: 120,
+ },
+ formControlLabel: {
+ marginTop: theme.spacing(1),
+ },
+}));
+
+export default function MaxWidthDialog(props) {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+ const fullWidth = true;
+ const maxWidth = 'sm';
+
+ const handleClickOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <React.Fragment>
+ <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+ Mais
+ </Button>
+ <Dialog
+ fullWidth={fullWidth}
+ maxWidth={maxWidth}
+ open={open}
+ onClose={handleClose}
+ aria-labelledby="max-width-dialog-title"
+ >
+ <DialogTitle id="max-width-dialog-title">{props.title}</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ {props.description}
+ <h4>Requisitos</h4>
+ <dl>
+ {props.requirements.map(
+ (r) => {
+ return(
+ <div>
+ <dt>{r.name}</dt>
+ <dd>{r.description}</dd>
+ </div>
+ );
+ })}
+ </dl>
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose} color="primary">
+ Fechar
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </React.Fragment>
+ );
+}
+
diff --git a/src/Components/ShinyProgressBar.js b/src/Components/ShinyProgressBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..f2d1cc03c8c2df869499dd72d3dda7078fe2f7de
--- /dev/null
+++ b/src/Components/ShinyProgressBar.js
@@ -0,0 +1,55 @@
+import React, {Component} from 'react';
+import {Container} from 'react-grid-system';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import styled from 'styled-components'
+
+
+export default function ShinyProgressBar(props) {
+ return (
+ <ProgressBar>
+ <ShinyFiller percentage={props.percentage}/>
+ </ProgressBar>
+ );
+}
+
+const ShinyFiller = (props) => {
+ return (
+ <StyledFiller style={{ width: `${props.percentage}%` }}>
+ <FillerShine/>
+ </StyledFiller>
+ );
+}
+
+const FillerShine = (props) => {
+ return <StyledShine/>
+}
+
+const ProgressBar = styled.div`
+ background: #C4C4C4;
+ position: relative;
+ height: 30px;
+ width: 100%;
+ border-radius: 50px;
+ margin-left:20px;
+ margin-right:20px;
+`
+
+const StyledFiller = styled.div`
+ background: #02A4B9;
+ height: 100%;
+ border-radius: 50px;
+ transition: width 1s ease-in;
+`
+
+const StyledShine = styled.div`
+ position: relative;
+ top: 5px;
+ left: 15px;
+ background: #03C0CE;
+ height: 25%;
+ width: 95%;
+ border-radius: 50px;
+ transition: width 1s ease-in;
+ z-index: +1;
+`
\ No newline at end of file
diff --git a/src/Components/StoreGuide.js b/src/Components/StoreGuide.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4b0f509b11a3c8ab590e397c1fe07e9ba616c5c
--- /dev/null
+++ b/src/Components/StoreGuide.js
@@ -0,0 +1,86 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { Typography } from '@material-ui/core';
+
+const StoreTitle = styled.h1`
+ margin-top: 0;
+`
+
+const StoreTopic = styled.h2`
+ padding-top: 0.5em;
+ font-size: 1em;
+ font-weight: 100;
+`
+
+const StoreBody = styled.p`
+ font-size: 0.8em;
+`
+export default function ItemStoreContainer (props) {
+ return (
+ <Grid item xs={10} sm={7}>
+ <Card>
+ <CardContent>
+ <StoreTitle>
+ Lojinha
+ </StoreTitle>
+ <StoreTopic>
+ O que são "gemas"?
+ </StoreTopic>
+ <StoreBody>
+ Gemas são moedas virtuais que você ganha usando a plataforma MEC RED (publicando recursos, avaliando recursos, criando conexões, etc) e pode usar para adquirir itens cosméticos para seu perfil, como insÃgnias e bordas de avatar.
+ </StoreBody>
+ <StoreTopic>
+ Posso usar dinheiro real para comprar gemas?
+ </StoreTopic>
+ <StoreBody>
+ <strong>Não.</strong> Gemas são adquiridas exclusivamente através do uso da plataforma.
+ </StoreBody>
+ <StoreTopic>
+ Qual a vantagem de usar itens?
+ </StoreTopic>
+ <StoreBody>
+ Os itens são uma maneira de mostrar quem você é, quais os seus interesses e quais foram suas contribuições mais importantes. Nenhum item oferece funcionalidade a mais, de maneira que novos usuários não sofram desvantagem.
+ </StoreBody>
+ <StoreTopic>
+ Como usar
+ </StoreTopic>
+ <StoreBody>
+ As seções da loja dividem os itens por <strong>categoria</strong>.
+ <ul>
+ <li>
+ Itens adquiridos <strong>somente por conquistas</strong> não aparecem
+ na loja (exceto pelos que você já tem);
+ </li>
+ <li>
+ Outros itens podem ser comprados (usando gemas), usados (usar uma borda de avatar, por exemplo) ou tirados (se estiverem sendo usados).
+ </li>
+ </ul>
+ </StoreBody>
+ <h4>
+ Boas compras!
+ </h4>
+ </CardContent>
+ </Card>
+ </Grid>
+ )
+}
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
new file mode 100644
index 0000000000000000000000000000000000000000..1c5b1986d0b6ba3206b9900c09a18ebf13993a5d
--- /dev/null
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -0,0 +1,91 @@
+import React, {useContext, useState, useEffect} from 'react'
+import { Store } from '../../Store.js'
+import styled from 'styled-components'
+import { Container } from 'react-grid-system'
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import {ContainerDivStyled} from './TabPanelMeusRecursos.js'
+import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
+import LoadingSpinner from '../LoadingSpinner.js'
+import PaginaVaziaColecao from '../../img/Pagina_vazia_colecao.png'
+import axios from 'axios'
+import {apiUrl} from '../../env';
+import LevelDescriptionCard from '../LevelDescriptionCard.js'
+import AchievementDescriptionCard from '../AchievementDescriptionCard.js'
+import { Grid } from '@material-ui/core'
+
+export default function TabPanelStatusEConquistas (props) {
+ const [achievements, setAchievements] = useState([]);
+ const [level, setLevel] = useState(0);
+ const [xp, setXP] = useState(0);
+ const [coins, setCoins] = useState(0);
+ const [barSize, setBarSize] = useState(0);
+ const [xpToNextLevel, setXpToNextLevel] = useState(0);
+ const { state } = useContext(Store)
+
+ useEffect(() => {
+ axios.all(
+ ['xp_to_next_lvl', 'percent_to_next_level', 'points', 'xp', 'get_level',
+ 'completed_achievements'].map((r) => {
+ return axios.get(apiUrl + '/' + r + '?id=' + state.currentUser.id);
+ })).then(axios.spread((xp_to_next_lvl, percent_to_next_level, points,
+ xp, level, completed_achievements) => {
+ this.setXpToNextLevel(xp_to_next_lvl);
+ this.setBarSize(100-percent_to_next_level);
+ this.setCoins(points);
+ this.setXP(xp);
+ this.setLevel(level);
+ this.setAchievements(completed_achievements);
+ }));
+ }, [])
+
+ return (
+ <div>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <LevelDescriptionCard
+ xp_to_next_lvl={xpToNextLevel}
+ bar_size={barSize}
+ coins={coins}
+ xp={xp}
+ level={level}
+ />
+ </Paper>
+ </ContainerDivStyled>
+ <AchievementsContainer>
+ <AchievementsSectionTitle>
+ Conquistas
+ </AchievementsSectionTitle>
+ <AchievementsList>
+ <Grid container direction="row" justify="space-around" alignItems="center">
+ {achievements.map(
+ (a) => { return (
+ <Grid item xs={12} md={5}>
+ <AchievementDescriptionCard
+ name={a.title}
+ description={a.description}
+ src={a.imgsrc}
+ requirements={a.requirements} />
+ //requirements={[{name: "teste", description: "teste"}]}/>
+ </Grid>
+ )}
+ )}
+ </Grid>
+ </AchievementsList>
+ </AchievementsContainer>
+ </div>
+ );
+}
+
+const AchievementsSectionTitle = styled.h1`
+ font-weight: 400;
+`
+const AchievementsContainer = styled.div`
+ max-width : 1140px;
+ margin-left : auto;
+ margin-right : auto;
+ margin-bottom: 30px;
+ margin-top: 70px;
+`
+const AchievementsList = styled.div`
+`
diff --git a/src/Components/UserCardGamified.js b/src/Components/UserCardGamified.js
new file mode 100644
index 0000000000000000000000000000000000000000..711b9ee433f6a13fcb6f6cbea4c120d8c5793233
--- /dev/null
+++ b/src/Components/UserCardGamified.js
@@ -0,0 +1,38 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+
+export default function UserCardGamified (props) {
+ return (
+ <Grid item xs={6} sm={3}>
+ <Card style={{backgroundColor:'pink'}}>
+ <CardContent>
+ Eu serei o card da pessoa
+ </CardContent>
+ <CardActions>
+ Learn more
+ </CardActions>
+ </Card>
+ </Grid>
+ )
+}
diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js
new file mode 100644
index 0000000000000000000000000000000000000000..ce8855c0306f2542b67b0f2db18bf2d0f1086a8b
--- /dev/null
+++ b/src/Pages/ItemStore.js
@@ -0,0 +1,104 @@
+/*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, useContext, useEffect} from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
+import Grid from '@material-ui/core/Grid';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Container from '@material-ui/core/Container';
+import UserCardGamified from '../Components/UserCardGamified.js';
+import StoreGuide from '../Components/StoreGuide.js';
+import ItemCarousel from '../Components/ItemCarousel.js';
+import {apiUrl} from '../env';
+
+const SectionTitle = styled.h3`
+ font-weight: 100;
+ margin-bottom: 0;
+`
+
+const StoreDivider = styled.hr`
+ width: 50px;
+ margin-left: 0;
+`
+
+const StoreSection = styled.div`
+ font-size: 1.5em;
+ margin-top: 60px;
+ margin-bottom: 20px;
+`
+
+export default function ItemStoreContainer (props) {
+ const [avatar_frames, setAvatarFrames] = useState([]);
+ const [card_frames, setCardFrames] = useState([]);
+ const [cover_frames, setCoverFrames] = useState([]);
+ const [badges, setBadges] = useState([]);
+
+ useEffect(() => {
+ axios.all(
+ ['avatar_frame', 'card_frame', 'cover_frame', 'badge'].map((r) => {
+ return axios.get(apiUrl+'/' + 'user_items/index?item_type='+r+'&unlock_rule=purchase');
+ })).then(axios.spread((avatar, card, cover, badge) => {
+ setAvatarFrames(avatar);
+ setCardFrames(card);
+ setCoverFrames(cover);
+ setBadges(badge);
+ }));
+ }, [])
+
+ return (
+ <Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4", width: '100%'}}>
+ <Grid container
+ direction="row"
+ justify="space-around"
+ alignItems="stretch"
+ style={{
+ marginTop: '2em',
+ marginBottom: '2em',
+ }}
+ >
+ <UserCardGamified/>
+ <StoreGuide/>
+ </Grid>
+ <StoreSection>
+ <SectionTitle>Bordas de avatar</SectionTitle>
+ <StoreDivider/>
+ <ItemCarousel items={avatar_frames}/>
+ </StoreSection>
+
+ <StoreSection>
+ <SectionTitle>InsÃgnias</SectionTitle>
+ <StoreDivider/>
+ <ItemCarousel items={badges}/>
+ </StoreSection>
+
+ <StoreSection>
+ <SectionTitle>Bordas de card</SectionTitle>
+ <StoreDivider/>
+ <ItemCarousel items={card_frames}/>
+ </StoreSection>
+
+ <StoreSection>
+ <SectionTitle>Bordas de capa de perfil</SectionTitle>
+ <StoreDivider/>
+ <ItemCarousel items={cover_frames}/>
+ </StoreSection>
+ </Container>
+ )
+}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 975ea246c803417f016c3b0d3b87282f6812edd5..ed930d61e1c02b503d3fa944e67633bb8c0d5728 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -31,12 +31,15 @@ import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';
-import TabPanelAtividades from '../Components/TabPanels/UserPageTabs/PanelAtividades.js'
-import TabPanelMeusRecursos from '../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js'
-import TabPanelFavoritos from '../Components/TabPanels/UserPageTabs/PanelFavoritos.js'
-import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes.js'
-import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
+
+import TabPanelAtividades from '../Components/TabPanels/TabPanelAtividades.js'
+import TabPanelMeusRecursos from '../Components/TabPanels/TabPanelMeusRecursos.js'
+import TabPanelFavoritos from '../Components/TabPanels/TabPanelFavoritos.js'
+import TabPanelColecoes from '../Components/TabPanels/TabPanelColecoes.js'
+import TabPanelRede from '../Components/TabPanels/TabPanelRede.js'
+import TabPanelStatusEConquistas from '../Components/TabPanels/TabPanelStatusEConquistas.js'
import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
+
import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import ModalAlterarAvatar from '../Components/ModalAlterarAvatar.js'
@@ -243,6 +246,119 @@ export default function UserPage (props){
handleClose={modalControl}
userAvatar={state.currentUser.userAvatar}
/>
+<<<<<<< src/Pages/UserPage.js
+ <HeaderDiv>
+ <ContainerNoPad>
+ <BreadcrumbsDiv>
+ <StyledBreadcrumbs>
+ <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
+ Página Inicial
+ </Link>
+ <span>
+ Minha área
+ </span>
+ <span>
+ {tabs[tabValue]}
+ </span>
+ </StyledBreadcrumbs>
+ </BreadcrumbsDiv>
+
+ <div style={{display:"flex", flexDirection:"column"}}>
+ <MainContainerDesktop maxwidth="xl">
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ <ContainerUserProfile>
+ <HeaderContainer>
+ <CoverContainer>
+ <img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
+ <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
+ <label htmlFor="icon-button-file">
+ <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
+ <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+ <PhotoCamera />
+ </IconButton>
+ </Tooltip>
+ </label>
+ </CoverContainer>
+ <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
+ <img src={state.currentUser.userAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+ <ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
+ <span>Alterar Foto</span>
+ </ChangeAvatarDiv>
+ </ProfileAvatarDiv>
+ <UserProfileInfoDiv>
+ <p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500", backgroundColor:"#77777796", backgroundRadius : "8px"}}>{user}</p>
+ <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+ <p>{state.currentUser.education}</p>
+ </div>
+ </UserProfileInfoDiv>
+ <EditProfileAnchor to="/editarperfil">
+ <Button>
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+ </Button>
+ </EditProfileAnchor>
+ </HeaderContainer>
+ <CheckTeacherDiv>
+ <>
+ {
+ state.currentUser.isCollaborativeTeacher ?
+ (
+ [
+ <>
+ <img src={CheckDecagram} style={{color:"#00bcd4"}}/>
+ <span>Professor(a)</span>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+ <span style={{cursor:"pointer"}}>
+ <span style={{paddingRight:"5px"}}>
+ <img src={CheckDecagram}/>
+ </span>
+ Você é professor(a) e gostaria de publicar recursos?
+ <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+ </span>
+ </p>
+ ]
+ )
+ }
+ </>
+ </CheckTeacherDiv>
+ <RodapeDiv>
+ <NavBarContentContainer>
+ <StyledTabs
+ value ={tabValue}
+ onChange ={handleChangeTab}
+ indicatorColor ="primary"
+ textColor ="primary"
+ variant = "scrollable"
+ scrollButtons = "auto"
+ TabIndicatorProps={{style : {background:"#00bcd4"}}}
+ >
+ <StyledTab label={tabs[0]}/>
+ <StyledTab label={tabs[1]}/>
+ <StyledTab label={tabs[2]}/>
+ <StyledTab label={tabs[3]}/>
+ <StyledTab label={tabs[4]}/>
+ <StyledTab label={tabs[5]}/>
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </ContainerUserProfile>
+ </Paper>
+ </MainContainerDesktop>
+ </div>
+ {tabValue === 0 && <TabPanelAtividades id={id} config={config}/>}
+ {tabValue === 1 && <TabPanelStatusEConquistas id={id} config={config}/>}
+ {tabValue === 2 && <TabPanelMeusRecursos id={id} config={config}/>}
+ {tabValue === 3 && <TabPanelFavoritos id={id} config={config}/>}
+ {tabValue === 4 && <TabPanelColecoes id={id} config={config}/>}
+ {tabValue === 5 && <TabPanelRede id={id} config={config}/>}
+ </ContainerNoPad>
+ </HeaderDiv>
+=======
<BackgroundDiv>
<CustomizedBreadcrumbs
@@ -306,6 +422,7 @@ export default function UserPage (props){
</Grid>
</Grid>
</BackgroundDiv>
+>>>>>>> src/Pages/UserPage.js
</React.Fragment>
]
)
diff --git a/src/img/gamification/gem.svg b/src/img/gamification/gem.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4f083b2c9fc2fa8603aadfd86afbfdddc50458f8
--- /dev/null
+++ b/src/img/gamification/gem.svg
@@ -0,0 +1,17 @@
+<svg width="203" height="307" viewBox="0 0 203 307" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.5765 127.504L2.37646 102.604L51.5765 127.504Z" fill="#CA1818"/>
+<path d="M51.7765 127.504L101.076 1.80389L2.37646 102.604L51.7765 127.504Z" fill="#CA1818"/>
+<path d="M51.7766 129.304C51.3766 129.304 50.8766 129.204 50.4766 129.004L1.0766 104.104C0.576595 103.804 0.176595 103.404 0.0765953 102.904C-0.0234047 102.404 0.0765953 101.904 0.476595 101.504L99.1766 0.703867C99.8766 0.00386721 101.077 -0.196133 102.077 0.203867C103.077 0.603867 103.577 1.50387 103.277 2.30387L54.0766 128.004C53.8766 128.504 53.3766 129.004 52.6766 129.204C52.3766 129.304 52.0766 129.304 51.7766 129.304ZM5.7766 102.204L50.5766 124.704L95.0766 10.9039L5.7766 102.204Z" fill="white"/>
+<path d="M150.277 127.504L199.777 102.604L101.077 1.80389L150.277 127.504Z" fill="#CA1818"/>
+<path d="M150.276 129.304C149.976 129.304 149.776 129.304 149.476 129.204C148.776 129.004 148.277 128.604 148.076 128.004L98.8765 2.30387C98.5765 1.50387 99.0765 0.603867 100.077 0.203867C101.077 -0.196133 102.277 0.00386721 102.977 0.703867L201.677 101.504C202.077 101.904 202.176 102.404 202.076 102.904C201.977 103.404 201.576 103.804 201.076 104.104L151.576 129.004C151.176 129.204 150.676 129.304 150.276 129.304ZM107.077 10.8039L151.576 124.704L196.377 102.104L107.077 10.8039Z" fill="white"/>
+<path d="M150.276 127.504L101.076 304.304L199.776 102.604L150.276 127.504Z" fill="#CA1818"/>
+<path d="M101.076 306.104C100.876 306.104 100.676 306.104 100.376 306.004C99.1763 305.704 98.4763 304.804 98.7763 303.904L147.976 127.104C148.076 126.604 148.476 126.204 148.976 126.004L198.476 101.104C199.276 100.704 200.376 100.704 201.176 101.204C201.976 101.704 202.276 102.504 201.876 103.204L103.176 304.904C102.876 305.604 101.976 306.104 101.076 306.104ZM152.376 128.604L109.876 281.304L195.076 107.104L152.376 128.604Z" fill="white"/>
+<path d="M51.7765 127.504L2.37646 102.604L101.076 304.304L51.7765 127.504Z" fill="#CA1818"/>
+<path d="M101.076 306.104C100.176 306.104 99.2764 305.704 98.8764 304.904L0.176405 103.204C-0.223595 102.504 0.0764047 101.704 0.876405 101.204C1.6764 100.704 2.7764 100.704 3.5764 101.104L53.0764 126.004C53.5764 126.304 53.9764 126.704 54.0764 127.104L103.376 303.904C103.676 304.804 102.876 305.704 101.776 306.004C101.476 306.104 101.276 306.104 101.076 306.104ZM7.0764 107.104L92.2764 281.304L49.7764 128.604L7.0764 107.104Z" fill="white"/>
+<path d="M51.7764 127.504H150.276L101.076 1.80383L51.7764 127.504Z" fill="#CA1818"/>
+<path d="M150.276 129.304H51.7764C51.0764 129.304 50.3764 129.004 49.8764 128.604C49.4764 128.204 49.2764 127.604 49.4764 127.004L98.7764 1.30385C99.0764 0.503845 99.9764 0.00384521 101.076 0.00384521C102.176 0.00384521 102.976 0.503845 103.276 1.30385L152.476 127.004C152.676 127.504 152.576 128.104 152.076 128.604C151.676 129.004 150.976 129.304 150.276 129.304ZM54.9764 125.704H147.176L101.076 8.00385L54.9764 125.704Z" fill="white"/>
+<path d="M51.8764 127.504L51.7764 127.804H101.076H150.376L150.276 127.504H101.076H51.8764Z" fill="#CA1818"/>
+<path d="M150.276 127.504H51.7764L101.076 304.304L150.276 127.504Z" fill="#CA1818"/>
+<path d="M101.076 306.104C99.9764 306.104 99.0763 305.504 98.7763 304.704L49.5764 127.904C49.4764 127.404 49.5764 126.804 50.0764 126.404C50.4764 126.004 51.1764 125.704 51.8764 125.704H150.276C150.976 125.704 151.676 125.904 152.076 126.404C152.476 126.804 152.676 127.404 152.576 127.904L103.376 304.704C103.076 305.504 102.176 306.104 101.076 306.104ZM54.6763 129.304L101.076 295.804L147.376 129.304H54.6763Z" fill="white"/>
+</svg>
+