vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: vergnet:a533f48a1210f3f690ccb59cdf32fa54503b49aa
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7
...
compare: vergnet:fac9d8208ec7f650a5548f19630964e6a54afba1
Branches Tags
vergnet:master
vergnet:functional-migration
vergnet:v5.0.0-3
vergnet:v5.0.0-2
vergnet:4.1.0
vergnet:4.0.1
vergnet:3.0.7

3 commits
a533f48a12 ... fac9d8208e

Author SHA1 Message Date
Arnaud Vergnet
fac9d8208e Improved doc 2020-03-29 15:59:25 +02:00
Arnaud Vergnet
03549957a8 Improved documentation and fixed debug mode 2020-03-29 15:08:51 +02:00
Arnaud Vergnet
4cdfc607e6 Improved documentation 2020-03-29 14:46:44 +02:00
37 changed files with 923 additions and 312 deletions
Show stats Expand all files Collapse all files

8
components/CustomAgenda.js
View file

@ -2,8 +2,14 @@ import * as React from 'react';
import {withTheme} from 'react-native-paper';
import {Agenda} from "react-native-calendars";
/**
* Abstraction layer for Agenda component, using custom configuration
*
* @param props Props to pass to the element. Must specify an onRef prop to get an Agenda ref.
* @return {*}
*/
function CustomAgenda(props) {
const { colors } = props.theme;
const {colors} = props.theme;
return (
<Agenda
{...props}

66
components/CustomIntroSlider.js
View file

@ -9,47 +9,24 @@ import i18n from 'i18n-js';
import AppIntroSlider from "react-native-app-intro-slider";
import Update from "../constants/Update";
// Content to be used int the intro slides
const styles = StyleSheet.create({
mainContent: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 100
},
image: {
width: 300,
height: 300,
marginBottom: -50,
},
text: {
color: 'rgba(255, 255, 255, 0.8)',
backgroundColor: 'transparent',
textAlign: 'center',
paddingHorizontal: 16,
},
title: {
fontSize: 22,
color: 'white',
backgroundColor: 'transparent',
textAlign: 'center',
marginBottom: 16,
},
});
type Props = {
onDone: Function,
isUpdate: boolean,
isAprilFools: boolean,
};
/**
* Class used to create intro slides
*/
export default class CustomIntroSlider extends React.Component<Props> {
introSlides: Array<Object>;
updateSlides: Array<Object>;
aprilFoolsSlides: Array<Object>;
/**
* Generates intro slides
*/
constructor() {
super();
this.introSlides = [
@ -126,8 +103,9 @@ export default class CustomIntroSlider extends React.Component<Props> {
/**
* Render item to be used for the intro introSlides
* @param item
* @param dimensions
*
* @param item The item to be displayed
* @param dimensions Dimensions of the item
*/
static getIntroRenderItem({item, dimensions}: Object) {
@ -178,3 +156,29 @@ export default class CustomIntroSlider extends React.Component<Props> {
}
const styles = StyleSheet.create({
mainContent: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 100
},
image: {
width: 300,
height: 300,
marginBottom: -50,
},
text: {
color: 'rgba(255, 255, 255, 0.8)',
backgroundColor: 'transparent',
textAlign: 'center',
paddingHorizontal: 16,
},
title: {
fontSize: 22,
color: 'white',
backgroundColor: 'transparent',
textAlign: 'center',
marginBottom: 16,
},
});

8
components/CustomModal.js
View file

@ -4,8 +4,14 @@ import * as React from 'react';
import {withTheme} from 'react-native-paper';
import {Modalize} from "react-native-modalize";
/**
* Abstraction layer for Modalize component, using custom configuration
*
* @param props Props to pass to the element. Must specify an onRef prop to get an Modalize ref.
* @return {*}
*/
function CustomModal(props) {
const { colors } = props.theme;
const {colors} = props.theme;
return (
<Modalize
ref={props.onRef}

39
components/EmptyWebSectionListItem.js
View file

@ -1,19 +1,19 @@
import * as React from 'react';
import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper';
import {View} from "react-native";
import {StyleSheet, View} from "react-native";
import {MaterialCommunityIcons} from "@expo/vector-icons";
function EmptyWebSectionListItem(props) {
const { colors } = props.theme;
/**
* Component used to display a message when a list is empty
*
* @param props Props to pass to the component
* @return {*}
*/
function EmptyWebSectionListItem(props: { text: string, icon: string, refreshing: boolean, theme: {} }) {
const {colors} = props.theme;
return (
<View>
<View style={{
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 100,
marginBottom: 20
}}>
<View style={styles.iconContainer}>
{props.refreshing ?
<ActivityIndicator
animating={true}
@ -27,9 +27,7 @@ function EmptyWebSectionListItem(props) {
</View>
<Subheading style={{
textAlign: 'center',
marginRight: 20,
marginLeft: 20,
...styles.subheading,
color: colors.textDisabled
}}>
{props.text}
@ -38,4 +36,19 @@ function EmptyWebSectionListItem(props) {
);
}
const styles = StyleSheet.create({
iconContainer: {
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 100,
marginBottom: 20
},
subheading: {
textAlign: 'center',
marginRight: 20,
marginLeft: 20,
}
});
export default withTheme(EmptyWebSectionListItem);

30
components/EventDashboardItem.js
View file

@ -2,7 +2,14 @@
import * as React from 'react';
import {Avatar, Card, withTheme} from 'react-native-paper';
import {StyleSheet} from "react-native";
/**
* Component used to display a dashboard item containing a preview event
*
* @param props Props to pass to the component
* @return {*}
*/
function EventDashBoardItem(props) {
const {colors} = props.theme;
const iconColor = props.isAvailable ?
@ -13,13 +20,7 @@ function EventDashBoardItem(props) {
colors.textDisabled;
return (
<Card
style={{
width: 'auto',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
overflow: 'hidden',
}}
style={styles.card}
onPress={props.clickAction}>
<Card.Title
@ -32,7 +33,7 @@ function EventDashBoardItem(props) {
icon={props.icon}
color={iconColor}
size={60}
style={{backgroundColor: 'transparent'}}/>}
style={styles.avatar}/>}
/>
<Card.Content>
{props.children}
@ -41,4 +42,17 @@ function EventDashBoardItem(props) {
);
}
const styles = StyleSheet.create({
card: {
width: 'auto',
marginLeft: 10,
marginRight: 10,
marginTop: 10,
overflow: 'hidden',
},
avatar: {
backgroundColor: 'transparent'
}
});
export default withTheme(EventDashBoardItem);

15
components/FeedItem.js
View file

@ -6,6 +6,11 @@ import i18n from "i18n-js";
const ICON_AMICALE = require('../assets/amicale.png');
/**
* Gets the amicale INSAT logo
*
* @return {*}
*/
function getAvatar() {
return (
<Avatar.Image size={48} source={ICON_AMICALE}
@ -13,6 +18,12 @@ function getAvatar() {
);
}
/**
* Component used to display a feed item
*
* @param props Props to pass to the component
* @return {*}
*/
function FeedItem(props) {
const {colors} = props.theme;
return (
@ -39,7 +50,9 @@ function FeedItem(props) {
<Button
color={'#57aeff'}
onPress={props.onOutLinkPress}
icon={'facebook'}>{i18n.t('homeScreen.dashboard.seeMore')}</Button>
icon={'facebook'}>
{i18n.t('homeScreen.dashboard.seeMore')}
</Button>
</Card.Actions>
</Card>
);

8
components/HeaderButton.js
View file

@ -1,8 +1,14 @@
import * as React from 'react';
import {IconButton, withTheme} from 'react-native-paper';
/**
* Component used to display a header button
*
* @param props Props to pass to the component
* @return {*}
*/
function HeaderButton(props) {
const { colors } = props.theme;
const {colors} = props.theme;
return (
<IconButton
icon={props.icon}

47
components/PreviewEventDashboardItem.js
View file

@ -1,25 +1,33 @@
// @flow
import * as React from 'react';
import {View} from "react-native";
import {StyleSheet, View} from "react-native";
import HTML from "react-native-render-html";
import i18n from "i18n-js";
import {Avatar, Button, Card, withTheme} from 'react-native-paper';
import PlanningEventManager from "../utils/PlanningEventManager";
/**
* Component used to display an event preview if an event is available
*
* @param props Props to pass to the component
* @return {*}
*/
function PreviewEventDashboardItem(props) {
const {colors} = props.theme;
const isEmpty = props.event === undefined ? true : PlanningEventManager.isDescriptionEmpty(props.event['description']);
const isEmpty = props.event === undefined
? true
: PlanningEventManager.isDescriptionEmpty(props.event['description']);
if (props.event !== undefined && props.event !== null) {
const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null;
const getImage = () => <Avatar.Image
source={{uri: props.event['logo']}}
size={50}
style={{backgroundColor: 'transparent'}}/>;
style={styles.avatar}/>;
return (
<Card
style={{marginBottom: 10}}
style={styles.card}
onPress={props.clickAction}
elevation={3}
>
@ -34,10 +42,7 @@ function PreviewEventDashboardItem(props) {
subtitle={PlanningEventManager.getFormattedEventTime(props.event['date_begin'], props.event['date_end'])}
/>}
{!isEmpty ?
<Card.Content style={{
maxHeight: 150,
overflow: 'hidden',
}}>
<Card.Content style={styles.content}>
<HTML html={"<div>" + props.event['description'] + "</div>"}
tagsStyles={{
p: {color: colors.text,},
@ -46,11 +51,7 @@ function PreviewEventDashboardItem(props) {
</Card.Content> : null}
<Card.Actions style={{
marginLeft: 'auto',
marginTop: 'auto',
flexDirection: 'row'
}}>
<Card.Actions style={styles.actions}>
<Button
icon={'chevron-right'}
>
@ -63,4 +64,22 @@ function PreviewEventDashboardItem(props) {
return <View/>
}
const styles = StyleSheet.create({
card: {
marginBottom: 10
},
content: {
maxHeight: 150,
overflow: 'hidden',
},
actions: {
marginLeft: 'auto',
marginTop: 'auto',
flexDirection: 'row'
},
avatar: {
backgroundColor: 'transparent'
}
});
export default withTheme(PreviewEventDashboardItem);

59
components/ProxiwashListItem.js
View file

@ -1,8 +1,14 @@
import * as React from 'react';
import {Avatar, Card, Text, withTheme} from 'react-native-paper';
import {View} from "react-native";
import {StyleSheet, View} from "react-native";
import ProxiwashConstants from "../constants/ProxiwashConstants";
/**
* Component used to display a proxiwash item, showing machine progression and state
*
* @param props Props to pass to the component
* @return {*}
*/
function ProxiwashListItem(props) {
const {colors} = props.theme;
let stateColors = {};
@ -17,13 +23,13 @@ function ProxiwashListItem(props) {
icon={'bell-ring'}
size={45}
color={colors.primary}
style={{backgroundColor: 'transparent'}}
style={styles.icon}
/> :
<Avatar.Icon
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
color={colors.text}
size={40}
style={{backgroundColor: 'transparent'}}
style={styles.icon}
/>
);
return (
@ -35,37 +41,26 @@ function ProxiwashListItem(props) {
>
{ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ?
<Card style={{
height: '100%',
position: 'absolute',
left: 0,
width: '100%',
...styles.backgroundCard,
backgroundColor: colors.proxiwashRunningBgColor,
elevation: 0
}}/> : null
}
<Card style={{
height: '100%',
position: 'absolute',
left: 0,
...styles.progressionCard,
width: props.progress,
backgroundColor: stateColors[ProxiwashConstants.machineStates[props.state]],
elevation: 0
}}/>
<Card.Title
title={props.title}
titleStyle={{fontSize: 17}}
subtitle={props.description}
style={{
backgroundColor: 'transparent',
height: 64
}}
style={styles.title}
left={() => icon}
right={() => (
<View style={{flexDirection: 'row'}}>
<View style={{
justifyContent: 'center',
}}>
<View style={{justifyContent: 'center'}}>
<Text style={
ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates.TERMINE ?
{fontWeight: 'bold',} : {}}
@ -73,12 +68,11 @@ function ProxiwashListItem(props) {
{props.statusText}
</Text>
</View>
<Avatar.Icon
icon={props.statusIcon}
color={colors.text}
size={30}
style={{backgroundColor: 'transparent'}}
style={styles.icon}
/>
</View>)}
/>
@ -86,4 +80,27 @@ function ProxiwashListItem(props) {
);
}
const styles = StyleSheet.create({
icon: {
backgroundColor: 'transparent'
},
backgroundCard: {
height: '100%',
position: 'absolute',
left: 0,
width: '100%',
elevation: 0,
},
progressionCard: {
height: '100%',
position: 'absolute',
left: 0,
elevation: 0,
},
title: {
backgroundColor: 'transparent',
height: 64
}
});
export default withTheme(ProxiwashListItem);

4
components/PureFlatList.js
View file

@ -9,10 +9,12 @@ type Props = {
}
/**
* FlatList implementing PureComponent for increased performance.
*
* This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
* To force the component to update, change the value of updateData.
*/
export default class PureFlatList extends React.PureComponent<Props>{
export default class PureFlatList extends React.PureComponent<Props> {
static defaultProps = {
updateData: null,

26
components/Sidebar.js
View file

@ -20,7 +20,7 @@ type State = {
};
/**
* Class used to define a navigation drawer
* Component used to render the drawer menu content
*/
export default class SideBar extends React.PureComponent<Props, State> {
@ -33,7 +33,7 @@ export default class SideBar extends React.PureComponent<Props, State> {
getRenderItem: Function;
/**
* Generate the datasets
* Generate the dataset
*
* @param props
*/
@ -123,6 +123,12 @@ export default class SideBar extends React.PureComponent<Props, State> {
this.getRenderItem = this.getRenderItem.bind(this);
}
/**
* Callback when a drawer item is pressed.
* It will either navigate to the associated screen, or open the browser to the associated link
*
* @param item The item pressed
*/
onListItemPress(item: Object) {
if (item.link === undefined)
this.props.navigation.navigate(item.route);
@ -130,12 +136,22 @@ export default class SideBar extends React.PureComponent<Props, State> {
WebBrowser.openBrowserAsync(item.link);
}
listKeyExtractor(item: Object) {
/**
* Key extractor for list items
*
* @param item The item to extract the key from
* @return {string} The extracted key
*/
listKeyExtractor(item: Object): string {
return item.route;
}
/**
* Gets the render item for the given list item
*
* @param item The item to render
* @return {*}
*/
getRenderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item);
if (item.icon !== undefined) {

10
components/SidebarDivider.js
View file

@ -1,9 +1,15 @@
import * as React from 'react';
import { withTheme } from 'react-native-paper';
import {withTheme} from 'react-native-paper';
import {DrawerItem} from "@react-navigation/drawer";
/**
* Component used to render a drawer menu item divider
*
* @param props Props to pass to the component
* @return {*}
*/
function SidebarDivider(props) {
const { colors } = props.theme;
const {colors} = props.theme;
return (
<DrawerItem
label={props.title}

6
components/SidebarItem.js
View file

@ -3,6 +3,12 @@ import {withTheme} from 'react-native-paper';
import {DrawerItem} from "@react-navigation/drawer";
import {MaterialCommunityIcons} from "@expo/vector-icons";
/**
* Component used to render a drawer menu item
*
* @param props Props to pass to the component
* @return {*}
*/
function SidebarItem(props) {
const {colors} = props.theme;
return (

17
components/SquareDashboardItem.js
View file

@ -2,6 +2,12 @@ import * as React from 'react';
import {Badge, IconButton, withTheme} from 'react-native-paper';
import {View} from "react-native";
/**
* Component used to render a small dashboard item
*
* @param props Props to pass to the component
* @return {*}
*/
function SquareDashboardItem(props) {
const {colors} = props.theme;
return (
@ -9,9 +15,9 @@ function SquareDashboardItem(props) {
<IconButton
icon={props.icon}
color={
props.isAvailable ?
props.color :
colors.textDisabled
props.isAvailable
? props.color
: colors.textDisabled
}
size={35}
onPress={props.clickAction}
@ -23,9 +29,10 @@ function SquareDashboardItem(props) {
position: 'absolute',
top: 5,
right: 5
}}>{props.badgeNumber}</Badge> : null
}}>
{props.badgeNumber}
</Badge> : null
}
</View>
);
}

55
components/WebSectionList.js
View file

@ -27,8 +27,10 @@ type State = {
};
const MIN_REFRESH_TIME = 5 * 1000;
const MIN_REFRESH_TIME = 5 * 1000;
/**
* Component used to render a SectionList with data fetched from the web
*
* This is a pure component, meaning it will only update if a shallow comparison of state and props is different.
* To force the component to update, change the value of updateData.
*/
@ -73,7 +75,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
}
/**
* Register react navigation events on first screen load.
* Registers react navigation events on first screen load.
* Allows to detect when the screen is focused
*/
componentDidMount() {
@ -86,7 +88,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
}
/**
* Refresh data when focusing the screen and setup a refresh interval if asked to
* Refreshes data when focusing the screen and setup a refresh interval if asked to
*/
onScreenFocus() {
if (this.props.refreshOnFocus && this.lastRefresh !== undefined)
@ -96,13 +98,19 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
}
/**
* Remove any interval on un-focus
* Removes any interval on un-focus
*/
onScreenBlur() {
clearInterval(this.refreshInterval);
}
/**
* Callback used when fetch is successful.
* It will update the displayed data and stop the refresh animation
*
* @param fetchedData The newly fetched data
*/
onFetchSuccess(fetchedData: Object) {
this.setState({
fetchedData: fetchedData,
@ -112,6 +120,10 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
this.lastRefresh = new Date();
}
/**
* Callback used when fetch encountered an error.
* It will reset the displayed data and show an error.
*/
onFetchError() {
this.setState({
fetchedData: {},
@ -119,12 +131,10 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
firstLoading: false
});
this.showSnackBar();
// this.webDataManager.showUpdateToast(this.props.updateErrorText);
}
/**
* Refresh data and show a toast if any error occurred
* @private
* Refreshes data and shows an animations while doing it
*/
onRefresh() {
let canRefresh;
@ -140,10 +150,22 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
}
}
/**
* Gets an empty section header
*
* @param section The current section
* @return {*}
*/
getEmptySectionHeader({section}: Object) {
return <View/>;
}
/**
* Gets an empty render item
*
* @param item The data to display
* @return {*}
*/
getEmptyRenderItem({item}: Object) {
return (
<EmptyWebSectionListItem
@ -154,6 +176,11 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
);
}
/**
* Creates an empty dataset
*
* @return {*}
*/
createEmptyDataset() {
return [
{
@ -174,14 +201,26 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
];
}
datasetKeyExtractor(item: Object) {
/**
* Extracts a key from the given item
*
* @param item The item to extract the key from
* @return {string} The extracted key
*/
datasetKeyExtractor(item: Object): string {
return item.text
}
/**
* Shows the error popup
*/
showSnackBar() {
this.setState({snackbarVisible: true})
}
/**
* Hides the error popup
*/
hideSnackBar() {
this.setState({snackbarVisible: false})
}

51
components/WebViewScreen.js
View file

@ -34,8 +34,6 @@ class WebViewScreen extends React.PureComponent<Props> {
onRefreshClicked: Function;
onWebviewRef: Function;
onGoBackWebview: Function;
onGoForwardWebview: Function;
getRenderLoading: Function;
colors: Object;
@ -44,12 +42,13 @@ class WebViewScreen extends React.PureComponent<Props> {
super(props);
this.onRefreshClicked = this.onRefreshClicked.bind(this);
this.onWebviewRef = this.onWebviewRef.bind(this);
this.onGoBackWebview = this.onGoBackWebview.bind(this);
this.onGoForwardWebview = this.onGoForwardWebview.bind(this);
this.getRenderLoading = this.getRenderLoading.bind(this);
this.colors = props.theme.colors;
}
/**
* Creates refresh button after mounting
*/
componentDidMount() {
const rightButton = this.getRefreshButton.bind(this);
this.props.navigation.setOptions({
@ -57,42 +56,37 @@ class WebViewScreen extends React.PureComponent<Props> {
});
}
getHeaderButton(clickAction: Function, icon: string) {
return (
<HeaderButton icon={icon} onPress={clickAction}/>
);
}
/**
* Gets a header refresh button
*
* @return {*}
*/
getRefreshButton() {
return (
<View style={{
flexDirection: 'row',
marginRight: 10
}}>
{this.getHeaderButton(this.onRefreshClicked, 'refresh')}
</View>
);
return <HeaderButton icon={'refresh'} onPress={this.onRefreshClicked}/>
};
/**
* Callback to use when refresh button is clicked. Reloads the webview.
*/
onRefreshClicked() {
if (this.webviewRef !== null)
this.webviewRef.reload();
}
onGoBackWebview() {
if (this.webviewRef !== null)
this.webviewRef.goBack();
}
onGoForwardWebview() {
if (this.webviewRef !== null)
this.webviewRef.goForward();
}
/**
* Callback used when receiving the webview ref. Stores the ref for later use
*
* @param ref
*/
onWebviewRef(ref: Object) {
this.webviewRef = ref
}
/**
* Gets the loading indicator
*
* @return {*}
*/
getRenderLoading() {
return (
<View style={{
@ -115,7 +109,6 @@ class WebViewScreen extends React.PureComponent<Props> {
}
render() {
// console.log("rendering WebViewScreen");
return (
<WebView
ref={this.onWebviewRef}

20
constants/Update.js
View file

@ -1,12 +1,31 @@
import i18n from "i18n-js";
/**
* Singleton used to manage update slides.
* Must be a singleton because it uses translations.
*
* Change values in this class to change the update slide.
* You will also need to update those translations:
* <ul>
* <li>intro.updateSlide.title</li>
* <li>intro.updateSlide.text</li>
* </ul>
*/
export default class Update {
// Increment the number to show the update slide
static number = 5;
// Change the icon to be displayed on the update slide
static icon = 'surround-sound-2-0';
static instance: Update | null = null;
title: string;
description: string;
/**
* Init translations
*/
constructor() {
this.title = i18n.t('intro.updateSlide.title');
this.description = i18n.t('intro.updateSlide.text');
@ -14,6 +33,7 @@ export default class Update {
/**
* Get this class instance or create one if none is found
*
* @returns {Update}
*/
static getInstance(): Update {

6
screens/About/AboutDependenciesScreen.js
View file

@ -10,6 +10,12 @@ type listItem = {
version: string
};
/**
* Generates the dependencies list from the raw json
*
* @param object The raw json
* @return {Array<listItem>}
*/
function generateListFromObject(object: { [string]: string }): Array<listItem> {
let list = [];
let keys = Object.keys(object);

77
screens/About/AboutScreen.js
View file

@ -105,7 +105,7 @@ class AboutScreen extends React.Component<Props, State> {
icon: 'bug-check',
text: i18n.t('aboutScreen.debug'),
showChevron: true,
showOnlyDebug: true
showOnlyInDebug: true
},
];
/**
@ -171,6 +171,9 @@ class AboutScreen extends React.Component<Props, State> {
showChevron: true
},
];
/**
* Order of information cards
*/
dataOrder: Array<Object> = [
{
id: 'app',
@ -201,6 +204,11 @@ class AboutScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
}
/**
* Gets the app icon
* @param props
* @return {*}
*/
getAppIcon(props) {
return (
<Avatar.Image
@ -211,10 +219,21 @@ class AboutScreen extends React.Component<Props, State> {
);
}
keyExtractor(item: Object) {
/**
* Extracts a key from the given item
*
* @param item The item to extract the key from
* @return {string} The extracted key
*/
keyExtractor(item: Object): string {
return item.icon;
}
/**
* Gets the app card showing information and links about the app.
*
* @return {*}
*/
getAppCard() {
return (
<Card style={{marginBottom: 10}}>
@ -235,6 +254,11 @@ class AboutScreen extends React.Component<Props, State> {
);
}
/**
* Gets the team card showing information and links about the team
*
* @return {*}
*/
getTeamCard() {
return (
<Card style={{marginBottom: 10}}>
@ -263,6 +287,11 @@ class AboutScreen extends React.Component<Props, State> {
);
}
/**
* Gets the techno card showing information and links about the technologies used in the app
*
* @return {*}
*/
getTechnoCard() {
return (
<Card style={{marginBottom: 10}}>
@ -280,12 +309,25 @@ class AboutScreen extends React.Component<Props, State> {
);
}
/**
* Gets a chevron icon
*
* @param props
* @return {*}
*/
getChevronIcon(props: Object) {
return (
<List.Icon {...props} icon={'chevron-right'}/>
);
}
/**
* Gets a custom list item icon
*
* @param item The item to show the icon for
* @param props
* @return {*}
*/
getItemIcon(item: Object, props: Object) {
return (
<List.Icon {...props} icon={item.icon}/>
@ -295,10 +337,12 @@ class AboutScreen extends React.Component<Props, State> {
/**
* Get a clickable card item to be rendered inside a card.
*
* @returns {React.Node}
* @returns {*}
*/
getCardItem({item}: Object) {
let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
let shouldShow = item === undefined
|| !item.showOnlyInDebug
|| (item.showOnlyInDebug && this.state.isDebugUnlocked);
const getItemIcon = this.getItemIcon.bind(this, item);
if (shouldShow) {
if (item.showChevron) {
@ -323,6 +367,9 @@ class AboutScreen extends React.Component<Props, State> {
return null;
}
/**
* Tries to unlock debug mode
*/
tryUnlockDebugMode() {
this.debugTapCounter = this.debugTapCounter + 1;
if (this.debugTapCounter >= 4) {
@ -330,12 +377,20 @@ class AboutScreen extends React.Component<Props, State> {
}
}
/**
* Unlocks debug mode
*/
unlockDebugMode() {
this.setState({isDebugUnlocked: true});
let key = AsyncStorageManager.getInstance().preferences.debugUnlocked.key;
AsyncStorageManager.getInstance().savePref(key, '1');
}
/**
* Gets the bug report modal's content
*
* @return {*}
*/
getBugReportModal() {
return (
<View style={{
@ -376,12 +431,21 @@ class AboutScreen extends React.Component<Props, State> {
);
}
/**
* opens the bug report modal
*/
openBugReportModal() {
if (this.modalRef) {
this.modalRef.open();
}
}
/**
* Gets a card, depending on the given item's id
*
* @param item The item to show
* @return {*}
*/
getMainCard({item}: Object) {
switch (item.id) {
case 'app':
@ -394,6 +458,11 @@ class AboutScreen extends React.Component<Props, State> {
return <View/>;
}
/**
* Callback used when receiving the modal ref
*
* @param ref
*/
onModalRef(ref: Object) {
this.modalRef = ref;
}

32
screens/About/DebugScreen.js
View file

@ -16,7 +16,8 @@ type State = {
}
/**
* Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
* Class defining the Debug screen.
* This screen allows the user to get and modify information on the app/device.
*/
class DebugScreen extends React.Component<Props, State> {
@ -37,6 +38,15 @@ class DebugScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
}
/**
* Gets a clickable list item
*
* @param onPressCallback The function to call when clicking on the item
* @param icon The item's icon
* @param title The item's title
* @param subtitle The item's subtitle
* @return {*}
*/
static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
if (icon !== undefined) {
return (
@ -58,6 +68,10 @@ class DebugScreen extends React.Component<Props, State> {
}
}
/**
* Show the
* @param item
*/
showEditModal(item: Object) {
this.setState({
modalCurrentDisplayItem: item
@ -67,6 +81,11 @@ class DebugScreen extends React.Component<Props, State> {
}
}
/**
* Gets the edit modal content
*
* @return {*}
*/
getModalContent() {
return (
<View style={{
@ -104,6 +123,12 @@ class DebugScreen extends React.Component<Props, State> {
);
}
/**
* Saves the new value of the given preference
*
* @param key The pref key
* @param value The pref value
*/
saveNewPrefs(key: string, value: string) {
this.setState((prevState) => {
let currentPreferences = {...prevState.currentPreferences};
@ -113,6 +138,11 @@ class DebugScreen extends React.Component<Props, State> {
AsyncStorageManager.getInstance().savePref(key, value);
}
/**
* Callback used when receiving the modal ref
*
* @param ref
*/
onModalRef(ref: Object) {
this.modalRef = ref;
}

67
screens/HomeScreen.js
View file

@ -56,6 +56,7 @@ class HomeScreen extends React.Component<Props> {
/**
* Converts a dateString using Unix Timestamp to a formatted date
*
* @param dateString {string} The Unix Timestamp representation of a date
* @return {string} The formatted output date
*/
@ -80,10 +81,22 @@ class HomeScreen extends React.Component<Props> {
this.props.navigation.navigate('SelfMenuScreen');
}
/**
* Extract a key for the given item
*
* @param item The item to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item.id : undefined;
}
/**
* Creates the dataset to be used in the FlatList
*
* @param fetchedData
* @return {*}
*/
createDataset(fetchedData: Object) {
// fetchedData = DATA;
let newsData = [];
@ -110,6 +123,12 @@ class HomeScreen extends React.Component<Props> {
];
}
/**
* Generates the dataset associated to the dashboard to be displayed in the FlatList as a section
*
* @param dashboardData
* @return {*}
*/
generateDashboardDataset(dashboardData: Object) {
let dataset = [
@ -145,6 +164,12 @@ class HomeScreen extends React.Component<Props> {
return dataset
}
/**
* Gets a dashboard item
*
* @param item The item to display
* @return {*}
*/
getDashboardItem(item: Object) {
let content = item['content'];
if (item['id'] === 'event')
@ -154,7 +179,7 @@ class HomeScreen extends React.Component<Props> {
}
/**
* Get the time limit depending on the current day:
* Gets the time limit depending on the current day:
* 17:30 for every day of the week except for thursday 11:30
* 00:00 on weekends
*/
@ -170,7 +195,8 @@ class HomeScreen extends React.Component<Props> {
}
/**
* Get the duration (in milliseconds) of an event
* Gets the duration (in milliseconds) of an event
*
* @param event {Object}
* @return {number} The number of milliseconds
*/
@ -184,7 +210,7 @@ class HomeScreen extends React.Component<Props> {
}
/**
* Get events starting after the limit
* Gets events starting after the limit
*
* @param events
* @param limit
@ -202,8 +228,9 @@ class HomeScreen extends React.Component<Props> {
}
/**
* Get the event with the longest duration in the given array.
* Gets the event with the longest duration in the given array.
* If all events have the same duration, return the first in the array.
*
* @param events
*/
getLongestEvent(events: Array<Object>): Object {
@ -220,7 +247,7 @@ class HomeScreen extends React.Component<Props> {
}
/**
* Get events that have not yet ended/started
* Gets events that have not yet ended/started
*
* @param events
*/
@ -243,7 +270,7 @@ class HomeScreen extends React.Component<Props> {
}
/**
*
* Gets the event to display in the preview
*
* @param events
* @return {Object}
@ -266,7 +293,13 @@ class HomeScreen extends React.Component<Props> {
return displayEvent;
}
/**
* Gets the event render item.
* If a preview is available, it will be rendered inside
*
* @param content
* @return {*}
*/
getDashboardEventItem(content: Array<Object>) {
let icon = 'calendar-range';
let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
@ -310,7 +343,12 @@ class HomeScreen extends React.Component<Props> {
);
}
/**
* Gets a classic dashboard item.
*
* @param content
* @return {*}
*/
getDashboardMiddleItem(content: Array<Object>) {
let proxiwashData = content[0]['data'];
let tutorinsaData = content[1]['data'];
@ -367,6 +405,12 @@ class HomeScreen extends React.Component<Props> {
WebBrowser.openBrowserAsync(link);
}
/**
* Gets a render item for the given feed object
*
* @param item The feed item to display
* @return {*}
*/
getFeedItem(item: Object) {
const onImagePress = this.openLink.bind(this, item.full_picture);
const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
@ -382,6 +426,13 @@ class HomeScreen extends React.Component<Props> {
);
}
/**
* Gets a FlatList render item
*
* @param item The item to display
* @param section The current section
* @return {*}
*/
getRenderItem({item, section}: Object) {
return (section['id'] === SECTIONS_ID[0] ?
this.getDashboardItem(item) : this.getFeedItem(item));

2
screens/Planning/PlanningDisplayScreen.js
View file

@ -18,7 +18,7 @@ function openWebLink(event, link) {
}
/**
* Class defining an about screen. This screen shows the user information about the app and it's author.
* Class defining a planning event information page.
*/
class PlanningDisplayScreen extends React.Component<Props> {

39
screens/Planning/PlanningScreen.js
View file

@ -78,6 +78,9 @@ export default class PlanningScreen extends React.Component<Props, State> {
this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this);
}
/**
* Captures focus and blur events to hook on android back button
*/
componentDidMount() {
this.onRefresh();
this.didFocusSubscription = this.props.navigation.addListener(
@ -98,6 +101,11 @@ export default class PlanningScreen extends React.Component<Props, State> {
);
}
/**
* Overrides default android back button behaviour to close the calendar if it was open.
*
* @return {boolean}
*/
onBackButtonPressAndroid() {
if (this.state.calendarShowing) {
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
@ -107,6 +115,13 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
};
/**
* Function used to check if a row has changed
*
* @param r1
* @param r2
* @return {boolean}
*/
rowHasChanged(r1: Object, r2: Object) {
return false;
// if (r1 !== undefined && r2 !== undefined)
@ -115,8 +130,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
/**
* Refresh data and show a toast if any error occurred
* @private
* Refreshes data and shows an animation while doing it
*/
onRefresh = () => {
let canRefresh;
@ -143,14 +157,30 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
};
/**
* Callback used when receiving the agenda ref
*
* @param ref
*/
onAgendaRef(ref: Object) {
this.agendaRef = ref;
}
/**
* Callback used when a button is pressed to toggle the calendar
*
* @param isCalendarOpened True is the calendar is already open, false otherwise
*/
onCalendarToggled(isCalendarOpened: boolean) {
this.setState({calendarShowing: isCalendarOpened});
}
/**
* Gets an event render item
*
* @param item The current event to render
* @return {*}
*/
getRenderItem(item: eventObject) {
const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
if (item.logo !== null) {
@ -182,6 +212,11 @@ export default class PlanningScreen extends React.Component<Props, State> {
}
}
/**
* Gets an empty render item for an empty date
*
* @return {*}
*/
getRenderEmptyDate() {
return (
<Divider/>

2
screens/Proximo/ProximoAboutScreen.js
View file

@ -10,7 +10,7 @@ type Props = {
};
/**
* Class defining an about screen. This screen shows the user information about the app and it's author.
* Class defining the proximo about screen.
*/
export default class ProximoAboutScreen extends React.Component<Props> {

137
screens/Proximo/ProximoListScreen.js
View file

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import {Platform, Image, ScrollView, View} from "react-native";
import {Image, Platform, ScrollView, View} from "react-native";
import i18n from "i18n-js";
import CustomModal from "../../components/CustomModal";
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
@ -77,10 +77,10 @@ class ProximoListScreen extends React.Component<Props, State> {
/**
* Set the sort mode from state when components are ready
* Creates the header content
*/
componentDidMount() {
const button = this.getSortMenu.bind(this);
const button = this.getSortMenuButton.bind(this);
const title = this.getSearchBar.bind(this);
this.props.navigation.setOptions({
headerRight: button,
@ -93,7 +93,50 @@ class ProximoListScreen extends React.Component<Props, State> {
}
/**
* Set the current sort mode.
* Gets the header search bar
*
* @return {*}
*/
getSearchBar() {
return (
<Searchbar
placeholder={i18n.t('proximoScreen.search')}
onChangeText={this.onSearchStringChange}
/>
);
}
/**
* Gets the sort menu header button
*
* @return {*}
*/
getSortMenuButton() {
return (
<IconButton
icon="sort"
color={this.colors.text}
size={26}
onPress={this.onSortMenuPress}
/>
);
}
/**
* Callback used when clicking on the sort menu button.
* It will open the modal to show a sort selection
*/
onSortMenuPress() {
this.setState({
modalCurrentDisplayItem: this.getModalSortMenu()
});
if (this.modalRef) {
this.modalRef.open();
}
}
/**
* Sets the current sort mode.
*
* @param mode The number representing the mode
*/
@ -121,19 +164,10 @@ class ProximoListScreen extends React.Component<Props, State> {
}
}
getSearchBar() {
return (
<Searchbar
placeholder={i18n.t('proximoScreen.search')}
onChangeText={this.onSearchStringChange}
/>
);
}
/**
* get color depending on quantity available
* Gets a color depending on the quantity available
*
* @param availableStock
* @param availableStock The quantity available
* @return
*/
getStockColor(availableStock: number) {
@ -147,13 +181,21 @@ class ProximoListScreen extends React.Component<Props, State> {
return color;
}
sanitizeString(str: string) {
/**
* Sanitizes the given string to improve search performance
*
* @param str The string to sanitize
* @return {string} The sanitized string
*/
sanitizeString(str: string): string {
return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}
/**
* Returns only the articles whose name contains str. Case and accents insensitive.
* @param str
* Returns only articles whose name contains the given string.
* Case and accents insensitive.
*
* @param str The string used to filter article names
* @returns {[]}
*/
filterData(str: string) {
@ -169,12 +211,23 @@ class ProximoListScreen extends React.Component<Props, State> {
return filteredData;
}
/**
* Callback used when the search changes
*
* @param str The new search string
*/
onSearchStringChange(str: string) {
this.setState({
currentlyDisplayedData: this.filterData(str)
})
}
/**
* Gets the modal content depending on the given article
*
* @param item The article to display
* @return {*}
*/
getModalItemContent(item: Object) {
return (
<View style={{
@ -206,6 +259,11 @@ class ProximoListScreen extends React.Component<Props, State> {
);
}
/**
* Gets the modal content to display a sort menu
*
* @return {*}
*/
getModalSortMenu() {
return (
<View style={{
@ -254,6 +312,12 @@ class ProximoListScreen extends React.Component<Props, State> {
);
}
/**
* Callback used when clicking an article in the list.
* It opens the modal to show detailed information about the article
*
* @param item The article pressed
*/
onListItemPress(item: Object) {
this.setState({
modalCurrentDisplayItem: this.getModalItemContent(item)
@ -263,26 +327,12 @@ class ProximoListScreen extends React.Component<Props, State> {
}
}
onSortMenuPress() {
this.setState({
modalCurrentDisplayItem: this.getModalSortMenu()
});
if (this.modalRef) {
this.modalRef.open();
}
}
getSortMenu() {
return (
<IconButton
icon="sort"
color={this.colors.text}
size={26}
onPress={this.onSortMenuPress}
/>
);
}
/**
* Gets a render item for the given article
*
* @param item The article to render
* @return {*}
*/
renderItem({item}: Object) {
const onPress = this.onListItemPress.bind(this, item);
return (
@ -301,10 +351,21 @@ class ProximoListScreen extends React.Component<Props, State> {
);
}
/**
* Extracts a key for the given article
*
* @param item The article to extract the key from
* @return {*} The extracted key
*/
keyExtractor(item: Object) {
return item.name + item.code;
}
/**
* Callback used when receiving the modal ref
*
* @param ref
*/
onModalRef(ref: Object) {
this.modalRef = ref;
}

112
screens/Proximo/ProximoMainScreen.js
View file

@ -18,8 +18,8 @@ type State = {
}
/**
* Class defining the main proximo screen. This screen shows the different categories of articles
* offered by proximo.
* Class defining the main proximo screen.
* This screen shows the different categories of articles offered by proximo.
*/
class ProximoMainScreen extends React.Component<Props, State> {
@ -41,6 +41,14 @@ class ProximoMainScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
}
/**
* Function used to sort items in the list.
* Makes the All category stick to the top and sorts the others by name ascending
*
* @param a
* @param b
* @return {number}
*/
static sortFinalData(a: Object, b: Object) {
let str1 = a.type.name.toLowerCase();
let str2 = b.type.name.toLowerCase();
@ -59,17 +67,76 @@ class ProximoMainScreen extends React.Component<Props, State> {
return 0;
}
/**
* Creates header button
*/
componentDidMount() {
const rightButton = this.getRightButton.bind(this);
const rightButton = this.getHeaderButtons.bind(this);
this.props.navigation.setOptions({
headerRight: rightButton,
});
}
/**
* Callback used when the search button is pressed.
* This will open a new ProximoListScreen with all items displayed
*/
onPressSearchBtn() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.articles !== undefined ?
this.getAvailableArticles(this.articles, undefined) : []
},
};
this.props.navigation.navigate('ProximoListScreen', searchScreenData);
}
/**
* Callback used when the about button is pressed.
* This will open the ProximoAboutScreen
*/
onPressAboutBtn() {
this.props.navigation.navigate('ProximoAboutScreen');
}
/**
* Gets the header buttons
* @return {*}
*/
getHeaderButtons() {
return (
<View
style={{
flexDirection: 'row',
}}>
<HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
<HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
</View>
);
}
/**
* Extracts a key for the given category
*
* @param item The category to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item.type['id'] : undefined;
}
/**
* Creates the dataset to be used in the FlatList
*
* @param fetchedData
* @return {*}
* */
createDataset(fetchedData: Object) {
return [
{
@ -133,39 +200,12 @@ class ProximoMainScreen extends React.Component<Props, State> {
return availableArticles;
}
onPressSearchBtn() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.articles !== undefined ?
this.getAvailableArticles(this.articles, undefined) : []
},
};
this.props.navigation.navigate('ProximoListScreen', searchScreenData);
}
onPressAboutBtn() {
this.props.navigation.navigate('ProximoAboutScreen');
}
getRightButton() {
return (
<View
style={{
flexDirection: 'row',
}}>
<HeaderButton icon={'magnify'} onPress={this.onPressSearchBtn}/>
<HeaderButton icon={'information'} onPress={this.onPressAboutBtn}/>
</View>
);
}
/**
* Gets the given category render item
*
* @param item The category to render
* @return {*}
*/
getRenderItem({item}: Object) {
let dataToSend = {
shouldFocusSearchBar: false,

2
screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -10,7 +10,7 @@ type Props = {
};
/**
* Class defining an about screen. This screen shows the user information about the app and it's author.
* Class defining the proxiwash about screen.
*/
export default class ProxiwashAboutScreen extends React.Component<Props> {

114
screens/Proxiwash/ProxiwashScreen.js
View file

@ -58,7 +58,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
refreshing: false,
firstLoading: true,
fetchedData: {},
// machinesWatched: JSON.parse(dataString),
machinesWatched: [],
modalCurrentDisplayItem: null,
bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1',
@ -97,6 +96,10 @@ class ProxiwashScreen extends React.Component<Props, State> {
this.colors = props.theme.colors;
}
/**
* Callback used when closing the banner.
* This hides the banner and saves to preferences to prevent it from reopening
*/
onHideBanner() {
this.setState({bannerVisible: false});
AsyncStorageManager.getInstance().savePref(
@ -109,7 +112,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
* Setup notification channel for android and add listeners to detect notifications fired
*/
componentDidMount() {
const rightButton = this.getRightButton.bind(this);
const rightButton = this.getAboutButton.bind(this);
this.props.navigation.setOptions({
headerRight: rightButton,
});
@ -134,16 +137,35 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
}
getDryersKeyExtractor(item: Object) {
return item !== undefined ? "dryer" + item.number : undefined;
}
getWashersKeyExtractor(item: Object) {
return item !== undefined ? "washer" + item.number : undefined;
/**
* Callback used when pressing the about button.
* This will open the ProxiwashAboutScreen.
*/
onAboutPress() {
this.props.navigation.navigate('ProxiwashAboutScreen');
}
/**
* Setup notifications for the machine with the given ID.
* Gets the about header button
*
* @return {*}
*/
getAboutButton() {
return <HeaderButton icon={'information'} onPress={this.onAboutPress}/>;
}
/**
* Extracts the key for the given item
*
* @param item The item to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item.number : undefined;
}
/**
* Setups notifications for the machine with the given ID.
* One notification will be sent at the end of the program.
* Another will be send a few minutes before the end, based on the value of reminderNotifTime
*
@ -162,6 +184,9 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
}
/**
* Shows a warning telling the user notifications are disabled for the app
*/
showNotificationsDisabledWarning() {
Alert.alert(
i18n.t("proxiwashScreen.modal.notificationErrorTitle"),
@ -170,7 +195,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
/**
* Stop scheduled notifications for the machine of the given ID.
* Stops scheduled notifications for the machine of the given ID.
* This will also remove the notification if it was already shown.
*
* @param machineId The machine's ID
@ -187,7 +212,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
/**
* Add the given notifications associated to a machine ID to the watchlist, and save the array to the preferences
* Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
*
* @param machineId
*/
@ -198,7 +223,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
/**
* remove the given index from the watchlist array and save it to preferences
* Removes the given index from the watchlist array and saves it to preferences
*
* @param index
*/
@ -209,14 +234,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
/**
* Set the given data as the watchlist and save it to preferences
* Sets the given data as the watchlist
*
* @param data
*/
updateNotificationState(data: Array<Object>) {
this.setState({machinesWatched: data});
// let prefKey = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.key;
// AsyncStorageManager.getInstance().savePref(prefKey, JSON.stringify(data));
}
/**
@ -229,6 +252,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
return this.state.machinesWatched.indexOf(machineID) !== -1;
}
/**
* Creates the dataset to be used by the flatlist
*
* @param fetchedData
* @return {*}
*/
createDataset(fetchedData: Object) {
let data = fetchedData;
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
@ -244,18 +273,25 @@ class ProxiwashScreen extends React.Component<Props, State> {
icon: 'tumble-dryer',
data: data.dryers === undefined ? [] : data.dryers,
extraData: this.state,
keyExtractor: this.getDryersKeyExtractor
keyExtractor: this.getKeyExtractor
},
{
title: i18n.t('proxiwashScreen.washers'),
icon: 'washing-machine',
data: data.washers === undefined ? [] : data.washers,
extraData: this.state,
keyExtractor: this.getWashersKeyExtractor
keyExtractor: this.getKeyExtractor
},
];
}
/**
* Shows a modal for the given item
*
* @param title The title to use
* @param item The item to display information for in the modal
* @param isDryer True if the given item is a dryer
*/
showModal(title: string, item: Object, isDryer: boolean) {
this.setState({
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
@ -265,6 +301,11 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
}
/**
* Callback used when the user clicks on enable notifications for a machine
*
* @param machineId The machine's id to set notifications for
*/
onSetupNotificationsPress(machineId: string) {
if (this.modalRef) {
this.modalRef.close();
@ -272,6 +313,15 @@ class ProxiwashScreen extends React.Component<Props, State> {
this.setupNotifications(machineId)
}
/**
* Generates the modal content.
* This shows information for the given machine.
*
* @param title The title to use
* @param item The item to display information for in the modal
* @param isDryer True if the given item is a dryer
* @return {*}
*/
getModalContent(title: string, item: Object, isDryer: boolean) {
let button = {
text: i18n.t("proxiwashScreen.modal.ok"),
@ -334,20 +384,21 @@ class ProxiwashScreen extends React.Component<Props, State> {
);
}
onAboutPress() {
this.props.navigation.navigate('ProxiwashAboutScreen');
}
getRightButton() {
return (
<HeaderButton icon={'information'} onPress={this.onAboutPress}/>
);
}
/**
* Callback used when receiving modal ref
*
* @param ref
*/
onModalRef(ref: Object) {
this.modalRef = ref;
}
/**
* Gets the number of machines available
*
* @param isDryer True if we are only checking for dryer, false for washers
* @return {number} The number of machines available
*/
getMachineAvailableNumber(isDryer: boolean) {
let data;
if (isDryer)
@ -362,6 +413,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
return count;
}
/**
* Gets the section render item
*
* @param section The section to render
* @return {*}
*/
getRenderSectionHeader({section}: Object) {
const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
const nbAvailable = this.getMachineAvailableNumber(isDryer);
@ -401,7 +458,7 @@ class ProxiwashScreen extends React.Component<Props, State> {
}
/**
* Get list item to be rendered
* Gets the list item to be rendered
*
* @param item The object containing the item's FetchedData
* @param section The object describing the current SectionList section
@ -467,7 +524,6 @@ class ProxiwashScreen extends React.Component<Props, State> {
refreshOnFocus={true}
updateData={this.state.machinesWatched.length}/>
</View>
);
}
}

31
screens/SelfMenuScreen.js
View file

@ -15,7 +15,6 @@ type Props = {
/**
* Class defining the app's menu screen.
* This screen fetches data from etud to render the RU menu
*/
class SelfMenuScreen extends React.Component<Props> {
@ -33,10 +32,22 @@ class SelfMenuScreen extends React.Component<Props> {
this.colors = props.theme.colors;
}
/**
* Extract a key for the given item
*
* @param item The item to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item['name'] : undefined;
}
/**
* Creates the dataset to be used in the FlatList
*
* @param fetchedData
* @return {[]}
*/
createDataset(fetchedData: Object) {
let result = [];
// Prevent crash by giving a default value when fetchedData is empty (not yet available)
@ -66,6 +77,12 @@ class SelfMenuScreen extends React.Component<Props> {
return result
}
/**
* Gets the render section header
*
* @param section The section to render the header from
* @return {*}
*/
getRenderSectionHeader({section}: Object) {
return (
<Card style={{
@ -92,6 +109,12 @@ class SelfMenuScreen extends React.Component<Props> {
);
}
/**
* Gets a FlatList render item
*
* @param item The item to render
* @return {*}
*/
getRenderItem({item}: Object) {
return (
<Card style={{
@ -128,6 +151,12 @@ class SelfMenuScreen extends React.Component<Props> {
);
}
/**
* Formats the given string to make sure it starts with a capital letter
*
* @param name The string to format
* @return {string} The formatted string
*/
formatName(name: String) {
return name.charAt(0) + name.substr(1).toLowerCase();
}

29
screens/SettingsScreen.js
View file

@ -27,7 +27,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
state = {
nightMode: ThemeManager.getNightMode(),
nightModeFollowSystem: AsyncStorageManager.getInstance().preferences.nightModeFollowSystem.current === '1' &&
Appearance.getColorScheme() !== 'no-preference',
Appearance.getColorScheme() !== 'no-preference',
proxiwashNotifPickerSelected: AsyncStorageManager.getInstance().preferences.proxiwashNotifications.current,
startScreenPickerSelected: AsyncStorageManager.getInstance().preferences.defaultStartScreen.current,
};
@ -46,7 +46,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
}
/**
* Save the value for the proxiwash reminder notification time
* Saves the value for the proxiwash reminder notification time
*
* @param value The value to store
*/
@ -65,7 +65,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
}
/**
* Save the value for the proxiwash reminder notification time
* Saves the value for the proxiwash reminder notification time
*
* @param value The value to store
*/
@ -118,7 +118,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
}
/**
* Toggle night mode and save it to preferences
* Toggles night mode and saves it to preferences
*/
onToggleNightMode() {
ThemeManager.getInstance().setNightMode(!this.state.nightMode);
@ -138,7 +138,7 @@ export default class SettingsScreen extends React.Component<Props, State> {
}
/**
* Get a list item using a checkbox control
* Gets a list item using a checkbox control
*
* @param onPressCallback The callback when the checkbox state changes
* @param icon The icon name to display on the list item
@ -178,15 +178,15 @@ export default class SettingsScreen extends React.Component<Props, State> {
) : null}
{
Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
this.getToggleItem(
this.onToggleNightMode,
'theme-light-dark',
i18n.t('settingsScreen.nightMode'),
this.state.nightMode ?
i18n.t('settingsScreen.nightModeSubOn') :
i18n.t('settingsScreen.nightModeSubOff'),
this.state.nightMode
) : null
this.getToggleItem(
this.onToggleNightMode,
'theme-light-dark',
i18n.t('settingsScreen.nightMode'),
this.state.nightMode ?
i18n.t('settingsScreen.nightModeSubOn') :
i18n.t('settingsScreen.nightModeSubOff'),
this.state.nightMode
) : null
}
<List.Accordion
title={i18n.t('settingsScreen.startScreen')}
@ -209,7 +209,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
</List.Accordion>
</List.Section>
</Card>
</ScrollView>
);
}

8
screens/Websites/AvailableRoomScreen.js
View file

@ -14,14 +14,16 @@ const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
* Class defining the app's available rooms screen.
* This screen uses a webview to render the page
*/
export default class AvailableRoomScreen extends React.Component<Props> {
customInjectedJS: string;
customBibInjectedJS: string;
/**
* Defines custom injected JavaScript to improve the page display on mobile
*/
constructor() {
super();
this.customInjectedJS =

7
screens/Websites/BibScreen.js
View file

@ -13,14 +13,17 @@ const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_cs
const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
* Class defining the app's Bib screen.
* This screen uses a webview to render the page
*/
export default class AvailableRoomScreen extends React.Component<Props> {
customInjectedJS: string;
customBibInjectedJS: string;
/**
* Defines custom injected JavaScript to improve the page display on mobile
*/
constructor() {
super();
this.customInjectedJS =

29
screens/Websites/PlanexScreen.js
View file

@ -80,15 +80,23 @@ const OBSERVE_MUTATIONS_INJECTED =
' removeAlpha($(this));\n' +
'});';
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
* Class defining the app's Planex screen.
* This screen uses a webview to render the page
*/
export default class PlanexScreen extends React.Component<Props, State> {
customInjectedJS: string;
onHideBanner: Function;
onGoToSettings: Function;
state = {
bannerVisible:
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
};
/**
* Defines custom injected JavaScript to improve the page display on mobile
*/
constructor() {
super();
this.customInjectedJS =
@ -102,17 +110,15 @@ export default class PlanexScreen extends React.Component<Props, State> {
this.customInjectedJS +=
'removeAlpha();' +
'});true;'; // Prevent crash on ios
'});true;'; // Prevents crash on ios
this.onHideBanner = this.onHideBanner.bind(this);
this.onGoToSettings = this.onGoToSettings.bind(this);
}
state = {
bannerVisible:
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
};
/**
* Callback used when closing the banner.
* This hides the banner and saves to preferences to prevent it from reopening
*/
onHideBanner() {
this.setState({bannerVisible: false});
AsyncStorageManager.getInstance().savePref(
@ -121,6 +127,11 @@ export default class PlanexScreen extends React.Component<Props, State> {
);
}
/**
* Callback used when the used click on the navigate to settings button.
* This will hide the banner and open the SettingsScreen
*
*/
onGoToSettings() {
this.onHideBanner();
this.props.navigation.navigate('SettingsScreen');

11
utils/AsyncStorageManager.js
View file

@ -3,7 +3,7 @@
import {AsyncStorage} from "react-native";
/**
* Static class used to manage preferences.
* Singleton used to manage preferences.
* Preferences are fetched at the start of the app and saved in an instance object.
* This allows for a synchronous access to saved data.
*/
@ -14,7 +14,7 @@ export default class AsyncStorageManager {
/**
* Get this class instance or create one if none is found
* @returns {ThemeManager}
* @returns {AsyncStorageManager}
*/
static getInstance(): AsyncStorageManager {
return AsyncStorageManager.instance === null ?
@ -39,11 +39,6 @@ export default class AsyncStorageManager {
default: '5',
current: '',
},
proxiwashWatchedMachines: {
key: 'proxiwashWatchedMachines',
default: '[]',
current: '',
},
nightModeFollowSystem: {
key: 'nightModeFollowSystem',
default: '1',
@ -113,7 +108,7 @@ export default class AsyncStorageManager {
/**
* Save the value associated to the given key to preferences.
* This updates the preferences object and saves it to AsynStorage.
* This updates the preferences object and saves it to AsyncStorage.
*
* @param key
* @param val

11
utils/DateManager.js
View file

@ -2,10 +2,13 @@
import i18n from 'i18n-js';
/**
* Singleton used to manage date translations.
* Translations are hardcoded as toLocaleDateString does not work on current android JS engine
*/
export default class DateManager {
static instance: DateManager | null = null;
// Hard code strings as toLocaleDateString does not work on current android JS engine
daysOfWeek = [];
monthsOfYear = [];
@ -42,6 +45,12 @@ export default class DateManager {
DateManager.instance;
}
/**
* Gets a translated string representing the given date.
*
* @param dateString The date with the format YYYY-MM-DD
* @return {string} The translated string
*/
getTranslatedDate(dateString: string) {
let dateArray = dateString.split('-');
let date = new Date();

16
utils/NotificationsManager.js
View file

@ -49,6 +49,11 @@ export default class NotificationsManager {
}
}
/**
* Gets the machines watched from the server
*
* @param callback Function to execute with the fetched data
*/
static getMachineNotificationWatchlist(callback: Function) {
let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
if (token !== '') {
@ -72,10 +77,10 @@ export default class NotificationsManager {
}
/**
* Ask the server to enable/disable notifications for the specified machine
* Asks the server to enable/disable notifications for the specified machine
*
* @param machineID
* @param isEnabled
* @param machineID The machine ID
* @param isEnabled True to enable notifications, false to disable
*/
static setupMachineNotification(machineID: string, isEnabled: boolean) {
let token = AsyncStorageManager.getInstance().preferences.expoToken.current;
@ -100,8 +105,9 @@ export default class NotificationsManager {
}
/**
* Send the selected reminder time for notifications to the server
* @param time
* Sends the selected reminder time for notifications to the server
*
* @param time The reminder time to use
*/
static setMachineReminderNotificationTime(time: number) {
let token = AsyncStorageManager.getInstance().preferences.expoToken.current;

34
utils/ThemeManager.js
View file

@ -19,7 +19,12 @@ export default class ThemeManager {
this.updateThemeCallback = null;
}
static getWhiteTheme() {
/**
* Gets the light theme
*
* @return {Object} Object containing theme variables
* */
static getWhiteTheme(): Object {
return {
...DefaultTheme,
colors: {
@ -70,7 +75,12 @@ export default class ThemeManager {
};
}
static getDarkTheme() {
/**
* Gets the dark theme
*
* @return {Object} Object containing theme variables
* */
static getDarkTheme(): Object {
return {
...DarkTheme,
colors: {
@ -124,6 +134,7 @@ export default class ThemeManager {
/**
* Get this class instance or create one if none is found
*
* @returns {ThemeManager}
*/
static getInstance(): ThemeManager {
@ -133,6 +144,10 @@ export default class ThemeManager {
}
/**
* Gets night mode status.
* If Follow System Preferences is enabled, will first use system theme.
* If disabled or not available, will use value stored din preferences
*
* @returns {boolean} Night mode state
*/
static getNightMode(): boolean {
@ -143,8 +158,9 @@ export default class ThemeManager {
}
/**
* Get the current theme based on night mode
* @returns {Object}
* Get the current theme based on night mode and events
*
* @returns {Object} The current theme
*/
static getCurrentTheme(): Object {
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
@ -153,6 +169,11 @@ export default class ThemeManager {
return ThemeManager.getBaseTheme()
}
/**
* Get the theme based on night mode
*
* @return {Object} The theme
*/
static getBaseTheme() {
if (ThemeManager.getNightMode())
return ThemeManager.getDarkTheme();
@ -161,7 +182,8 @@ export default class ThemeManager {
}
/**
* Set the function to be called when the theme is changed (allows for general reload of the app)
* Sets the function to be called when the theme is changed (allows for general reload of the app)
*
* @param callback Function to call after theme change
*/
setUpdateThemeCallback(callback: ?Function) {
@ -171,7 +193,7 @@ export default class ThemeManager {
/**
* Set night mode and save it to preferences
*
* @param isNightMode Whether to enable night mode
* @param isNightMode True to enable night mode, false to disable
*/
setNightMode(isNightMode: boolean) {
let nightModeKey = AsyncStorageManager.getInstance().preferences.nightMode.key;