lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improved night mode

Browse source
This commit is contained in:
keplyx 2019-06-28 11:35:15 +02:00
parent be67c70a95
commit 7cd543ac74
18 changed files with 307 additions and 241 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
App.js
View file

@ -1,11 +1,13 @@
import React from 'react';
import {Dimensions, StyleSheet, View, Text} from 'react-native';
import {StyleProvider, Root} from 'native-base';
import {StyleProvider, Root, View} from 'native-base';
import AppNavigator from './navigation/AppNavigator';
import ThemeManager from './utils/ThemeManager';
import LocaleManager from './utils/LocaleManager';
import * as Font from 'expo-font';
// edited native-base-shoutem-theme according to
// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
// to allow for dynamic theme switching
import { clearThemeCache } from 'native-base-shoutem-theme';
export default class App extends React.Component {
@ -35,9 +37,10 @@ export default class App extends React.Component {
updateTheme() {
console.log('update theme called');
// Change not propagating, need to restart the app
// this.setState({
// currentTheme: ThemeManager.getInstance().getCurrentTheme()
// });
this.setState({
currentTheme: ThemeManager.getInstance().getCurrentTheme()
});
clearThemeCache();
}
render() {
@ -45,12 +48,15 @@ export default class App extends React.Component {
return <View/>;
}
console.log('rendering');
// console.log(this.state.currentTheme.variables.containerBgColor);
console.log(this.state.currentTheme.variables.containerBgColor);
return (
<StyleProvider style={this.state.currentTheme}>
<Root>
<Root>
<StyleProvider style={this.state.currentTheme}>
<AppNavigator/>
</Root>
</StyleProvider>);
</StyleProvider>
</Root>
);
}
}

9
app.json
View file

@ -12,10 +12,11 @@
"version": "0.0.1",
"orientation": "portrait",
"icon": "./assets/icon.png",
"primaryColor": "#e42612",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
"backgroundColor": "#fff"
},
"updates": {
"fallbackToCacheTimeout": 0
@ -24,7 +25,11 @@
"**/*"
],
"ios": {
"supportsTablet": true
"supportsTablet": true,
"bundleIdentifier": "com.test.applicationamicale"
},
"android": {
"package": "com.test.applicationamicale"
}
}
}

BIN
assets/splash.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 87 KiB

30
components/CustomMaterialIcon.js Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import {Icon} from "native-base";
import ThemeManager from '../utils/ThemeManager';
export default class CustomMaterialIcon extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Icon
active
name={this.props.icon}
type={'MaterialCommunityIcons'}
style={{
color:
this.props.color !== undefined ?
this.props.color :
this.props.active ?
ThemeManager.getInstance().getCurrentThemeVariables().brandPrimary :
ThemeManager.getInstance().getCurrentThemeVariables().customMaterialIconColor,
fontSize: this.props.fontSize !== undefined ? this.props.fontSize : 26,
width: this.props.width !== undefined ? this.props.width : 30
}}
/>
);
}
}

9
components/SideMenu.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import {Platform, Dimensions, StyleSheet, Image, FlatList, Linking} from 'react-native';
import {Badge, Text, Container, Content, Icon, Left, ListItem, Right} from "native-base";
import i18n from "i18n-js";
import CustomMaterialIcon from '../components/CustomMaterialIcon';
const deviceHeight = Dimensions.get("window").height;
@ -101,11 +102,9 @@ export default class SideBar extends React.Component {
}}
>
<Left>
<Icon
active
name={item.icon}
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
<CustomMaterialIcon
icon={item.icon}
active={this.state.active === item.route}
/>
<Text style={styles.text}>
{item.name}

6
native-base-theme/components/Button.js
View file

