yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add alarm toggle functionality in DetailTag component

Browse Source
This commit is contained in:
Rafiafrzl
2025-10-15 22:19:16 +07:00
parent 1bde2a0fd0
commit 23db974695
1 changed files with 70 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/pages/master/tag/component/DetailTag.jsx
View File

@@ -23,6 +23,7 @@ const DetailTag = (props) => {
unit: '',
device_name: '', // Read-only, auto-display dari device yang dipilih
is_active: true,
alarm: false,
device_id: null, // akan set ketika user select device dari dropdown
sub_section_id: null,
};
@@ -144,6 +145,7 @@ const DetailTag = (props) => {
data_type: FormData.data_type,
unit: FormData.unit,
is_active: FormData.is_active,
alarm: FormData.alarm,
device_id: parseInt(FormData.device_id),
};
@@ -221,6 +223,13 @@ const DetailTag = (props) => {
});
};
const handleAlarmToggle = (isChecked) => {
setFormData({
...FormData,
alarm: isChecked,
});
};
const loadDevices = async () => {
setLoadingDevices(true);
try {
@@ -276,6 +285,7 @@ const DetailTag = (props) => {
unit: props.selectedData.unit || '',
device_name: props.selectedData.device_name || '',
is_active: props.selectedData.is_active ?? true,
alarm: props.selectedData.alarm ?? false,
device_id: props.selectedData.device_id || null,
sub_section_id: props.selectedData.sub_section_id || null,
};
@@ -365,31 +375,75 @@ const DetailTag = (props) => {
/>
</div>
)}
{/* Status dipindah ke atas Tag Name */}
{/* Status dan Alarm dalam satu baris */}
<div style={{ marginBottom: 12 }}>
<div>
<Text strong>Status</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
justifyContent: 'space-between',
gap: '16px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
{/* Status Toggle */}
<div style={{ flex: 1 }}>
<div>
<Text strong>Status</Text>
</div>
<div
style={{
backgroundColor:
FormData.is_active === true ? '#23A55A' : '#bfbfbf',
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
checked={FormData.is_active === true}
onChange={handleStatusToggle}
/>
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
FormData.is_active === true
? '#23A55A'
: '#bfbfbf',
}}
checked={FormData.is_active === true}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>
{FormData.is_active === true ? 'Active' : 'Inactive'}
</Text>
</div>
</div>
</div>
<div>
<Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
{/* Alarm Toggle */}
<div style={{ flex: 1 }}>
<div>
<Text strong>Alarm</Text>
<Text style={{ color: 'red' }}> *</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
FormData.alarm === true ? '#23A55A' : '#bfbfbf',
}}
checked={FormData.alarm === true}
onChange={handleAlarmToggle}
/>
</div>
<div>
<Text>{FormData.alarm === true ? 'Yes' : 'No'}</Text>
</div>
</div>
</div>
</div>
</div>