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);

217
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,60 +279,41 @@ 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>
{calcData.variables.map((variable) => ( </Grid>
<TableRow key={variable.name}>
<TableCell>
<Table>
<TableRow>
<TableCell>{variable.title}</TableCell>
<TableCell>
<NumericInputWithUnit
defaultPrefix={variable.defaultPrefix}
value={values.vars[variable.name]}
disabled={
values.outputVariable === variable.name ||
valsBoundToPreset[variable.name] !== undefined
}
disableChangingUnit={
valsBoundToPreset[variable.name] !== undefined
}
onOwnChange={(val) =>
updateVarField(
variable.name,
val.value,
val.unit,
values,
updateField
)
}
/>
</TableCell>
</TableRow>
{variable.alternates?.map((alt) => ( {calcData.variables.map((variable) => (
<TableRow key={alt.title}> <Box
<TableCell>{alt.title}</TableCell> key={variable.name}
<TableCell> sx={{
mb: 3,
p: 1,
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
key={alt.title} defaultPrefix={variable.defaultPrefix}
defaultPrefix={alt.defaultPrefix || ''} value={values.vars[variable.name]}
value={{
value:
getAlternate(
alt,
variable,
values.vars[variable.name]
) || NaN,
unit: alt.unit || ''
}}
disabled={ disabled={
values.outputVariable === variable.name || values.outputVariable === variable.name ||
valsBoundToPreset[variable.name] !== valsBoundToPreset[variable.name] !==
@@ -356,20 +326,76 @@ export default async function makeTool(
onOwnChange={(val) => onOwnChange={(val) =>
updateVarField( updateVarField(
variable.name, variable.name,
getMainFromAlternate(alt, variable, val), val.value,
variable.unit, val.unit,
values, values,
updateField updateField
) )
} }
></NumericInputWithUnit> />
</TableCell> </Stack>
</TableRow> </Box>
))}
</Table>
</TableCell>
<TableCell> {variable.alternates?.map((alt) => (
<Box key={alt.title}>
<Stack
direction="row"
spacing={2}
alignItems="center"
>
<Typography sx={{ minWidth: 120 }}>
{alt.title}
</Typography>
<Box sx={{ flexGrow: 1 }}>
<NumericInputWithUnit
key={alt.title}
defaultPrefix={alt.defaultPrefix || ''}
value={{
value:
getAlternate(
alt,
variable,
values.vars[variable.name]
) || NaN,
unit: alt.unit || ''
}}
disabled={
values.outputVariable ===
variable.name ||
valsBoundToPreset[variable.name] !==
undefined
}
disableChangingUnit={
valsBoundToPreset[variable.name] !==
undefined
}
onOwnChange={(val) =>
updateVarField(
variable.name,
getMainFromAlternate(
alt,
variable,
val
),
variable.unit,
values,
updateField
)
}
/>
</Box>
</Stack>
</Box>
))}
</Stack>
</Box>
</Grid>
<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,33 +410,36 @@ export default async function makeTool(
) )
} }
/> />
</TableCell> </Grid>
</TableRow> </Grid>
))} </Box>
</TableBody> ))}
</Table> </Box>
) )
}, },
...(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}>
<NumericInputWithUnit <Stack spacing={1} px={4}>
disabled={true} <Typography>{extraOutput.title}</Typography>
defaultPrefix={extraOutput.defaultPrefix} <NumericInputWithUnit
value={{ disabled={true}
value: extraOutputs[extraOutput.title], defaultPrefix={extraOutput.defaultPrefix}
unit: extraOutput.unit value={{
}} value: extraOutputs[extraOutput.title],
/> unit: extraOutput.unit
</TableCell> }}
<TableCell></TableCell> />
</TableRow> </Stack>
)) </Grid>
))}
</Grid>
)
} }
] ]
: []) : [])