Skip to content
Permalink
Browse files

Part 1 finished

  • Loading branch information
mats-codes committed Sep 1, 2019
1 parent ad8e9ec commit c6e799ad35109e6ae15f5f8ad398e7110fb89364

Large diffs are not rendered by default.

@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.4.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
@@ -1,13 +1,55 @@
import React from 'react';
import SearchBar from './search/Searchbar';
import TaskTable from './results/TaskTable';
import TaskCreationForm from './creation-form/TaskCreationForm';
import { Grid, Paper, AppBar, Toolbar, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

function App() {
// Just for styling
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2), marginTop: '12px', marginBottom: '12px'
},
}));

function App(props) {
const classes = useStyles();

//render-method
return (
<div className="App">
<header className="App-header">
Hello Coding-Valley. You'll be secure soon.
</header>
<div>

<AppBar position="static">
<Toolbar>
<Typography variant="h6">
Coding-Valley Task
</Typography>
</Toolbar>
</AppBar>

<Grid container spacing={3}>
<Grid item xs={6}>
<Paper className={classes.paper}>
<SearchBar />
</Paper>
<Paper className={classes.paper}>
<TaskTable />
</Paper>
</Grid>

<Grid item xs={6}>
<Paper className={classes.paper}>
<TaskCreationForm />
</Paper>
</Grid>
</Grid>

</div>
);
}

// Exporting the Function-Component, so that it can be used in index.js
export default App;
@@ -0,0 +1,25 @@
import React from 'react';
import InputLabel from '@material-ui/core/InputLabel';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

class HeroSelector extends React.Component {

render() {
return (
<div>
<InputLabel htmlFor="favHero">Pick your favorite hero:</InputLabel>
<Select
value="ck"
inputProps={{id: 'favHero'}}>
<MenuItem value="ck">Coding Kid</MenuItem>
<MenuItem value="ccw">Clean Code Women</MenuItem>
<MenuItem value="bh">Bug Hunter</MenuItem>
</Select>
</div>
)
}
}

export default HeroSelector;

@@ -0,0 +1,36 @@
import React from 'react';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import InputLabel from '@material-ui/core/InputLabel';

class SeveritySelctor extends React.Component {

render() {
return (
<div>
<InputLabel>Severity:</InputLabel>
<RadioGroup name="severity" row>
<FormControlLabel
label="High"
value="high"
control={<Radio color="primary" />}
/>
<FormControlLabel
label="Medium"
value="medium"
control={<Radio color="primary" />}
/>
<FormControlLabel
label="Low"
value="low"
control={<Radio color="primary" />}
/>
</RadioGroup>
</div>
)
}
}

export default SeveritySelctor;

@@ -0,0 +1,47 @@
import React from 'react';
import HeroSelector from './HeroSelector';
import SeveritySelector from './SeveritySelector';
import TextField from '@material-ui/core/TextField';
import { Box, Typography, Button } from '@material-ui/core';

class TaskCreationForm extends React.Component {

theme = {
spacing: 12,
}

render() {
return (
<div>
<Typography variant="h6">Searchbar</Typography>
<Box mt={1} mb={1}>
<TextField
label="Taskname"
variant="outlined"
/>
</Box>
<Box mt={1} mb={1}>
<TextField
label="Description"
variant="outlined"
multiline
rows="4"
/>
</Box>
<Box mt={1} mb={1}>
<HeroSelector />
</Box>
<Box mt={1} mb={1}>
<SeveritySelector />
</Box>
<Box mt={1} mb={1}>
<Button variant="contained" color="primary">
Add
</Button>
</Box>
</div>
)
}
}

export default TaskCreationForm;
@@ -0,0 +1,26 @@
import React from 'react';
import { List, ListSubheader, ListItemText, ListItem, Typography } from '@material-ui/core';

class TaskTable extends React.Component {

render() {
return (
<div>
<Typography variant="h6">Tasks</Typography>
<List subheader={<li />}>
<ListSubheader>Coding Kid</ListSubheader>
<ListItem>
<ListItemText>Save my Cat</ListItemText>
</ListItem>
<ListSubheader>Clean Code Women</ListSubheader>
<ListItem>
<ListItemText>Fix my dirty Code</ListItemText>
</ListItem>
<ListSubheader>Bug Hunter</ListSubheader>
</List>
</div>
)
}
}

export default TaskTable;
@@ -0,0 +1,26 @@
import React from 'react';
import { TextField, Checkbox, FormControlLabel, Typography } from '@material-ui/core';

class SearchBar extends React.Component {

render() {
return (
<div>
<Typography variant="h6">Searchbar</Typography>
<TextField
label="Taskname"
variant="outlined"
/>
<br/>
<FormControlLabel
control={
<Checkbox value="onlyHighSev" />
}
label="Only High Severity"
/>
</div>
)
}
}

export default SearchBar;

0 comments on commit c6e799a

Please sign in to comment.
You can’t perform that action at this time.