Skip to content

Commit

Permalink
Fix: Values of settings only update visually on save (#32)
Browse files Browse the repository at this point in the history 
* Ensure settings values can be iterated on before save

* ensure only integers are provided

* async loaded initial values update UI

Co-authored-by: Ingo Jaeckel <ingo.jaeckel@gmail.com>
  • Loading branch information
@ingojaeckel
ingojaeckel and Ingo Jaeckel committed Jul 27, 2022
1 parent 78d3e4f commit 95c8b0b
Showing 1 changed file with 64 additions and 20 deletions.
84 changes: 64 additions & 20 deletions frontend/src/components/SetupComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React, { useState, useEffect, ChangeEvent } from 'react';
import axios from 'axios';
import { BaseUrl } from '../conf/config'
import { SettingsResponse } from '../models/response'
import { ButtonGroup, Button, Select, MenuItem, Slider, Typography } from '@material-ui/core';
import { ButtonGroup, Button, Select, MenuItem, Typography, TextField, Grid } from '@material-ui/core';

export default function SetupComponent() {
const [state, setState] = useState<SettingsResponse>({
// Initial values shown while current config is loaded async
SecondsBetweenCaptures: 60,
OffsetWithinHour: 0,
PhotoResolutionWidth: 3280,
Expand All @@ -25,6 +26,7 @@ export default function SetupComponent() {
.then(resp => {
if (resp.data) {
setState(resp.data);
updateForm(resp.data);
}
});
}, []);
Expand All @@ -48,31 +50,73 @@ export default function SetupComponent() {
});
};

const handleOffsetChanged = (_event: ChangeEvent<{}>, value: number | number[]) => setState(Object.assign(state, { OffsetWithinHour: value as number }));
const handleQualityChanged = (_event: ChangeEvent<{}>, value: number | number[]) => setState(Object.assign(state, { Quality: value as number }));
const handleRotationChanged = (_event: ChangeEvent<{}>, value: number | number[]) => setState(Object.assign(state, { RotateBy: value as number }));
const handleTimeBetweenCapturesChanged = (_event: ChangeEvent<{}>, value: number | number[]) => setState(Object.assign(state, { SecondsBetweenCaptures: (value as number) * 60 }));
// TODO replace this with proper binding
function updateForm(data: SettingsResponse) {
const fieldSecondsBetweenCaptures = document.getElementById("tfSecondsBetweenCaptures") as HTMLInputElement | null
const fieldOffset = document.getElementById("tfOffset") as HTMLInputElement | null
const fieldRotation = document.getElementById("tfRotation") as HTMLInputElement | null
const fieldQuality = document.getElementById("tfQuality") as HTMLInputElement | null

if (fieldSecondsBetweenCaptures) {
fieldSecondsBetweenCaptures.value = (data.SecondsBetweenCaptures / 60).toString();
}
if (fieldOffset) {
fieldOffset.value = data.OffsetWithinHour.toString();
}
if (fieldRotation) {
fieldRotation.value = data.RotateBy.toString();
}
if (fieldQuality) {
fieldQuality.value = data.Quality.toString();
}
}

const handleOffsetChanged = (e: ChangeEvent<HTMLInputElement>) => setState(Object.assign(state, { OffsetWithinHour: parseInt(e.target.value) as number }));
const handleQualityChanged = (e: ChangeEvent<HTMLInputElement>) => setState(Object.assign(state, { Quality: parseInt(e.target.value) as number }));
const handleRotationChanged = (e: ChangeEvent<HTMLInputElement>) => setState(Object.assign(state, { RotateBy: parseInt(e.target.value) as number }));
const handleTimeBetweenCapturesChanged = (e: ChangeEvent<HTMLInputElement>) => setState(Object.assign(state, { SecondsBetweenCaptures: (parseInt(e.target.value) as number) * 60 }));

// TODO Fix bug: Values only update on save
return (
<React.Fragment>
<div>
<Typography variant="h4" component="h4">Settings</Typography>
</div>
<div>
<Typography gutterBottom>Time between captures (minutes): {state.SecondsBetweenCaptures/60}</Typography>
<Slider valueLabelDisplay="auto" step={1} marks min={1} max={30} value={state.SecondsBetweenCaptures/60} onChange={handleTimeBetweenCapturesChanged} />
<Typography gutterBottom>Delay within value hour before first capture (minutes): {state.OffsetWithinHour}</Typography>
<Slider valueLabelDisplay="auto" step={5} marks min={0} max={30} value={state.OffsetWithinHour} onChange={handleOffsetChanged} />
<Typography gutterBottom>Photo Resolution (pixels)</Typography>
<Select defaultValue={0}>
<MenuItem value={0}>3280x2464</MenuItem>
</Select>
<Typography gutterBottom>Rotation (degrees): {state.RotateBy}</Typography>
<Slider valueLabelDisplay="auto" step={180} marks min={0} max={180} value={state.RotateBy} onChange={handleRotationChanged} />
<Typography gutterBottom>Photo Quality (0..100%): {state.Quality}</Typography>
<Slider valueLabelDisplay="auto" step={5} marks min={0} max={100} value={state.Quality} onChange={handleQualityChanged} />
</div>
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography gutterBottom>Time between captures (minutes):</Typography>
</Grid>
<Grid item xs={6}>
<TextField id="tfSecondsBetweenCaptures" type="number" onChange={handleTimeBetweenCapturesChanged} defaultValue={state.SecondsBetweenCaptures/60} inputProps={{ inputMode: 'numeric', pattern: '[0-9]+' }} />
</Grid>
<Grid item xs={6}>
<Typography gutterBottom>Delay within value hour before first capture (minutes):</Typography>
</Grid>
<Grid item xs={6}>
<TextField id="tfOffset" type="number" defaultValue={state.OffsetWithinHour} onChange={handleOffsetChanged} inputProps={{ inputMode: 'numeric', pattern: '[0-9]+' }} />
</Grid>
<Grid item xs={6}>
<Typography gutterBottom>Photo Resolution (pixels)</Typography>
</Grid>
<Grid item xs={6}>
<Select defaultValue={0}>
<MenuItem value={0}>3280x2464</MenuItem>
</Select>
</Grid>
<Grid item xs={6}>
<Typography gutterBottom>Rotation (degrees):</Typography>
</Grid>
<Grid item xs={6}>
<TextField id="tfRotation" type="number" defaultValue={state.RotateBy} onChange={handleRotationChanged} inputProps={{ inputMode: 'numeric', pattern: '[0-9]+' }} />
</Grid>
<Grid item xs={6}>
<Typography gutterBottom>Photo Quality (0..100%):</Typography>
</Grid>
<Grid item xs={6}>
<TextField id="tfQuality" type="number" defaultValue={state.Quality} onChange={handleQualityChanged} inputProps={{ inputMode: 'numeric', pattern: '[0-9]+' }} />
</Grid>
<Grid item xs={6}>
</Grid>
</Grid>
<ButtonGroup color="primary" aria-label="outlined primary button group">
<Button onClick={handleSaveSettingsClicked}>Save</Button>
<Button onClick={handleRestartClicked}>Restart</Button>
Expand Down

0 comments on commit 95c8b0b

Please sign in to comment.