Used card instead of list item in proxiwash screen
This commit is contained in:
parent
861b655fe5
commit
d2c3d1908b
2 changed files with 76 additions and 60 deletions
|
@ -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,
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue