From beeeaee43acb9f2c534e1232a6f9e23301e9401d Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Sun, 15 Sep 2024 21:29:33 +0200
Subject: [PATCH 1/4] Convert FormSelect to ts, add types for label. add
 support for hiding with prop

---
 www/src/Components/FormSelect.jsx | 19 -------------------
 www/src/Components/FormSelect.tsx | 27 +++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 19 deletions(-)
 delete mode 100644 www/src/Components/FormSelect.jsx
 create mode 100644 www/src/Components/FormSelect.tsx

diff --git a/www/src/Components/FormSelect.jsx b/www/src/Components/FormSelect.jsx
deleted file mode 100644
index 226a3256a..000000000
--- a/www/src/Components/FormSelect.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Form } from 'react-bootstrap';
-
-const FormSelect = ({
-	label = null,
-	error = null,
-	groupClassName = '',
-	...props
-}) => {
-	return (
-		<Form.Group className={groupClassName}>
-			{label && <Form.Label>{label}</Form.Label>}
-			<Form.Select {...props} />
-			<Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
-		</Form.Group>
-	);
-};
-
-export default FormSelect;
diff --git a/www/src/Components/FormSelect.tsx b/www/src/Components/FormSelect.tsx
new file mode 100644
index 000000000..d89773c77
--- /dev/null
+++ b/www/src/Components/FormSelect.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Form, FormSelectProps } from 'react-bootstrap';
+
+type FormSelectTypes = {
+	label?: string;
+	error?: string;
+	groupClassName?: string;
+	hidden?: boolean;
+} & FormSelectProps;
+
+const FormSelect = ({
+	label,
+	error,
+	groupClassName = '',
+	hidden = false,
+	...props
+}: FormSelectTypes) => {
+	return (
+		<Form.Group className={groupClassName} hidden={hidden}>
+			{label && <Form.Label>{label}</Form.Label>}
+			<Form.Select {...props} />
+			<Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+		</Form.Group>
+	);
+};
+
+export default FormSelect;

From 8728384ac66eba4ad7b84628e0cbfa18f59c5b4a Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Sun, 15 Sep 2024 21:30:08 +0200
Subject: [PATCH 2/4] Reorder checkboxes for better flow

---
 www/src/Addons/Analog.tsx | 70 ++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/www/src/Addons/Analog.tsx b/www/src/Addons/Analog.tsx
