Skip to content

Commit

Permalink
Fix LED order reverting on save and cleanup (OpenStickCommunity#987)
Browse files Browse the repository at this point in the history
  • Loading branch information
@FeralAI
FeralAI authored Apr 27, 2024
1 parent 922acab commit 3834eb9
Showing 1 changed file with 59 additions and 108 deletions.
167 changes: 59 additions & 108 deletions www/src/Pages/LEDConfigPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const defaultValue = {
pledIndex3: -1,
pledIndex4: -1,
pledColor: '#00ff00',
ledButtonMap: {},
};

const schema = yup.object().shape({
Expand Down Expand Up @@ -136,8 +137,26 @@ const schema = yup.object().shape({
.label('PLED Index 4')
.validateMinWhenEqualTo('pledType', 1, 0),
turnOffWhenSuspended: yup.number().label('Turn Off When Suspended'),
ledButtonMap: yup.object(),
});

const createDataSource = (ledButtonMap, buttonLabelType, swapTpShareLabels) => {
let available = {};
let assigned = {};

Object.keys(ledButtonMap).forEach((p) => {
if (ledButtonMap[p] === null) available[p] = ledButtonMap[p];
else assigned[p] = ledButtonMap[p];
});

const dataSources = [
getLedButtons(buttonLabelType, available, true, swapTpShareLabels),
getLedButtons(buttonLabelType, assigned, true, swapTpShareLabels),
];

return dataSources;
}

const getLedButtons = (buttonLabels, map, excludeNulls, swapTpShareLabels) => {
const current_buttons = getButtonLabels(buttonLabels, swapTpShareLabels);
return orderBy(
Expand Down Expand Up @@ -169,93 +188,36 @@ const getLedMap = (buttonLabels, ledButtons, excludeNulls) => {
};

const FormContext = ({
buttonLabels,
buttonLabelType,
ledButtonMap,
ledFormat,
pledColor,
pledType,
swapTpShareLabels,
pledPin1,
pledPin2,
pledPin3,
pledPin4,
pledIndex1,
pledIndex2,
pledIndex3,
pledIndex4,
setDataSources,
}) => {
const { setFieldValue, setValues } = useFormikContext();
const { setValues } = useFormikContext();
const { setLoading } = useContext(AppContext);

useEffect(() => {
async function fetchData() {
const data = await WebApi.getLedOptions(setLoading);

let available = {};
let assigned = {};

Object.keys(data.ledButtonMap).forEach((p) => {
if (data.ledButtonMap[p] === null) available[p] = data.ledButtonMap[p];
else assigned[p] = data.ledButtonMap[p];
});

const dataSources = [
getLedButtons(buttonLabels, available, true, swapTpShareLabels),
getLedButtons(buttonLabels, assigned, true, swapTpShareLabels),
];


const dataSources = createDataSource(data.ledButtonMap, buttonLabelType, swapTpShareLabels);
setDataSources(dataSources);
setValues(data);
}
fetchData();
console.log('update');
}, [buttonLabels, swapTpShareLabels]);

useEffect(() => {
if (!!ledFormat) setFieldValue('ledFormat', parseInt(ledFormat));
}, [ledFormat, setFieldValue]);
fetchData();
}, []);

useEffect(() => {
setFieldValue('ledButtonMap', ledButtonMap);
}, [ledButtonMap, setFieldValue]);

useEffect(() => {
if (!!pledPin1) setFieldValue('pledPin1', parseInt(pledPin1));
}, [pledPin1, setFieldValue]);
useEffect(() => {
if (!!pledPin2) setFieldValue('pledPin2', parseInt(pledPin2));
}, [pledPin2, setFieldValue]);
useEffect(() => {
if (!!pledPin3) setFieldValue('pledPin3', parseInt(pledPin3));
}, [pledPin3, setFieldValue]);
useEffect(() => {
if (!!pledPin4) setFieldValue('pledPin4', parseInt(pledPin4));
}, [pledPin4, setFieldValue]);
useEffect(() => {
if (!!pledIndex1) setFieldValue('pledIndex1', parseInt(pledIndex1));
}, [pledIndex1, setFieldValue]);
useEffect(() => {
if (!!pledIndex2) setFieldValue('pledIndex2', parseInt(pledIndex2));
}, [pledIndex2, setFieldValue]);
useEffect(() => {
if (!!pledIndex3) setFieldValue('pledIndex3', parseInt(pledIndex3));
}, [pledIndex3, setFieldValue]);
useEffect(() => {
if (!!pledIndex4) setFieldValue('pledIndex4', parseInt(pledIndex4));
}, [pledIndex4, setFieldValue]);
useEffect(() => {
if (!!pledColor) setFieldValue('pledColor', pledColor);
}, [pledColor, setFieldValue]);
const dataSources = createDataSource(ledButtonMap, buttonLabelType, swapTpShareLabels);
setDataSources(dataSources);
}, [buttonLabelType, swapTpShareLabels]);

return null;
};

export default function LEDConfigPage() {
const { buttonLabels, updateUsedPins } = useContext(AppContext);
const [saveMessage, setSaveMessage] = useState('');
const [ledButtonMap, setLedButtonMap] = useState([]);
const [dataSources, setDataSources] = useState([[], []]);
const [colorPickerTarget, setColorPickerTarget] = useState(null);
const [showPicker, setShowPicker] = useState(false);
Expand All @@ -271,10 +233,10 @@ export default function LEDConfigPage() {
p[1] = t(`LedConfig:pled-index-label`, { index: n });
});

const ledOrderChanged = (ledOrderArrays, ledsPerButton) => {
const ledOrderChanged = (setFieldValue, ledOrderArrays, ledsPerButton) => {
if (ledOrderArrays.length === 2) {
setLedButtonMap(getLedMap(buttonLabelType, ledOrderArrays[1]));
setRgbLedStartIndex(ledOrderArrays[1].length * (ledsPerButton || 0));
setFieldValue('ledButtonMap', getLedMap(buttonLabelType, ledOrderArrays[1]));
console.log(
'new start index: ',
ledOrderArrays[1].length * (ledsPerButton || 0),
Expand All @@ -289,30 +251,25 @@ export default function LEDConfigPage() {
handleChange(e);
};

const setPledColor = (values, hexColor) => {
values.pledColor = hexColor;
};

const showRgbPledPicker = (e) => {
setColorPickerTarget(e.target);
setShowPicker(true);
};

const toggleRgbPledPicker = (e) => {
e.stopPropagation();
setColorPickerTarget(e.target);
setShowPicker(!showPicker);
};

const onSuccess = async (values) => {
const data = { ...values };
data.pledType = parseInt(values.pledType);
if (data.pledColor) data.pledColor = hexToInt(values.pledColor);
if (!!data.turnOffWhenSuspended)
data.turnOffWhenSuspended = parseInt(values.turnOffWhenSuspended);
const data = {
...values,
pledColor: hexToInt(values.pledColor || '#000000'),
};

const success = await WebApi.setLedOptions(data);
if (success) updateUsedPins();
if (success)
updateUsedPins();

// Need to recreate the DraggableList data source after save
const dataSources = createDataSource(data.ledButtonMap, buttonLabelType, swapTpShareLabels);
setDataSources(dataSources);

setSaveMessage(
success
Expand All @@ -321,13 +278,9 @@ export default function LEDConfigPage() {
);
};

const onSubmit = (e, handleSubmit, setValues, values) => {
setSaveMessage('');
const onSubmit = (e, handleSubmit) => {
e.preventDefault();

values.pledType = parseInt(values.pledType);

setValues(values);
setSaveMessage('');
handleSubmit();
};

Expand All @@ -341,14 +294,13 @@ export default function LEDConfigPage() {
handleSubmit,
handleChange,
handleBlur,
setValues,
values,
errors,
setFieldValue,
}) => (
<Form
noValidate
onSubmit={(e) => onSubmit(e, handleSubmit, setValues, values)}
onSubmit={(e) => onSubmit(e, handleSubmit)}
>
<Section title={t('LedConfig:rgb.header-text')}>
<Row>
Expand All @@ -373,7 +325,7 @@ export default function LEDConfigPage() {
value={values.ledFormat}
error={errors.ledFormat}
isInvalid={errors.ledFormat}
onChange={handleChange}
onChange={(e) => setFieldValue('ledFormat', parseInt(e.target.value))}
>
{LED_FORMATS.map((o, i) => (
<option key={`ledFormat-option-${i}`} value={o.value}>
Expand All @@ -389,7 +341,7 @@ export default function LEDConfigPage() {
value={values.ledLayout}
error={errors.ledLayout}
isInvalid={errors.ledLayout}
onChange={handleChange}
onChange={(e) => setFieldValue('ledLayout', parseInt(e.target.value))}
>
{BUTTON_LAYOUTS.map((o, i) => (
<option key={`ledLayout-option-${i}`} value={o.value}>
Expand Down Expand Up @@ -468,7 +420,7 @@ export default function LEDConfigPage() {
t('LedConfig:rgb-order.assigned-header-text'),
]}
dataSources={dataSources}
onChange={(a) => ledOrderChanged(a, values.ledsPerButton)}
onChange={(a) => ledOrderChanged(setFieldValue, a, values.ledsPerButton)}
/>
</Section>
<Section title={t('LedConfig:player.header-text')}>
Expand All @@ -482,7 +434,7 @@ export default function LEDConfigPage() {
value={values.pledType}
error={errors.pledType}
isInvalid={errors.pledType}
onChange={handleChange}
onChange={(e) => setFieldValue('pledType', parseInt(e.target.value))}
>
<option value="-1" defaultValue={true}>
{t('LedConfig:player.pled-type-off')}
Expand All @@ -504,7 +456,7 @@ export default function LEDConfigPage() {
value={values.pledPin1}
error={errors.pledPin1}
isInvalid={errors.pledPin1}
onChange={handleChange}
onChange={(e) => setFieldValue('pledPin1', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -517,7 +469,7 @@ export default function LEDConfigPage() {
value={values.pledPin2}
error={errors.pledPin2}
isInvalid={errors.pledPin2}
onChange={handleChange}
onChange={(e) => setFieldValue('pledPin2', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -530,7 +482,7 @@ export default function LEDConfigPage() {
value={values.pledPin3}
error={errors.pledPin3}
isInvalid={errors.pledPin3}
onChange={handleChange}
onChange={(e) => setFieldValue('pledPin3', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -543,7 +495,7 @@ export default function LEDConfigPage() {
value={values.pledPin4}
error={errors.pledPin4}
isInvalid={errors.pledPin4}
onChange={handleChange}
onChange={(e) => setFieldValue('pledPin4', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -556,7 +508,7 @@ export default function LEDConfigPage() {
value={values.pledIndex1}
error={errors.pledIndex1}
isInvalid={errors.pledIndex1}
onChange={handleChange}
onChange={(e) => setFieldValue('pledIndex1', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -569,7 +521,7 @@ export default function LEDConfigPage() {
value={values.pledIndex2}
error={errors.pledIndex2}
isInvalid={errors.pledIndex2}
onChange={handleChange}
onChange={(e) => setFieldValue('pledIndex2', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -582,7 +534,7 @@ export default function LEDConfigPage() {
value={values.pledIndex3}
error={errors.pledIndex3}
isInvalid={errors.pledIndex3}
onChange={handleChange}
onChange={(e) => setFieldValue('pledIndex3', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -595,7 +547,7 @@ export default function LEDConfigPage() {
value={values.pledIndex4}
error={errors.pledIndex4}
isInvalid={errors.pledIndex4}
onChange={handleChange}
onChange={(e) => setFieldValue('pledIndex4', parseInt(e.target.value))}
min={0}
/>
<FormControl
Expand All @@ -617,9 +569,9 @@ export default function LEDConfigPage() {
<ColorPicker
name="pledColor"
types={[{ value: values.pledColor }]}
onChange={(c, e) => setPledColor(values, c)}
onDismiss={(e) => setShowPicker(false)}
placement="bottom"
onChange={(c) => setFieldValue('pledColor', c)}
onDismiss={() => setShowPicker(false)}
placement="top"
presetColors={LEDColors.map((c) => ({
title: c.name,
color: c.value,
Expand Down Expand Up @@ -663,11 +615,10 @@ export default function LEDConfigPage() {
{saveMessage ? <span className="alert">{saveMessage}</span> : null}
<FormContext
{...{
buttonLabels: buttonLabelType,
buttonLabelType,
ledButtonMap: values.ledButtonMap,
swapTpShareLabels,
ledButtonMap,
setDataSources,
ledFormat: values.ledFormat,
}}
/>
</Form>
Expand Down

0 comments on commit 3834eb9

Please sign in to comment.