Skip to content

Commit 93f9bbb

Browse files
ronellecaguioaronellecaguioa
committed
Merge branch 'master' into readme
2 parents c58d31b + 6def103 commit 93f9bbb

15 files changed

Lines changed: 283 additions & 130 deletions

File tree

‎__tests__/app/containers/GraphsContainer.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import { configure, shallow, render } from 'enzyme';
33

44
import GraphsContainer from '../../../app/containers/GraphsContainer'
5-
// import SpeedChart from '../../../app/charts/speed-chart'
5+
import SpeedChart from '../../../app/charts/SpeedChart'
66

7-
xdescribe('<GraphsContainer />', () => {
8-
it('should render graphs')
9-
})
7+
// xdescribe('<GraphsContainer />', () => {
8+
// it('should render graphs')
9+
// })
1010

1111
// xdescribe('<GraphsContainer />', () => {
1212
// it('should', () => {

‎app/charts/DockerChart.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface IContainer {
2424
*/
2525
const DockerStatsChart = () => {
2626
const { dockerData } = useContext(DockerContext);
27+
2728
const {
2829
containername,
2930
containerid,

‎app/components/Applications.tsx‎

Lines changed: 58 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
import React, { useContext, useEffect, useState } from 'react';
2-
import { Grid, IconButton, Modal, Paper } from '@material-ui/core';
2+
import {
3+
IconButton,
4+
Grid,
5+
Modal,
6+
Card,
7+
CardHeader,
8+
CardContent,
9+
Typography,
10+
} from '@material-ui/core';
311
import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
412
import { makeStyles } from '@material-ui/core/styles';
513
import { DashboardContext } from '../context/DashboardContext';
614

715
import ServicesModal from '../modals/ServicesModal';
16+
import '../stylesheets/Applications.css';
817

918
const Applications = () => {
1019
const { applications, getApplications, deleteApp } = useContext(DashboardContext);
@@ -26,54 +35,71 @@ const Applications = () => {
2635
const handleClick = (selectedApp: string, i: number) => {
2736
setIndex(i);
2837
setApp(selectedApp);
29-
console.log('handle', selectedApp)
38+
console.log('handle', selectedApp);
3039
setOpen(true);
3140
};
3241

3342
const useStyles = makeStyles(theme => ({
3443
paper: {
3544
height: 340,
3645
textAlign: 'center',
37-
color: 'white',
38-
fontSize: '3rem',
46+
color: 'rgba(33, 34, 41, 1.2)',
3947
whiteSpace: 'nowrap',
40-
background: 'rgb(33, 34, 41)',
41-
border: '2px solid black',
42-
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
43-
marginBottom: theme.spacing(1),
48+
backgroundColor: 'rgba(33, 34, 41, 0.2)',
49+
border: '3px ridge #808080',
50+
boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
51+
'&:hover, &.Mui-focusVisible': { color: 'white', background: 'rgba(33, 34, 41, 1.2)' },
4452
},
4553
hover: {
4654
position: 'relative',
47-
top: '5%',
48-
right: '5%',
49-
height: 120,
50-
width: 120,
55+
bottom: 20,
56+
right: 40,
5157
boxShadow: 'none',
5258
'&:hover, &.Mui-focusVisible': { color: 'red' },
5359
},
60+
btnStyle: {
61+
position: 'relative',
62+
top: 50,
63+
margin: '0 auto',
64+
color: 'rgb(255, 243, 72)',
65+
backgroundColor: 'grey',
66+
},
67+
fontStyles: {
68+
fontSize: '3rem',
69+
[theme.breakpoints.up('lg')]: {
70+
fontSize: '2.75rem',
71+
},
72+
},
5473
}));
5574

5675
const classes = useStyles();
5776

5877
return (
5978
<>
6079
{applications.map((app: string[], i: number | any | string | undefined) => (
61-
<Grid item xs={6} key={i}>
62-
<Paper
63-
className={classes.paper}
64-
id={i}
65-
key={i}
66-
onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app[0], i)}
67-
>
68-
{app[0]}
69-
<IconButton
70-
aria-label="Delete"
71-
onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app[0], i)}
72-
color="primary"
80+
<Grid item lg={4} md={6} sm={12} key={i}>
81+
<div id="card-hover">
82+
<Card
83+
className={classes.paper}
84+
variant="outlined"
85+
onClick={(event: React.MouseEvent<HTMLElement>) => handleClick(app[0], i)}
7386
>
74-
<DeleteForeverOutlinedIcon className={classes.hover} />
75-
</IconButton>
76-
</Paper>
87+
<CardHeader
88+
avatar={
89+
<IconButton
90+
className={classes.hover}
91+
aria-label="Delete"
92+
onClick={(event: React.MouseEvent<HTMLElement>) => confirmDelete(app[0], i)}
93+
>
94+
<DeleteForeverOutlinedIcon />
95+
</IconButton>
96+
}
97+
></CardHeader>
98+
<CardContent>
99+
<Typography className={classes.fontStyles}>{app[0]}</Typography>
100+
</CardContent>
101+
</Card>
102+
</div>
77103
</Grid>
78104
))}
79105
<Modal open={open} onClose={() => setOpen(false)}>
@@ -84,3 +110,8 @@ const Applications = () => {
84110
};
85111

86112
export default Applications;
113+
114+
//name, desc, creation date
115+
// three cards a row, same width
116+
// move trash can
117+
//change the font

‎app/components/Contact.tsx‎

Lines changed: 52 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,59 @@
11
import React from 'react';
2+
import '../stylesheets/Contact.css';
23

34
const Contact: React.FC = () => {
45
return (
5-
<div className="home">
6-
<div>
7-
<h1>Contact Us!</h1>
8-
<p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
9-
<p>
10-
You can find issues the team is currently working on&nbsp;
11-
<a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
12-
here
13-
</a>
14-
.
15-
</p>
16-
<p>
17-
If you would like your voice heard, fill out the form and we will get back to you ASAP!
18-
</p>
19-
</div>
20-
<div>
21-
<form>
22-
<label htmlFor="fname">First Name</label>
23-
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
24-
<br />
25-
<label htmlFor="lname">Last Name</label>
26-
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
27-
<br />
28-
<label htmlFor="email">E-mail</label>
29-
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
30-
<br />
31-
<label htmlFor="subject">Subject</label>
32-
<input type="text" id="subject" name="subject" placeholder="Subject" />
33-
<br />
34-
<label htmlFor="message">Message</label>
35-
<textarea
36-
id="message"
37-
name="message"
38-
placeholder="Write something.." /*style="height:200px"*/
39-
></textarea>
40-
<br />
41-
<label htmlFor="myfile">Select a file: </label>
42-
<input type="file" id="myfile" name="myfile" accept="image/*"></input>
43-
<br />
44-
<input type="submit" value="Submit" />
45-
</form>
6+
<div className="contact">
7+
<div className="contact-border">
8+
<div className="contact-container">
9+
<div className="contact-blurb">
10+
<h1>Contact Us!</h1>
11+
<br />
12+
<p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
13+
<p>
14+
You can find issues the team is currently working on&nbsp;
15+
<a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
16+
here
17+
</a>
18+
.
19+
</p>
20+
<p>
21+
If you would like your voice heard, fill out the form and we will get back to you
22+
ASAP!
23+
</p>
24+
</div>
25+
<div className="chronos-contact-container">
26+
<img src={'../assets/chronos-v4.png'} alt="Chronos logo" />
27+
</div>
28+
</div>
29+
<div className="email-container">
30+
<form>
31+
<label htmlFor="fname">First Name: &nbsp;</label>
32+
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
33+
<br />
34+
<label htmlFor="lname">Last Name: &nbsp;</label>
35+
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
36+
<br />
37+
<label htmlFor="email">E-mail: &nbsp;</label>
38+
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
39+
<br />
40+
<label htmlFor="subject">Subject: &nbsp;</label>
41+
<input type="text" id="subject" name="subject" placeholder="Subject" />
42+
<br />
43+
<label htmlFor="message">Message: </label>
44+
<br />
45+
<textarea
46+
id="message"
47+
name="message"
48+
placeholder="Write something.." /*style="height:200px"*/
49+
></textarea>
50+
<br />
51+
<label htmlFor="myfile">Select a file: </label>
52+
<input type="file" id="myfile" name="myfile" accept="image/*"></input>
53+
<br />
54+
<input id="contact-submit" type="submit" value="Submit" />
55+
</form>
56+
</div>
4657
</div>
4758
</div>
4859
);

‎app/components/Occupied.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,67 @@ import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoT
55

66
import AddModal from '../modals/AddModal';
77
import Applications from './Applications';
8-
// import '../stylesheets/Occupied.css';
98

109
const Occupied: React.FC = () => {
1110
const [open, setOpen] = useState(false);
1211

1312
const useStyles = makeStyles(theme => ({
1413
paper: {
15-
color: theme.palette.text.secondary,
16-
// whiteSpace: 'nowrap',
17-
background: 'rgb(33, 34, 41)',
18-
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
19-
'&:hover, &.Mui-focusVisible': { background: 'rgb(33, 34, 41)' },
14+
color: 'rgba(33, 34, 41, 0.75)',
15+
height: 340,
16+
width: '100%',
17+
backgroundColor: 'rgba(33, 34, 41, 0.2)',
18+
border: '3px ridge #808080',
19+
boxShadow: '0 10px 10px rgba(0,0,0,0.5)',
20+
'&:hover, &.Mui-focusVisible': {
21+
backgroundColor: 'rgba(33, 34, 41, 1.2)',
22+
color: 'rgb(255, 243, 72)',
23+
},
2024
},
2125
grid: {
2226
margin: '0 auto',
23-
maxWidth: '75vw',
27+
maxWidth: '65vw',
28+
maxHeight: '75vh',
2429
},
2530
icon: {
2631
width: '100px',
2732
height: '100px',
28-
color: ' white',
2933
boxShadow: 'none',
30-
'&:hover, &.Mui-focusVisible': { color: 'rgb(255, 243, 72)' },
3134
},
3235
heroContent: {
36+
fontWeight: 700,
37+
color: '#333',
3338
padding: theme.spacing(8, 0, 6),
39+
backgroundColor: '#e8e8e8',
3440
},
3541
}));
3642

3743
const classes = useStyles();
3844

3945
return (
40-
<div>
46+
<>
4147
<Typography
4248
className={classes.heroContent}
43-
// component="h1"
44-
variant="h1"
49+
variant="h2"
4550
align="center"
4651
color="textPrimary"
4752
gutterBottom
4853
>
4954
Applications
55+
<Typography>Click a Card to Begin!</Typography>
5056
</Typography>
5157
<Modal open={open} onClose={() => setOpen(false)}>
5258
<AddModal setOpen={setOpen} />
5359
</Modal>
5460
<Grid className={classes.grid} container spacing={3}>
61+
<Grid item lg={4} md={6} sm={12}>
62+
<Button className={classes.paper} onClick={() => setOpen(true)}>
63+
<AddCircleOutlineTwoToneIcon className={classes.icon} />
64+
</Button>
65+
</Grid>
5566
<Applications />
5667
</Grid>
57-
<Button className={classes.paper} onClick={() => setOpen(true)}>
58-
<AddCircleOutlineTwoToneIcon className={classes.icon} />
59-
</Button>
60-
</div>
68+
</>
6169
);
6270
};
6371

‎app/context/DockerContext.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@ const DockerContextProvider: React.FC = ({ children }) => {
2525
}
2626

2727
// Fetches all data related to a particular app
28-
const fetchDockerData = (service: string) => {
28+
const fetchDockerData = (service: string) => {
2929
ipcRenderer.send('dockerRequest', service);
3030

3131
ipcRenderer.on('dockerResponse', (event: Electron.Event, data: any) => {
3232
// Parse result
3333
const result: IContainer[] = JSON.parse(data);
34+
3435
console.log('Number of data points (docker):', result.length);
3536
// Display single data point
3637
const newDockerData = result[0] || {};

‎app/index.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,17 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import './stylesheets/index.scss';
44
import App from './App';
5+
import { createMuiTheme, ThemeProvider } from '@material-ui/core';
56

6-
ReactDOM.render(<App />, document.getElementById('app'));
7+
const theme = createMuiTheme({
8+
typography: {
9+
fontFamily: ['Nunito sans', 'sans-serif'].join(','),
10+
},
11+
});
12+
13+
ReactDOM.render(
14+
<ThemeProvider theme={theme}>
15+
<App />
16+
</ThemeProvider>,
17+
document.getElementById('app')
18+
);

‎app/modals/AddModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const AddModal: React.FC<AddModalProps> = ({ setOpen }) => {
8888
<label htmlFor="db-desc">Description</label>
8989
<textarea
9090
id="db-desc"
91-
name="db-desc"
91+
name="description"
9292
value={description}
9393
onChange={e => handleChange(e)}
9494
placeholder="Add a short description"

0 commit comments

Comments
 (0)