Skip to content

T
toiletcoin
Commit f5d2bfd4 by OuiAtichat
Options

add spinner & fix Style card & add utils for responsive design

parent 25591de4
Showing with 201 additions and 110 deletions
package.json
{
"name": "toiletcoin_dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ng-bootstrap/ng-bootstrap": "^5.1.0",
"bootstrap": "^4.3.1",
"bootstrap-daterangepicker": "^3.0.5",
"date-fns": "^2.0.0-beta.3",
"firebase": "^6.3.3",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.10",
"react-bootstrap-daterangepicker": "^4.1.0",
"react-bootstrap-datetimerangepicker": "^2.0.4",
"react-day-picker": "^7.3.0",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-icons": "^3.7.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"recharts": "^1.6.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "toiletcoin_dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"firebase": "^6.3.3",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.10",
"react-bootstrap-daterangepicker": "^4.1.0",
"react-dom": "^16.8.6",
"react-icons": "^3.7.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-spinners": "^0.5.13",
"recharts": "^1.6.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
src/App.js
......@@ -4,6 +4,7 @@ import PrivateRoute from './components/PrivateRoute';
import app from './firebase';
import Home from './Pages/Home';
import LogIn from './Pages/LogIn';
import PulseLoader from 'react-spinners/PulseLoader';
class App extends Component {
state = { loading: true, authenticated: false };
......@@ -28,17 +29,25 @@ class App extends Component {
const { authenticated, loading } = this.state;
if (loading) {
return <p>Loading..</p>;
return (
<div
style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
}}
>
<PulseLoader size={20} color={'#49b9ff'} />
</div>
);
}
return (
<Router>
<div
style={{ width: '100vw', height: '100vh', background: 'linear-gradient(45deg, #f7f7f7, #e3e3e3)' }}
>
<PrivateRoute exact path="/" component={Home} authenticated={authenticated} />
<Route exact path="/login" component={LogIn} />
</div>
<PrivateRoute exact path="/" component={Home} authenticated={authenticated} />
<Route exact path="/login" component={LogIn} />
</Router>
);
}
......
src/Pages/Home.js
......@@ -8,10 +8,10 @@ import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
// mock component
const Map = () => <Col>Map</Col>;
const CurrentChart = () => <Col>Current Chart</Col>;
const RevenueChart = () => <Col>Revenue chart</Col>;
const PeopleChart = () => <Col>People chart</Col>;
const RemoteChart = () => <Col>Remote chart</Col>;
// const CurrentChart = () => <Col>Current Chart</Col>;
// const RevenueChart = () => <Col>Revenue chart</Col>;
// const PeopleChart = () => <Col>People chart</Col>;
// const RemoteChart = () => <Col>Remote chart</Col>;
const Data = [
{
......
src/Pages/LogIn/LogInView.js
......@@ -2,7 +2,14 @@ import React from 'react';
import { Card, Form, Button, Container } from 'react-bootstrap';
const LogInView = ({ onSubmit }) => {
return (
<Container style={{ alignItems: 'center', paddingTop: '2em', maxWidth: '400px' }}>
<Container
style={{
alignItems: 'center',
paddingTop: '2em',
maxWidth: '400px',
height: '100vh',
}}
>
<Card style={{ padding: '2em 1em', backgroundColor: '#49b9ff' }}>
<h2 style={{ color: 'white' }}>ToiletCoin Login</h2>
<br />
......
src/components/DataCard.js
import React from 'react';
import { Card, Col, Row } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import withWindowDimensions from '../utils/withWindowDimensions';
const chartdata = [
{
......@@ -36,18 +37,19 @@ const chartdata = [
const SmCard = props => {
const smdata = props.smitem;
console.log('test', smdata);
const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
// console.log('test', smdata);
return (
<Card style={{ padding: '.5em', color: 'white', backgroundColor: props.backgroundColor }}>
<Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}>
<h6>{smdata.smtitle}</h6>
<Row style={{ alignItems: 'center' }}>
<Col>
<h5>{smdata.smtitle}</h5>
{smdata.iconType == 'max' ? (
<FaArrowUp />
) : smdata.iconType == 'min' ? (
<FaArrowDown />
{smdata.iconType === 'max' ? (
<FaArrowUp {...iconStyle} />
) : smdata.iconType === 'min' ? (
<FaArrowDown {...iconStyle} />
) : (
<FaMoneyBillAlt />
<FaMoneyBillAlt {...iconStyle} />
)}
</Col>
<Col>
......@@ -90,13 +92,27 @@ const DataCard = props => {
</div>
</Card>
<Row>
{data.detail.map((item, index) => (
<Col key={index} md={6} style={{ marginTop: '.5em' }}>
<SmCard backgroundColor={data.backgroundColor} smitem={item} />
</Col>
))}
{data.detail.map((item, index) =>
data.detail.length === 1 ? (
<Col key={index} md={12} style={{ marginTop: '.7em' }}>
<SmCard backgroundColor={data.backgroundColor} smitem={item} />
</Col>
) : (
<Col
key={index}
md={6}
style={{
marginTop: '.7em',
paddingLeft: !props.isMobileSized ? (index % 2 === 0 ? '15px' : '7.5px') : '15px',
paddingRight: !props.isMobileSized ? (index % 2 !== 0 ? '15px' : '7.5px') : '15px',
}}
>
<SmCard backgroundColor={data.backgroundColor} smitem={item} />
</Col>
)
)}
</Row>
</Col>
);
};
export default DataCard;
export default withWindowDimensions(DataCard);
src/components/GetDataSelection/DateRangeSeletion.js
import React, { Component } from 'react';
import DatetimeRangePicker from 'react-bootstrap-datetimerangepicker';
import moment from 'moment';
import DateRangePicker from 'react-bootstrap-daterangepicker';
import { Button } from 'react-bootstrap';
import moment from 'moment';
import { FaRegCalendarAlt } from 'react-icons/fa';
import { InputGroup, FormControl } from 'react-bootstrap';
import 'bootstrap-daterangepicker/daterangepicker.css';
class PredefinedRanges extends Component {
state = {
startDate: moment().subtract(29, 'days'),
startDate: moment(),
endDate: moment(),
ranges: {
Today: [moment(), moment()],
......@@ -33,33 +35,30 @@ class PredefinedRanges extends Component {
};
render() {
let start = this.state.startDate.format('MMMM D, YYYY');
let end = this.state.endDate.format('MMMM D, YYYY');
let start = this.state.startDate.format('DD MMM YY');
let end = this.state.endDate.format('DD MMM YY');
let label = start + ' - ' + end;
if (start === end) {
label = start;
}
let buttonStyle = { width: '100%' };
return (
<DatetimeRangePicker
<DateRangePicker
containerStyles={{ display: 'flex', marginBottom: '0.4rem' }}
startDate={this.state.startDate}
endDate={this.state.endDate}
ranges={this.state.ranges}
onEvent={this.handleEvent}
>
<Button className="selected-date-range-btn" style={buttonStyle}>
<div className="pull-left">
<i className="fa fa-calendar" />
&nbsp;
<span>{label}</span>
</div>
<div className="pull-right">
<i className="fa fa-angle-down" />
</div>
</Button>
</DatetimeRangePicker>
<InputGroup>
<InputGroup.Append>
<InputGroup.Text>
<FaRegCalendarAlt />
</InputGroup.Text>
</InputGroup.Append>
<FormControl value={label} readOnly style={{ backgroundColor: '#FFFFFF' }} />
</InputGroup>
</DateRangePicker>
);
}
}
......
src/components/GetDataSelection/GetDataSelection.js
import React from 'react';
import { Col, Form } from 'react-bootstrap';
import { Col, Form, Button } from 'react-bootstrap';
import DateRangeSeletion from './DateRangeSeletion';
const GetDataSelection = () => {
return (
<>
<Col>
<DateRangeSeletion />
</Col>
<Col>
<Form.Control as="select">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Col>
</>
<Col>
<Form.Label>Get data from</Form.Label>
<Form.Row>
<Col md>
<Form.Control as="select">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Col>
<Col md>
<DateRangeSeletion />
</Col>
<Col md={3}>
<Form.Control as="select">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Col>
<Col md={1}>
<Button block variant="success">
Go
</Button>
</Col>
</Form.Row>
</Col>
);
};
......
src/components/NavBar.js
import React from 'react';
import { Navbar, Button } from 'react-bootstrap';
import app from '../firebase';
import withWindowDimensions from '../utils/withWindowDimensions';
const NavbarComponent = ({ user }) => {
const NavbarComponent = ({ user, isMobileSized }) => {
const signOut = async () => {
await app.auth().signOut();
};
return (
<Navbar style={{ backgroundColor: '#49b9ff' }}>
<Navbar style={{ backgroundColor: '#49b9ff', paddingHorizontal: '2rem' }}>
<Navbar.Brand style={{ color: '#fff' }}>ToiletCoin Dashboard</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Navbar.Text style={{ color: '#fff' }}>user: {user} </Navbar.Text>
{!isMobileSized && <Navbar.Text style={{ color: '#fff' }}>user: {user} </Navbar.Text>}
<Button variant="link" onClick={signOut} style={{ color: '#fff' }}>
Log Out
</Button>
{/* <Navbar.Text onClick={signOut} style={{ color: '#fff', cursor: 'default' }}>
Log Out
</Navbar.Text> */}
</Navbar.Collapse>
</Navbar>
);
};
export default NavbarComponent;
export default withWindowDimensions(NavbarComponent);
src/styles.scss
// Override default variables before the import
// $body-bg: #000;
.body {
body {
background: linear-gradient(45deg, #f7f7f7, #e3e3e3);
}
.form-control {
margin-bottom: 0.4rem;
}
// .myStyleGutters {
// > .col,
// > [class*='col-'] {
// padding-right: 0;
// padding-left: 0.8rem;
// &:last-child {
// padding-right: 1rem;
// padding-left: 1rem;
// }
// }
// }
// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';
src/utils/withWindowDimensions.js 0 → 100644
import React, { Component } from 'react';
export default function withWindowDimensions(WrappedComponent) {
return class extends Component {
state = { width: 0, height: 0 };
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
render() {
return (
<WrappedComponent
{...this.props}
windowWidth={this.state.width}
windowHeight={this.state.height}
isMobileSized={this.state.width < 768}
/>
);
}
};
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment