diff --git a/src/client/app/components/meters/EditMeterModalComponent.tsx b/src/client/app/components/meters/EditMeterModalComponent.tsx index 6d1db44e1..8147085cd 100644 --- a/src/client/app/components/meters/EditMeterModalComponent.tsx +++ b/src/client/app/components/meters/EditMeterModalComponent.tsx @@ -180,6 +180,34 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr setLocalMeterEdits({ ...localMeterEdits, [e.target.name]: JSON.parse(e.target.value) }); }; + // Function handles the selection of a new displayable. + const handleDisplayableChange = (e: React.ChangeEvent) => { + // If there is a potential issue then the admin will decide if save happens. Otherwise, the value is put into state. + let save = true; + if (!JSON.parse(e.target.value)) { + // This will hold the overall message for the admin alert. + let msg = ''; + // This will hold the names of groups that are affected. + let groups = ''; + // Tells if the change should be cancelled. + // Checks for groups that include the meter being edited. + for (const groupId of Object.values(groupDataByID)) { + if (groupId.displayable && groupId.deepMeters.includes(meterState.id)) { + groups += `${groupId.name}\n`; + } + } + if (groups != '') { + // There is a message to display to the user. + msg += `${translate('meter')} "${meterState.name}" ${translate('meter.edit.displayable.warning')}\n`; + msg += `${groups + '\n' + translate('meter.edit.displayable.verify')}\n`; + save = window.confirm(msg); + } + } + if (save) { + handleBooleanChange(e); + } + }; + const handleNumberChange = (e: React.ChangeEvent) => { setLocalMeterEdits({ ...localMeterEdits, [e.target.name]: Number(e.target.value) }); }; @@ -306,7 +334,7 @@ export default function EditMeterModalComponent(props: EditMeterModalComponentPr name='displayable' type='select' value={localMeterEdits.displayable?.toString()} - onChange={e => handleBooleanChange(e)} + onChange={e => handleDisplayableChange(e)} invalid={localMeterEdits.displayable && localMeterEdits.unitId === -99}> {Object.keys(TrueFalseType).map(key => { return (); diff --git a/src/client/app/translations/data.ts b/src/client/app/translations/data.ts index 740311d8c..dfceea2a6 100644 --- a/src/client/app/translations/data.ts +++ b/src/client/app/translations/data.ts @@ -328,6 +328,8 @@ const LocaleTranslationData = { "meter.cumulativeReset": "Cumulative Reset:", "meter.cumulativeResetEnd": "Cumulative Reset End:", "meter.cumulativeResetStart": "Cumulative Reset Start:", + "meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:", + "meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?", "meter.enabled": "Updates:", "meter.endOnlyTime": "Only End Times:", "meter.endTimeStamp": "End Time Stamp:", @@ -698,7 +700,7 @@ const LocaleTranslationData = { "group.edit.empty": "Removing this meter/group means there are no child meters or groups which is not allowed. Delete the group if you want to remove it.\u{26A1}", "group.edit.nocompatible": "would have no compatible units by the edit to this group so the edit is cancelled\u{26A1}", "group.edit.nounit": "will have its compatible units changed and its default graphic unit set to \"no unit\" by the edit to this group\u{26A1}", - "group.edit.verify": "or continue (click OK)?\u{26A1}", + "group.edit.verify": "Given the messages, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}", "group.failed.to.create.group": "Failed to create a group with message: \u{26A1}", "group.failed.to.edit.group": "Failed to edit group with message: \u{26A1}", "group.gps.error": "Please input a valid GPS: (latitude, longitude)\u{26A1}", @@ -829,6 +831,8 @@ const LocaleTranslationData = { "meter.cumulativeReset": "Cumulative Reset:\u{26A1}", "meter.cumulativeResetEnd": "Cumulative Reset End:\u{26A1}", "meter.cumulativeResetStart": "Cumulative Reset Start:\u{26A1}", + "meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:\u{26A1}", + "meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}", "meter.enabled": "Mises à Jour du Mèters", "meter.endOnlyTime": "End Only Time:\u{26A1}", "meter.endTimeStamp": "End Time Stamp:\u{26A1}", @@ -1331,6 +1335,8 @@ const LocaleTranslationData = { "meter.cumulativeReset": "Reinicio cumulativo:", "meter.cumulativeResetEnd": "Final del reinicio cumulativo:", "meter.cumulativeResetStart": "Comienzo del reinicio cumulativo:", + "meter.edit.displayable.warning": "is not displayable but is used by the following displayable groups:\u{26A1}", + "meter.edit.displayable.verify": "Given the group(s) listed above, do you want to cancel this change (click Cancel) or continue (click OK)?\u{26A1}", "meter.enabled": "Medidor activado", "meter.endOnlyTime": "Solo tiempos finales.", "meter.endTimeStamp": "Marca de tiempo al final:",