mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-10 09:52:51 +00:00
Code Issues Releases Wiki Activity

working on sidebar/sensors

Browse Source
This commit is contained in:
mgerb42
2016-09-06 16:59:46 +00:00
parent 0e8d2e5b2b
commit fc6af3cd4e
4 changed files with 59 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/js/components/Sidebar.js
View File

@@ -2,9 +2,9 @@ import React from 'react';
//components
import SensorList from './sensors/SensorList';
import AboutMe from './utils/AboutMe';
//assets
import me from '../../assets/images/me.jpg';
import '../../assets/scss/Sidebar.scss';
export default class Sidebar extends React.Component {
@@ -36,33 +36,7 @@ export default class Sidebar extends React.Component {
class="fa fa-2x fa-navicon"
aria-hidden="true" />
</a>
<h2>About Me</h2>
<img src={me}/>
<p>
My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
</p>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
</p>
<p>
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
<a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
</p>
<p>
<i class="fa fa-github" aria-hidden="true"></i>
<a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
</p>
<p>
<i class="fa fa-wpforms" aria-hidden="true"> </i>
<a href="/resume" class="link"> Resume</a>
</p>
<br/>
<h2>Sensors</h2>
<hr/>
<AboutMe/>
{this.props.sensor.fetchedList ? <SensorList list={this.props.sensor.list}/> : null}
</div>
);

16
client/js/components/sensors/SensorList.js
View File

@@ -1,16 +1,20 @@
import React from 'react';
import 'whatwg-fetch';
import './SensorList.scss';
export default class SensorList extends React.Component {
insertSensorData = (sensor, index) => {
const date = new Date(sensor.updated);
return (
<div key={index}>
<h3>{sensor.location}</h3>
<p>{sensor.temperature}</p>
<p>{date.toString()}</p>
<div key={index} class="row">
<div class="item"><h1>{sensor.temperature}</h1><p>Connected</p></div>
<div class="item">
<h3>{sensor.location}</h3>
<p>{date.toString()}</p>
</div>
</div>
);
}
@@ -18,7 +22,9 @@ export default class SensorList extends React.Component {
const list = this.props.list;
return (
<div>
<div class="SensorList">
<h2>Sensors</h2>
<hr/>
{list.map(this.insertSensorData)}
</div>
)

11
client/js/components/sensors/SensorList.scss Normal file
View File

@@ -0,0 +1,11 @@
.SensorList{
.row{
display: flex;
flex-direction: row;
align-items: center;
.item + .item{
margin-left: 1em;
}
}
}

35
client/js/components/utils/AboutMe.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import me from '../../../assets/images/me.jpg';
export default class AboutMe extends React.Component{
render(){
return(
<div>
<h2>About Me</h2>
<img src={me}/>
<p>
My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
</p>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
</p>
<p>
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
<a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
</p>
<p>
<i class="fa fa-github" aria-hidden="true"></i>
<a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
</p>
<p>
<i class="fa fa-wpforms" aria-hidden="true"> </i>
<a href="/resume" class="link"> Resume</a>
</p>
</div>
);
}
}