feat: added multicassette to notifications override

This commit is contained in:
Sérgio Salgado 2021-10-27 15:32:19 +01:00
parent f32d02a808
commit 20a3c40c48
5 changed files with 171 additions and 130 deletions

View file

@ -1,5 +1,6 @@
import { makeStyles } from '@material-ui/core'
import { Form, Formik } from 'formik'
import * as R from 'ramda'
import React, { useContext } from 'react'
import * as Yup from 'yup'
@ -17,6 +18,7 @@ import styles from './FiatBalanceAlerts.styles.js'
const useStyles = makeStyles(styles)
const NAME = 'fiatBalanceAlerts'
const DEFAULT_NUMBER_OF_CASSETTES = 2
const FiatBalance = ({
section,
@ -24,11 +26,20 @@ const FiatBalance = ({
max = Number.MAX_SAFE_INTEGER,
fieldWidth = 80
}) => {
const { isEditing, isDisabled, setEditing, data, save } = useContext(
NotificationsCtx
)
const {
isEditing,
isDisabled,
setEditing,
data,
save,
machines
} = useContext(NotificationsCtx)
const classes = useStyles()
const maxNumberOfCassettes =
Math.max(...R.map(it => it.numberOfCassettes, machines)) ??
DEFAULT_NUMBER_OF_CASSETTES
const editing = isEditing(NAME)
const schema = Yup.object().shape({
@ -39,6 +50,18 @@ const FiatBalance = ({
.max(max)
.nullable(),
fiatBalanceCassette2: Yup.number()
.transform(transformNumber)
.integer()
.min(min)
.max(max)
.nullable(),
fiatBalanceCassette3: Yup.number()
.transform(transformNumber)
.integer()
.min(min)
.max(max)
.nullable(),
fiatBalanceCassette4: Yup.number()
.transform(transformNumber)
.integer()
.min(min)
@ -46,10 +69,12 @@ const FiatBalance = ({
.nullable()
})
const fiatBalanceCassette1Percent =
(100 * (data?.fiatBalanceCassette1 ?? 0)) / max
const fiatBalanceCassette2Percent =
(100 * (data?.fiatBalanceCassette2 ?? 0)) / max
const percentages = {
cassette1: (100 * (data?.fiatBalanceCassette1 ?? 0)) / max,
cassette2: (100 * (data?.fiatBalanceCassette2 ?? 0)) / max,
cassette3: (100 * (data?.fiatBalanceCassette3 ?? 0)) / max,
cassette4: (100 * (data?.fiatBalanceCassette4 ?? 0)) / max
}
return (
<Formik
@ -58,7 +83,9 @@ const FiatBalance = ({
enableReinitialize
initialValues={{
fiatBalanceCassette1: data?.fiatBalanceCassette1 ?? '',
fiatBalanceCassette2: data?.fiatBalanceCassette2 ?? ''
fiatBalanceCassette2: data?.fiatBalanceCassette2 ?? '',
fiatBalanceCassette3: data?.fiatBalanceCassette3 ?? '',
fiatBalanceCassette4: data?.fiatBalanceCassette4 ?? ''
}}
validationSchema={schema}
onSubmit={it => save(section, schema.cast(it))}
@ -74,46 +101,32 @@ const FiatBalance = ({
setEditing={it => setEditing(NAME, it)}
/>
<div className={classes.wrapper}>
<div className={classes.first}>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={fiatBalanceCassette1Percent}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette 1 (Top)</TL2>
<EditableNumber
label="Alert me under"
name="fiatBalanceCassette1"
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="notes"
width={fieldWidth}
/>
</div>
</div>
</div>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={fiatBalanceCassette2Percent}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
<EditableNumber
label="Alert me under"
name="fiatBalanceCassette2"
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="notes"
width={fieldWidth}
/>
</div>
</div>
{R.map(
it => (
<>
<div className={classes.row}>
<Cashbox
labelClassName={classes.cashboxLabel}
emptyPartClassName={classes.cashboxEmptyPart}
percent={percentages[`cassette${it + 1}`]}
cashOut
/>
<div className={classes.col2}>
<TL2 className={classes.title}>Cassette {it + 1}</TL2>
<EditableNumber
label="Alert me under"
name={`fiatBalanceCassette${it + 1}`}
editing={editing}
displayValue={x => (x === '' ? '-' : x)}
decoration="notes"
width={fieldWidth}
/>
</div>
</div>
</>
),
R.times(R.identity, maxNumberOfCassettes)
)}
</div>
</Form>
</Formik>