vergnet
/
application-amicale
Watch 5
Star 5
Fork 5
Code Issues 0 Pull Requests 0 Releases 5 Wiki Activity
Browse Source

Used card instead of list item in proxiwash screen

keplyx 4 years ago
parent
861b655fe5
commit
d2c3d1908b
2 changed files with 73 additions and 57 deletions
Split View Show Diff Stats
  1. 4
    4
      native-base-theme/variables/platform.js
  2. 69
    53
      screens/ProxiwashScreen.js

+ 4
- 4
native-base-theme/variables/platform.js View File 

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

+ 69
- 53
screens/ProxiwashScreen.js View File 

@@ -2,7 +2,7 @@
2 2
3 3 
 import * as React from 'react';
4 4 
 import {AsyncStorage, View} from 'react-native';
5 
-import {Body, Button, H2, Icon, Left, ListItem, Right, Text} from 'native-base';
5 
+import {Body, Card, CardItem, H2, Left, Right, Text} from 'native-base';
6 6 
 import ThemeManager from '../utils/ThemeManager';
7 7 
 import i18n from "i18n-js";
8 8 
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 
@@ -23,7 +23,7 @@ const MACHINE_STATES = {
23 23 
 };
24 24
25 25 
 let stateStrings = {};
26 
-
26 
+let stateIcons = {};
27 27 
 let stateColors = {};
28 28
29 29 
 
@@ -37,7 +37,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
37 37 
         refreshing: false,
38 38 
         firstLoading: true,
39 39 
         fetchedData: {},
40 
-        machinesWatched : [],
40 
+        machinesWatched: [],
41 41 
     };
42 42
43 43 
     /**
 
@@ -57,6 +57,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
57 57 
         stateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.states.running');
58 58 
         stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
59 59 
         stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
60 
+
61 
+        stateIcons[MACHINE_STATES.TERMINE] = 'check-circle';
62 
+        stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank';
63 
+        stateIcons[MACHINE_STATES.FONCTIONNE] = 'progress-check';
64 
+        stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline';
65 
+        stateIcons[MACHINE_STATES.ERREUR] = 'alert';
60 66 
     }
61 67
62 68 
     getFetchUrl() {
 
@@ -208,60 +214,70 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
208 214 
      */
209 215 
     getRenderItem(item: Object, section: Object, data: Object) {
210 216 
         return (
211 
-            <ListItem
212 
-                thumbnail
213 
-                style={{
214 
-                    marginLeft: 0,
215 
-                    backgroundColor: stateColors[MACHINE_STATES[item.state]]
216 
-                }}
217 
-            >
218 
-                <View style={{
219 
-                    height: '100%',
220 
-                    position: 'absolute',
221 
-                    alignSelf: 'flex-end',
222 
-                    right: 0,
223 
-                    width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
224 
-                    backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
225 
-                }}>
226 
-                </View>
227 
-                <Left>
228 
-                    <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
229 
-                                        fontSize={30}
230 
-                    />
231 
-                </Left>
232 
-                <Body>
233 
-                    <Text>
234 
-                        {section.title === data[0].title ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
235 
-                    </Text>
236 
-                    <Text note>
237 
-                        {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
238 
-                    </Text>
239 
-                </Body>
240 
-                <Right>
241 
-                    {item.startTime !== '' ?
242 
-                        <Button
243 
-                            style={this.isMachineWatched(item.number) ?
244 
-                                {backgroundColor: '#ba7c1f'} : {}}
245 
-                            onPress={() => {
246 
-                                this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))
247 
-                            }}
248 
-                        >
217 
+            <Card style={{
218 
+                flex: 0,
219 
+                height: 64
220 
+            }}>
221 
+
222 
+                <CardItem
223 
+                    style={{
224 
+                        backgroundColor: stateColors[MACHINE_STATES[item.state]],
225 
+                        height: '100%'
226 
+                    }}
227 
+                >
228 
+                    <View style={{
229 
+                        height: 64,
230 
+                        position: 'absolute',
231 
+                        right: 0,
232 
+                        width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
233 
+                        backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
234 
+                    }}/>
235 
+                    <Left>
236 
+                        <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
237 
+                                            fontSize={30}
238 
+                        />
239 
+                        <Body>
249 240 
                             <Text>
250 
-                                {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}
241 
+                                {section.title === data[0].title ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
242 
+                            </Text>
243 
+                            <Text note>
244 
+                                {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
251 245 
                             </Text>
252 
-                            <Icon
253 
-                                name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}
254 
-                                type={'MaterialCommunityIcons'}
255 
-                                style={{fontSize: 30, width: 30}}
256 
-                            />
257 
-                        </Button>
258 
-                        : <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
246 
+                        </Body>
247 
+                    </Left>
248 
+                    <Right style={{}}>
249 
+                        <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
259 250 
                             {fontWeight: 'bold'} : {}}
260 
-                        >{stateStrings[MACHINE_STATES[item.state]]}</Text>
251 
+                        >
252 
+                            {stateStrings[MACHINE_STATES[item.state]]}
253 
+                        </Text>
254 
+                        <CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
255 
+                                            fontSize={25}
256 
+                        />
261 257
262 
-                    }
263 
-                </Right>
264 
-            </ListItem>);
258 
+                        {/*{item.startTime !== '' ?*/}
259 
+                        {/*    <Button*/}
260 
+                        {/*        style={this.isMachineWatched(item.number) ?*/}
261 
+                        {/*            {backgroundColor: '#ba7c1f'} : {}}*/}
262 
+                        {/*        onPress={() => {*/}
263 
+                        {/*            this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))*/}
264 
+                        {/*        }}*/}
265 
+                        {/*    >*/}
266 
+                        {/*        <Text>*/}
267 
+                        {/*            {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}*/}
268 
+                        {/*        </Text>*/}
269 
+                        {/*        <Icon*/}
270 
+                        {/*            name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}*/}
271 
+                        {/*            type={'MaterialCommunityIcons'}*/}
272 
+                        {/*            style={{fontSize: 30, width: 30}}*/}
273 
+                        {/*        />*/}
274 
+                        {/*    </Button>*/}
275 
+                        {/*    : (*/}
276 
+                        {/*        )*/}
277 
+                        {/*}*/}
278 
+                    </Right>
279 
+                </CardItem>
280 
+            </Card>);
265 281 
     }
266 282
267 283 
     getRenderSectionHeader(title: String) {

Write Preview
Loading…
Cancel
Save