Commit 760927aa authored by Matheus Horstmann's avatar Matheus Horstmann 🐴

Merge branch 'pages-odair' into 'develop'

Pages odair

See merge request !7
parents 03761cb0 59c20f67
Pipeline #22306 failed with stages
in 59 seconds
/*
import React, { useState, useEffect } from 'react';
import './App.css';
import {Header} from './components/header/Header';
import {Toast} from './components/toast/Toast';
// import {Wizard} from './components/wizard/Wizard';
import {SimpleModal} from './components/modal/Modal';
import {CustTable} from './components/table/Table';
import Button from '@material-ui/core/Button';
import {Upload} from './pages/ensalamento.jsx';
import {GerenciarTurma} from './pages/gerenciarturma.jsx';
function createData(a, b, c, d, t,f) {
return { a, b, c, d, t, f };
}
const tmp = [
createData('Cupcake', 305, 3.7, 67, 4.3,'da'),
createData('Donut', 452, 25.0, 51, 4.9,'da'),
createData('Eclair', 262, 16.0, 24, 6.0,'da'),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0,'da'),
createData('Gingerbread', 356, 16.0, 49, 3.9,'da'),
createData('Honeycomb', 408, 3.2, 87, 6.5,'da'),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3,'da'),
createData('Jelly Bean', 375, 0.0, 94, 0.0,'da'),
createData('KitKat', 518, 26.0, 65, 7.0,'da'),
createData('Lollipop', 392, 0.2, 98, 0.0,'da'),
createData('Marshmallow', 318, 0, 81, 2.0,'da'),
createData('Nougat', 360, 19.0, 9, 37.0,'da'),
createData('Oreo', 437, 18.0, 63, 4.0,'da'),
];
let tmp2 = [
{ id: 'a', numeric: false, disablePadding: true, label: 'a' },
{ id: 'b', numeric: true, disablePadding: false, label: 'b' },
{ id: 'c', numeric: true, disablePadding: false, label: 'c' },
{ id: 'd', numeric: true, disablePadding: false, label: 'd' },
{ id: 't', numeric: true, disablePadding: false, label: 'tdddddd' },
{ id: 'f', numeric: true, disablePadding: false, label: 'f' },
];
const login = {
"email":"admin@admin.com",
"username":"admin",
"password":"123mudar"
}
function App() {
var [screen, setScreen] = useState(false);
var [token, setToken] = useState(null);
return (screen)? (
<div className="App">
<Header> </Header>
<Upload></Upload>
</div>
) :
( <div className="App">
<Header> </Header>
<GerenciarTurma></GerenciarTurma>
</div> ) ;
}
export default App;
*/
import React from 'react';
import './App.css';
import {Header} from './components/header/Header';
import {Toast} from './components/toast/Toast';
// import {Wizard} from './components/wizard/Wizard';
import {SimpleModal} from './components/modal/Modal';
import {CustTable} from './components/table/Table';
function createData(a, b, c, d, t,f) {
return { a, b, c, d, t, f };
}
const tmp = [
createData('Cupcake', 305, 3.7, 67, 4.3,'da'),
createData('Donut', 452, 25.0, 51, 4.9,'da'),
createData('Eclair', 262, 16.0, 24, 6.0,'da'),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0,'da'),
createData('Gingerbread', 356, 16.0, 49, 3.9,'da'),
createData('Honeycomb', 408, 3.2, 87, 6.5,'da'),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3,'da'),
createData('Jelly Bean', 375, 0.0, 94, 0.0,'da'),
createData('KitKat', 518, 26.0, 65, 7.0,'da'),
createData('Lollipop', 392, 0.2, 98, 0.0,'da'),
createData('Marshmallow', 318, 0, 81, 2.0,'da'),
createData('Nougat', 360, 19.0, 9, 37.0,'da'),
createData('Oreo', 437, 18.0, 63, 4.0,'da'),
];
let tmp2 = [
{ id: 'a', numeric: false, disablePadding: true, label: 'a' },
{ id: 'b', numeric: true, disablePadding: false, label: 'b' },
{ id: 'c', numeric: true, disablePadding: false, label: 'c' },
{ id: 'd', numeric: true, disablePadding: false, label: 'd' },
{ id: 't', numeric: true, disablePadding: false, label: 'tdddddd' },
{ id: 'f', numeric: true, disablePadding: false, label: 'f' },
];
function App() {
return (
<div className="App">
<Header> </Header>
<Toast msg='Behold the work of the mighty toast' timer='60000' ></Toast>
{/* <SimpleModal /> */}
<CustTable rows={tmp} headCell={tmp2} order='asc' orderBy='b'/>
</div>
);
}
export default App;
import React, { useState, useEffect } from 'react';
import './App.css';
import {Header} from './components/header/Header';
import {Toast} from './components/toast/Toast';
// import {Wizard} from './components/wizard/Wizard';
import {SimpleModal} from './components/modal/Modal';
import {CustTable} from './components/table/Table';
import Button from '@material-ui/core/Button';
import {Upload} from './pages/ensalamento.jsx';
import {GerenciarTurma} from './pages/gerenciarturma.jsx';
function createData(a, b, c, d, t,f) {
return { a, b, c, d, t, f };
}
const tmp = [
createData('Cupcake', 305, 3.7, 67, 4.3,'da'),
createData('Donut', 452, 25.0, 51, 4.9,'da'),
createData('Eclair', 262, 16.0, 24, 6.0,'da'),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0,'da'),
createData('Gingerbread', 356, 16.0, 49, 3.9,'da'),
createData('Honeycomb', 408, 3.2, 87, 6.5,'da'),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3,'da'),
createData('Jelly Bean', 375, 0.0, 94, 0.0,'da'),
createData('KitKat', 518, 26.0, 65, 7.0,'da'),
createData('Lollipop', 392, 0.2, 98, 0.0,'da'),
createData('Marshmallow', 318, 0, 81, 2.0,'da'),
createData('Nougat', 360, 19.0, 9, 37.0,'da'),
createData('Oreo', 437, 18.0, 63, 4.0,'da'),
];
let tmp2 = [
{ id: 'a', numeric: false, disablePadding: true, label: 'a' },
{ id: 'b', numeric: true, disablePadding: false, label: 'b' },
{ id: 'c', numeric: true, disablePadding: false, label: 'c' },
{ id: 'd', numeric: true, disablePadding: false, label: 'd' },
{ id: 't', numeric: true, disablePadding: false, label: 'tdddddd' },
{ id: 'f', numeric: true, disablePadding: false, label: 'f' },
];
const login = {
"email":"admin@admin.com",
"username":"admin",
"password":"123mudar"
}
function App() {
var [screen, setScreen] = useState(false);
var [token, setToken] = useState(null);
return (screen)? (
<div className="App">
<Header> </Header>
<Upload></Upload>
</div>
) :
( <div className="App">
<Header> </Header>
<GerenciarTurma></GerenciarTurma>
</div> ) ;
}
export default App;
import React, { useState, useEffect } from 'react';
import Container from '@material-ui/core/Container';
import CssBaseline from '@material-ui/core/CssBaseline';
import Input from '@material-ui/core/Input';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
function gera_ensalamento(file_name,file,date_init,date_end) {
console.log("--------------------------------");
console.log(file_name);
console.log(file);
console.log(date_init);
console.log(date_end);
console.log("--------------------------------");
}
const useStyles = makeStyles(theme => ({
container: {
display: 'grid',
gridTemplateColumns: 'repeat(12, 1fr)',
gridGap: theme.spacing(3),
},
button: {
backgroundColor: "#ADD68B",
width: "190px",
height: "45px",
textAlign: 'left',
fontFamily: 'Open Sans,SemiBold',
color: "#FFFFFF"
},
buttonsend: {
color: "#ADD68B",
fontFamily: 'Open Sans,SemiBold',
},
buttoncancel: {
color: "red",
fontFamily: 'Open Sans,SemiBold',
},
input: {
display: 'none',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
}));
export function UploadScreen(props) {
var [highlight, setHighligt] = useState(false);
var highlight_color = (highlight)? "#CECECE" : "#F6F6F6";
const styles = { backgroundColor: highlight_color,border: " 2px solid #CECECE", height: '220px', width: '375px' }
const styles_info = { backgroundColor: '#F6F6F6',border: " 2px solid #CECECE", height: '270px', width: '405px' }
const classes = useStyles();
var [fileuploded, setFileUploded] = useState(false);
var [file, setFile] = useState(null);
var [file_name, setFileName] = useState("");
// process user input when user puts a file.
function onFilesAdded(evt) {
setFile(file = evt.target.files[0]);
setFileName(file_name=file.name);
setFileUploded(fileuploded = true);
};
// function when user drop file in input area
function onDrop(event) {
event.preventDefault()
setFile(file = event.dataTransfer.files[0]);
setFileName(file_name=file.name);
setFileUploded(fileuploded = true);
setHighligt(highlight = false);
};
function onDragLeave() {
setHighligt(highlight = false);
}
function onDragOver(event) {
event.preventDefault()
setHighligt(highlight = true);
}
const upload_screen = (
<div style={styles}
onDragOver={onDragOver}
onDragLeave={onDragLeave}
onDrop={onDrop}
>
<Grid container
spacing={1} alignItems="center" justify="center" direction="row-reverse">
<Grid item xs={8}>
<br></br>
</Grid>
<Grid item xs={8}>
<i class="material-icons" style={{color:"#ADD68B",fontSize:"65.56px"}}>backup</i>
</Grid>
<Grid item xs={8}>
<div>
<input
ref={ React.createRef()}
className={classes.input}
id="outlined-button-file"
type="file"
onChange={onFilesAdded}
/>
<label htmlFor="outlined-button-file">
<Button component="span" className={classes.button}>ESCOLHER ARQUIVO </Button>
</label>
</div>
</Grid>
<Grid item xs={8}>
<Typography color="#606060" style={{fontSize:"16px"}}>
Ou arraste e solte aqui
</Typography>
</Grid>
</Grid>
</div>
);
const today = new Date();
var _date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var [date_init, setDateInit] = useState(_date);
var [date_end, setDateEnd] = useState(_date);
const upload_form = (
<div style={styles_info}>
<Grid container spacing={1} alignItems="center" justify="center" direction="row">
<Grid item xs={8}><br></br></Grid>
<form className={{display: 'flex', flexWrap: 'wrap'}} noValidate>
<Grid item xs={8}>
<TextField
id="date"
label="Início período letivo"
type="date"
defaultValue={_date}
className={classes.textField}
InputLabelProps={{ shrink: true, }} />
</Grid>
<Grid item xs={8}><br></br></Grid>
<Grid item xs={8}>
<TextField
id="date"
label="Fim período letivo"
type="date"
defaultValue={_date}
onChange = {(evt) => setDateEnd(date_end = evt.target.value)}
className={classes.textField}
InputLabelProps={{ shrink: true, }} />
</Grid>
<Grid item xs={8}><br></br></Grid>
<Grid item xs={8}>
<Typography color="#606060" style={{fontSize:"14px"}}>{file_name}</Typography>
</Grid>
</form>
<Grid item xs={8}><br></br></Grid>
<Grid item xs={8}>
<Button className={classes.buttoncancel} onClick={()=>setFileUploded(fileuploded=false)}>
Voltar
</Button>
<Button className={classes.buttonsend} onChange = {(evt) => setDateInit(date_init = evt.target.value)}
onClick={()=>gera_ensalamento(file_name,file,date_init,date_end)}>
Gerar ensalamento
</Button>
</Grid>
</Grid>
</div>
)
return (fileuploded)? upload_form : upload_screen;
//return (fileuploded == false)? upload_screen : upload_form;
}
export function Upload(props) {
const styles = { backgroundColor: '#F6F6F6',border: " 2px solid #CECECE", height: '220px', width: '375px' }
const classes = useStyles();
return (
<Grid
container
spacing={10}
direction="column"
alignItems="center"
justify="center"
style={{minHeight: '100vh'}}
>
<UploadScreen></UploadScreen>
</Grid>
);
}
.App {
text-align: center;
height: 100vh;
height: 100%;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-position: top;
background-image: url('images/bg_ensalamento.svg');
}
.body {
background-color: red;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
......
import React from 'react';
import './App.css';
import {Header} from './components/header/Header';
import {Toast} from './components/toast/Toast';
// import {Wizard} from './components/wizard/Wizard';
import {SimpleModal} from './components/modal/Modal';
import {CustTable} from './components/table/Table';
function createData(a, b, c, d, t,f) {
return { a, b, c, d, t, f };
}
const tmp = [
createData('Cupcake', 305, 3.7, 67, 4.3,'da'),
createData('Donut', 452, 25.0, 51, 4.9,'da'),
createData('Eclair', 262, 16.0, 24, 6.0,'da'),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0,'da'),
createData('Gingerbread', 356, 16.0, 49, 3.9,'da'),
createData('Honeycomb', 408, 3.2, 87, 6.5,'da'),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3,'da'),
createData('Jelly Bean', 375, 0.0, 94, 0.0,'da'),
createData('KitKat', 518, 26.0, 65, 7.0,'da'),
createData('Lollipop', 392, 0.2, 98, 0.0,'da'),
createData('Marshmallow', 318, 0, 81, 2.0,'da'),
createData('Nougat', 360, 19.0, 9, 37.0,'da'),
createData('Oreo', 437, 18.0, 63, 4.0,'da'),
];
let tmp2 = [
{ id: 'a', numeric: false, disablePadding: true, label: 'a' },
{ id: 'b', numeric: true, disablePadding: false, label: 'b' },
{ id: 'c', numeric: true, disablePadding: false, label: 'c' },
{ id: 'd', numeric: true, disablePadding: false, label: 'd' },
{ id: 't', numeric: true, disablePadding: false, label: 'tdddddd' },
{ id: 'f', numeric: true, disablePadding: false, label: 'f' },
];
import {Toast} from "./components/toast/Toast.jsx"
import Routes from './routes';
import {BrowserRouter as Router} from "react-router-dom"
import Message,{Messages,MessageActive} from "./messagesystem"
//const App = ()=>Routes()
function App() {
return (
<div className="App">
<Header> </Header>
<Toast msg='Behold the work of the mighty toast' timer='60000' ></Toast>
{/* <SimpleModal /> */}
<CustTable rows={tmp} headCell={tmp2} order='asc' orderBy='b'/>
const [message,setMessage] = React.useState("");
const [message_active,setMessageActive] = React.useState(false);
return (
<div>
<MessageActive.Provider value={{message_active,setMessageActive}}>
<Messages.Provider value={{message,setMessage}}>
<Toast time={5000} />
<Router>
<div className="App">
<Routes />
</div>
</Router>
</Messages.Provider>
</MessageActive.Provider>
</div>
);
);
}
export default App;
import axios from 'axios';
import { getToken } from "./services/auth";
const api = axios.create({
baseURL: "http://localhost:8000/api/",
responseType: "json"
});
api.interceptors.request.use(async config => {
const token = getToken();
if (token) {
config.headers.Authorization = token
}
return config;
});
export default api;
This diff is collapsed.
import React from 'react';
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';
export default function AlertDialog(props) {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handle_accept = ()=> {
if (props.handle_accept)
props.handle_accept()
setOpen(false);
}
return (
<div>
<Button color="primary" style={props.initial_button_style} onClick={handleClickOpen}>
{props.initial_button_title}
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{props.description}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Não
</Button>
<Button onClick={handle_accept} color="primary" autoFocus>
Sim
</Button>
</DialogActions>
</Dialog>
</div>
);
}
......@@ -33,7 +33,7 @@ export function GreenButton(props) {
const classes = useStyles(props)
return (
<div>
<Button className={classes.button} >
<Button submit={props.submit} className={classes.button} >
{props.text}
</Button>
</div>
......
This diff is collapsed.
import React from 'react';
import { makeStyles,useTheme } from '@material-ui/core/styles';
import {Field} from "../textfield/TextField.jsx";
import {GreenButton} from "../greenbutton/GreenButton.jsx";
import Grid from '@material-ui/core/Grid';
import { Link, withRouter } from "react-router";
import Button from '@material-ui/core/Button';
import api from "../../api";
import {login,isAuthenticated} from "../../services/auth"
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
button: {
backgroundColor: props =>
props.transparent
? 'white'
: '#5E8D37',
fontFamily: 'Open Sans,SemiBold',
color: props => props.transparent ? '#5E8D37' :'#FFFFFF' ,
width: props => props.transparent ? "130px" : "100px",
height: "30px",
textAlign: 'left'
}
}));
export function Login(props) {
const classes = useStyles(props);
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
const [error, setError] = React.useState("");
async function handleSignIn(e) {
e.preventDefault();
if(!email || !password)
setError("Preencha e-mail e senha para continuar!")
else
try {
const response = await api.post("usuarios/login",{"email":email,"password":password})
login(response.data);
props.setLoginChange(!props.loginChange);
} catch (err) {
setError("Houve um problema com o login, verifique suas credenciais.")
}
};
return (
<form onSubmit={handleSignIn}>
<Grid container direction="column" justify="space-around" alignItems="center" spacing={2}>
<Grid item >
<h5>{error}</h5>
<Field type="email" label="Email" func={(evt) => setEmail(evt.target.value)} />
</Grid>
<Grid item>
<Field type="password" label="Senha" func={(evt) => setPassword(evt.target.value)} />
</Grid>
<Grid item align="left">
<Button className={classes.button} type="submit">Login</Button>
</Grid>
</Grid>
</form>
)
}
......@@ -19,8 +19,8 @@ function getModalStyle() {
const useStyles = makeStyles(theme => ({
paper: {
position: 'absolute',
width: 800,
height:600,
width: 1000,
height:700,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
......@@ -28,8 +28,9 @@ const useStyles = makeStyles(theme => ({
},
}));
export function SimpleModal() {
export function SimpleModal(props) {
const classes = useStyles();
const wizState = props.wizardState;
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(true);
......@@ -54,7 +55,7 @@ export function SimpleModal() {
onClose={handleClose}
>
<div style={modalStyle} className={classes.paper}>
<Wizard ></Wizard>
<Wizard iniState={wizState} doneClose={handleClose} />
</div>
</Modal>
</div>
......
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
export function Tags(props) {
return (
<div style={{ width: 500 }}>
<Autocomplete
multiple
options={props.suggestions}
getOptionLabel={option => option[props.index]}
filterSelectedOptions
renderInput={params => (
<TextField
{...params}
label={props.label}
placeholder={props.placeholder}
margin="normal"
fullWidth
/>
)}
/>
</div>
);
}
const useStyles = makeStyles({
font_input: {
fontSize: 12
},
option: {
fontSize: "10px",
'& > span': {
marginRight: 10,
fontSize: 12,