added preferred units back to the user settings menu

This commit is contained in:
Carter 2025-06-25 13:44:40 -06:00
parent d3314a1ab9
commit a43ff1a8ad
2 changed files with 165 additions and 10 deletions

View file

@ -16,8 +16,6 @@ export default function AuthWrapper(props: Props) {
const url = new URL(window.location.href); const url = new URL(window.location.href);
const isManualLoginPage = url.pathname.includes("/login"); const isManualLoginPage = url.pathname.includes("/login");
console.log(url.pathname)
console.log(isManualLoginPage)
if (isManualLoginPage) { if (isManualLoginPage) {
const options: RedirectLoginOptions = { const options: RedirectLoginOptions = {
@ -33,7 +31,7 @@ export default function AuthWrapper(props: Props) {
if (parsed.email && parsed.email !== "") { if (parsed.email && parsed.email !== "") {
options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
} }
console.log(options.authorizationParams)
loginWithRedirect(options) loginWithRedirect(options)
} else if (!isAuthenticated && !isLoading) { } else if (!isAuthenticated && !isLoading) {

View file

@ -10,7 +10,7 @@ import {
Textsms as TextIcon, Textsms as TextIcon,
Contrast, Contrast,
} from "@mui/icons-material"; } from "@mui/icons-material";
import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material"; import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, MenuItem, Radio, RadioGroup, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog"; import ResponsiveDialog from "common/ResponsiveDialog";
import UserAvatar from "./UserAvatar"; import UserAvatar from "./UserAvatar";
import { useGlobalState, useUserAPI } from "providers"; import { useGlobalState, useUserAPI } from "providers";
@ -26,8 +26,10 @@ import moment from "moment";
import { IconPicker } from "common/IconPicker"; import { IconPicker } from "common/IconPicker";
import { MuiTelInput } from "mui-tel-input"; import { MuiTelInput } from "mui-tel-input";
import { useThemeMode } from "theme/AppThemeProvider"; import { useThemeMode } from "theme/AppThemeProvider";
import ContractsIcon from "products/CommonIcons/contractIcon"; // import ContractsIcon from "products/CommonIcons/contractIcon";
import UnitsIcon from "@mui/icons-material/Category";
import { setThemeType } from "theme"; import { setThemeType } from "theme";
import { IsAdaptiveAgriculture } from "services/whiteLabel";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
return ({ return ({
@ -77,8 +79,9 @@ export default function UserSettings(props: Props) {
const [profileExpanded, setProfileExpanded] = useState<boolean>(false); const [profileExpanded, setProfileExpanded] = useState<boolean>(false);
const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false); const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false); const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
const [unitsExpanded, setUnitsExpanded] = useState<boolean>(false);
const [avatarUrl, setAvatarUrl] = useState<string>(""); const [avatarUrl, setAvatarUrl] = useState<string>("");
const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode) // const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
useEffect(() => { useEffect(() => {
function changeIcon(icon: string | undefined) { function changeIcon(icon: string | undefined) {
@ -362,6 +365,160 @@ export default function UserSettings(props: Props) {
setThemeType(theme) setThemeType(theme)
}; };
const changePressureUnit = (value: any) => {
let updatedUser = User.clone(user);
let pressureUnit: pond.PressureUnit;
switch (value) {
case 1:
pressureUnit = pond.PressureUnit.PRESSURE_UNIT_KILOPASCALS;
break;
case 2:
pressureUnit = pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER;
break;
default:
pressureUnit = pond.PressureUnit.PRESSURE_UNIT_UNKNOWN;
break;
}
updatedUser.settings.pressureUnit = pressureUnit;
setUser(updatedUser);
};
const changeTemperatureUnit = (value: any) => {
let updatedUser = User.clone(user);
let temperatureUnit: pond.TemperatureUnit;
switch (value) {
case 1:
temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS;
break;
case 2:
temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT;
break;
default:
temperatureUnit = pond.TemperatureUnit.TEMPERATURE_UNIT_UNKNOWN;
break;
}
updatedUser.settings.temperatureUnit = temperatureUnit;
setUser(updatedUser);
};
const changeDistanceUnit = (value: any) => {
let updatedUser = User.clone(user);
let distanceUnit: pond.DistanceUnit;
switch (value) {
case 1:
distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_FEET;
break;
case 2:
distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_METERS;
break;
default:
distanceUnit = pond.DistanceUnit.DISTANCE_UNIT_UNKNOWN;
break;
}
updatedUser.settings.distanceUnit = distanceUnit;
setUser(updatedUser);
};
const changeGrainUnit = (value: any) => {
let updatedUser = User.clone(user);
let grainUnit: pond.GrainUnit;
switch (value) {
case 1:
grainUnit = pond.GrainUnit.GRAIN_UNIT_BUSHELS;
break;
case 2:
grainUnit = pond.GrainUnit.GRAIN_UNIT_WEIGHT;
break;
default:
grainUnit = pond.GrainUnit.GRAIN_UNIT_UNKNOWN;
break;
}
updatedUser.settings.grainUnit = grainUnit;
setUser(updatedUser);
};
const unitPreferences = () => {
const { pressureUnit, temperatureUnit, distanceUnit, grainUnit } = user.settings;
return (
<Grid2 container>
<Grid2 size={{ xs: 12 }}>
<TextField
select
fullWidth
id="pressureUnit"
name="pressureUnit"
label="Pressure Unit"
value={pressureUnit ? pressureUnit : pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER}
onChange={event => changePressureUnit(event.target.value)}
margin="normal"
variant="outlined"
InputLabelProps={{ shrink: true }}>
<MenuItem value={pond.PressureUnit.PRESSURE_UNIT_KILOPASCALS}>
Kilopascals (kPa)
</MenuItem>
<MenuItem value={pond.PressureUnit.PRESSURE_UNIT_INCHES_OF_WATER}>
Inches of Water (iwg)
</MenuItem>
</TextField>
</Grid2>
<Grid2 size={{ xs: 12 }}>
<TextField
select
fullWidth
id="temperatureUnit"
name="temperatureUnit"
label="Temperature Unit"
value={
temperatureUnit ? temperatureUnit : pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS
}
onChange={event => changeTemperatureUnit(event.target.value)}
margin="normal"
variant="outlined"
InputLabelProps={{ shrink: true }}>
<MenuItem value={pond.TemperatureUnit.TEMPERATURE_UNIT_CELSIUS}>Celsius (°C)</MenuItem>
<MenuItem value={pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT}>
Fahrenheit (°F)
</MenuItem>
</TextField>
</Grid2>
<Grid2 size={{ xs: 12 }}>
<TextField
select
fullWidth
id="distanceUnit"
name="distanceUnit"
label="Distance Unit"
value={distanceUnit ? distanceUnit : pond.DistanceUnit.DISTANCE_UNIT_METERS}
onChange={event => changeDistanceUnit(event.target.value)}
margin="normal"
variant="outlined"
InputLabelProps={{ shrink: true }}>
<MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_METERS}>Meters (m)</MenuItem>
<MenuItem value={pond.DistanceUnit.DISTANCE_UNIT_FEET}>Feet (ft)</MenuItem>
</TextField>
</Grid2>
{IsAdaptiveAgriculture() && (
<Grid2 size={{ xs: 12 }}>
<TextField
select
fullWidth
id="grainUnit"
name="grainUnit"
label="Grain Unit"
value={grainUnit ? grainUnit : pond.GrainUnit.GRAIN_UNIT_BUSHELS}
onChange={event => changeGrainUnit(event.target.value)}
margin="normal"
variant="outlined"
InputLabelProps={{ shrink: true }}>
<MenuItem value={pond.GrainUnit.GRAIN_UNIT_BUSHELS}>Bushels (bu)</MenuItem>
<MenuItem value={pond.GrainUnit.GRAIN_UNIT_WEIGHT}>Tonnes (mT)</MenuItem>
</TextField>
</Grid2>
)}
</Grid2>
);
};
const themeToggle = () => { const themeToggle = () => {
return ( return (
<ToggleButtonGroup <ToggleButtonGroup
@ -453,15 +610,15 @@ export default function UserSettings(props: Props) {
</List> </List>
</Collapse> </Collapse>
{/* <Divider /> <Divider />
<ListItem button onClick={() => setUnitsExpanded(!unitsExpanded)}> <ListItemButton onClick={() => setUnitsExpanded(!unitsExpanded)}>
<ListItemIcon> <ListItemIcon>
<UnitsIcon /> <UnitsIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Preferred Units" /> <ListItemText primary="Preferred Units" />
{unitsExpanded ? <ExpandLess /> : <ExpandMore />} {unitsExpanded ? <ExpandLess /> : <ExpandMore />}
</ListItem> </ListItemButton>
<Collapse in={unitsExpanded} timeout="auto" unmountOnExit> <Collapse in={unitsExpanded} timeout="auto" unmountOnExit>
<List component="div"> <List component="div">
<ListItem> <ListItem>
@ -472,7 +629,7 @@ export default function UserSettings(props: Props) {
</List> </List>
</Collapse> </Collapse>
<Divider /> {/* <Divider />
<ListItem button onClick={() => setMapsExpanded(!mapsExpanded)}> <ListItem button onClick={() => setMapsExpanded(!mapsExpanded)}>
<ListItemIcon> <ListItemIcon>