marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 14:09:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: make responsive

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2025-04-05 06:10:25 +00:00
parent 1b72557aa2
commit da7e2726fa
2 changed files with 130 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/input/NumericInputWithUnit.tsx
View File

@@ -5,7 +5,7 @@ import Qty from 'js-quantities';
// //
const siPrefixes: { [key: string]: number } = { const siPrefixes: { [key: string]: number } = {
'': 1, 'Default prefix': 1,
k: 1000, k: 1000,
M: 1000000, M: 1000000,
G: 1000000000, G: 1000000000,
@@ -24,7 +24,7 @@ export default function NumericInputWithUnit(props: {
defaultPrefix?: string; defaultPrefix?: string;
}) { }) {
const [inputValue, setInputValue] = useState(props.value.value); const [inputValue, setInputValue] = useState(props.value.value);
const [prefix, setPrefix] = useState(props.defaultPrefix || ''); const [prefix, setPrefix] = useState(props.defaultPrefix || 'Default prefix');
// internal display unit // internal display unit
const [unit, setUnit] = useState(''); const [unit, setUnit] = useState('');
@@ -121,13 +121,8 @@ export default function NumericInputWithUnit(props: {
}; };
return ( return (
<Grid <Grid container spacing={2} alignItems="center">
container <Grid item xs={12} md={4}>
spacing={2}
alignItems="center"
style={{ minWidth: '20rem' }}
>
<Grid item xs={4}>
<TextFieldWithDesc <TextFieldWithDesc
disabled={disabled} disabled={disabled}
type="number" type="number"
@@ -139,7 +134,7 @@ export default function NumericInputWithUnit(props: {
/> />
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={12} md={3}>
<Select <Select
fullWidth fullWidth
disabled={disableChangingUnit} disabled={disableChangingUnit}
@@ -156,12 +151,11 @@ export default function NumericInputWithUnit(props: {
</Select> </Select>
</Grid> </Grid>
<Grid item xs={5}> <Grid item xs={12} md={5}>
<Select <Select
fullWidth fullWidth
disabled={disableChangingUnit} disabled={disableChangingUnit}
label="Unit" placeholder={'Unit'}
title="Unit"
value={unit} value={unit}
onChange={(event) => { onChange={(event) => {
setUserSelectedUnit(true); setUserSelectedUnit(true);

135
src/pages/tools/number/generic-calc/index.tsx
View File

@@ -1,15 +1,4 @@
import { import { Autocomplete, Box, Radio, Stack, TextField } from '@mui/material';
Autocomplete,
Box,
Radio,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField
} from '@mui/material';
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import ToolContent from '@components/ToolContent'; import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool'; import { ToolComponentProps } from '@tools/defineTool';
@@ -290,30 +279,49 @@ export default async function makeTool(
{ {
title: 'Variables', title: 'Variables',
component: ( component: (
<Table> <Box>
<TableHead> <Grid container spacing={2} sx={{ mb: 2 }}>
<TableRow> <Grid item xs={10}></Grid>
<TableCell>Value</TableCell> <Grid item xs={2}>
<TableCell>Solve For</TableCell> <Typography fontWeight="bold" align="center">
</TableRow> Solve For
</TableHead> </Typography>
<TableBody> </Grid>
</Grid>
{calcData.variables.map((variable) => ( {calcData.variables.map((variable) => (
<TableRow key={variable.name}> <Box
<TableCell> key={variable.name}
<Table> sx={{
<TableRow> mb: 3,
<TableCell>{variable.title}</TableCell> p: 1,
<TableCell> borderRadius: 1
}}
>
<Grid container spacing={2} alignItems="center">
<Grid item xs={10}>
<Box>
<Stack spacing={2}>
<Box>
<Stack
direction="row"
spacing={2}
alignItems="center"
>
<Typography sx={{ minWidth: '8%' }}>
{variable.title}
</Typography>
<NumericInputWithUnit <NumericInputWithUnit
defaultPrefix={variable.defaultPrefix} defaultPrefix={variable.defaultPrefix}
value={values.vars[variable.name]} value={values.vars[variable.name]}
disabled={ disabled={
values.outputVariable === variable.name || values.outputVariable === variable.name ||
valsBoundToPreset[variable.name] !== undefined valsBoundToPreset[variable.name] !==
undefined
} }
disableChangingUnit={ disableChangingUnit={
valsBoundToPreset[variable.name] !== undefined valsBoundToPreset[variable.name] !==
undefined
} }
onOwnChange={(val) => onOwnChange={(val) =>
updateVarField( updateVarField(
@@ -325,13 +333,20 @@ export default async function makeTool(
) )
} }
/> />
</TableCell> </Stack>
</TableRow> </Box>
{variable.alternates?.map((alt) => ( {variable.alternates?.map((alt) => (
<TableRow key={alt.title}> <Box key={alt.title}>
<TableCell>{alt.title}</TableCell> <Stack
<TableCell> direction="row"
spacing={2}
alignItems="center"
>
<Typography sx={{ minWidth: 120 }}>
{alt.title}
</Typography>
<Box sx={{ flexGrow: 1 }}>
<NumericInputWithUnit <NumericInputWithUnit
key={alt.title} key={alt.title}
defaultPrefix={alt.defaultPrefix || ''} defaultPrefix={alt.defaultPrefix || ''}
@@ -345,7 +360,8 @@ export default async function makeTool(
unit: alt.unit || '' unit: alt.unit || ''
}} }}
disabled={ disabled={
values.outputVariable === variable.name || values.outputVariable ===
variable.name ||
valsBoundToPreset[variable.name] !== valsBoundToPreset[variable.name] !==
undefined undefined
} }
@@ -356,20 +372,30 @@ export default async function makeTool(
onOwnChange={(val) => onOwnChange={(val) =>
updateVarField( updateVarField(
variable.name, variable.name,
getMainFromAlternate(alt, variable, val), getMainFromAlternate(
alt,
variable,
val
),
variable.unit, variable.unit,
values, values,
updateField updateField
) )
} }
></NumericInputWithUnit> />
</TableCell> </Box>
</TableRow> </Stack>
</Box>
))} ))}
</Table> </Stack>
</TableCell> </Box>
</Grid>
<TableCell> <Grid
item
xs={2}
sx={{ display: 'flex', justifyContent: 'center' }}
>
<Radio <Radio
value={variable.name} value={variable.name}
checked={values.outputVariable === variable.name} checked={values.outputVariable === variable.name}
@@ -384,21 +410,23 @@ export default async function makeTool(
) )
} }
/> />
</TableCell> </Grid>
</TableRow> </Grid>
</Box>
))} ))}
</TableBody> </Box>
</Table>
) )
}, },
...(calcData.extraOutputs ...(calcData.extraOutputs
? [ ? [
{ {
title: 'Extra outputs', title: 'Extra outputs',
component: calcData.extraOutputs?.map((extraOutput) => ( component: (
<TableRow key={extraOutput.title}> <Grid container spacing={2}>
<TableCell> {calcData.extraOutputs?.map((extraOutput) => (
{extraOutput.title} <Grid item xs={12} key={extraOutput.title}>
<Stack spacing={1} px={4}>
<Typography>{extraOutput.title}</Typography>
<NumericInputWithUnit <NumericInputWithUnit
disabled={true} disabled={true}
defaultPrefix={extraOutput.defaultPrefix} defaultPrefix={extraOutput.defaultPrefix}
@@ -407,10 +435,11 @@ export default async function makeTool(
unit: extraOutput.unit unit: extraOutput.unit
}} }}
/> />
</TableCell> </Stack>
<TableCell></TableCell> </Grid>
</TableRow> ))}
)) </Grid>
)
} }
] ]
: []) : [])