Browse Source

Removed unused libs and improved style responsiveness

keplyx 4 years ago
parent
commit
8d914c97f5

+ 1
- 13
App.js View File

@@ -3,7 +3,6 @@
3 3
 import * as React from 'react';
4 4
 import {Platform, StatusBar} from 'react-native';
5 5
 import LocaleManager from './utils/LocaleManager';
6
-import * as Font from 'expo-font';
7 6
 import AsyncStorageManager from "./utils/AsyncStorageManager";
8 7
 import CustomIntroSlider from "./components/CustomIntroSlider";
9 8
 import {SplashScreen} from 'expo';
@@ -23,17 +22,6 @@ type State = {
23 22
     currentTheme: ?Object,
24 23
 };
25 24
 
26
-const MyTheme = {
27
-    dark: false,
28
-    colors: {
29
-        primary: 'rgb(255, 45, 85)',
30
-        background: 'rgb(242, 242, 242)',
31
-        card: 'rgb(255, 255, 255)',
32
-        text: 'rgb(28, 28, 30)',
33
-        border: 'rgb(199, 199, 204)',
34
-    },
35
-};
36
-
37 25
 const Stack = createStackNavigator();
38 26
 
39 27
 export default class App extends React.Component<Props, State> {
@@ -54,7 +42,7 @@ export default class App extends React.Component<Props, State> {
54 42
     }
55 43
 
56 44
     /**
57
-     * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work
45
+     * Updates the theme
58 46
      */
59 47
     updateTheme() {
60 48
         this.setState({

+ 40
- 0
components/CustomAgenda.js View File

@@ -0,0 +1,40 @@
1
+import * as React from 'react';
2
+import {withTheme} from 'react-native-paper';
3
+import {Agenda} from "react-native-calendars";
4
+
5
+function CustomAgenda(props) {
6
+    const { colors } = props.theme;
7
+    return (
8
+        <Agenda
9
+            {...props}
10
+            ref={props.onRef}
11
+            theme={{
12
+                backgroundColor: colors.agendaBackgroundColor,
13
+                calendarBackground: colors.background,
14
+                textSectionTitleColor: colors.agendaDayTextColor,
15
+                selectedDayBackgroundColor: colors.primary,
16
+                selectedDayTextColor: '#ffffff',
17
+                todayTextColor: colors.primary,
18
+                dayTextColor: colors.text,
19
+                textDisabledColor: colors.agendaDayTextColor,
20
+                dotColor: colors.primary,
21
+                selectedDotColor: '#ffffff',
22
+                arrowColor: 'orange',
23
+                monthTextColor: colors.primary,
24
+                indicatorColor: colors.primary,
25
+                textDayFontWeight: '300',
26
+                textMonthFontWeight: 'bold',
27
+                textDayHeaderFontWeight: '300',
28
+                textDayFontSize: 16,
29
+                textMonthFontSize: 16,
30
+                textDayHeaderFontSize: 16,
31
+                agendaDayTextColor: colors.agendaDayTextColor,
32
+                agendaDayNumColor: colors.agendaDayTextColor,
33
+                agendaTodayColor: colors.primary,
34
+                agendaKnobColor: colors.primary,
35
+            }}
36
+        />
37
+    );
38
+}
39
+
40
+export default withTheme(CustomAgenda);

+ 0
- 6
components/DashboardItem.js View File

@@ -28,12 +28,6 @@ export default class DashboardItem extends React.Component<Props> {
28 28
         displayEvent: undefined,
29 29
     };
30 30
 
31
-    shouldComponentUpdate(nextProps: Props): boolean {
32
-        return nextProps.isAvailable !== this.props.isAvailable ||
33
-            nextProps.subtitle !== this.props.subtitle;
34
-    }
35
-
36
-
37 31
     /**
38 32
      * Convert the date string given by in the event list json to a date object
39 33
      * @param dateString

+ 41
- 0
components/EmptyWebSectionListItem.js View File

@@ -0,0 +1,41 @@
1
+import * as React from 'react';
2
+import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper';
3
+import {View} from "react-native";
4
+import {MaterialCommunityIcons} from "@expo/vector-icons";
5
+
6
+function EmptyWebSectionListItem(props) {
7
+    const { colors } = props.theme;
8
+    return (
9
+        <View>
10
+            <View style={{
11
+                justifyContent: 'center',
12
+                alignItems: 'center',
13
+                width: '100%',
14
+                height: 100,
15
+                marginBottom: 20
16
+            }}>
17
+                {props.refreshing ?
18
+                    <ActivityIndicator
19
+                        animating={true}
20
+                        size={'large'}
21
+                        color={colors.primary}/>
22
+                    :
23
+                    <MaterialCommunityIcons
24
+                        name={props.icon}
25
+                        size={100}
26
+                        color={colors.textDisabled}/>}
27
+            </View>
28
+
29
+            <Subheading style={{
30
+                textAlign: 'center',
31
+                marginRight: 20,
32
+                marginLeft: 20,
33
+                color: colors.textDisabled
34
+            }}>
35
+                {props.text}
36
+            </Subheading>
37
+        </View>
38
+    );
39
+}
40
+
41
+export default withTheme(EmptyWebSectionListItem);

+ 42
- 0
components/FeedItem.js View File

@@ -0,0 +1,42 @@
1
+import * as React from 'react';
2
+import {Avatar, Button, Card, withTheme} from 'react-native-paper';
3
+import {TouchableOpacity, View} from "react-native";
4
+import Autolink from "react-native-autolink";
5
+import i18n from "i18n-js";
6
+
7
+const ICON_AMICALE = require('../assets/amicale.png');
8
+
9
+function FeedItem(props) {
10
+    const {colors} = props.theme;
11
+    return (
12
+        <Card style={{margin: 5}}>
13
+            <Card.Title
14
+                title={props.title}
15
+                subtitle={props.subtitle}
16
+                left={props => <Avatar.Image size={48} source={ICON_AMICALE}
17
+                                             style={{backgroundColor: 'transparent'}}/>}
18
+            />
19
+            {props.full_picture !== '' && props.full_picture !== undefined ?
20
+                <TouchableOpacity onPress={props.onImagePress}>
21
+                    <Card.Cover source={{uri: props.full_picture}}/>
22
+                </TouchableOpacity> : <View/>}
23
+            <Card.Content>
24
+                {props.message !== undefined ?
25
+                    <Autolink
26
+                        text={props.message}
27
+                        hashtag="facebook"
28
+                        style={{color: colors.text}}
29
+                    /> : <View/>
30
+                }
31
+            </Card.Content>
32
+            <Card.Actions>
33
+                <Button
34
+                    color={'#57aeff'}
35
+                    onPress={props.onOutLinkPress}
36
+                    icon={'facebook'}>{i18n.t('homeScreen.dashboard.seeMore')}</Button>
37
+            </Card.Actions>
38
+        </Card>
39
+    );
40
+}
41
+
42
+export default withTheme(FeedItem);

+ 16
- 0
components/HeaderButton.js View File

@@ -0,0 +1,16 @@
1
+import * as React from 'react';
2
+import {IconButton, withTheme} from 'react-native-paper';
3
+
4
+function HeaderButton(props) {
5
+    const { colors } = props.theme;
6
+    return (
7
+        <IconButton
8
+            icon={props.icon}
9
+            size={26}
10
+            color={colors.text}
11
+            onPress={props.onPress}
12
+        />
13
+    );
14
+}
15
+
16
+export default withTheme(HeaderButton);

+ 66
- 0
components/ProxiwashListItem.js View File

@@ -0,0 +1,66 @@
1
+import * as React from 'react';
2
+import {Divider, List, Text, withTheme} from 'react-native-paper';
3
+import {View} from "react-native";
4
+import ProxiwashConstants from "../constants/ProxiwashConstants";
5
+
6
+function ProxiwashListItem(props) {
7
+    const {colors} = props.theme;
8
+    let stateColors = {};
9
+    stateColors[ProxiwashConstants.machineStates.TERMINE] = colors.proxiwashFinishedColor;
10
+    stateColors[ProxiwashConstants.machineStates.DISPONIBLE] = colors.proxiwashReadyColor;
11
+    stateColors[ProxiwashConstants.machineStates["EN COURS"]] = colors.proxiwashRunningColor;
12
+    stateColors[ProxiwashConstants.machineStates.HS] = colors.proxiwashBrokenColor;
13
+    stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor;
14
+    const icon = (
15
+        props.isWatched ?
16
+            <List.Icon icon={'bell-ring'} color={colors.primary}/> :
17
+            <List.Icon icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}/>
18
+    );
19
+    return (
20
+        <View style={{
21
+            backgroundColor:
22
+                ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ?
23
+                    colors.proxiwashRunningBgColor :
24
+                    colors.background
25
+        }}>
26
+            <View style={{
27
+                height: '100%',
28
+                position: 'absolute',
29
+                left: 0,
30
+                width: props.progress,
31
+                backgroundColor: stateColors[ProxiwashConstants.machineStates[props.state]]
32
+            }}/>
33
+            <List.Item
34
+                title={props.title}
35
+                description={props.description}
36
+                onPress={props.onPress}
37
+                style={{
38
+                    backgroundColor: 'transparent',
39
+                    height: 64
40
+                }}
41
+                left={() => icon}
42
+                right={() => (
43
+                    <View style={{flexDirection: 'row'}}>
44
+                        <View style={{
45
+                            justifyContent: 'center',
46
+                        }}>
47
+                            <Text style={
48
+                                ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates.TERMINE ?
49
+                                    {fontWeight: 'bold',} : {}}
50
+                            >
51
+                                {props.statusText}
52
+                            </Text>
53
+                        </View>
54
+
55
+                        <List.Icon
56
+                            color={colors.text}
57
+                            icon={props.statusIcon}
58
+                        />
59
+                    </View>)}
60
+            />
61
+            <Divider/>
62
+        </View>
63
+    );
64
+}
65
+
66
+export default withTheme(ProxiwashListItem);

+ 3
- 6
components/Sidebar.js View File

@@ -6,7 +6,7 @@ import i18n from "i18n-js";
6 6
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7 7
 import ThemeManager from "../utils/ThemeManager";
8 8
 import * as WebBrowser from 'expo-web-browser';
9
-import {List} from 'react-native-paper';
9
+import SidebarDivider from "./SidebarDivider";
10 10
 import {DrawerItem} from '@react-navigation/drawer';
11 11
 
12 12
 const deviceWidth = Dimensions.get("window").width;
@@ -143,6 +143,7 @@ export default class SideBar extends React.Component<Props, State> {
143 143
 
144 144
 
145 145
     getRenderItem({item}: Object) {
146
+        console.log("rendering SideBar Item");
146 147
         const onListItemPress = this.onListItemPress.bind(this, item);
147 148
         if (item.icon !== undefined) {
148 149
             return (
@@ -151,7 +152,6 @@ export default class SideBar extends React.Component<Props, State> {
151 152
                     focused={false}
152 153
                     icon={({color, size}) =>
153 154
                         <MaterialCommunityIcons color={color} size={size} name={item.icon}/>}
154
-                    selected={this.state.active === item.route}
155 155
                     onPress={onListItemPress}
156 156
                     style={{
157 157
                         marginLeft: 0,
@@ -163,10 +163,7 @@ export default class SideBar extends React.Component<Props, State> {
163 163
             );
164 164
         } else {
165 165
             return (
166
-                <List.Item
167
-                    title={item.name}
168
-                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().dividerBackground}}
169
-                />
166
+                <SidebarDivider title={item.name}/>
170 167
             );
171 168
         }
172 169
 

+ 23
- 0
components/SidebarDivider.js View File

@@ -0,0 +1,23 @@
1
+import * as React from 'react';
2
+import { withTheme } from 'react-native-paper';
3
+import {DrawerItem} from "@react-navigation/drawer";
4
+
5
+function SidebarDivider(props) {
6
+    const { colors } = props.theme;
7
+    return (
8
+        <DrawerItem
9
+            label={props.title}
10
+            focused={false}
11
+            onPress={undefined}
12
+            style={{
13
+                marginLeft: 0,
14
+                marginRight: 0,
15
+                padding: 0,
16
+                borderRadius: 0,
17
+                backgroundColor: colors.dividerBackground
18
+            }}
19
+        />
20
+    );
21
+}
22
+
23
+export default withTheme(SidebarDivider);

+ 55
- 0
components/SquareDashboardItem.js View File

@@ -0,0 +1,55 @@
1
+import * as React from 'react';
2
+import {Card, Text, Title, withTheme} from 'react-native-paper';
3
+import {View} from "react-native";
4
+import {MaterialCommunityIcons} from "@expo/vector-icons";
5
+
6
+function SquareDashboardItem(props) {
7
+    const { colors } = props.theme;
8
+    return (
9
+        <Card
10
+            style={{
11
+                width: '48%',
12
+                marginTop: 10,
13
+                marginRight: props.isLeft ? '4%': 0,
14
+                overflow: 'hidden',
15
+            }}
16
+            onPress={props.clickAction}>
17
+            <Card.Content>
18
+                <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
19
+                    <MaterialCommunityIcons
20
+                        name={props.icon}
21
+                        color={
22
+                            props.isAvailable ?
23
+                                props.color :
24
+                                colors.textDisabled
25
+                        }
26
+                        size={50}/>
27
+                </View>
28
+                <View style={{
29
+                    width: '100%',
30
+                }}>
31
+                    <Title style={{
32
+                        color: props.isAvailable ?
33
+                            colors.text :
34
+                            colors.textDisabled,
35
+                        textAlign: 'center',
36
+                        width: '100%',
37
+                    }}>
38
+                        {props.title}
39
+                    </Title>
40
+                    <Text style={{
41
+                        color: props.isAvailable ?
42
+                            colors.text :
43
+                            colors.textDisabled,
44
+                        textAlign: 'center',
45
+                        width: '100%',
46
+                    }}>
47
+                        {props.subtitle}
48
+                    </Text>
49
+                </View>
50
+            </Card.Content>
51
+        </Card>
52
+    );
53
+}
54
+
55
+export default withTheme(SquareDashboardItem);

+ 8
- 32
components/WebSectionList.js View File

@@ -1,12 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import ThemeManager from '../utils/ThemeManager';
5 4
 import WebDataManager from "../utils/WebDataManager";
6
-import {MaterialCommunityIcons} from "@expo/vector-icons";
7 5
 import i18n from "i18n-js";
8
-import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper';
6
+import {Snackbar} from 'react-native-paper';
9 7
 import {RefreshControl, SectionList, View} from "react-native";
8
+import EmptyWebSectionListItem from "./EmptyWebSectionListItem";
10 9
 
11 10
 type Props = {
12 11
     navigation: Object,
@@ -145,35 +144,12 @@ export default class WebSectionList extends React.Component<Props, State> {
145 144
 
146 145
     getEmptyRenderItem({item}: Object) {
147 146
         return (
148
-            <View>
149
-                <View style={{
150
-                    justifyContent: 'center',
151
-                    alignItems: 'center',
152
-                    width: '100%',
153
-                    height: 100,
154
-                    marginBottom: 20
155
-                }}>
156
-                    {this.state.refreshing ?
157
-                        <ActivityIndicator
158
-                            animating={true}
159
-                            size={'large'}
160
-                            color={ThemeManager.getCurrentThemeVariables().primary}/>
161
-                        :
162
-                        <MaterialCommunityIcons
163
-                            name={item.icon}
164
-                            size={100}
165
-                            color={ThemeManager.getCurrentThemeVariables().textDisabled}/>}
166
-                </View>
167
-
168
-                <Subheading style={{
169
-                    textAlign: 'center',
170
-                    marginRight: 20,
171
-                    marginLeft: 20,
172
-                    color: ThemeManager.getCurrentThemeVariables().textDisabled
173
-                }}>
174
-                    {item.text}
175
-                </Subheading>
176
-            </View>);
147
+            <EmptyWebSectionListItem
148
+                text={item.text}
149
+                icon={item.icon}
150
+                refreshing={this.state.refreshing}
151
+            />
152
+        );
177 153
     }
178 154
 
179 155
     createEmptyDataset() {

+ 2
- 10
components/WebViewScreen.js View File

@@ -3,10 +3,9 @@
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5 5
 import WebView from "react-native-webview";
6
-import Touchable from "react-native-platform-touchable";
7
-import {MaterialCommunityIcons} from "@expo/vector-icons";
8 6
 import ThemeManager from "../utils/ThemeManager";
9 7
 import {ActivityIndicator} from 'react-native-paper';
8
+import HeaderButton from "./HeaderButton";
10 9
 
11 10
 type Props = {
12 11
     navigation: Object,
@@ -58,14 +57,7 @@ export default class WebViewScreen extends React.Component<Props> {
58 57
 
59 58
     getHeaderButton(clickAction: Function, icon: string) {
60 59
         return (
61
-            <Touchable
62
-                style={{padding: 6}}
63
-                onPress={clickAction}>
64
-                <MaterialCommunityIcons
65
-                    name={icon}
66
-                    size={26}
67
-                    color={ThemeManager.getCurrentThemeVariables().text}/>
68
-            </Touchable>
60
+            <HeaderButton icon={icon} onPress={clickAction}/>
69 61
         );
70 62
     }
71 63
 

+ 10
- 0
constants/ProxiwashConstants.js View File

@@ -0,0 +1,10 @@
1
+
2
+export default {
3
+    machineStates: {
4
+        "TERMINE": "0",
5
+        "DISPONIBLE": "1",
6
+        "EN COURS": "2",
7
+        "HS": "3",
8
+        "ERREUR": "4"
9
+    },
10
+};

+ 2
- 18
navigation/DrawerNavigator.js View File

@@ -12,10 +12,7 @@ import BibScreen from "../screens/Websites/BibScreen";
12 12
 import DebugScreen from '../screens/DebugScreen';
13 13
 import Sidebar from "../components/Sidebar";
14 14
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
15
-import {View} from "react-native";
16
-import Touchable from "react-native-platform-touchable";
17
-import {MaterialCommunityIcons} from "@expo/vector-icons";
18
-import ThemeManager from "../utils/ThemeManager";
15
+import HeaderButton from "../components/HeaderButton";
19 16
 
20 17
 const defaultScreenOptions = {
21 18
     gestureEnabled: true,
@@ -25,20 +22,7 @@ const defaultScreenOptions = {
25 22
 
26 23
 function getDrawerButton(navigation: Object) {
27 24
     return (
28
-        <View
29
-            style={{
30
-                flexDirection: 'row',
31
-                marginLeft: 10
32
-            }}>
33
-            <Touchable
34
-                style={{padding: 6}}
35
-                onPress={navigation.openDrawer}>
36
-                <MaterialCommunityIcons
37
-                    name="menu"
38
-                    size={26}
39
-                    color={ThemeManager.getCurrentThemeVariables().text}/>
40
-            </Touchable>
41
-        </View>
25
+        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
42 26
     );
43 27
 }
44 28
 

+ 2
- 16
navigation/MainTabNavigator.js View File

@@ -14,8 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
14 14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15 15
 import ThemeManager from "../utils/ThemeManager";
16 16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
17
-import {View} from "react-native";
18
-import Touchable from "react-native-platform-touchable";
17
+import HeaderButton from "../components/HeaderButton";
19 18
 
20 19
 const TAB_ICONS = {
21 20
     Home: 'triangle',
@@ -33,20 +32,7 @@ const defaultScreenOptions = {
33 32
 
34 33
 function getDrawerButton(navigation: Object) {
35 34
     return (
36
-        <View
37
-            style={{
38
-                flexDirection: 'row',
39
-                marginLeft: 10
40
-            }}>
41
-            <Touchable
42
-                style={{padding: 6}}
43
-                onPress={navigation.openDrawer}>
44
-                <MaterialCommunityIcons
45
-                    name="menu"
46
-                    size={26}
47
-                    color={ThemeManager.getCurrentThemeVariables().text}/>
48
-            </Touchable>
49
-        </View>
35
+        <HeaderButton icon={'menu'} onPress={navigation.openDrawer}/>
50 36
     );
51 37
 }
52 38
 

+ 0
- 3
package.json View File

@@ -16,7 +16,6 @@
16 16
     "@react-navigation/native": "^5.0.9",
17 17
     "@react-navigation/stack": "^5.1.1",
18 18
     "expo": "^36.0.0",
19
-    "expo-font": "~8.0.0",
20 19
     "expo-linear-gradient": "~8.0.0",
21 20
     "expo-localization": "~8.0.0",
22 21
     "expo-permissions": "~8.0.0",
@@ -31,12 +30,10 @@
31 30
     "react-native-gesture-handler": "~1.5.0",
32 31
     "react-native-modalize": "^1.3.6",
33 32
     "react-native-paper": "^3.6.0",
34
-    "react-native-platform-touchable": "^1.1.1",
35 33
     "react-native-reanimated": "~1.4.0",
36 34
     "react-native-render-html": "^4.1.2",
37 35
     "react-native-safe-area-context": "0.6.0",
38 36
     "react-native-screens": "2.0.0-alpha.12",
39
-    "react-native-status-bar-height": "^2.3.1",
40 37
     "react-native-webview": "7.4.3"
41 38
   },
42 39
   "devDependencies": {

+ 26
- 50
screens/HomeScreen.js View File

@@ -3,18 +3,17 @@
3 3
 import * as React from 'react';
4 4
 import {TouchableOpacity, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6
-import {MaterialCommunityIcons} from "@expo/vector-icons";
7 6
 import Autolink from 'react-native-autolink';
8 7
 import ThemeManager from "../utils/ThemeManager";
9 8
 import DashboardItem from "../components/DashboardItem";
10 9
 import * as WebBrowser from 'expo-web-browser';
11 10
 import WebSectionList from "../components/WebSectionList";
12
-import PlatformTouchable from "react-native-platform-touchable";
13
-import {Avatar, Card, Text} from 'react-native-paper';
11
+import {Avatar, Button, Card, Text} from 'react-native-paper';
12
+import FeedItem from "../components/FeedItem";
13
+import SquareDashboardItem from "../components/SquareDashboardItem";
14 14
 // import DATA from "../dashboard_data.json";
15 15
 
16 16
 
17
-const ICON_AMICALE = require('../assets/amicale.png');
18 17
 const NAME_AMICALE = 'Amicale INSA Toulouse';
19 18
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
20 19
 
@@ -373,24 +372,24 @@ export default class HomeScreen extends React.Component<Props> {
373 372
                 flexDirection: 'row',
374 373
                 marginLeft: 10,
375 374
                 marginRight: 10,
375
+                marginBottom: 10,
376 376
             }}>
377
-                <DashboardItem
378
-                    isSquare={true}
377
+                <SquareDashboardItem
378
+                    title={menuTitle}
379 379
                     subtitle={menuSubtitle}
380 380
                     color={menuColor}
381 381
                     icon={menuIcon}
382 382
                     clickAction={this.onMenuClick}
383
-                    title={menuTitle}
384 383
                     isAvailable={isMenuAvailable}
385
-                    isSquareLeft={true}/>
386
-                <DashboardItem
387
-                    isSquare={true}
384
+                    isLeft={true}/>
385
+                <SquareDashboardItem
386
+                    title={proximoTitle}
388 387
                     subtitle={proximoSubtitle}
389 388
                     color={proximoColor}
390 389
                     icon={proximoIcon}
391 390
                     clickAction={this.onProximoClick}
392
-                    title={proximoTitle}
393
-                    isAvailable={isProximoAvailable}/>
391
+                    isAvailable={isProximoAvailable}
392
+                    isLeft={false}/>
394 393
             </View>
395 394
         );
396 395
     }
@@ -477,23 +476,22 @@ export default class HomeScreen extends React.Component<Props> {
477 476
                 marginLeft: 10,
478 477
                 marginRight: 10,
479 478
             }}>
480
-                <DashboardItem
481
-                    isSquare={true}
479
+                <SquareDashboardItem
480
+                    title={proxiwashTitle}
482 481
                     subtitle={proxiwashSubtitle}
483 482
                     color={proxiwashColor}
484 483
                     icon={proxiwashIcon}
485 484
                     clickAction={this.onProxiwashClick}
486
-                    title={proxiwashTitle}
487 485
                     isAvailable={proxiwashIsAvailable}
488
-                    isSquareLeft={true}/>
489
-                <DashboardItem
490
-                    isSquare={true}
486
+                    isLeft={true}/>
487
+                <SquareDashboardItem
488
+                    title={tutorinsaTitle}
491 489
                     subtitle={tutorinsaSubtitle}
492 490
                     color={tutorinsaColor}
493 491
                     icon={tutorinsaIcon}
494 492
                     clickAction={this.onTutorInsaClick}
495
-                    title={tutorinsaTitle}
496
-                    isAvailable={tutorinsaIsAvailable}/>
493
+                    isAvailable={tutorinsaIsAvailable}
494
+                    isLeft={false}/>
497 495
             </View>
498 496
         );
499 497
     }
@@ -506,36 +504,14 @@ export default class HomeScreen extends React.Component<Props> {
506 504
         const onImagePress = this.openLink.bind(this, item.full_picture);
507 505
         const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
508 506
         return (
509
-            <Card style={{margin: 5}}>
510
-                <Card.Title
511
-                    title={NAME_AMICALE}
512
-                    subtitle={HomeScreen.getFormattedDate(item.created_time)}
513
-                    left={props => <Avatar.Image size={48} source={ICON_AMICALE}
514
-                                                 style={{backgroundColor: 'transparent'}}/>}
515
-                />
516
-                {item.full_picture !== '' && item.full_picture !== undefined ?
517
-                    <TouchableOpacity onPress={onImagePress}>
518
-                        <Card.Cover source={{uri: item.full_picture}}/>
519
-                    </TouchableOpacity> : <View/>}
520
-                <Card.Content>
521
-                    {item.message !== undefined ?
522
-                        <Autolink
523
-                            text={item.message}
524
-                            hashtag="facebook"
525
-                            style={{color: ThemeManager.getCurrentThemeVariables().text}}
526
-                        /> : <View/>
527
-                    }
528
-                    <PlatformTouchable onPress={onOutLinkPress}>
529
-                        <View style={{flexDirection: 'row', marginTop: 5}}>
530
-                            <MaterialCommunityIcons
531
-                                name="facebook"
532
-                                color="#57aeff"
533
-                                size={26}/>
534
-                            <Text style={{color: "#57aeff"}}>En savoir plus</Text>
535
-                        </View>
536
-                    </PlatformTouchable>
537
-                </Card.Content>
538
-            </Card>
507
+            <FeedItem
508
+                title={NAME_AMICALE}
509
+                subtitle={HomeScreen.getFormattedDate(item.created_time)}
510
+                full_picture={item.full_picture}
511
+                message={item.message}
512
+                onImagePress={onImagePress}
513
+                onOutLinkPress={onOutLinkPress}
514
+            />
539 515
         );
540 516
     }
541 517
 

+ 1
- 1
screens/PlanningDisplayScreen.js View File

@@ -27,7 +27,7 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
27 27
     render() {
28 28
         // console.log("rendering planningDisplayScreen");
29 29
         return (
30
-            <ScrollView style={{padding: 5}}>
30
+            <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
31 31
                 <Title>
32 32
                     {this.displayData.title}
33 33
                 </Title>

+ 13
- 38
screens/PlanningScreen.js View File

@@ -4,10 +4,11 @@ import * as React from 'react';
4 4
 import {BackHandler, Image, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import ThemeManager from "../utils/ThemeManager";
7
-import {Agenda, LocaleConfig} from 'react-native-calendars';
7
+import {LocaleConfig} from 'react-native-calendars';
8 8
 import WebDataManager from "../utils/WebDataManager";
9 9
 import PlanningEventManager from '../utils/PlanningEventManager';
10 10
 import {Text, Title, List, Avatar, Divider} from 'react-native-paper';
11
+import CustomAgenda from "../components/CustomAgenda";
11 12
 
12 13
 LocaleConfig.locales['fr'] = {
13 14
     monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
@@ -64,14 +65,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
64 65
     constructor(props: any) {
65 66
         super(props);
66 67
         this.webDataManager = new WebDataManager(FETCH_URL);
67
-        this.didFocusSubscription = props.navigation.addListener(
68
-            'didFocus',
69
-            () =>
70
-                BackHandler.addEventListener(
71
-                    'hardwareBackPress',
72
-                    this.onBackButtonPressAndroid
73
-                )
74
-        );
75 68
         if (i18n.currentLocale().startsWith("fr")) {
76 69
             LocaleConfig.defaultLocale = 'fr';
77 70
         }
@@ -88,8 +81,16 @@ export default class PlanningScreen extends React.Component<Props, State> {
88 81
 
89 82
     componentDidMount() {
90 83
         this.onRefresh();
84
+        this.didFocusSubscription = this.props.navigation.addListener(
85
+            'focus',
86
+            () =>
87
+                BackHandler.addEventListener(
88
+                    'hardwareBackPress',
89
+                    this.onBackButtonPressAndroid
90
+                )
91
+        );
91 92
         this.willBlurSubscription = this.props.navigation.addListener(
92
-            'willBlur',
93
+            'blur',
93 94
             () =>
94 95
                 BackHandler.removeEventListener(
95 96
                     'hardwareBackPress',
@@ -235,7 +236,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
235 236
     render() {
236 237
         // console.log("rendering PlanningScreen");
237 238
         return (
238
-            <Agenda
239
+            <CustomAgenda
239 240
                 // the list of items that have to be displayed in agenda. If you want to render item as empty date
240 241
                 // the value of date key kas to be an empty array []. If there exists no value for date key it is
241 242
                 // considered that the date in question is not yet loaded
@@ -260,33 +261,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
260 261
                 // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
261 262
                 firstDay={1}
262 263
                 // ref to this agenda in order to handle back button event
263
-                ref={this.onAgendaRef}
264
-                // agenda theme
265
-                theme={{
266
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
267
-                    calendarBackground: ThemeManager.getCurrentThemeVariables().background,
268
-                    textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
269
-                    selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary,
270
-                    selectedDayTextColor: '#ffffff',
271
-                    todayTextColor: ThemeManager.getCurrentThemeVariables().primary,
272
-                    dayTextColor: ThemeManager.getCurrentThemeVariables().text,
273
-                    textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
274
-                    dotColor: ThemeManager.getCurrentThemeVariables().primary,
275
-                    selectedDotColor: '#ffffff',
276
-                    arrowColor: 'orange',
277
-                    monthTextColor: ThemeManager.getCurrentThemeVariables().primary,
278
-                    indicatorColor: ThemeManager.getCurrentThemeVariables().primary,
279
-                    textDayFontWeight: '300',
280
-                    textMonthFontWeight: 'bold',
281
-                    textDayHeaderFontWeight: '300',
282
-                    textDayFontSize: 16,
283
-                    textMonthFontSize: 16,
284
-                    textDayHeaderFontSize: 16,
285
-                    agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
286
-                    agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
287
-                    agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary,
288
-                    agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary,
289
-                }}
264
+                onRef={this.onAgendaRef}
290 265
             />
291 266
         );
292 267
     }

+ 1
- 1
screens/Proximo/ProximoListScreen.js View File

@@ -341,7 +341,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
341 341
     }
342 342
 
343 343
     render() {
344
-        // console.log("rendering ProximoListScreen");
344
+        console.log("rendering ProximoListScreen");
345 345
         return (
346 346
             <View>
347 347
                 <Modalize ref={this.modalRef}

+ 3
- 12
screens/Proximo/ProximoMainScreen.js View File

@@ -6,6 +6,7 @@ import i18n from "i18n-js";
6 6
 import ThemeManager from "../../utils/ThemeManager";
7 7
 import WebSectionList from "../../components/WebSectionList";
8 8
 import {IconButton, List} from 'react-native-paper';
9
+import HeaderButton from "../../components/HeaderButton";
9 10
 
10 11
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
11 12
 
@@ -156,18 +157,8 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
156 157
                 style={{
157 158
                     flexDirection: 'row',
158 159
                 }}>
159
-                <IconButton
160
-                    icon="magnify"
161
-                    size={26}
162
-                    color={ThemeManager.getCurrentThemeVariables().text}
163
-                    onPress={this.onPressSearchBtn}
164
-                />
165
-                <IconButton
166
-                    icon="information"
167
-                    size={26}
168
-                    color={ThemeManager.getCurrentThemeVariables().text}
169
-                    onPress={this.onPressAboutBtn}
170
-                />
160
+                <HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
161
+                <HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
171 162
             </View>
172 163
         );
173 164
     }

+ 39
- 88
screens/Proxiwash/ProxiwashScreen.js View File

@@ -9,21 +9,15 @@ import NotificationsManager from "../../utils/NotificationsManager";
9 9
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
10 10
 import * as Expo from "expo";
11 11
 import {Divider, IconButton, List, Text, Title} from 'react-native-paper';
12
+import HeaderButton from "../../components/HeaderButton";
13
+import ProxiwashListItem from "../../components/ProxiwashListItem";
14
+import ProxiwashConstants from "../../constants/ProxiwashConstants";
12 15
 
13 16
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
14 17
 
15
-const MACHINE_STATES = {
16
-    "TERMINE": "0",
17
-    "DISPONIBLE": "1",
18
-    "EN COURS": "2",
19
-    "HS": "3",
20
-    "ERREUR": "4"
21
-};
22
-
23 18
 let stateStrings = {};
24 19
 let modalStateStrings = {};
25 20
 let stateIcons = {};
26
-let stateColors = {};
27 21
 
28 22
 const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
29 23
 
@@ -63,30 +57,23 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
63 57
      */
64 58
     constructor() {
65 59
         super();
66
-        let colors = ThemeManager.getCurrentThemeVariables();
67
-        stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
68
-        stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
69
-        stateColors[MACHINE_STATES["EN COURS"]] = colors.proxiwashRunningColor;
70
-        stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
71
-        stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;
72
-
73
-        stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
74
-        stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
75
-        stateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
76
-        stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
77
-        stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
78
-
79
-        modalStateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.modal.finished');
80
-        modalStateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready');
81
-        modalStateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.modal.running');
82
-        modalStateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.modal.broken');
83
-        modalStateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.modal.error');
84
-
85
-        stateIcons[MACHINE_STATES.TERMINE] = 'check-circle';
86
-        stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank';
87
-        stateIcons[MACHINE_STATES["EN COURS"]] = 'progress-check';
88
-        stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline';
89
-        stateIcons[MACHINE_STATES.ERREUR] = 'alert';
60
+        stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
61
+        stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
62
+        stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
63
+        stateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.states.broken');
64
+        stateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.states.error');
65
+
66
+        modalStateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.modal.finished');
67
+        modalStateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready');
68
+        modalStateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.modal.running');
69
+        modalStateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.modal.broken');
70
+        modalStateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.modal.error');
71
+
72
+        stateIcons[ProxiwashConstants.machineStates.TERMINE] = 'check-circle';
73
+        stateIcons[ProxiwashConstants.machineStates.DISPONIBLE] = 'radiobox-blank';
74
+        stateIcons[ProxiwashConstants.machineStates["EN COURS"]] = 'progress-check';
75
+        stateIcons[ProxiwashConstants.machineStates.HS] = 'alert-octagram-outline';
76
+        stateIcons[ProxiwashConstants.machineStates.ERREUR] = 'alert';
90 77
 
91 78
         // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current;
92 79
         this.onAboutPress = this.onAboutPress.bind(this);
@@ -247,9 +234,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
247 234
      */
248 235
     showAlert(title: string, item: Object, isDryer: boolean) {
249 236
         let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
250
-        let message = modalStateStrings[MACHINE_STATES[item.state]];
237
+        let message = modalStateStrings[ProxiwashConstants.machineStates[item.state]];
251 238
         const onPress = this.setupNotifications.bind(this, item.number);
252
-        if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) {
239
+        if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]) {
253 240
             buttons = [
254 241
                 {
255 242
                     text: this.isMachineWatched(item.number) ?
@@ -267,7 +254,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
267 254
                     end: item.endTime,
268 255
                     remaining: item.remainingTime
269 256
                 });
270
-        } else if (MACHINE_STATES[item.state] === MACHINE_STATES.DISPONIBLE) {
257
+        } else if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates.DISPONIBLE) {
271 258
             if (isDryer)
272 259
                 message += '\n' + i18n.t('proxiwashScreen.dryersTariff');
273 260
             else
@@ -286,12 +273,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
286 273
 
287 274
     getRightButton() {
288 275
         return (
289
-            <IconButton
290
-                icon="information"
291
-                size={26}
292
-                color={ThemeManager.getCurrentThemeVariables().text}
293
-                onPress={this.onAboutPress}
294
-            />
276
+            <HeaderButton icon={'information'} onPress={this.onAboutPress}/>
295 277
         );
296 278
     }
297 279
 
@@ -327,56 +309,25 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
327 309
      * @returns {React.Node}
328 310
      */
329 311
     getRenderItem({item, section}: Object) {
330
-        let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"];
331
-        let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
332
-        let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
312
+        const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"];
313
+        const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
314
+        const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
333 315
         const onPress = this.showAlert.bind(this, machineName, item, isDryer);
334 316
         let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0;
335
-        if (MACHINE_STATES[item.state] === '0')
317
+        if (ProxiwashConstants.machineStates[item.state] === '0')
336 318
             width = '100%';
337 319
         return (
338
-            <View>
339
-                <View style={{
340
-                    height: '100%',
341
-                    position: 'absolute',
342
-                    left: 0,
343
-                    width: width,
344
-                    backgroundColor: stateColors[MACHINE_STATES[item.state]]
345
-                }}/>
346
-                <List.Item
347
-                    title={machineName}
348
-                    description={isMachineRunning ? item.startTime + '/' + item.endTime : ''}
349
-                    onPress={onPress}
350
-                    style={{
351
-                        backgroundColor: 'transparent',
352
-                        height: 64
353
-                    }}
354
-                    left={props => this.isMachineWatched(item.number) ?
355
-                        <List.Icon {...props} icon={'bell-ring'}
356
-                                   color={ThemeManager.getCurrentThemeVariables().primary}/> :
357
-                        <List.Icon {...props} icon={isDryer ? 'tumble-dryer' : 'washing-machine'}/>}
358
-                    right={props => (
359
-                        <View style={{flexDirection: 'row'}}>
360
-                            <View style={{
361
-                                justifyContent: 'center',
362
-                            }}>
363
-                                <Text style={
364
-                                    MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
365
-                                        {fontWeight: 'bold',} : {}}
366
-                                >
367
-                                    {stateStrings[MACHINE_STATES[item.state]]}
368
-                                </Text>
369
-                            </View>
370
-
371
-                            <List.Icon
372
-                                {...props}
373
-                                color={ThemeManager.getCurrentThemeVariables().text}
374
-                                icon={stateIcons[MACHINE_STATES[item.state]]}
375
-                            />
376
-                        </View>)}
377
-                />
378
-                <Divider/>
379
-            </View>
320
+            <ProxiwashListItem
321
+                title={machineName}
322
+                description={isMachineRunning ? item.startTime + '/' + item.endTime : ''}
323
+                onPress={onPress}
324
+                progress={width}
325
+                state={item.state}
326
+                isWatched={this.isMachineWatched(item.number)}
327
+                isDryer={isDryer}
328
+                statusText={stateStrings[ProxiwashConstants.machineStates[item.state]]}
329
+                statusIcon={stateIcons[ProxiwashConstants.machineStates[item.state]]}
330
+            />
380 331
         );
381 332
     }
382 333
 }

+ 39
- 63
screens/SettingsScreen.js View File

@@ -1,12 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {ScrollView, View} from "react-native";
4
+import {ScrollView} from "react-native";
5 5
 import ThemeManager from '../utils/ThemeManager';
6 6
 import i18n from "i18n-js";
7 7
 import AsyncStorageManager from "../utils/AsyncStorageManager";
8 8
 import NotificationsManager from "../utils/NotificationsManager";
9
-import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper';
9
+import {Card, List, Switch, ToggleButton} from 'react-native-paper';
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -40,39 +40,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
40 40
     }
41 41
 
42 42
     /**
43
-     * Get a list item using the specified control
44
-     *
45
-     * @param control The custom control to use
46
-     * @param icon The icon name to display on the list item
47
-     * @param title The text to display as this list item title
48
-     * @param subtitle The text to display as this list item subtitle
49
-     * @returns {React.Node}
50
-     */
51
-    static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) {
52
-        return (
53
-            <List.Item
54
-                title={title}
55
-                description={subtitle}
56
-                left={props => <List.Icon {...props} icon={icon}/>}
57
-                right={props => control}
58
-            />
59
-        );
60
-    }
61
-
62
-    getRadioButton(onPress: Function, value: string, label: string) {
63
-        return (
64
-            <TouchableRipple
65
-                onPress={onPress}
66
-            >
67
-                <View pointerEvents="none">
68
-                    <Text>{label}</Text>
69
-                    <RadioButton value={value} />
70
-                </View>
71
-            </TouchableRipple>
72
-        );
73
-    }
74
-
75
-    /**
76 43
      * Save the value for the proxiwash reminder notification time
77 44
      *
78 45
      * @param value The value to store
@@ -95,11 +62,13 @@ export default class SettingsScreen extends React.Component<Props, State> {
95 62
      * @param value The value to store
96 63
      */
97 64
     onStartScreenPickerValueChange(value: string) {
98
-        let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key;
99
-        AsyncStorageManager.getInstance().savePref(key, value);
100
-        this.setState({
101
-            startScreenPickerSelected: value
102
-        });
65
+        if (value != null) {
66
+            let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key;
67
+            AsyncStorageManager.getInstance().savePref(key, value);
68
+            this.setState({
69
+                startScreenPickerSelected: value
70
+            });
71
+        }
103 72
     }
104 73
 
105 74
     /**
@@ -109,16 +78,14 @@ export default class SettingsScreen extends React.Component<Props, State> {
109 78
      */
110 79
     getProxiwashNotifPicker() {
111 80
         return (
112
-            <RadioButton.Group
81
+            <ToggleButton.Row
113 82
                 onValueChange={this.onProxiwashNotifPickerValueChange}
114 83
                 value={this.state.proxiwashNotifPickerSelected}
115 84
             >
116
-                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
117
-                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
118
-                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
119
-                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
120
-                <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
121
-            </RadioButton.Group>
85
+                <ToggleButton icon="close" value="never"/>
86
+                <ToggleButton icon="numeric-2" value="2"/>
87
+                <ToggleButton icon="numeric-5" value="5"/>
88
+            </ToggleButton.Row>
122 89
         );
123 90
     }
124 91
 
@@ -129,16 +96,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
129 96
      */
130 97
     getStartScreenPicker() {
131 98
         return (
132
-            <RadioButton.Group
99
+            <ToggleButton.Row
133 100
                 onValueChange={this.onStartScreenPickerValueChange}
134 101
                 value={this.state.startScreenPickerSelected}
135 102
             >
136
-                <RadioButton.Item label={i18n.t('screens.home')} value="Home" style={{color: "#fff"}}/>
137
-                <RadioButton.Item label={i18n.t('screens.planning')} value="Planning"/>
138
-                <RadioButton.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
139
-                <RadioButton.Item label={i18n.t('screens.proximo')} value="Proximo"/>
140
-                <RadioButton.Item label={'Planex'} value="Planex"/>
141
-            </RadioButton.Group>
103
+                <ToggleButton icon="shopping" value="Proximo"/>
104
+                <ToggleButton icon="calendar-range" value="Planning"/>
105
+                <ToggleButton icon="triangle" value="Home"/>
106
+                <ToggleButton icon="washing-machine" value="Proxiwash"/>
107
+                <ToggleButton icon="timetable" value="Planex"/>
108
+            </ToggleButton.Row>
142 109
         );
143 110
     }
144 111
 
@@ -180,11 +147,18 @@ export default class SettingsScreen extends React.Component<Props, State> {
180 147
                 <Card style={{margin: 5}}>
181 148
                     <Card.Title title={i18n.t('settingsScreen.generalCard')}/>
182 149
                     <List.Section>
183
-                        {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
150
+                        {this.getToggleItem(
151
+                            this.onToggleNightMode,
152
+                            'theme-light-dark',
153
+                            i18n.t('settingsScreen.nightMode'),
154
+                            this.state.nightMode ?
155
+                                i18n.t('settingsScreen.nightModeSubOn') :
156
+                                i18n.t('settingsScreen.nightModeSubOff')
157
+                        )}
184 158
                         <List.Accordion
185 159
                             title={i18n.t('settingsScreen.startScreen')}
186 160
                             description={i18n.t('settingsScreen.startScreenSub')}
187
-                            left={props => <List.Icon {...props} icon="power" />}
161
+                            left={props => <List.Icon {...props} icon="power"/>}
188 162
                         >
189 163
                             {this.getStartScreenPicker()}
190 164
                         </List.Accordion>
@@ -192,13 +166,15 @@ export default class SettingsScreen extends React.Component<Props, State> {
192 166
                 </Card>
193 167
                 <Card style={{margin: 5}}>
194 168
                     <Card.Title title="Proxiwash"/>
195
-                    <List.Accordion
196
-                        title={i18n.t('settingsScreen.proxiwashNotifReminder')}
197
-                        description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
198
-                        left={props => <List.Icon {...props} icon="washing-machine" />}
199
-                    >
200
-                        {this.getProxiwashNotifPicker()}
201
-                    </List.Accordion>
169
+                    <List.Section>
170
+                        <List.Accordion
171
+                            title={i18n.t('settingsScreen.proxiwashNotifReminder')}
172
+                            description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
173
+                            left={props => <List.Icon {...props} icon="washing-machine"/>}
174
+                        >
175
+                            {this.getProxiwashNotifPicker()}
176
+                        </List.Accordion>
177
+                    </List.Section>
202 178
                 </Card>
203 179
 
204 180
             </ScrollView>

+ 3
- 12
translations/en.json View File

@@ -60,21 +60,12 @@
60 60
   "settingsScreen": {
61 61
     "generalCard": "General",
62 62
     "nightMode": "Night Mode",
63
-    "nightModeSub": "Switch the app to a dark or light theme",
63
+    "nightModeSubOn": "Your eyes are at peace",
64
+    "nightModeSubOff": "Your eyes are burning",
64 65
     "startScreen": "Start Screen",
65 66
     "startScreenSub": "Select which screen to start the app on",
66 67
     "proxiwashNotifReminder": "Machine running reminder",
67
-    "proxiwashNotifReminderSub": "Choose when to send a notification to remind you a machine is running with your laundry",
68
-    "proxiwashNotifReminderPicker": {
69
-      "never": "Never",
70
-      "1": "1 min",
71
-      "2": "2 min",
72
-      "3": "3 min",
73
-      "5": "5 min",
74
-      "10": "10 min",
75
-      "20": "20 min",
76
-      "30": "30 min"
77
-    }
68
+    "proxiwashNotifReminderSub": "How many minutes before",
78 69
   },
79 70
   "homeScreen": {
80 71
     "listUpdated": "List updated!",

+ 3
- 12
translations/fr.json View File

@@ -60,21 +60,12 @@
60 60
   "settingsScreen": {
61 61
     "generalCard": "Général",
62 62
     "nightMode": "Mode Nuit",
63
-    "nightModeSub": "Passer l'application dans un thème sombre ou clair",
63
+    "nightModeSubOn": "Vos yeux brulent",
64
+    "nightModeSubOff": "Vos yeux vous remercient",
64 65
     "startScreen": "Écran de démarrage",
65 66
     "startScreenSub": "Choisissez l'écran utilisé au démarrage",
66 67
     "proxiwashNotifReminder": "Rappel de machine en cours",
67
-    "proxiwashNotifReminderSub": "Choississez quand envoyer une notification pour vous rappeler qu'une machine avec votre linge est en cours",
68
-    "proxiwashNotifReminderPicker": {
69
-      "never": "Jamais",
70
-      "1": "1 min",
71
-      "2": "2 min",
72
-      "3": "3 min",
73
-      "5": "5 min",
74
-      "10": "10 min",
75
-      "20": "20 min",
76
-      "30": "30 min"
77
-    }
68
+    "proxiwashNotifReminderSub": "Combien de minutes avant",
78 69
   },
79 70
   "homeScreen": {
80 71
     "listUpdated": "List mise à jour!",

+ 2
- 0
utils/ThemeManager.js View File

@@ -38,6 +38,7 @@ export default class ThemeManager {
38 38
                 proxiwashFinishedColor: "rgba(54,165,22,0.31)",
39 39
                 proxiwashReadyColor: "transparent",
40 40
                 proxiwashRunningColor: "rgba(94,104,241,0.3)",
41
+                proxiwashRunningBgColor: "rgba(99,109,255,0.14)",
41 42
                 proxiwashBrokenColor: "rgba(162,162,162,0.31)",
42 43
                 proxiwashErrorColor: "rgba(204,7,0,0.31)",
43 44
 
@@ -74,6 +75,7 @@ export default class ThemeManager {
74 75
                 proxiwashFinishedColor: "rgba(17,149,32,0.53)",
75 76
                 proxiwashReadyColor: "transparent",
76 77
                 proxiwashRunningColor: "rgba(29,59,175,0.65)",
78
+                proxiwashRunningBgColor: "rgba(99,109,255,0.14)",
77 79
                 proxiwashBrokenColor: "#000000",
78 80
                 proxiwashErrorColor: "rgba(213,8,0,0.57)",
79 81
 

+ 0
- 28
utils/WebDataManager.js View File

@@ -24,38 +24,10 @@ export default class WebDataManager {
24 24
             let response = await fetch(this.FETCH_URL);
25 25
             fetchedData = await response.json();
26 26
         } catch (error) {
27
-            // console.log('Could not read FetchedData from server');
28
-            // console.log(error);
29 27
             throw new Error('Could not read FetchedData from server');
30 28
         }
31 29
         this.lastDataFetched = fetchedData;
32 30
         return fetchedData;
33 31
     }
34 32
 
35
-    /**
36
-     * Detects if the fetched data is not an empty object
37
-     *
38
-     * @return
39
-     */
40
-    isDataObjectValid(): boolean {
41
-        return Object.keys(this.lastDataFetched).length > 0;
42
-    }
43
-
44
-    /**
45
-     * Show a toast message depending on the validity of the fetched data
46
-     *
47
-     * @param errorString
48
-     */
49
-    showUpdateToast(errorString) {
50
-        // let isSuccess = this.isDataObjectValid();
51
-        // if (!isSuccess) {
52
-        //     Toast.show({
53
-        //         text: errorString,
54
-        //         buttonText: 'OK',
55
-        //         type: isSuccess ? "success" : "danger",
56
-        //         duration: 2000
57
-        //     });
58
-        // }
59
-    }
60
-
61 33
 }

Loading…
Cancel
Save