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", "name": "toiletcoin_dashboard",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@ng-bootstrap/ng-bootstrap": "^5.1.0", "bootstrap": "^4.3.1",
"bootstrap": "^4.3.1", "firebase": "^6.3.3",
"bootstrap-daterangepicker": "^3.0.5", "jquery": "^3.4.1",
"date-fns": "^2.0.0-beta.3", "moment": "^2.24.0",
"firebase": "^6.3.3", "node-sass": "^4.12.0",
"jquery": "^3.4.1", "react": "^16.8.6",
"moment": "^2.24.0", "react-bootstrap": "^1.0.0-beta.10",
"node-sass": "^4.12.0", "react-bootstrap-daterangepicker": "^4.1.0",
"prop-types": "^15.7.2", "react-dom": "^16.8.6",
"react": "^16.8.6", "react-icons": "^3.7.0",
"react-bootstrap": "^1.0.0-beta.10", "react-router-dom": "^5.0.1",
"react-bootstrap-daterangepicker": "^4.1.0", "react-scripts": "3.0.1",
"react-bootstrap-datetimerangepicker": "^2.0.4", "react-spinners": "^0.5.13",
"react-day-picker": "^7.3.0", "recharts": "^1.6.2"
"react-dom": "^16.8.6", },
"react-helmet": "^5.2.1", "scripts": {
"react-icons": "^3.7.0", "start": "react-scripts start",
"react-router-dom": "^5.0.1", "build": "react-scripts build",
"react-scripts": "3.0.1", "test": "react-scripts test",
"recharts": "^1.6.2" "eject": "react-scripts eject"
}, },
"scripts": { "eslintConfig": {
"start": "react-scripts start", "extends": "react-app"
"build": "react-scripts build", },
"test": "react-scripts test", "browserslist": {
"eject": "react-scripts eject" "production": [
}, ">0.2%",
"eslintConfig": { "not dead",
"extends": "react-app" "not op_mini all"
}, ],
"browserslist": { "development": [
"production": [ "last 1 chrome version",
">0.2%", "last 1 firefox version",
"not dead", "last 1 safari version"
"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'; ...@@ -4,6 +4,7 @@ import PrivateRoute from './components/PrivateRoute';
import app from './firebase'; import app from './firebase';
import Home from './Pages/Home'; import Home from './Pages/Home';
import LogIn from './Pages/LogIn'; import LogIn from './Pages/LogIn';
import PulseLoader from 'react-spinners/PulseLoader';
class App extends Component { class App extends Component {
state = { loading: true, authenticated: false }; state = { loading: true, authenticated: false };
...@@ -28,17 +29,25 @@ class App extends Component { ...@@ -28,17 +29,25 @@ class App extends Component {
const { authenticated, loading } = this.state; const { authenticated, loading } = this.state;
if (loading) { 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 ( return (
<Router> <Router>
<div <PrivateRoute exact path="/" component={Home} authenticated={authenticated} />
style={{ width: '100vw', height: '100vh', background: 'linear-gradient(45deg, #f7f7f7, #e3e3e3)' }} <Route exact path="/login" component={LogIn} />
>
<PrivateRoute exact path="/" component={Home} authenticated={authenticated} />
<Route exact path="/login" component={LogIn} />
</div>
</Router> </Router>
); );
} }
......
src/Pages/Home.js
...@@ -8,10 +8,10 @@ import GetDataSelection from '../components/GetDataSelection/GetDataSelection'; ...@@ -8,10 +8,10 @@ import GetDataSelection from '../components/GetDataSelection/GetDataSelection';
// mock component // mock component
const Map = () => <Col>Map</Col>; const Map = () => <Col>Map</Col>;
const CurrentChart = () => <Col>Current Chart</Col>; // const CurrentChart = () => <Col>Current Chart</Col>;
const RevenueChart = () => <Col>Revenue chart</Col>; // const RevenueChart = () => <Col>Revenue chart</Col>;
const PeopleChart = () => <Col>People chart</Col>; // const PeopleChart = () => <Col>People chart</Col>;
const RemoteChart = () => <Col>Remote chart</Col>; // const RemoteChart = () => <Col>Remote chart</Col>;
const Data = [ const Data = [
{ {
......
src/Pages/LogIn/LogInView.js
...@@ -2,7 +2,14 @@ import React from 'react'; ...@@ -2,7 +2,14 @@ import React from 'react';
import { Card, Form, Button, Container } from 'react-bootstrap'; import { Card, Form, Button, Container } from 'react-bootstrap';
const LogInView = ({ onSubmit }) => { const LogInView = ({ onSubmit }) => {
return ( 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' }}> <Card style={{ padding: '2em 1em', backgroundColor: '#49b9ff' }}>
<h2 style={{ color: 'white' }}>ToiletCoin Login</h2> <h2 style={{ color: 'white' }}>ToiletCoin Login</h2>
<br /> <br />
......
src/components/DataCard.js
import React from 'react'; import React from 'react';
import { Card, Col, Row } from 'react-bootstrap'; import { Card, Col, Row } from 'react-bootstrap';
import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa'; 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 = [ const chartdata = [
{ {
...@@ -36,18 +37,19 @@ const chartdata = [ ...@@ -36,18 +37,19 @@ const chartdata = [
const SmCard = props => { const SmCard = props => {
const smdata = props.smitem; const smdata = props.smitem;
console.log('test', smdata); const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
// console.log('test', smdata);
return ( 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' }}> <Row style={{ alignItems: 'center' }}>
<Col> <Col>
<h5>{smdata.smtitle}</h5> {smdata.iconType === 'max' ? (
{smdata.iconType == 'max' ? ( <FaArrowUp {...iconStyle} />
<FaArrowUp /> ) : smdata.iconType === 'min' ? (
) : smdata.iconType == 'min' ? ( <FaArrowDown {...iconStyle} />
<FaArrowDown />
) : ( ) : (
<FaMoneyBillAlt /> <FaMoneyBillAlt {...iconStyle} />
)} )}
</Col> </Col>
<Col> <Col>
...@@ -90,13 +92,27 @@ const DataCard = props => { ...@@ -90,13 +92,27 @@ const DataCard = props => {
</div> </div>
</Card> </Card>
<Row> <Row>
{data.detail.map((item, index) => ( {data.detail.map((item, index) =>
<Col key={index} md={6} style={{ marginTop: '.5em' }}> data.detail.length === 1 ? (
<SmCard backgroundColor={data.backgroundColor} smitem={item} /> <Col key={index} md={12} style={{ marginTop: '.7em' }}>
</Col> <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> </Row>
</Col> </Col>
); );
}; };
export default DataCard; export default withWindowDimensions(DataCard);
src/components/GetDataSelection/DateRangeSeletion.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import DatetimeRangePicker from 'react-bootstrap-datetimerangepicker'; import DateRangePicker from 'react-bootstrap-daterangepicker';
import moment from 'moment';
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 { class PredefinedRanges extends Component {
state = { state = {
startDate: moment().subtract(29, 'days'), startDate: moment(),
endDate: moment(), endDate: moment(),
ranges: { ranges: {
Today: [moment(), moment()], Today: [moment(), moment()],
...@@ -33,33 +35,30 @@ class PredefinedRanges extends Component { ...@@ -33,33 +35,30 @@ class PredefinedRanges extends Component {
}; };
render() { render() {
let start = this.state.startDate.format('MMMM D, YYYY'); let start = this.state.startDate.format('DD MMM YY');
let end = this.state.endDate.format('MMMM D, YYYY'); let end = this.state.endDate.format('DD MMM YY');
let label = start + ' - ' + end; let label = start + ' - ' + end;
if (start === end) { if (start === end) {
label = start; label = start;
} }
let buttonStyle = { width: '100%' };
return ( return (
<DatetimeRangePicker <DateRangePicker
containerStyles={{ display: 'flex', marginBottom: '0.4rem' }}
startDate={this.state.startDate} startDate={this.state.startDate}
endDate={this.state.endDate} endDate={this.state.endDate}
ranges={this.state.ranges} ranges={this.state.ranges}
onEvent={this.handleEvent} onEvent={this.handleEvent}
> >
<Button className="selected-date-range-btn" style={buttonStyle}> <InputGroup>
<div className="pull-left"> <InputGroup.Append>
<i className="fa fa-calendar" /> <InputGroup.Text>
&nbsp; <FaRegCalendarAlt />
<span>{label}</span> </InputGroup.Text>
</div> </InputGroup.Append>
<div className="pull-right"> <FormControl value={label} readOnly style={{ backgroundColor: '#FFFFFF' }} />
<i className="fa fa-angle-down" /> </InputGroup>
</div> </DateRangePicker>
</Button>
</DatetimeRangePicker>
); );
} }
} }
......
src/components/GetDataSelection/GetDataSelection.js
import React from 'react'; import React from 'react';
import { Col, Form } from 'react-bootstrap'; import { Col, Form, Button } from 'react-bootstrap';
import DateRangeSeletion from './DateRangeSeletion'; import DateRangeSeletion from './DateRangeSeletion';
const GetDataSelection = () => { const GetDataSelection = () => {
return ( return (
<> <Col>
<Col> <Form.Label>Get data from</Form.Label>
<DateRangeSeletion /> <Form.Row>
</Col> <Col md>
<Col> <Form.Control as="select">
<Form.Control as="select"> <option>Choose...</option>
<option>Choose...</option> <option>...</option>
<option>...</option> </Form.Control>
</Form.Control> </Col>
</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 React from 'react';
import { Navbar, Button } from 'react-bootstrap'; import { Navbar, Button } from 'react-bootstrap';
import app from '../firebase'; import app from '../firebase';
import withWindowDimensions from '../utils/withWindowDimensions';
const NavbarComponent = ({ user }) => { const NavbarComponent = ({ user, isMobileSized }) => {
const signOut = async () => { const signOut = async () => {
await app.auth().signOut(); await app.auth().signOut();
}; };
return ( return (
<Navbar style={{ backgroundColor: '#49b9ff' }}> <Navbar style={{ backgroundColor: '#49b9ff', paddingHorizontal: '2rem' }}>
<Navbar.Brand style={{ color: '#fff' }}>ToiletCoin Dashboard</Navbar.Brand> <Navbar.Brand style={{ color: '#fff' }}>ToiletCoin Dashboard</Navbar.Brand>
<Navbar.Toggle /> <Navbar.Toggle />
<Navbar.Collapse className="justify-content-end"> <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' }}> <Button variant="link" onClick={signOut} style={{ color: '#fff' }}>
Log Out Log Out
</Button> </Button>
{/* <Navbar.Text onClick={signOut} style={{ color: '#fff', cursor: 'default' }}>
Log Out
</Navbar.Text> */}
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
); );
}; };
export default NavbarComponent; export default withWindowDimensions(NavbarComponent);
src/styles.scss
// Override default variables before the import // Override default variables before the import
// $body-bg: #000; // $body-bg: #000;
.body { body {
background: linear-gradient(45deg, #f7f7f7, #e3e3e3); 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 and its default variables
@import '~bootstrap/scss/bootstrap.scss'; @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