@@ -246,7 +246,8 @@ const ExportData = (props) => {
246
246
hidden = { value !== index }
247
247
id = { `data-export-tabpanel-${ index } ` }
248
248
aria-labelledby = { `data-export-tab-${ index } ` }
249
- { ...other } >
249
+ { ...other }
250
+ >
250
251
{ value === index && < div sx = { { p : 3 } } > { children } </ div > }
251
252
</ div >
252
253
) ;
@@ -626,9 +627,10 @@ const ExportData = (props) => {
626
627
paddingBottom = { '12px' }
627
628
color = { 'grey.700' }
628
629
fontSize = { '14px' }
629
- fontWeight = { 300 } >
630
- Customize the data you want to download. We recommend scheduling your downloads for bulky
631
- data/time periods greater than a month to avoid timeouts.
630
+ fontWeight = { 300 }
631
+ >
632
+ Customize the data you want to download. We recommend downloading data for shorter time
633
+ periods like a week or a month to avoid timeouts.
632
634
</ Box >
633
635
634
636
< Grid container spacing = { 4 } >
@@ -638,7 +640,8 @@ const ExportData = (props) => {
638
640
className = { clsx ( classes . root , className ) }
639
641
style = { {
640
642
overflow : 'visible'
641
- } } >
643
+ } }
644
+ >
642
645
< Tabs
643
646
value = { value }
644
647
onChange = { handleChangeTabPanel }
@@ -649,7 +652,8 @@ const ExportData = (props) => {
649
652
classes = { {
650
653
root : classes . tabs , // Apply custom styles to the root element
651
654
indicator : classes . indicator // Apply custom styles to the indicator element
652
- } } >
655
+ } }
656
+ >
653
657
< Tab disableTouchRipple label = "Export by Sites" { ...a11yProps ( 0 ) } />
654
658
< Tab disableTouchRipple label = "Export by Devices" { ...a11yProps ( 1 ) } />
655
659
< Tab disableTouchRipple label = "Export by AirQlouds" { ...a11yProps ( 2 ) } />
@@ -766,24 +770,30 @@ const ExportData = (props) => {
766
770
767
771
< Divider />
768
772
< CardActions >
769
- < Box display = "flex" justifyContent = "center" width = "100%" className = "step-2" >
773
+ < Box
774
+ display = { {
775
+ xs : 'block' ,
776
+ md : 'flex'
777
+ } }
778
+ justifyContent = "center"
779
+ width = { '100%' }
780
+ className = "step-2"
781
+ >
770
782
< Button
771
783
color = "primary"
772
- variant = "outlined "
784
+ variant = "contained "
773
785
type = "submit"
774
786
style = { { marginRight : '15px' } }
775
- disabled = { disableDownloadBtn ( 'sites' ) } >
787
+ disabled = { disableDownloadBtn ( 'sites' ) }
788
+ >
776
789
{ ' ' }
777
790
Download Data
778
791
</ Button >
779
- < Button
780
- color = "primary"
781
- variant = "outlined"
782
- onClick = { scheduleExportData }
783
- disabled = { disableDownloadBtn ( 'sites' ) } >
784
- { ' ' }
785
- Schedule Download
786
- </ Button >
792
+ { disableDownloadBtn ( 'sites' ) && (
793
+ < p style = { { marginTop : '10px' , color : 'red' } } >
794
+ { `Please fill in all the required fields` }
795
+ </ p >
796
+ ) }
787
797
</ Box >
788
798
</ CardActions >
789
799
</ form >
@@ -904,24 +914,30 @@ const ExportData = (props) => {
904
914
905
915
< Divider />
906
916
< CardActions >
907
- < Box display = "flex" justifyContent = "center" width = "100%" >
917
+ < Box
918
+ display = { {
919
+ xs : 'block' ,
920
+ md : 'flex'
921
+ } }
922
+ justifyContent = "center"
923
+ width = { '100%' }
924
+ className = "step-2"
925
+ >
908
926
< Button
909
927
color = "primary"
910
- variant = "outlined "
928
+ variant = "contained "
911
929
type = "submit"
912
930
style = { { marginRight : '15px' } }
913
- disabled = { disableDownloadBtn ( 'devices' ) } >
931
+ disabled = { disableDownloadBtn ( 'devices' ) }
932
+ >
914
933
{ ' ' }
915
934
Download Data
916
935
</ Button >
917
- < Button
918
- color = "primary"
919
- variant = "outlined"
920
- onClick = { scheduleExportData }
921
- disabled = { disableDownloadBtn ( 'devices' ) } >
922
- { ' ' }
923
- Schedule Download
924
- </ Button >
936
+ { disableDownloadBtn ( 'devices' ) && (
937
+ < p style = { { marginTop : '10px' , color : 'red' } } >
938
+ { `Please fill in all the required fields` }
939
+ </ p >
940
+ ) }
925
941
</ Box >
926
942
</ CardActions >
927
943
</ form >
@@ -1041,24 +1057,30 @@ const ExportData = (props) => {
1041
1057
1042
1058
< Divider />
1043
1059
< CardActions >
1044
- < Box display = "flex" justifyContent = "center" width = "100%" >
1060
+ < Box
1061
+ display = { {
1062
+ xs : 'block' ,
1063
+ md : 'flex'
1064
+ } }
1065
+ justifyContent = "center"
1066
+ width = { '100%' }
1067
+ className = "step-2"
1068
+ >
1045
1069
< Button
1046
1070
color = "primary"
1047
- variant = "outlined "
1071
+ variant = "contained "
1048
1072
type = "submit"
1049
1073
style = { { marginRight : '15px' } }
1050
- disabled = { disableDownloadBtn ( 'airqlouds' ) } >
1074
+ disabled = { disableDownloadBtn ( 'airqlouds' ) }
1075
+ >
1051
1076
{ ' ' }
1052
1077
Download Data
1053
1078
</ Button >
1054
- < Button
1055
- color = "primary"
1056
- variant = "outlined"
1057
- onClick = { scheduleExportData }
1058
- disabled = { disableDownloadBtn ( 'airqlouds' ) } >
1059
- { ' ' }
1060
- Schedule Download
1061
- </ Button >
1079
+ { disableDownloadBtn ( 'airqlouds' ) && (
1080
+ < p style = { { marginTop : '10px' , color : 'red' } } >
1081
+ { `Please fill in all the required fields` }
1082
+ </ p >
1083
+ ) }
1062
1084
</ Box >
1063
1085
</ CardActions >
1064
1086
</ form >
@@ -1178,24 +1200,30 @@ const ExportData = (props) => {
1178
1200
1179
1201
< Divider />
1180
1202
< CardActions >
1181
- < Box display = "flex" justifyContent = "center" width = "100%" >
1203
+ < Box
1204
+ display = { {
1205
+ xs : 'block' ,
1206
+ md : 'flex'
1207
+ } }
1208
+ justifyContent = "center"
1209
+ width = { '100%' }
1210
+ className = "step-2"
1211
+ >
1182
1212
< Button
1183
1213
color = "primary"
1184
- variant = "outlined "
1214
+ variant = "contained "
1185
1215
type = "submit"
1186
1216
style = { { marginRight : '15px' } }
1187
- disabled = { disableDownloadBtn ( 'regions' ) } >
1217
+ disabled = { disableDownloadBtn ( 'regions' ) }
1218
+ >
1188
1219
{ ' ' }
1189
1220
Download Data
1190
1221
</ Button >
1191
- < Button
1192
- color = "primary"
1193
- variant = "outlined"
1194
- onClick = { scheduleExportData }
1195
- disabled = { disableDownloadBtn ( 'regions' ) } >
1196
- { ' ' }
1197
- Schedule Download
1198
- </ Button >
1222
+ { disableDownloadBtn ( 'regions' ) && (
1223
+ < p style = { { marginTop : '10px' , color : 'red' } } >
1224
+ { `Please fill in all the required fields` }
1225
+ </ p >
1226
+ ) }
1199
1227
</ Box >
1200
1228
</ CardActions >
1201
1229
</ form >
@@ -1219,7 +1247,8 @@ const ExportData = (props) => {
1219
1247
size = "small"
1220
1248
aria-label = "close"
1221
1249
color = "inherit"
1222
- onClick = { handleClickSnackbar } >
1250
+ onClick = { handleClickSnackbar }
1251
+ >
1223
1252
< CloseIcon fontSize = "small" />
1224
1253
</ IconButton >
1225
1254
</ React . Fragment >
0 commit comments