Initial commit

ui/src/views/SettingsView.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { connect, ConnectedProps } from "react-redux";
+import Container from "@material-ui/core/Container";
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import { Typography } from "@material-ui/core";
+import Slider from "@material-ui/core/Slider/Slider";
+import { pollIntervalChange } from "../actions/settingsActions";
+import { AppState } from "../store";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+  },
+}));
+
+function mapStateToProps(state: AppState) {
+  return {
+    pollInterval: state.settings.pollInterval,
+  };
+}
+
+const mapDispatchToProps = { pollIntervalChange };
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+function SettingsView(props: PropsFromRedux) {
+  const classes = useStyles();
+
+  const [sliderValue, setSliderValue] = useState(props.pollInterval);
+  const handleSliderValueChange = (event: any, val: number | number[]) => {
+    setSliderValue(val as number);
+  };
+
+  const handleSliderValueCommited = (event: any, val: number | number[]) => {
+    props.pollIntervalChange(val as number);
+  };
+
+  return (
+    <Container maxWidth="lg" className={classes.container}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h5">Settings</Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper className={classes.paper} variant="outlined">
+            <Typography gutterBottom color="primary">
+              Polling Interval (Every {sliderValue} seconds)
+            </Typography>
+            <Slider
+              value={sliderValue}
+              onChange={handleSliderValueChange}
+              onChangeCommitted={handleSliderValueCommited}
+              aria-labelledby="continuous-slider"
+              valueLabelDisplay="auto"
+              step={1}
+              marks={true}
+              min={2}
+              max={20}
+            />
+          </Paper>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default connector(SettingsView);