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

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

@@ -1,15 +1,4 @@
import {
Autocomplete,
Box,
Radio,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField
} from '@mui/material';
import { Autocomplete, Box, Radio, Stack, TextField } from '@mui/material';
import React, { useContext, useState } from 'react';
import ToolContent from '@components/ToolContent';
import { ToolComponentProps } from '@tools/defineTool';
@@ -290,60 +279,41 @@ export default async function makeTool(
{
title: 'Variables',
component: (
<Table>
<TableHead>
<TableRow>
<TableCell>Value</TableCell>
<TableCell>Solve For</TableCell>
</TableRow>
</TableHead>
<TableBody>
{calcData.variables.map((variable) => (
<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>
<Box>
<Grid container spacing={2} sx={{ mb: 2 }}>
<Grid item xs={10}></Grid>
<Grid item xs={2}>
<Typography fontWeight="bold" align="center">
Solve For
</Typography>
</Grid>
</Grid>
{variable.alternates?.map((alt) => (
<TableRow key={alt.title}>
<TableCell>{alt.title}</TableCell>
<TableCell>
{calcData.variables.map((variable) => (
<Box
key={variable.name}
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
key={alt.title}
defaultPrefix={alt.defaultPrefix || ''}
value={{
value:
getAlternate(
alt,
variable,
values.vars[variable.name]
) || NaN,
unit: alt.unit || ''
}}
defaultPrefix={variable.defaultPrefix}
value={values.vars[variable.name]}
disabled={
values.outputVariable === variable.name ||
valsBoundToPreset[variable.name] !==
@@ -356,20 +326,76 @@ export default async function makeTool(
onOwnChange={(val) =>
updateVarField(
variable.name,
getMainFromAlternate(alt, variable, val),
variable.unit,
val.value,
val.unit,
values,
updateField
)
}
></NumericInputWithUnit>
</TableCell>
</TableRow>
))}
</Table>
</TableCell>
/>
</Stack>
</Box>
<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
value={variable.name}
checked={values.outputVariable === variable.name}
@@ -384,33 +410,36 @@ export default async function makeTool(
)
}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Grid>
</Grid>
</Box>
))}
</Box>
)
},
...(calcData.extraOutputs
? [
{
title: 'Extra outputs',
component: calcData.extraOutputs?.map((extraOutput) => (
<TableRow key={extraOutput.title}>
<TableCell>
{extraOutput.title}
<NumericInputWithUnit
disabled={true}
defaultPrefix={extraOutput.defaultPrefix}
value={{
value: extraOutputs[extraOutput.title],
unit: extraOutput.unit
}}
/>
</TableCell>
<TableCell></TableCell>
</TableRow>
))
component: (
<Grid container spacing={2}>
{calcData.extraOutputs?.map((extraOutput) => (
<Grid item xs={12} key={extraOutput.title}>
<Stack spacing={1} px={4}>
<Typography>{extraOutput.title}</Typography>
<NumericInputWithUnit
disabled={true}
defaultPrefix={extraOutput.defaultPrefix}
value={{
value: extraOutputs[extraOutput.title],
unit: extraOutput.unit
}}
/>
</Stack>
</Grid>
))}
</Grid>
)
}
]
: [])