diff --git a/src/Components/ItemCard.js b/src/Components/ItemCard.js
index 82a6bbc470023d95daa3c6f82bffb88b61aef893..21f87f4f9e0bc70f04145db5ff832961e1f383cf 100644
--- a/src/Components/ItemCard.js
+++ b/src/Components/ItemCard.js
@@ -22,6 +22,7 @@ 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;
@@ -39,37 +40,16 @@ const ItemDescription = styled.p`
color: #666666;
`
-const actionStyle = (operation) => {
- var stl = {
- fontSize: '0.5em',
- paddingTop: '1em',
- marginBottom: 0,
- fontWeight: 'bold',
- }
- stl.color = operation != 'buy' ? '#02a5c3' : '#666666';
- return stl;
-}
-
-const GemImg = styled.img`
- height: 23px;
- position: relative;
- top: 8px;
- padding-right: 5px;
-`
export default function ItemCard (props) {
return (
<Grid item xs={9} sm={2}>
<Card style={{textAlign: 'center'}}>
<CardContent>
- <ItemImage src="https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png"/>
- <ItemName>Avatar um</ItemName>
- <ItemDescription>Descrição | Descrição</ItemDescription>
- <p style={actionStyle(props.action)}>
- {props.action == 'buy' ? <GemImg src={gem}/> : <span/>}
- {props.action == 'buy' ? "COMPRAR" :
- props.action == 'equip' ? "USAR" : "TIRAR"}
- </p>
+ <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..2922dc3d8e8d5f0cc5651abce8a42ae8243a847f
--- /dev/null
+++ b/src/Components/ItemCardAction.js
@@ -0,0 +1,109 @@
+/*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';
+
+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;
+`
+export default function ItemCardAction (props) {
+ const [success, setSuccess] = useState(false);
+ const [failure, setFailure] = useState(false);
+ const [message, setMessage] = useState("beerarea");
+ const [info, setInfo] = useState(false);
+
+ const handleClose = (snackbar) => {
+ if (snackbar == 'success')
+ setSuccess(false);
+ else if (snackbar == 'info')
+ setInfo(false);
+ else
+ setFailure(false);
+ }
+
+ const handleClick = () => {
+ // this will become an axios get
+ if (true) {
+ setInfo(true);
+ setMessage("Item retirado");
+ }
+ else if (true) {
+ setInfo(true);
+ setMessage("Item equipado");
+ }
+ else if (true) {
+ setSuccess(true);
+ setMessage("Item comprado");
+ }
+ else {
+ setFailure(true);
+ setMessage("Compra falhou");
+ }
+ }
+
+ 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>
+ </div>
+ )
+}
diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js
index 851da0f9b6b62804f42e136a8379bc140e8dd5ad..4dfdf2d9db87bb944c6aa0b6d378fff4d0570d06 100644
--- a/src/Components/ItemCarousel.js
+++ b/src/Components/ItemCarousel.js
@@ -23,7 +23,19 @@ import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import ItemCard from './ItemCard.js';
+//url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
export default function ItemCarousel (props) {
+ var items = [
+ {
+ src: "https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png",
+ action: "equip",
+ name: "Avatar um",
+ description: "Descrição | Descrição"
+ }
+ ];
+ for (let i = 0; i < 2; i++)
+ items = items.concat(items);
+
return (
<Grid
item container
@@ -33,8 +45,12 @@ export default function ItemCarousel (props) {
xs={12}
spacing={3}
>
- {[1, 2, 3, 4, 5, 6].map(() => {
- return <ItemCard action="buy"/>
+ {items.map((i) => {
+ return <ItemCard
+ src={i.src}
+ action={i.action}
+ name={i.name}
+ description={i.description}/>
})}
</Grid>
)
diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js
index 9ecc408ba4b15e1e44426b909537153f4d57955d..608323797d4b333e8672f319aabdcbb6400d731b 100644
--- a/src/Pages/ItemStore.js
+++ b/src/Pages/ItemStore.js
@@ -15,8 +15,9 @@ 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 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';
@@ -25,12 +26,31 @@ 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 StoreSection = styled.h2`
font-weight: 100;
`
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?q={"item_type":'
+ + r + ', "op": "none", "unlock_rule": "purchase"}');
+ })).then(axios.spread((avatar, card, cover, badge) => {
+ setAvatarFrames(avatar);
+ setCardFrames(card);
+ setCoverFrames(cover);
+ setBadges(badge);
+ }));
+ }, [])
+
return (
<Container>
<Grid container
@@ -46,14 +66,20 @@ export default function ItemStoreContainer (props) {
<StoreGuide/>
</Grid>
<StoreSection>
- Avatares
- <ItemCarousel/>
+ Bordas de avatar
+ <ItemCarousel items={avatar_frames}/>
+ </StoreSection>
+ <StoreSection>
+ Insígnias
+ <ItemCarousel items={badges}/>
</StoreSection>
<StoreSection>
- Itens
+ Bordas de card
+ <ItemCarousel items={card_frames}/>
</StoreSection>
<StoreSection>
- Bordas
+ Bordas de capa de perfil
+ <ItemCarousel items={cover_frames}/>
</StoreSection>
</Container>
)