From 95c8b0b809e2f56dbc30ca7b4035e6be49c15a28 Mon Sep 17 00:00:00 2001
From: Ingo <ingo.jaeckel@googlemail.com>
Date: Wed, 27 Jul 2022 21:32:10 +0100
Subject: [PATCH] Fix: Values of settings only update visually on save (#32)

* 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>
---
 frontend/src/components/SetupComponent.tsx | 84 ++++++++++++++++------
 1 file changed, 64 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/SetupComponent.tsx b/frontend/src/components/SetupComponent.tsx
index 1d50b6c..aeda0a4 100644
--- a/frontend/src/components/SetupComponent.tsx
+++ b/frontend/src/components/SetupComponent.tsx
@@ -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,
@@ -25,6 +26,7 @@ export default function SetupComponent() {
       .then(resp => {
         if (resp.data) {
           setState(resp.data);
+          updateForm(resp.data);
         }
       });
   }, []);
@@ -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>