Used card instead of list item in proxiwash screen

This commit is contained in:
keplyx 2019-07-28 00:32:49 +02:00
parent 861b655fe5
commit d2c3d1908b
2 changed files with 76 additions and 60 deletions

View file

@ -260,11 +260,11 @@ export default {
customMaterialIconColor: "#5d5d5d", customMaterialIconColor: "#5d5d5d",
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.4)", proxiwashFinishedColor: "rgba(54,165,22,0.31)",
proxiwashReadyColor: "transparent", proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.4)", proxiwashRunningColor: "rgba(94,104,241,0.3)",
proxiwashBrokenColor: "#a2a2a2", proxiwashBrokenColor: "rgba(162,162,162,0.31)",
proxiwashErrorColor: "rgba(204,7,0,0.4)", proxiwashErrorColor: "rgba(204,7,0,0.31)",
// Other // Other
borderRadiusBase: platform === "ios" ? 5 : 2, borderRadiusBase: platform === "ios" ? 5 : 2,

View file

@ -2,7 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import {AsyncStorage, View} from 'react-native'; import {AsyncStorage, View} from 'react-native';
import {Body, Button, H2, Icon, Left, ListItem, Right, Text} from 'native-base'; import {Body, Card, CardItem, H2, Left, Right, Text} from 'native-base';
import ThemeManager from '../utils/ThemeManager'; import ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import CustomMaterialIcon from "../components/CustomMaterialIcon";
@ -23,7 +23,7 @@ const MACHINE_STATES = {
}; };
let stateStrings = {}; let stateStrings = {};
let stateIcons = {};
let stateColors = {}; let stateColors = {};
@ -37,7 +37,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
refreshing: false, refreshing: false,
firstLoading: true, firstLoading: true,
fetchedData: {}, fetchedData: {},
machinesWatched : [], machinesWatched: [],
}; };
/** /**
@ -57,6 +57,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
stateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.states.running'); stateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.states.running');
stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken'); stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error'); stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
stateIcons[MACHINE_STATES.TERMINE] = 'check-circle';
stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank';
stateIcons[MACHINE_STATES.FONCTIONNE] = 'progress-check';
stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline';
stateIcons[MACHINE_STATES.ERREUR] = 'alert';
} }
getFetchUrl() { getFetchUrl() {
@ -208,27 +214,28 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
*/ */
getRenderItem(item: Object, section: Object, data: Object) { getRenderItem(item: Object, section: Object, data: Object) {
return ( return (
<ListItem <Card style={{
thumbnail flex: 0,
height: 64
}}>
<CardItem
style={{ style={{
marginLeft: 0, backgroundColor: stateColors[MACHINE_STATES[item.state]],
backgroundColor: stateColors[MACHINE_STATES[item.state]] height: '100%'
}} }}
> >
<View style={{ <View style={{
height: '100%', height: 64,
position: 'absolute', position: 'absolute',
alignSelf: 'flex-end',
right: 0, right: 0,
width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0, width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
}}> }}/>
</View>
<Left> <Left>
<CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'} <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
fontSize={30} fontSize={30}
/> />
</Left>
<Body> <Body>
<Text> <Text>
{section.title === data[0].title ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number} {section.title === data[0].title ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
@ -237,31 +244,40 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
{item.startTime !== '' ? item.startTime + '/' + item.endTime : ''} {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
</Text> </Text>
</Body> </Body>
<Right> </Left>
{item.startTime !== '' ? <Right style={{}}>
<Button <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
style={this.isMachineWatched(item.number) ?
{backgroundColor: '#ba7c1f'} : {}}
onPress={() => {
this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))
}}
>
<Text>
{ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}
</Text>
<Icon
name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}
type={'MaterialCommunityIcons'}
style={{fontSize: 30, width: 30}}
/>
</Button>
: <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
{fontWeight: 'bold'} : {}} {fontWeight: 'bold'} : {}}
>{stateStrings[MACHINE_STATES[item.state]]}</Text> >
{stateStrings[MACHINE_STATES[item.state]]}
</Text>
<CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
fontSize={25}
/>
} {/*{item.startTime !== '' ?*/}
{/* <Button*/}
{/* style={this.isMachineWatched(item.number) ?*/}
{/* {backgroundColor: '#ba7c1f'} : {}}*/}
{/* onPress={() => {*/}
{/* this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))*/}
{/* }}*/}
{/* >*/}
{/* <Text>*/}
{/* {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}*/}
{/* </Text>*/}
{/* <Icon*/}
{/* name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}*/}
{/* type={'MaterialCommunityIcons'}*/}
{/* style={{fontSize: 30, width: 30}}*/}
{/* />*/}
{/* </Button>*/}
{/* : (*/}
{/* )*/}
{/*}*/}
</Right> </Right>
</ListItem>); </CardItem>
</Card>);
} }
getRenderSectionHeader(title: String) { getRenderSectionHeader(title: String) {