Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Values of settings only update visually on save #32

Merged
merged 3 commits into from
Jul 27, 2022
Merged

Fix: Values of settings only update visually on save #32

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7bcd674
Ensure settings values can be iterated on before save
Jul 24, 2022
cbdbeff
ensure only integers are provided
Jul 24, 2022
ab40bbd
async loaded initial values update UI
Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 64 additions & 20 deletions frontend/src/components/SetupComponent.tsx
View file
Open in desktop
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