lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: make percentage chart work properly

Browse source 
Fix: code review

Fix: rework components according to PR requested changes

Fix: fix repeated code buildRatesNoCommission

Also renames id to deviceId in transactions quer

Fix: pr requested changes

Chore: move inline styles to classes

Chore: remove comment

Fix: bad equality !process.env.NODE_ENV === 'production'
This commit is contained in:
Cesar 2020-12-07 19:58:20 +00:00 • committed by Josh Harvey
parent 5572fb0eb1
commit ae7eaca10c
43 changed files with 818 additions and 1578 deletions
Download patch file Download diff file Expand all files Collapse all files

129
new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
View file

@ -1,12 +1,12 @@
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import React, { useState, useEffect } from 'react'
import React from 'react'
import { cardState as cardState_ } from 'src/components/CollapsibleCard'
import { Label1, H4 } from 'src/components/typography'
import styles from '../Dashboard.styles'
import styles from './Alerts.styles'
import AlertsTable from './AlertsTable'
const NUM_TO_RENDER = 3
@ -23,99 +23,54 @@ const data = {
const useStyles = makeStyles(styles)
const Alerts = ({ cardState, setRightSideState }) => {
const Alerts = ({ onReset, onExpand, size }) => {
const classes = useStyles()
const [showAllItems, setShowAllItems] = useState(false)
const [showExpandButton, setShowExpandButton] = useState(false)
const [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
useEffect(() => {
if (showAllItems) {
setShowExpandButton(false)
setNumToRender(data?.alerts.length)
} else if (data && data?.alerts.length > numToRender) {
setShowExpandButton(true)
}
if (cardState.cardSize === 'small' || cardState.cardSize === 'default') {
setShowAllItems(false)
setNumToRender(NUM_TO_RENDER)
}
}, [cardState.cardSize, numToRender, showAllItems])
const showAllItems = size === cardState_.EXPANDED
const reset = () => {
setRightSideState({
systemStatus: { cardSize: 'default', buttonName: 'Show less' },
alerts: { cardSize: 'default', buttonName: 'Show less' }
})
setShowAllItems(false)
setNumToRender(NUM_TO_RENDER)
}
const showAllClick = () => {
setShowExpandButton(false)
setShowAllItems(true)
setRightSideState({
systemStatus: { cardSize: 'small', buttonName: 'Show machines' },
alerts: { cardSize: 'big', buttonName: 'Show less' }
})
}
const alertsLength = () => (data ? data.alerts.length : 0)
return (
<>
<div
style={{
display: 'flex',
justifyContent: 'space-between'
}}>
<H4 className={classes.h4}>{`Alerts ${
data ? `(${data.alerts.length})` : 0
}`}</H4>
{(showAllItems || cardState.cardSize === 'small') && (
<>
<Label1
style={{
textAlign: 'center',
marginBottom: 0,
marginTop: 0
}}>
<Button
onClick={reset}
size="small"
disableRipple
disableFocusRipple
className={classes.button}>
{cardState.buttonName}
</Button>
</Label1>
</>
<div className={classes.container}>
<H4 className={classes.h4}>{`Alerts (${alertsLength()})`}</H4>
{showAllItems && (
<Label1 className={classes.upperButtonLabel}>
<Button
onClick={onReset}
size="small"
disableRipple
disableFocusRipple
className={classes.button}>
{'Show less'}
</Button>
</Label1>
)}
</div>
{cardState.cardSize !== 'small' && (
<>
<Grid container spacing={1}>
<Grid item xs={12}>
<AlertsTable
numToRender={numToRender}
alerts={data?.alerts ?? []}
/>
{showExpandButton && (
<>
<Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
<Button
onClick={showAllClick}
size="small"
disableRipple
disableFocusRipple
className={classes.button}>
{`Show all (${data.alerts.length})`}
</Button>
</Label1>
</>
)}
</Grid>
<>
<Grid container spacing={1}>
<Grid item xs={12}>
<AlertsTable
numToRender={showAllItems ? data?.alerts.length : NUM_TO_RENDER}
alerts={data?.alerts ?? []}
/>
{!showAllItems && (
<>
<Label1 className={classes.centerLabel}>
<Button
onClick={() => onExpand('alerts')}
size="small"
disableRipple
disableFocusRipple
className={classes.button}>
{`Show all (${data.alerts.length})`}
</Button>
</Label1>
</>
)}
</Grid>
</>
)}
</Grid>
</>
</>
)
}