@ -319,7 +319,7 @@ export default (variables /*: * */ = variable) => {
fontFamily: variables.btnFontFamily,
marginLeft: 0,
marginRight: 0,
color: variables.inverseTextColor,
color: variables.btnTextColor,
fontSize: variables.btnTextSize,
paddingHorizontal: 16,
backgroundColor: "transparent"
@ -327,13 +327,13 @@ export default (variables /*: * */ = variable) => {
},
"NativeBase.Icon": {
color: variables.inverseTextColor,
color: variables.btnTextColor,
fontSize: 24,
marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined
},
"NativeBase.IconNB": {
color: variables.inverseTextColor,
color: variables.btnTextColor,
fontSize: 24,
marginHorizontal: 16,
paddingTop: platform === "ios" ? 2 : undefined

16
native-base-theme/variables/platform.js
View file

@ -35,6 +35,7 @@ export default {
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
@ -100,7 +101,7 @@ export default {
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5",
checkboxBgColor: "#E4202D",
checkboxSize: 20,
checkboxTickColor: "#fff",
@ -210,7 +211,7 @@ export default {
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5",
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return this.brandPrimary;
@ -254,6 +255,17 @@ export default {
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
// CUSTOM
customMaterialIconColor: "#5d5d5d",
// PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.4)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(94,104,241,0.4)",
proxiwashBrokenColor: "#a2a2a2",
proxiwashErrorColor: "rgba(204,7,0,0.4)",
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

39
native-base-theme/variables/platformDark.js
View file

@ -35,37 +35,38 @@ export default {
// Button
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
btnTextColor: '#fff',
btnDisabledBg: "#b5b5b5",
buttonPadding: 6,
get btnPrimaryBg() {
return this.brandPrimary;
},
get btnPrimaryColor() {
return this.inverseTextColor;
return this.textColor;
},
get btnInfoBg() {
return this.brandInfo;
},
get btnInfoColor() {
return this.inverseTextColor;
return this.textColor;
},
get btnSuccessBg() {
return this.brandSuccess;
},
get btnSuccessColor() {
return this.inverseTextColor;
return this.textColor;
},
get btnDangerBg() {
return this.brandDanger;
},
get btnDangerColor() {
return this.inverseTextColor;
return this.textColor;
},
get btnWarningBg() {
return this.brandWarning;
},
get btnWarningColor() {
return this.inverseTextColor;
return this.textColor;
},
get btnTextSize() {
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
@ -87,8 +88,8 @@ export default {
},
// Card
cardDefaultBg: "#2b2b2b",
cardBorderColor: "#ccc",
cardDefaultBg: "#363636",
cardBorderColor: "#1a1a1a",
cardBorderRadius: 2,
cardItemPadding: platform === "ios" ? 10 : 12,
@ -100,7 +101,7 @@ export default {
CheckboxIconSize: platform === "ios" ? 21 : 16,
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
checkboxBgColor: "#039BE5",
checkboxBgColor: "#E4202D",
checkboxSize: 20,
checkboxTickColor: "#fff",
@ -114,7 +115,7 @@ export default {
brandLight: "#f4f4f4",
//Container
containerBgColor: "#2b2b2b",
containerBgColor: "#333333",
//Date Picker
datePickerTextColor: "#000",
@ -197,11 +198,11 @@ export default {
// List
listBg: "transparent",
listBorderColor: "#c9c9c9",
listBorderColor: "#727272",
listDividerBg: "#f4f4f4",
listBtnUnderlayColor: "#DDD",
listItemPadding: platform === "ios" ? 10 : 12,
listNoteColor: "#808080",
listNoteColor: "#acacac",
listNoteSize: 13,
// Progress Bar
@ -210,7 +211,7 @@ export default {
// Radio Button
radioBtnSize: platform === "ios" ? 25 : 23,
radioSelectedColorAndroid: "#3F51B5",
radioSelectedColorAndroid: "#E4202D",
radioBtnLineHeight: platform === "ios" ? 29 : 24,
get radioColor() {
return this.brandPrimary;
@ -240,7 +241,7 @@ export default {
tabFontSize: 15,
// Text
textColor: "#fff",
textColor: "#d6d6d6",
inverseTextColor: "#000",
noteFontSize: 14,
get defaultTextColor() {
@ -254,6 +255,18 @@ export default {
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
titleFontColor: platform === "ios" ? "#000" : "#FFF",
// CUSTOM
customMaterialIconColor: "#b3b3b3",
// PROXIWASH
proxiwashFinishedColor: "rgba(12,157,13,0.72)",
proxiwashReadyColor: "transparent",
proxiwashRunningColor: "rgba(29,59,175,0.65)",
proxiwashBrokenColor: "#000000",
proxiwashErrorColor: "rgba(213,8,0,0.57)",
// Other
borderRadiusBase: platform === "ios" ? 5 : 2,
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),

23
package-lock.json generated
View file

@ -1098,6 +1098,24 @@
}
}
},
"@shoutem/theme": {
"version": "0.11.3",
"resolved": "https://registry.npmjs.org/@shoutem/theme/-/theme-0.11.3.tgz",
"integrity": "sha512-2soc/w0QYWjvm+vFOemSAuDpRAzBW/sTtNkkqwwZfz0VcNH78FWnUfyMOJetmr1aiulFoE87JYeyHlfOhxKbbw==",
"requires": {
"hoist-non-react-statics": "^1.0.5",
"lodash": "~4.17.4",
"prop-types": "^15.5.10",
"tinycolor2": "^1.3.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
"integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
}
}
},
"@types/fbemitter": {
"version": "2.0.32",
"resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
@ -8068,6 +8086,11 @@
"resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
"integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
},
"tinycolor2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
"integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

2
package.json
View file

@ -9,6 +9,7 @@
},
"dependencies": {
"@expo/vector-icons": "latest",
"@shoutem/theme": "latest",
"expo": "^33.0.0",
"expo-font": "^5.0.1",
"expo-localization": "^5.0.1",
@ -16,6 +17,7 @@
"i18n-js": "^3.3.0",
"i18next": "latest",
"native-base": "latest",
"native-base-shoutem-theme": "latest",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-i18next": "latest",

288
screens/About/AboutScreen.js
View file

@ -1,10 +1,11 @@
import React from 'react';
import {Platform, StyleSheet, Linking, Alert} from 'react-native';
import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1} from 'native-base';
import {Platform, StyleSheet, Linking, Alert, FlatList} from 'react-native';
import {Container, Content, Text, Card, CardItem, Body, Icon, Left, Right, Thumbnail, H1, ListItem} from 'native-base';
import CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js";
import appJson from '../../app';
import packageJson from '../../package';
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
const links = {
appstore: 'https://qwant.com',
@ -19,11 +20,105 @@ const links = {
react: 'https://facebook.github.io/react-native/',
};
function openWebLink(link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}
export default class AboutScreen extends React.Component {
openWebLink(link) {
Linking.openURL(link).catch((err) => console.error('Error opening link', err));
appData = [
{
onPressCallback: () => openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore),
icon: Platform.OS === "ios" ? 'apple' : 'google-play',
text: Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.gitlab),
icon: 'git',
text: 'Gitlab',
showChevron: true
},
{
onPressCallback: () => openWebLink(links.bugs),
icon: 'bug',
text: i18n.t('aboutScreen.bugs'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.changelog),
icon: 'refresh',
text: i18n.t('aboutScreen.changelog'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.license),
icon: 'file-document',
text: i18n.t('aboutScreen.license'),
showChevron: true
},
];
authorData = [
{
onPressCallback: () => Alert.alert('Coucou', 'Whaou'),
icon: 'account-circle',
text: 'Arnaud VERGNET',
showChevron: false
},
{
onPressCallback: () => openWebLink(links.mail),
icon: 'email',
text: i18n.t('aboutScreen.mail'),
showChevron: true
},
{
onPressCallback: () => openWebLink(links.linkedin),
icon: 'linkedin',
text: 'Linkedin',
showChevron: true
},
{
onPressCallback: () => openWebLink(links.facebook),
icon: 'facebook',
text: 'Facebook',
showChevron: true
},
];
technoData = [
{
onPressCallback: () => openWebLink(links.react),
icon: 'react',
text: i18n.t('aboutScreen.reactNative'),
showChevron: false
},
{
onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
icon: 'developer-board',
text: i18n.t('aboutScreen.libs'),
showChevron: true
},
];
getCardItem(onPressCallback, icon, text, showChevron) {
return (
<CardItem button
onPress={onPressCallback}>
<Left>
<CustomMaterialIcon icon={icon}/>
<Text>{text}</Text>
</Left>
{showChevron ?
<Right>
<CustomMaterialIcon icon="chevron-right"
fontSize={20}/>
</Right>
:
<Right/>
}
</CardItem>)
;
}
render() {
@ -44,182 +139,39 @@ export default class AboutScreen extends React.Component {
</Body>
</Left>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(Platform.OS === "ios" ? links.appstore : links.playstore)}>
<Left>
<Icon active name={Platform.OS === "ios" ? 'apple' : 'google-play'}
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>{Platform.OS === "ios" ? i18n.t('aboutScreen.appstore') : i18n.t('aboutScreen.playstore')}</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.gitlab)}>
<Left>
<Icon active name="git"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>Gitlab</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.bugs)}>
<Left>
<Icon active name="bug"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>{i18n.t('aboutScreen.bugs')}</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.changelog)}>
<Left>
<Icon active name="refresh"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.changelog')}
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.license)}>
<Left>
<Icon active name="file-document"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.license')}
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<FlatList
data={this.appData}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
}
/>
</Card>
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.author')}</Text>
</CardItem>
<CardItem button
onPress={() => Alert.alert('Coucou', 'Whaou')}>
<Left>
<Icon active name="account-circle"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>Arnaud VERGNET</Text>
</Left>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.mail)}>
<Left>
<Icon active name="email"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.mail')}
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.linkedin)}>
<Left>
<Icon active name="linkedin"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
Linkedin
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.facebook)}>
<Left>
<Icon active name="facebook"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
Facebook
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<FlatList
data={this.authorData}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
}
/>
</Card>
<Card>
<CardItem header>
<Text>{i18n.t('aboutScreen.technologies')}</Text>
</CardItem>
<CardItem button
onPress={() => this.openWebLink(links.react)}>
<Left>
<Icon active name="react"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.reactNative')}
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<CardItem button
onPress={() => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies})}>
<Left>
<Icon active name="developer-board"
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<Text>
{i18n.t('aboutScreen.libs')}
</Text>
</Left>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
</Right>
</CardItem>
<FlatList
data={this.technoData}
keyExtractor={(item) => item.icon}
renderItem={({item}) =>
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron)
}
/>
</Card>
</Content>
</Container>

