Skip to content

Commit

Permalink
app dashboard updated with a new card
Browse files Browse the repository at this point in the history
  • Loading branch information
dederomagnolo committed Oct 4, 2020
1 parent 2e026b8 commit 59950f8
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 25 deletions.
50 changes: 26 additions & 24 deletions bethere-app/src/components/dashboard/index.jsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React, { useState, useEffect } from 'react';
import { Container, Col } from 'react-grid-system';
import { Header } from '../header';
import { Card } from 'semantic-ui-react';
import { MenuCard } from '../card';
import Toggle from 'react-styled-toggle';
import api from '../../services';
import * as _ from 'lodash';
import moment from 'moment';
import { ResponsiveLine } from '@nivo/line';
import { setColorId, isOdd, setMeasureId } from './utils';
import {NewCard} from '../newCard';
import {Cards} from './styles';

const base_channel_url = "https://api.thingspeak.com/channels/695672"

const bethereUrl = "http://localhost:4000";

const initialState = {
Expand Down Expand Up @@ -147,19 +145,24 @@ export const Dashboard = () => {
}

return (
<Container style={{height: '100%'}}>
<div style={{height: "100%"}}>
<Header title="Dashboard"/>
<Container>
<Col xl={12}>
<span style={{fontSize: "20px"}}>Hello! Your garden looks good today:</span>
</Col>
<Card.Group style={{paddingTop: "20px"}} itemsPerRow={4}>
<MenuCard iconName="tint" label={`${measures.internalHumidity}`} label2="Internal Humidity"/>
<MenuCard iconName="thermometer half" label={`${measures.internalTemperature}`} label2="Internal Temperature"/>
<MenuCard iconName="tint" label={`${measures.externalHumidity}`} label2="External Humidity"/>
<MenuCard iconName="thermometer half" label={`${measures.externalTemperature}`} label2="External Temperature"/>
</Card.Group>

<div>
<span style={{fontSize: "20px"}}>Hello! Your garden looks good today:</span>
<Cards>
<NewCard
label={"Temperature (°C)"}
icon={"thermometer half"}
internalMeasure={measures.internalTemperature}
externalMeasure={measures.externalTemperature}
/>
<NewCard
label={"Humidity (%)"}
icon={"tint"}
internalMeasure={measures.internalHumidity}
externalMeasure={measures.externalHumidity}
/>
</Cards>
<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', paddingTop: '20px'}}>
<div style={{fontSize: '20px', paddingRight: '20px'}}>
Pump
Expand All @@ -168,10 +171,10 @@ export const Dashboard = () => {
<div style={{marginLeft: '10px'}}>{blockButtonFlag ? `Wait ${timeLeft} seconds to send another command` : "Available!"}</div>
</div>

<div style={{width: '100%' , height: '300px'}}>
<div style={{width: '85%' , height: '200px'}}>
<ResponsiveLine
data={chartData}
margin={{ top: 20, right: 110, bottom: 50, left: 60 }}
margin={{ top: 10, right: 10, bottom: 50, left: 10 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }}
axisTop={null}
Expand All @@ -180,7 +183,7 @@ export const Dashboard = () => {
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 40,
tickRotation: 50,
legendOffset: 20,
legendPosition: 'middle'
}}
Expand All @@ -203,7 +206,7 @@ export const Dashboard = () => {
useMesh={true}
legends={[
{
anchor: 'bottom-right',
anchor: 'top',
direction: 'column',
justify: false,
translateX: 100,
Expand All @@ -229,9 +232,8 @@ export const Dashboard = () => {
]}
/>

</div>

</Container>
</Container>
</div>
</div>
</div>
);
}
13 changes: 13 additions & 0 deletions bethere-app/src/components/dashboard/styles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import styled from 'styled-components';

export const Cards = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
@media screen and (max-width: 425px){
flex-direction: column;
justify-content: center;
align-items: center;
}
`
4 changes: 4 additions & 0 deletions bethere-app/src/components/layout/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,8 @@ export const Wrapper = styled.div `
display: flex;
flex-direction: column;
overflow: auto;
@media screen and (max-width: 425px){
height: calc(100vh - 60px);
}
`;
39 changes: 39 additions & 0 deletions bethere-app/src/components/newCard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react';
import {
CardContainer,
InnerCard,
CardLabel,
CardContent,
CardColumn,
MeasureContainer,
MeasureLabel
} from './styles';
import { Icon } from 'semantic-ui-react';

export const NewCard = ({label, icon, internalMeasure, externalMeasure}) => {

return(
<CardContainer>
<InnerCard>
<CardLabel>
<Icon name={icon}/>
<div>{label}</div>
</CardLabel>
<CardContent>
<CardColumn>
<MeasureLabel>Internal</MeasureLabel>
<MeasureContainer>
<div>{internalMeasure}</div>
</MeasureContainer>
</CardColumn>
<CardColumn>
<MeasureLabel>External</MeasureLabel>
<MeasureContainer>
<div>{externalMeasure}</div>
</MeasureContainer>
</CardColumn>
</CardContent>
</InnerCard>
</CardContainer>
);
}
52 changes: 52 additions & 0 deletions bethere-app/src/components/newCard/styles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import styled from 'styled-components';

export const CardContainer = styled.div`
width: 300px;
height: 150px;
box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 #00b5ad, 0 1px 3px 0 #d4d4d5;
border-radius: 3px;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
`

export const InnerCard = styled.div`
padding: 15px;
`

export const CardLabel = styled.div`
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: center;
padding-bottom: 10px;
`

export const CardContent = styled.div`
display: flex;
justify-content: space-between;
padding-top: 15px;
min-width: 230px;
`

export const CardColumn = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
`

export const MeasureContainer = styled.div`
display: flex;
flex-direction: row;
font-size: 25px;
`

export const MeasureLabel = styled.div`
font-size: 14px;
padding-bottom: 10px;
`
1 change: 0 additions & 1 deletion bethere-websocket-tests-be/src/app/controllers/measures.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const router = express.Router();

router.get('/pumpstatus' , async (req, res) => {
const lastMeasure = await Measure.find( { measureName: "Pump Status"}).sort( { _id: -1 }).limit(1);

res.send(lastMeasure[0]);
})

Expand Down

0 comments on commit 59950f8

Please sign in to comment.