diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx
index f907c36a1..e590a74d4 100644
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/interface/src/project/SettingsCustomization.tsx
@@ -249,19 +249,27 @@ const SettingsCustomization: FC = () => {
}
};
+ const getChanges = () => {
+ if (!deviceEntities || selectedDevice === -1) {
+ return [];
+ }
+
+ return deviceEntities
+ .filter((de) => de.m !== de.o_m || de.cn !== de.o_cn || de.ma !== de.o_ma || de.mi !== de.o_mi)
+ .map(
+ (new_de) =>
+ new_de.m.toString(16).padStart(2, '0') +
+ new_de.id +
+ (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
+ (new_de.cn ? new_de.cn : '') +
+ (new_de.mi ? '>' + new_de.mi : '') +
+ (new_de.ma ? '<' + new_de.ma : '')
+ );
+ };
+
const saveCustomization = async () => {
if (devices && deviceEntities && selectedDevice !== -1) {
- const masked_entities = deviceEntities
- .filter((de) => de.m !== de.o_m || de.cn !== de.o_cn || de.ma !== de.o_ma || de.mi !== de.o_mi)
- .map(
- (new_de) =>
- new_de.m.toString(16).padStart(2, '0') +
- new_de.id +
- (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
- (new_de.cn ? new_de.cn : '') +
- (new_de.mi ? '>' + new_de.mi : '') +
- (new_de.ma ? '<' + new_de.ma : '')
- );
+ const masked_entities = getChanges();
// check size in bytes to match buffer in CPP, which is 4096
const bytes = new TextEncoder().encode(JSON.stringify(masked_entities)).length;
@@ -545,35 +553,41 @@ const SettingsCustomization: FC = () => {
);
- const renderContent = () => (
- <>
-
- {LL.DEVICE_ENTITIES()}
-
- {renderDeviceList()}
- {renderDeviceData()}
-
-
+ const renderContent = () => {
+ const num_changes = getChanges().length;
+
+ return (
+ <>
+
+ {LL.DEVICE_ENTITIES()}
+
+ {renderDeviceList()}
+ {renderDeviceData()}
+
+
+
+ {num_changes !== 0 && (
+ } variant="outlined" color="primary" onClick={() => saveCustomization()}>
+ {LL.APPLY_CHANGES(num_changes)}
+
+ )}
+
+
- } variant="outlined" color="primary" onClick={() => saveCustomization()}>
- {LL.SAVE()}
+ }
+ variant="outlined"
+ color="error"
+ onClick={() => setConfirmReset(true)}
+ >
+ {LL.RESET(0)}
-
- }
- variant="outlined"
- color="error"
- onClick={() => setConfirmReset(true)}
- >
- {LL.RESET(0)}
-
-
-
- {renderResetDialog()}
- >
- );
+ {renderResetDialog()}
+ >
+ );
+ };
const renderEditDialog = () => {
if (deviceEntity) {
@@ -582,48 +596,7 @@ const SettingsCustomization: FC = () => {