diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js
index 85472291..e97805f9 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.js
@@ -1,3 +1,4 @@
+import { useQuery } from '@apollo/react-hooks'
import { makeStyles, withStyles } from '@material-ui/core'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
@@ -6,6 +7,7 @@ import TableContainer from '@material-ui/core/TableContainer'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import classnames from 'classnames'
+import gql from 'graphql-tag'
import * as R from 'ramda'
import React from 'react'
import { useHistory } from 'react-router-dom'
@@ -15,12 +17,19 @@ import { Label2, TL2 } from 'src/components/typography'
// import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
import { ReactComponent as MachineLinkIcon } from 'src/styling/icons/month arrows/right.svg'
+import { fromNamespace } from 'src/utils/config'
import styles from './MachinesTable.styles'
// percentage threshold where below this number the text in the cash cassettes percentage turns red
const PERCENTAGE_THRESHOLD = 20
+const GET_CONFIG = gql`
+ query getConfig {
+ config
+ }
+`
+
const useStyles = makeStyles(styles)
const StyledCell = withStyles({
@@ -43,16 +52,28 @@ const HeaderCell = withStyles({
const MachinesTable = ({ machines = [], numToRender }) => {
const classes = useStyles()
const history = useHistory()
+
+ const { data } = useQuery(GET_CONFIG)
+ const fillingPercentageSettings = fromNamespace(
+ 'notifications',
+ R.path(['config'], data) ?? {}
+ )
+
const getPercent = (notes, capacity = 500) => {
return Math.round((notes / capacity) * 100)
}
- const makePercentageText = (notes, capacity = 500) => {
+ const makePercentageText = (cassetteIdx, notes, capacity = 500) => {
const percent = getPercent(notes, capacity)
- if (percent < PERCENTAGE_THRESHOLD) {
- return {`${percent}%`}
- }
- return {`${percent}%`}
+ const percentageThreshold = R.pipe(
+ R.path([`fillingPercentageCassette${cassetteIdx}`]),
+ R.defaultTo(PERCENTAGE_THRESHOLD)
+ )(fillingPercentageSettings)
+ return percent < percentageThreshold ? (
+ {`${percent}%`}
+ ) : (
+ {`${percent}%`}
+ )
}
const redirect = ({ name, deviceId }) => {
@@ -122,21 +143,18 @@ const MachinesTable = ({ machines = [], numToRender }) => {
- {/*
- {makePercentageText(machine.cashbox)}
- */}
{R.map(
it =>
- machine.numberOfCassettes > it ? (
+ machine.numberOfCassettes >= it ? (
- {makePercentageText(machine[`cassette${it + 1}`])}
+ {makePercentageText(it, machine[`cassette${it}`])}
) : (
{`— %`}
),
- R.times(R.identity, maxNumberOfCassettes)
+ R.range(1, maxNumberOfCassettes + 1)
)}
)