github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/views/SettingsView.tsx (about)

     1  import React, { useState } from "react";
     2  import { connect, ConnectedProps } from "react-redux";
     3  import Container from "@material-ui/core/Container";
     4  import { makeStyles } from "@material-ui/core/styles";
     5  import Grid from "@material-ui/core/Grid";
     6  import Paper from "@material-ui/core/Paper";
     7  import Typography from "@material-ui/core/Typography";
     8  import Slider from "@material-ui/core/Slider";
     9  import { pollIntervalChange, selectTheme } from "../actions/settingsActions";
    10  import { AppState } from "../store";
    11  import FormControl from "@material-ui/core/FormControl/FormControl";
    12  import Select from "@material-ui/core/Select";
    13  import MenuItem from "@material-ui/core/MenuItem";
    14  import { ThemePreference } from "../reducers/settingsReducer";
    15  
    16  const useStyles = makeStyles((theme) => ({
    17    container: {
    18      paddingTop: theme.spacing(4),
    19      paddingBottom: theme.spacing(4),
    20    },
    21    paper: {
    22      padding: theme.spacing(2),
    23      display: "flex",
    24      overflow: "auto",
    25      flexDirection: "column",
    26    },
    27    formControl: {
    28      margin: theme.spacing(1),
    29      display: "flex",
    30      justifyContent: "space-between",
    31      flexDirection: "row",
    32      alignItems: "center",
    33    },
    34    selectEmpty: {
    35      marginTop: theme.spacing(2),
    36    },
    37    select: {
    38      width: "200px",
    39    },
    40  }));
    41  
    42  function mapStateToProps(state: AppState) {
    43    return {
    44      pollInterval: state.settings.pollInterval,
    45      themePreference: state.settings.themePreference,
    46    };
    47  }
    48  
    49  const mapDispatchToProps = { pollIntervalChange, selectTheme };
    50  
    51  const connector = connect(mapStateToProps, mapDispatchToProps);
    52  
    53  type PropsFromRedux = ConnectedProps<typeof connector>;
    54  
    55  function SettingsView(props: PropsFromRedux) {
    56    const classes = useStyles();
    57  
    58    const [sliderValue, setSliderValue] = useState(props.pollInterval);
    59    const handleSliderValueChange = (event: any, val: number | number[]) => {
    60      setSliderValue(val as number);
    61    };
    62  
    63    const handleSliderValueCommited = (event: any, val: number | number[]) => {
    64      props.pollIntervalChange(val as number);
    65    };
    66  
    67    const handleThemeChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    68      props.selectTheme(event.target.value as ThemePreference);
    69    };
    70    return (
    71      <Container maxWidth="lg" className={classes.container}>
    72        <Grid container spacing={3} justify="center">
    73          <Grid item xs={1} />
    74          <Grid item xs={6}>
    75            <Typography variant="h5" color="textPrimary">
    76              Settings
    77            </Typography>
    78          </Grid>
    79          <Grid item xs={5} />
    80  
    81          <Grid item xs={1} />
    82          <Grid item xs={6}>
    83            <Paper className={classes.paper} variant="outlined">
    84              <Typography color="textPrimary">Polling Interval</Typography>
    85              <Typography gutterBottom color="textSecondary" variant="subtitle1">
    86                Web UI will fetch live data with the specified interval
    87              </Typography>
    88              <Typography gutterBottom color="textSecondary" variant="subtitle1">
    89                Currently: Every{" "}
    90                {sliderValue === 1 ? "second" : `${sliderValue} seconds`}
    91              </Typography>
    92              <Slider
    93                value={sliderValue}
    94                onChange={handleSliderValueChange}
    95                onChangeCommitted={handleSliderValueCommited}
    96                aria-labelledby="continuous-slider"
    97                valueLabelDisplay="auto"
    98                step={1}
    99                marks={true}
   100                min={2}
   101                max={20}
   102              />
   103            </Paper>
   104          </Grid>
   105          <Grid xs={5} />
   106  
   107          <Grid item xs={1} />
   108          <Grid item xs={6}>
   109            <Paper className={classes.paper} variant="outlined">
   110              <FormControl variant="outlined" className={classes.formControl}>
   111                <Typography color="textPrimary">Dark Theme</Typography>
   112                <Select
   113                  labelId="theme-label"
   114                  id="theme-selected"
   115                  value={props.themePreference}
   116                  onChange={handleThemeChange}
   117                  label="theme preference"
   118                  className={classes.select}
   119                >
   120                  <MenuItem value={ThemePreference.SystemDefault}>
   121                    System Default
   122                  </MenuItem>
   123                  <MenuItem value={ThemePreference.Always}>Always</MenuItem>
   124                  <MenuItem value={ThemePreference.Never}>Never</MenuItem>
   125                </Select>
   126              </FormControl>
   127            </Paper>
   128          </Grid>
   129          <Grid item xs={5} />
   130        </Grid>
   131      </Container>
   132    );
   133  }
   134  
   135  export default connector(SettingsView);