Show proxiwash message in header if available
This commit is contained in:
Arnaud Vergnet
parent
76f13f04d5
commit
3b2776542a
5 changed files with 157 additions and 66 deletions
|
|
@ -55,6 +55,10 @@
|
|||
"tips": "Tips",
|
||||
"numAvailable": "available",
|
||||
"numAvailablePlural": "available",
|
||||
"errors": {
|
||||
"title": "Proxiwash message",
|
||||
"button": "More info"
|
||||
},
|
||||
"washinsa": {
|
||||
"title": "INSA laundromat",
|
||||
"subtitle": "Your favorite laundromat!!",
|
||||
|
|
@ -93,6 +97,10 @@
|
|||
"unknown": "UNKNOWN"
|
||||
},
|
||||
"notifications": {
|
||||
"channel": {
|
||||
"title": "Laundry reminders",
|
||||
"description": "Get reminders for watched washers/dryers"
|
||||
},
|
||||
"machineFinishedTitle": "Laundry Ready",
|
||||
"machineFinishedBody": "Machine n°{{number}} is finished and your laundry is ready for pickup",
|
||||
"machineRunningTitle": "Laundry running: {{time}} minutes left",
|
||||
|
|
|
|||
|
|
@ -55,6 +55,10 @@
|
|||
"tips": "Conseils",
|
||||
"numAvailable": "disponible",
|
||||
"numAvailablePlural": "disponibles",
|
||||
"errors": {
|
||||
"title": "Message laverie",
|
||||
"button": "En savoir plus"
|
||||
},
|
||||
"washinsa": {
|
||||
"title": "Laverie INSA",
|
||||
"subtitle": "Ta laverie préférée !!",
|
||||
|
|
@ -93,6 +97,10 @@
|
|||
"unknown": "INCONNU"
|
||||
},
|
||||
"notifications": {
|
||||
"channel": {
|
||||
"title": "Rappels laverie",
|
||||
"description": "Recevoir des rappels pour les machines demandées"
|
||||
},
|
||||
"machineFinishedTitle": "Linge prêt",
|
||||
"machineFinishedBody": "La machine n°{{number}} est terminée et ton linge est prêt à être récupéré",
|
||||
"machineRunningTitle": "Machine en cours: {{time}} minutes restantes",
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Avatar, Button, Card, Text } from 'react-native-paper';
|
||||
import TimeAgo from 'react-native-timeago';
|
||||
import i18n from 'i18n-js';
|
||||
import { useNavigation } from '@react-navigation/core';
|
||||
import { MainRoutes } from '../../../navigation/MainNavigator';
|
||||
import ProxiwashConstants from '../../../constants/ProxiwashConstants';
|
||||
|
||||
let moment = require('moment'); //load moment module to set local language
|
||||
require('moment/locale/fr'); // import moment local language file during the application build
|
||||
moment.locale('fr');
|
||||
|
||||
type Props = {
|
||||
date?: Date;
|
||||
selectedWash: 'tripodeB' | 'washinsa';
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginHorizontal: 5,
|
||||
},
|
||||
actions: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
function ProximoListHeader(props: Props) {
|
||||
const navigation = useNavigation();
|
||||
const { date, selectedWash } = props;
|
||||
let title = i18n.t('screens.proxiwash.washinsa.title');
|
||||
let icon = ProxiwashConstants.washinsa.icon;
|
||||
if (selectedWash === 'tripodeB') {
|
||||
title = i18n.t('screens.proxiwash.tripodeB.title');
|
||||
icon = ProxiwashConstants.tripodeB.icon;
|
||||
}
|
||||
return (
|
||||
<Card style={styles.card}>
|
||||
<Card.Title
|
||||
title={title}
|
||||
subtitle={
|
||||
date ? (
|
||||
<Text>
|
||||
{i18n.t('screens.proxiwash.updated')}
|
||||
<TimeAgo time={date} interval={2000} />
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
left={(iconProps) => <Avatar.Icon icon={icon} size={iconProps.size} />}
|
||||
/>
|
||||
<Card.Actions style={styles.actions}>
|
||||
<Button
|
||||
mode={'contained'}
|
||||
onPress={() => navigation.navigate(MainRoutes.Settings)}
|
||||
icon={'swap-horizontal'}
|
||||
>
|
||||
{i18n.t('screens.proxiwash.switch')}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProximoListHeader;
|
||||
129
src/components/Lists/Proxiwash/ProxiwashListHeader.tsx
Normal file
129
src/components/Lists/Proxiwash/ProxiwashListHeader.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import React from 'react';
|
||||
import { Linking, StyleSheet } from 'react-native';
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Paragraph,
|
||||
Text,
|
||||
useTheme,
|
||||
} from 'react-native-paper';
|
||||
import TimeAgo from 'react-native-timeago';
|
||||
import i18n from 'i18n-js';
|
||||
import { useNavigation } from '@react-navigation/core';
|
||||
import { MainRoutes } from '../../../navigation/MainNavigator';
|
||||
import ProxiwashConstants from '../../../constants/ProxiwashConstants';
|
||||
import { ProxiwashInfoType } from '../../../screens/Proxiwash/ProxiwashScreen';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
|
||||
let moment = require('moment'); //load moment module to set local language
|
||||
require('moment/locale/fr'); // import moment local language file during the application build
|
||||
moment.locale('fr');
|
||||
|
||||
type Props = {
|
||||
date?: Date;
|
||||
selectedWash: 'tripodeB' | 'washinsa';
|
||||
info?: ProxiwashInfoType;
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginHorizontal: 5,
|
||||
},
|
||||
messageCard: {
|
||||
marginTop: 50,
|
||||
marginBottom: 10,
|
||||
},
|
||||
actions: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
function ProxiwashListHeader(props: Props) {
|
||||
const navigation = useNavigation();
|
||||
const theme = useTheme();
|
||||
const { date, selectedWash } = props;
|
||||
let title = i18n.t('screens.proxiwash.washinsa.title');
|
||||
let icon = ProxiwashConstants.washinsa.icon;
|
||||
if (selectedWash === 'tripodeB') {
|
||||
title = i18n.t('screens.proxiwash.tripodeB.title');
|
||||
icon = ProxiwashConstants.tripodeB.icon;
|
||||
}
|
||||
const message = props.info?.message;
|
||||
return (
|
||||
<>
|
||||
<Card style={styles.card}>
|
||||
<Card.Title
|
||||
title={title}
|
||||
subtitle={
|
||||
date ? (
|
||||
<Text>
|
||||
{i18n.t('screens.proxiwash.updated')}
|
||||
<TimeAgo time={date} interval={2000} />
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
left={(iconProps) => (
|
||||
<Avatar.Icon icon={icon} size={iconProps.size} />
|
||||
)}
|
||||
/>
|
||||
<Card.Actions style={styles.actions}>
|
||||
<Button
|
||||
mode={'contained'}
|
||||
onPress={() => navigation.navigate(MainRoutes.Settings)}
|
||||
icon={'swap-horizontal'}
|
||||
>
|
||||
{i18n.t('screens.proxiwash.switch')}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
{message ? (
|
||||
<Card
|
||||
style={{
|
||||
...styles.card,
|
||||
...styles.messageCard,
|
||||
}}
|
||||
>
|
||||
<Animatable.View
|
||||
useNativeDriver={false}
|
||||
animation={'flash'}
|
||||
iterationCount={'infinite'}
|
||||
duration={2000}
|
||||
>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.errors.title')}
|
||||
titleStyle={{
|
||||
color: theme.colors.primary,
|
||||
}}
|
||||
left={(iconProps) => (
|
||||
<Avatar.Icon icon={'alert'} size={iconProps.size} />
|
||||
)}
|
||||
/>
|
||||
</Animatable.View>
|
||||
<Card.Content>
|
||||
<Paragraph
|
||||
style={{
|
||||
color: theme.colors.warning,
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
<Card.Actions style={styles.actions}>
|
||||
<Button
|
||||
mode={'contained'}
|
||||
onPress={() =>
|
||||
Linking.openURL(ProxiwashConstants[selectedWash].webPageUrl)
|
||||
}
|
||||
icon={'open-in-new'}
|
||||
>
|
||||
{i18n.t('screens.proxiwash.errors.button')}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProxiwashListHeader;
|
||||
|
|
@ -52,7 +52,7 @@ import GENERAL_STYLES from '../../constants/Styles';
|
|||
import { readData } from '../../utils/WebData';
|
||||
import { useNavigation } from '@react-navigation/core';
|
||||
import { setupMachineNotification } from '../../utils/Notifications';
|
||||
import ProximoListHeader from '../../components/Lists/Proximo/ProximoListHeader';
|
||||
import ProxiwashListHeader from '../../components/Lists/Proxiwash/ProxiwashListHeader';
|
||||
import {
|
||||
getPreferenceNumber,
|
||||
getPreferenceObject,
|
||||
|
|
@ -76,7 +76,13 @@ export type ProxiwashMachineType = {
|
|||
program: string;
|
||||
};
|
||||
|
||||
export type ProxiwashInfoType = {
|
||||
message: string;
|
||||
last_checked: number;
|
||||
};
|
||||
|
||||
type FetchedDataType = {
|
||||
info: ProxiwashInfoType;
|
||||
dryers: Array<ProxiwashMachineType>;
|
||||
washers: Array<ProxiwashMachineType>;
|
||||
};
|
||||
|
|
@ -444,7 +450,11 @@ function ProxiwashScreen() {
|
|||
) => {
|
||||
if (data) {
|
||||
return (
|
||||
<ProximoListHeader date={lastRefreshDate} selectedWash={selectedWash} />
|
||||
<ProxiwashListHeader
|
||||
date={lastRefreshDate}
|
||||
selectedWash={selectedWash}
|
||||
info={data?.info}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
|||
Loading…
Reference in a new issue