Skip to content

Commit 6ee5d12

Browse files
CommanderRedYTCommanderRedYT
authored
Merge pull request #121 from OpenDTU-App/115-add-list-sections-to-inverter-info-screen
2 parents 9d8d8be + fb2aded commit 6ee5d12

File tree

2 files changed

+129
-119
lines changed

2 files changed

+129
-119
lines changed

‎src/translations/translation-files‎

‎src/views/navigation/screens/InverterInfoScreen.tsx‎

Lines changed: 128 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
44
import { Box } from 'react-native-flex-layout';
55
import { Appbar, IconButton, List, Text, useTheme } from 'react-native-paper';
66

7-
import { RefreshControl, ScrollView } from 'react-native';
7+
import { RefreshControl, ScrollView, View } from 'react-native';
88

99
import type { Moment } from 'moment';
1010
import moment from 'moment';
@@ -222,7 +222,10 @@ const InverterInfoScreen: FC<PropsWithNavigation> = ({ navigation, route }) => {
222222
<StyledSafeAreaView theme={theme}>
223223
<Box style={{ width: '100%', flex: 1 }}>
224224
<ScrollView
225-
style={{ paddingHorizontal: spacing, marginBottom: spacing }}
225+
style={{
226+
paddingHorizontal: spacing,
227+
marginBottom: spacing,
228+
}}
226229
refreshControl={
227230
<RefreshControl
228231
refreshing={isRefreshing}
@@ -233,134 +236,141 @@ const InverterInfoScreen: FC<PropsWithNavigation> = ({ navigation, route }) => {
233236
/>
234237
}
235238
>
236-
<Box style={{ marginBottom: spacing * 3 }}>
237-
<StyledSurface
238-
theme={theme}
239-
style={{ backgroundColor: headerColor.background, padding: 12 }}
240-
>
241-
<Box
239+
<Box style={{ width: '100%', flex: 1, gap: spacing * 2 }}>
240+
<Box>
241+
<StyledSurface
242+
theme={theme}
242243
style={{
243-
display: 'flex',
244-
flexDirection: 'row',
245-
justifyContent: 'space-between',
246-
alignItems: 'center',
247-
maxWidth: '100%',
244+
backgroundColor: headerColor.background,
245+
padding: 12,
248246
}}
249247
>
250-
<Box ml={8} style={{ flexShrink: 1 }}>
251-
<Text style={{ color: headerColor.text }}>
252-
{t('inverterInfo.serial', { serial: inverterSerial })}
253-
</Text>
254-
<Text style={{ color: headerColor.text }}>
255-
{t('inverterInfo.limits', {
256-
absolute: livedataInverter?.limit_absolute ?? 0,
257-
relative: livedataInverter?.limit_relative ?? 0,
258-
})}
259-
</Text>
260-
<Box
261-
style={{
262-
display: 'flex',
263-
flexDirection: 'row',
264-
gap: 4,
265-
flexWrap: 'wrap',
266-
}}
267-
>
248+
<Box
249+
style={{
250+
display: 'flex',
251+
flexDirection: 'row',
252+
justifyContent: 'space-between',
253+
alignItems: 'center',
254+
maxWidth: '100%',
255+
}}
256+
>
257+
<Box ml={8} style={{ flexShrink: 1 }}>
268258
<Text style={{ color: headerColor.text }}>
269-
{t('inverterInfo.lastUpdateWas', { ago: dataAge })}
259+
{t('inverterInfo.serial', { serial: inverterSerial })}
270260
</Text>
271-
{absoluteDataAge !== null ? (
261+
<Text style={{ color: headerColor.text }}>
262+
{t('inverterInfo.limits', {
263+
absolute: livedataInverter?.limit_absolute ?? 0,
264+
relative: livedataInverter?.limit_relative ?? 0,
265+
})}
266+
</Text>
267+
<Box
268+
style={{
269+
display: 'flex',
270+
flexDirection: 'row',
271+
gap: 4,
272+
flexWrap: 'wrap',
273+
}}
274+
>
272275
<Text style={{ color: headerColor.text }}>
273-
({absoluteDataAge})
276+
{t('inverterInfo.lastUpdateWas', { ago: dataAge })}
274277
</Text>
275-
) : null}
278+
{absoluteDataAge !== null ? (
279+
<Text style={{ color: headerColor.text }}>
280+
({absoluteDataAge})
281+
</Text>
282+
) : null}
283+
</Box>
276284
</Box>
285+
<IconButton
286+
iconColor={headerColor.text}
287+
icon="information"
288+
onPress={showInverterInfo}
289+
/>
277290
</Box>
278-
<IconButton
279-
iconColor={headerColor.text}
280-
icon="information"
281-
onPress={showInverterInfo}
291+
</StyledSurface>
292+
</Box>
293+
<View>
294+
{livedataInverter &&
295+
'AC' in livedataInverter &&
296+
'DC' in livedataInverter &&
297+
'INV' in livedataInverter ? (
298+
<List.Section
299+
title={t('inverter.inverterInfoSections.livedata')}
300+
style={{ gap: spacing }}
301+
>
302+
{Object.keys(DataKeys).map(key => (
303+
<StyledListItem
304+
key={`inverter-info-${key}`}
305+
title={t(`inverter.livedata.${key}`)}
306+
description={generateDescription(
307+
livedataInverter[key as DataKeys],
308+
DataKeys[key as DataKeys].valueKey,
309+
t,
310+
)}
311+
onPress={() =>
312+
navigation.navigate('InverterDataScreen', {
313+
inverterSerial,
314+
dataKey: key,
315+
})
316+
}
317+
left={props => (
318+
<List.Icon
319+
style={{
320+
...props.style,
321+
alignSelf: 'center',
322+
}}
323+
icon={key === 'AC' ? 'current-ac' : 'current-dc'}
324+
color={theme.colors.primary}
325+
/>
326+
)}
327+
right={props => (
328+
<List.Icon
329+
style={{
330+
...props.style,
331+
alignSelf: 'center',
332+
}}
333+
color={props.color}
334+
icon="chevron-right"
335+
/>
336+
)}
337+
/>
338+
))}
339+
</List.Section>
340+
) : null}
341+
<List.Section
342+
title={t('inverter.inverterInfoSections.controls')}
343+
style={{ gap: spacing }}
344+
>
345+
<StyledListItem
346+
onPress={handleNavigateEventLog}
347+
left={props => <List.Icon {...props} icon="history" />}
348+
title={t('inverter.eventLog.title')}
349+
description={t('inverter.eventLog.description')}
282350
/>
283-
</Box>
284-
</StyledSurface>
285-
</Box>
286-
{livedataInverter &&
287-
'AC' in livedataInverter &&
288-
'DC' in livedataInverter &&
289-
'INV' in livedataInverter ? (
290-
<Box
291-
style={{
292-
gap: spacing,
293-
display: 'flex',
294-
marginBottom: spacing * 3,
295-
}}
296-
>
297-
{Object.keys(DataKeys).map(key => (
298351
<StyledListItem
299-
key={`inverter-info-${key}`}
300-
title={t(`inverter.livedata.${key}`)}
301-
description={generateDescription(
302-
livedataInverter[key as DataKeys],
303-
DataKeys[key as DataKeys].valueKey,
304-
t,
305-
)}
306-
onPress={() =>
307-
navigation.navigate('InverterDataScreen', {
308-
inverterSerial,
309-
dataKey: key,
310-
})
311-
}
312-
left={props => (
313-
<List.Icon
314-
style={{
315-
...props.style,
316-
alignSelf: 'center',
317-
}}
318-
icon={key === 'AC' ? 'current-ac' : 'current-dc'}
319-
color={theme.colors.primary}
320-
/>
321-
)}
322-
right={props => (
323-
<List.Icon
324-
style={{
325-
...props.style,
326-
alignSelf: 'center',
327-
}}
328-
color={props.color}
329-
icon="chevron-right"
330-
/>
331-
)}
352+
onPress={showGridProfile}
353+
disabled={!supportsGridProfile}
354+
left={props => <List.Icon {...props} icon="power-plug" />}
355+
title={t('inverter.gridProfile.title')}
356+
description={t('inverter.gridProfile.description')}
332357
/>
333-
))}
334-
</Box>
335-
) : null}
336-
<Box style={{ gap: spacing, display: 'flex' }}>
337-
<StyledListItem
338-
onPress={handleNavigateEventLog}
339-
left={props => <List.Icon {...props} icon="history" />}
340-
title={t('inverter.eventLog.title')}
341-
description={t('inverter.eventLog.description')}
342-
/>
343-
<StyledListItem
344-
onPress={showGridProfile}
345-
disabled={!supportsGridProfile}
346-
left={props => <List.Icon {...props} icon="power-plug" />}
347-
title={t('inverter.gridProfile.title')}
348-
description={t('inverter.gridProfile.description')}
349-
/>
350-
<StyledListItem
351-
onPress={() => setShowLimitConfigModal(true)}
352-
disabled={!hasAuthConfigured}
353-
left={props => <List.Icon {...props} icon="tune" />}
354-
title={t('inverter.limits.title')}
355-
description={t('inverter.limits.description')}
356-
/>
357-
<StyledListItem
358-
onPress={() => setShowPowerConfigModal(true)}
359-
disabled={!hasAuthConfigured}
360-
left={props => <List.Icon {...props} icon="power" />}
361-
title={t('inverter.control.title')}
362-
description={t('inverter.control.description')}
363-
/>
358+
<StyledListItem
359+
onPress={() => setShowLimitConfigModal(true)}
360+
disabled={!hasAuthConfigured}
361+
left={props => <List.Icon {...props} icon="tune" />}
362+
title={t('inverter.limits.title')}
363+
description={t('inverter.limits.description')}
364+
/>
365+
<StyledListItem
366+
onPress={() => setShowPowerConfigModal(true)}
367+
disabled={!hasAuthConfigured}
368+
left={props => <List.Icon {...props} icon="power" />}
369+
title={t('inverter.control.title')}
370+
description={t('inverter.control.description')}
371+
/>
372+
</List.Section>
373+
</View>
364374
</Box>
365375
</ScrollView>
366376
</Box>

0 commit comments

Comments
 (0)