6
screens/Proximo/ProximoListScreen.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Button, Icon} from 'native-base';
import {Container, Text, Content, ListItem, Left, Thumbnail, Right, Body, Icon} from 'native-base';
import CustomHeader from "../../components/CustomHeader";
import {AsyncStorage, FlatList, View} from "react-native";
import Touchable from 'react-native-platform-touchable';
@ -181,10 +181,12 @@ export default class ProximoMainScreen extends React.Component {
>
<Left>
<Thumbnail square source={{uri: IMG_URL + item.name + '.jpg'}}/>
</Left>
<Body>
<Text style={{marginLeft: 20}}>
{item.name}
</Text>
</Left>
</Body>
<Right style={{flex: 1}}>
<Text>
{item.price}€

23
screens/Proximo/ProximoMainScreen.js
View file

@ -3,6 +3,7 @@ import {StyleSheet, RefreshControl, FlatList} from 'react-native';
import {Container, Text, Content, ListItem, Left, Right, Body, Badge, Icon, Toast} from 'native-base';
import CustomHeader from "../../components/CustomHeader";
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProximo.json";
@ -20,6 +21,7 @@ export default class ProximoMainScreen extends React.Component {
super(props);
this.state = {
refreshing: false,
firstLoading: true,
data: {},
};
}
@ -64,7 +66,10 @@ export default class ProximoMainScreen extends React.Component {
_onRefresh = () => {
this.setState({refreshing: true});
this.readData().then(() => {
this.setState({refreshing: false});
this.setState({
refreshing: false,
firstLoading: false
});
Toast.show({
text: i18n.t('proximoScreen.listUpdated'),
buttonText: 'OK',
@ -100,9 +105,10 @@ export default class ProximoMainScreen extends React.Component {
}}
>
<Left>
<Icon name={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
type={'MaterialCommunityIcons'}
style={styles.icon}/>
<CustomMaterialIcon
icon={typesIcons[item.type] ? typesIcons[item.type] : typesIcons.Default}
fontSize={30}
/>
</Left>
<Body>
<Text>
@ -113,8 +119,7 @@ export default class ProximoMainScreen extends React.Component {
</Text></Badge>
</Body>
<Right>
<Icon name="chevron-right"
type={'MaterialCommunityIcons'}/>
<CustomMaterialIcon icon="chevron-right"/>
</Right>
</ListItem>}
/>
@ -123,9 +128,3 @@ export default class ProximoMainScreen extends React.Component {
}
}
const styles = StyleSheet.create({
icon: {
fontSize: 30,
width: 30
}
});

39
screens/ProxiwashScreen.js
View file

@ -1,10 +1,12 @@
import React from 'react';
import {SectionList, RefreshControl, StyleSheet, View, ScrollView} from 'react-native';
import {Badge, Body, Container, Content, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
import {SectionList, RefreshControl, View} from 'react-native';
import {Body, Container, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager';
import NotificationsManager from '../utils/NotificationsManager';
import i18n from "i18n-js";
import {AsyncStorage} from 'react-native'
import CustomMaterialIcon from "../components/CustomMaterialIcon";
const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";
@ -28,11 +30,12 @@ export default class ProxiwashScreen extends React.Component {
constructor(props) {
super(props);
stateColors[MACHINE_STATES.TERMINE] = 'rgba(54,165,22,0.4)';
stateColors[MACHINE_STATES.DISPONIBLE] = '#ffffff';
stateColors[MACHINE_STATES.FONCTIONNE] = 'rgba(241,237,41,0.4)';
stateColors[MACHINE_STATES.HS] = '#a2a2a2';
stateColors[MACHINE_STATES.ERREUR] = 'rgba(204,7,0,0.4)';
let colors = ThemeManager.getInstance().getCurrentThemeVariables();
stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
stateColors[MACHINE_STATES.FONCTIONNE] = colors.proxiwashRunningColor;
stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;
stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
@ -41,6 +44,7 @@ export default class ProxiwashScreen extends React.Component {
stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
this.state = {
refreshing: false,
firstLoading: true,
data: {},
machinesWatched: [],
};
@ -78,7 +82,10 @@ export default class ProxiwashScreen extends React.Component {
_onRefresh = () => {
this.setState({refreshing: true});
this.readData().then(() => {
this.setState({refreshing: false});
this.setState({
refreshing: false,
firstLoading: false
});
Toast.show({
text: i18n.t('proxiwashScreen.listUpdated'),
buttonText: 'OK',
@ -158,13 +165,12 @@ export default class ProxiwashScreen extends React.Component {
alignSelf: 'flex-end',
right: 0,
width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
backgroundColor: '#fff'
backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
}}>
</View>
<Left>
<Icon name={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
type={'MaterialCommunityIcons'}
style={{fontSize: 30, width: 30}}
<CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
fontSize={30}
/>
</Left>
<Body>
@ -214,12 +220,17 @@ export default class ProxiwashScreen extends React.Component {
extraData: this.state
},
];
console.log(this.state.machinesWatched);
const loadingData = [
{
title: i18n.t('proxiwashScreen.loading'),
data: []
}
];
return (
<Container>
<CustomHeader navigation={nav} title={'Proxiwash'}/>
<SectionList
sections={data}
sections={this.state.firstLoading ? loadingData : data}
keyExtractor={(item) => item.number}
refreshControl={
<RefreshControl

24
screens/SettingsScreen.js
View file

@ -1,9 +1,10 @@
import React from 'react';
import {Alert} from 'react-native'
import {Badge, Container, Content, Icon, Left, ListItem, Right, Text, List, CheckBox} from "native-base";
import {Container, Content, Left, ListItem, Right, Text, List, CheckBox, Button} from "native-base";
import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js";
import {NavigationActions, StackActions} from "react-navigation";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
const nightModeKey = 'nightMode';
@ -16,8 +17,18 @@ export default class SettingsScreen extends React.Component {
toggleNightMode() {
this.setState({nightMode: !this.state.nightMode});
ThemeManager.getInstance().setNightmode(!this.state.nightMode);
Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
// Alert.alert(i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.restart'));
this.resetStack();
}
resetStack() {
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'Main' })],
});
this.props.navigation.dispatch(resetAction);
this.props.navigation.navigate('Settings');
}
render() {
@ -32,12 +43,7 @@ export default class SettingsScreen extends React.Component {
onPress={() => this.toggleNightMode()}
>
<Left>
<Icon
active
name={'theme-light-dark'}
type={'MaterialCommunityIcons'}
style={{color: "#777", fontSize: 26, width: 30}}
/>
<CustomMaterialIcon icon={'theme-light-dark'} />
<Text>
{i18n.t('settingsScreen.nightMode')}
</Text>

1
translations/en.json
View file

@ -36,6 +36,7 @@
"washers": "Washers",
"min": "min",
"listUpdated": "Machines state updated",
"loading": "Loading...",
"states": {
"finished": "FINISHED",
"ready": "READY",

1
translations/fr.json
View file

@ -36,6 +36,7 @@
"washers": "Lave Linges",
"min": "min",
"listUpdated": "Etat des machines mis à jour",
"loading": "Chargement...",
"states": {
"finished": "TERMINE",
"ready": "DISPONIBLE",

4
utils/ThemeManager.js
View file

@ -53,4 +53,8 @@ export default class ThemeManager {
return getTheme(platform);
}
getCurrentThemeVariables() {
return this.getCurrentTheme().variables;
}
};