labhackercd · joaopaulonsoares · Jan 21, 2020 · Jan 21, 2020 · Jan 21, 2020 · Jan 21, 2020
diff --git a/projetol-frontend/package-lock.json b/projetol-frontend/package-lock.json
diff --git a/projetol-frontend/package.json b/projetol-frontend/package.json
@@ -8,6 +8,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "cors": "^2.8.5",
+    "material-ui-image": "^3.2.2",
     "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

diff --git a/projetol-frontend/public/favicon.ico b/projetol-frontend/public/favicon.ico
diff --git a/projetol-frontend/public/index.html b/projetol-frontend/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>e-Democracia</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/projetol-frontend/src/App.js b/projetol-frontend/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import logo from './logo.svg';
+import logo from './eDemocracia_logo.svg'
 import './App.css';
 
 import './App.scss';
@@ -18,16 +18,16 @@ function App() {
   return (
     <Router>
         <div>
-          <nav class="navbar">
-            <img src="./img/logo.svg" class="logo"></img>
-            <div class="menu">
+          <nav className="navbar">
+            <img src={logo} className="logo" alt="Logo e-Democracia"></img>
+            <div className="menu">
               <Link to="/">Inicio</Link>
               <Link to="/conta">Minha Conta</Link>
               <Link to="/historico">Historico</Link>
               <Link to="/LGPD">Sobre a LGPD</Link>
               <Link to="/termos">Termos de uso</Link>
             </div>
-            <div class="logout">
+            <div className="logout">
               <Link to="/">sair</Link>
             </div>
           </nav>

diff --git a/projetol-frontend/src/components/main/audiencias_logo.png b/projetol-frontend/src/components/main/audiencias_logo.png
diff --git a/projetol-frontend/src/components/main/interativas.js b/projetol-frontend/src/components/main/interativas.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Material-ui imports
+import { withStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
+import Icon from '@material-ui/core/Icon';
+import interativaLogo from './audiencias_logo.png'
+
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+
+const useStyles = theme => ({
+    root: {
+        flexGrow: 1,
+        overflow: 'hidden',
+    },
+    paper: {
+        margin: `${theme.spacing(1)}px auto`,
+        backgroundColor: '#FAF9F9'
+    },
+    small: {
+        width: theme.spacing(5),
+        height: theme.spacing(5),
+        marginTop:'10px'
+    },
+    large: {
+        width: theme.spacing(8),
+        height: theme.spacing(8),
+    },
+    customBadge: {
+        backgroundColor: "#2DA965",
+        color: "green"
+    },
+    imageIcon: {
+        height: '45px',
+      },
+      iconRoot: {
+        textAlign: 'center'
+      }
+});
+
+
+export function CardItem(props){
+
+    return (
+        <Paper className={props.classe.paper}>
+            <Grid container spacing={1}>
+
+                <Grid item xs={11} zeroMinWidth>
+                    <Typography style={{ marginLeft: 10 }} variant="h6" color="primary">
+                        <b>Desapropriações de residências próximas às torres da Enel em Cabo Frio</b>
+                    </Typography>
+
+                </Grid>
+                <Grid item xs={1}>
+                    <QuestionAnswerIcon></QuestionAnswerIcon>
+
+                </Grid>
+                <Grid item xs={12}>
+                        <Typography style={{ marginLeft: 10 }} variant="subtitle2" color="primary">
+                                Você enviou a pergunta:
+                        </Typography>
+
+                        <Typography style={{ marginLeft: 10 }} variant="caption" color="primary">
+                            “Os ricos serão desapropriados de beira de rios (rios esses que pertencem ao Estado e que todo cidadão brasileiro tem direito de frequentar, mas estão cercados por mansões)?.”
+                        </Typography>
+                </Grid>
+            </Grid>
+        </Paper>
+    )
+}
+
+class InterativasCard extends React.Component {
+
+    constructor(props) {
+        super(props);
+        // Don't call this.setState() here!
+        this.state = { listaProjetosdeLei: [
+                {
+                    titulo:"PL 1876/2015",
+                    votouAFavor:true
+                } 
+            ] };
+        }
+
+
+    render(){
+        const { classes } = this.props;
+
+        return(
+            <div className={classes.root}>
+            <Box width="90%" mx="auto">
+                <Grid container spacing={6}>
+                    <Grid item xs={2}>
+                            <div className={classes.banner}>            
+                              <Icon className={classes.iconRoot}>
+                                <img className={classes.imageIcon} src={interativaLogo} alt="Logo Audiências Interativas"/>
+                              </Icon>
+                            </div>
+                    </Grid>
+                    <Grid item xs={10}>
+                        <Box display="flex" justifyContent="flex-end" pt={2}>
+                            <Typography variant="caption" display="inline" color="primary" align="right">histórico</Typography>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+            <Box width="90%" mx="auto" pt={3} mb={3}>  
+                <Grid container spacing={1}>
+                    {
+                        this.state.listaProjetosdeLei.map((lei) =>
+                        <Grid key={lei.titulo} item xs={12}>
+                            <CardItem  projetoDeLei={lei} classe={classes}></CardItem>
+                        </Grid>
+                        )
+                    }
+                </Grid>
+            </Box>
+          </div>
+        )
+    }
+}
+
+InterativasCard.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(useStyles)(InterativasCard);
diff --git a/projetol-frontend/src/components/main/pauta.js b/projetol-frontend/src/components/main/pauta.js
@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Material-ui imports
+import { withStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
+import Icon from '@material-ui/core/Icon';
+import pautaLogo from './pauta_logo.svg'
+
+import ThumbUpOutlinedIcon from '@material-ui/icons/ThumbUpOutlined';
+import ThumbDownOutlinedIcon from '@material-ui/icons/ThumbDownOutlined';
+
+const useStyles = theme => ({
+    root: {
+        flexGrow: 1,
+        overflow: 'hidden',
+    },
+    paper: {
+        margin: `${theme.spacing(1)}px auto`,
+        backgroundColor: '#FAF9F9'
+    },
+    small: {
+        width: theme.spacing(5),
+        height: theme.spacing(5),
+        marginTop:'10px'
+    },
+    large: {
+        width: theme.spacing(8),
+        height: theme.spacing(8),
+    },
+    customBadge: {
+        backgroundColor: "#2DA965",
+        color: "green"
+    },
+    imageIcon: {
+        height: '45px',
+      },
+      iconRoot: {
+        textAlign: 'center'
+      }
+});
+
+
+export function CardItem(props){
+
+    return (
+        <Paper className={props.classe.paper}>
+            <Grid container wrap="nowrap" spacing={1}>
+
+                <Grid item xs={10} zeroMinWidth>
+                    <Typography style={{ marginLeft: 10 }} variant="button" color="primary">
+                        <b>{props.projetoDeLei.titulo}</b>
+                    </Typography>
+
+                    {props.projetoDeLei.votouAFavor ? (
+                        <Typography style={{ marginLeft: 10 }} variant="subtitle1" color="primary">
+                            Você votou a favor do projeto
+                        </Typography>
+                    ) : (
+                        <Typography style={{ marginLeft: 10 }} variant="subtitle1" color="primary">
+                            Você votou contra o projeto
+                        </Typography>
+                    )}
+            </Grid>
+                <Grid item xs={2}>
+                    <Box display="flex" justifyContent="flex-start">
+                    {props.projetoDeLei.votouAFavor ? (
+                        <ThumbUpOutlinedIcon  fontSize="large"></ThumbUpOutlinedIcon>
+                    ) : (
+                        <ThumbDownOutlinedIcon  fontSize="large"></ThumbDownOutlinedIcon>
+                    )}     
+                    </Box>
+                </Grid>
+            </Grid>
+        </Paper>
+    )
+}
+
+class PautaParticipativaCard extends React.Component {
+
+    constructor(props) {
+        super(props);
+        // Don't call this.setState() here!
+        this.state = { listaProjetosdeLei: [
+                {
+                    titulo:"PL 1876/2015",
+                    votouAFavor:true
+                } 
+            ] };
+        }
+
+
+    render(){
+        const { classes } = this.props;
+
+        return(
+            <div className={classes.root}>
+            <Box width="90%" mx="auto">
+                <Grid container spacing={6}>
+                    <Grid item xs={2}>
+                        <Box className={classes.banner} >
+                            <Icon className={classes.iconRoot}>
+                                <img className={classes.imageIcon} src={pautaLogo} alt="Logo Pauta"/>
+                            </Icon>
+                        </Box>
+                    </Grid>
+                    <Grid item xs={10}>
+                        <Box display="flex" justifyContent="flex-end" pt={2}>
+                            <Typography variant="caption" display="inline" color="primary" align="right">histórico</Typography>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+            <Box width="90%" mx="auto" pt={3} mb={3}>  
+                <Grid container spacing={1}>
+                    {
+                        this.state.listaProjetosdeLei.map((lei) =>
+                        <Grid key={lei.titulo} item xs={12}>
+                            <CardItem  projetoDeLei={lei} classe={classes}></CardItem>
+                        </Grid>
+                        )
+                    }
+                </Grid>
+            </Box>
+          </div>
+        )
+    }
+}
+
+PautaParticipativaCard.propTypes = {
+    classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(useStyles)(PautaParticipativaCard);