feat: added multicassette to notifications override
This commit is contained in:
parent
f32d02a808
commit
20a3c40c48
5 changed files with 171 additions and 130 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue