Display billed amount on Trotec usage tablet

This commit is contained in:
Tanner Collin 2022-04-30 04:38:50 +00:00
parent d7ba3d6408
commit 34119cb221

View File

@ -60,6 +60,28 @@ export function Usage(props) {
}
{showUsage ?
<TrotecUsage usage={usage} />
:
<>
<Header size='large'>{title} Usage</Header>
<p/>
<p>Waiting for job</p>
</>
}
</div>
</Container>
);
};
export function TrotecUsage(props) {
const { usage } = props;
const today_total = parseInt(usage.today_total / 60);
const month_total = parseInt(usage.month_total / 60);
const free_time = 360;
return (
<>
<p className='stat'>
{usage.first_name}
@ -73,33 +95,35 @@ export function Usage(props) {
</p>
</div>
<Header size='medium'>Job #{usage.last_use_id} Time</Header>
<Header size='medium'>Laser-firing Time Today</Header>
<p className='stat'>
{parseInt(usage.last_use_time / 60)} mins
{today_total} mins
</p>
<Header size='medium'>Today Total</Header>
<Header size='medium'>Laser-firing Time Month</Header>
<p className='stat'>
{parseInt(usage.today_total / 60)} mins
{month_total} mins
</p>
<Header size='medium'>Month Total</Header>
{month_total <= free_time ?
<>
<Header size='medium'>Free Time Remaining</Header>
<p className='stat'>
{parseInt(usage.month_total / 60)} mins
{free_time - month_total} mins
</p>
</>
:
<>
<Header size='large'>{title} Usage</Header>
<p/>
<p>Waiting for job</p>
<Header size='medium'>Current Month Bill</Header>
<p className='stat'>
${((month_total - free_time) * 0.5).toFixed(2)}
</p>
</>
}
</div>
</Container>
</>
);
};
}