index 29f12eb7b..55a62e9a5 100644
--- a/www/src/Addons/Analog.tsx
+++ b/www/src/Addons/Analog.tsx
@@ -131,6 +131,7 @@ const Analog = ({ values, errors, handleChange, handleCheckbox }) => {
 	const availableAnalogPins = ANALOG_PINS.filter(
 		(pin) => !usedPins?.includes(pin),
 	);
+
 	return (
 		<Section title={t('AddonsConfig:analog-header-text')}>
 			<div id="AnalogInputOptions" hidden={!values.AnalogInputEnabled}>
@@ -289,6 +290,41 @@ const Analog = ({ values, errors, handleChange, handleCheckbox }) => {
 						min={0}
 						max={100}
 					/>
+
+					<FormSelect
+						hidden={!values.forced_circularity}
+						label={t('AddonsConfig:analog-error-label')}
+						name="analog_error"
+						className="form-control-sm"
+						groupClassName="col-sm-3 mb-3"
+						value={values.analog_error}
+						error={errors.analog_error}
+						isInvalid={errors.analog_error}
+						onChange={handleChange}
+					>
+						{ANALOG_ERROR_RATES.map(
+							(o, i) =>
+								console.log(o, 'hehu') || (
+									<option key={`analog_error-option-${i}`} value={o.value}>
+										{o.label}
+									</option>
+								),
+						)}
+					</FormSelect>
+					<FormControl
+						hidden={!values.analog_smoothing}
+						type="number"
+						label={t('AddonsConfig:smoothing-factor')}
+						name="smoothing_factor"
+						className="form-control-sm"
+						groupClassName="col-sm-3 mb-3"
+						value={values.smoothing_factor}
+						error={errors.smoothing_factor}
+						isInvalid={errors.smoothing_factor}
+						onChange={handleChange}
+						min={0}
+						max={100}
+					/>
 					<FormCheck
 						label={t('AddonsConfig:analog-force-circularity')}
 						type="switch"
@@ -301,26 +337,6 @@ const Analog = ({ values, errors, handleChange, handleCheckbox }) => {
 							handleChange(e);
 						}}
 					/>
-					<FormSelect
-						hidden={!Boolean(values.forced_circularity)}
-						label={t('AddonsConfig:analog-error-label')}
-						name="analog_error"
-						className="form-control-sm"
-						groupClassName="col-sm-3 mb-3"
-						value={values.analog_error}
-						error={errors.analog_error}
-						isInvalid={errors.analog_error}
-						onChange={handleChange}
-					>
-						{ANALOG_ERROR_RATES.map((o, i) => (
-							<option
-								key={`analog_error-option-${i}`}
-								value={o.value}
-							>
-								{o.label}
-							</option>
-						))}
-					</FormSelect>
 					<FormCheck
 						label={t('AddonsConfig:analog-auto-calibrate')}
 						type="switch"
@@ -345,20 +361,6 @@ const Analog = ({ values, errors, handleChange, handleCheckbox }) => {
 							handleChange(e);
 						}}
 					/>
-					<FormControl
-						hidden={!values.analog_smoothing}
-						type="number"
-						label={t('AddonsConfig:smoothing-factor')}
-						name="smoothing_factor"
-						className="form-control-sm"
-						groupClassName="col-sm-3 mb-3"
-						value={values.smoothing_factor}
-						error={errors.smoothing_factor}
-						isInvalid={errors.smoothing_factor}
-						onChange={handleChange}
-						min={0}
-						max={100}
-					/>
 				</Row>
 			</div>
 			<FormCheck

From 1f9ddd7fe670b5d147ac05f12b600a550ebd01c0 Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Sun, 15 Sep 2024 21:35:48 +0200
Subject: [PATCH 3/4] Fix key error for focus mode

---
 www/src/Addons/FocusMode.tsx | 59 ++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/www/src/Addons/FocusMode.tsx b/www/src/Addons/FocusMode.tsx
index ac444fb8e..606ee89e4 100644
--- a/www/src/Addons/FocusMode.tsx
+++ b/www/src/Addons/FocusMode.tsx
@@ -93,36 +93,35 @@ const FocusMode = ({
 						/>
 					</div>
 					<Row>
-						{BUTTON_MASKS_OPTIONS.map((mask) =>
-							values.focusModeButtonLockMask & mask.value ? (
-								<FormSelect
-									key={`focusModeButtonLockMask-${mask.label}`}
-									name="focusModeButtonLockMask"
-									className="form-select-sm"
-									groupClassName="col-sm-3 mb-3"
-									value={values.focusModeButtonLockMask & mask.value}
-									error={errors.focusModeButtonLockMask}
-									isInvalid={errors.focusModeButtonLockMask}
-									onChange={(e) => {
-										setFieldValue(
-											'focusModeButtonLockMask',
-											(values.focusModeButtonLockMask ^ mask.value) |
-												e.target.value,
-										);
-									}}
-								>
-									{BUTTON_MASKS_OPTIONS.map((o, i) => (
-										<option
-											key={`focusModeButtonLockMask-option-${i}`}
-											value={o.value}
-										>
-											{o.label}
-										</option>
-									))}
-								</FormSelect>
-							) : (
-								<></>
-							),
+						{BUTTON_MASKS_OPTIONS.map(
+							(mask) =>
+								Boolean(values.focusModeButtonLockMask & mask.value) && (
+									<FormSelect
+										key={`focusModeButtonLockMask-${mask.label}`}
+										name="focusModeButtonLockMask"
+										className="form-select-sm"
+										groupClassName="col-sm-3 mb-3"
+										value={values.focusModeButtonLockMask & mask.value}
+										error={errors.focusModeButtonLockMask}
+										isInvalid={errors.focusModeButtonLockMask}
+										onChange={(e) => {
+											setFieldValue(
+												'focusModeButtonLockMask',
+												(values.focusModeButtonLockMask ^ mask.value) |
+													e.target.value,
+											);
+										}}
+									>
+										{BUTTON_MASKS_OPTIONS.map((o, i) => (
+											<option
+												key={`focusModeButtonLockMask-option-${i}`}
+												value={o.value}
+											>
+												{o.label}
+											</option>
+										))}
+									</FormSelect>
+								),
 						)}
 						<FormSelect
 							name="focusModeButtonLockMask"

From 9177d9a1c5b21733fd656fe573bdb4b9f87a4dab Mon Sep 17 00:00:00 2001
From: ian <ian@vidales.se>
Date: Sun, 15 Sep 2024 21:37:32 +0200
Subject: [PATCH 4/4] Remove logging used to check values

---
 www/src/Addons/Analog.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/www/src/Addons/Analog.tsx b/www/src/Addons/Analog.tsx
index 55a62e9a5..f5b75ed7e 100644
--- a/www/src/Addons/Analog.tsx
+++ b/www/src/Addons/Analog.tsx
@@ -302,14 +302,11 @@ const Analog = ({ values, errors, handleChange, handleCheckbox }) => {
 						isInvalid={errors.analog_error}
 						onChange={handleChange}
 					>
-						{ANALOG_ERROR_RATES.map(
-							(o, i) =>
-								console.log(o, 'hehu') || (
-									<option key={`analog_error-option-${i}`} value={o.value}>
-										{o.label}
-									</option>
-								),
-						)}
+						{ANALOG_ERROR_RATES.map((o, i) => (
+							<option key={`analog_error-option-${i}`} value={o.value}>
+								{o.label}
+							</option>
+						))}
 					</FormSelect>
 					<FormControl
 						hidden={!values.analog_smoothing}