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

Implemented new RU menu screen

Browse source
This commit is contained in:
keplyx 2019-09-19 22:19:47 +02:00
parent 8c779e0ed6
commit 2ef349755a
6 changed files with 203 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app.json
View file

@ -10,7 +10,7 @@
"android",
"web"
],
"version": "1.0.3",
"version": "1.1.0",
"orientation": "portrait",
"primaryColor": "#be1522",
"icon": "./assets/android.icon.png",
@ -36,7 +36,7 @@
},
"android": {
"package": "fr.amicaleinsat.application",
"versionCode": 6,
"versionCode": 7,
"icon": "./assets/android.icon.png",
"adaptiveIcon": {
"foregroundImage": "./assets/android.adaptive-icon.png",

5
components/BaseContainer.js
View file

@ -16,6 +16,7 @@ type Props = {
headerRightButton: React.Node,
children: React.Node,
hasTabs: boolean,
hasBackButton: boolean
}
type State = {
@ -30,6 +31,7 @@ export default class BaseContainer extends React.Component<Props, State> {
static defaultProps = {
headerRightButton: <View/>,
hasTabs: false,
hasBackButton: false,
};
@ -90,7 +92,8 @@ export default class BaseContainer extends React.Component<Props, State> {
</Touchable>
}
rightButton={this.props.headerRightButton}
hasTabs={this.props.hasTabs}/>
hasTabs={this.props.hasTabs}
hasBackButton={this.props.hasBackButton}/>
{this.props.children}
</Container>
</CustomSideMenu>

9
components/FetchedDataSectionList.js
View file

@ -260,6 +260,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
return false;
}
hasBackButton() {
return false;
}
getRightButton() {
return <View/>
}
@ -277,6 +281,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
return (
<SectionList
sections={dataset}
stickySectionHeadersEnabled
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
@ -345,7 +350,9 @@ export default class FetchedDataSectionList extends React.Component<Props, State
<BaseContainer
navigation={nav} headerTitle={this.getHeaderTranslation()}
headerRightButton={this.getRightButton()}
hasTabs={this.hasTabs()}>
hasTabs={this.hasTabs()}
hasBackButton={this.hasBackButton()}
>
{this.hasTabs() ?
<Tabs
tabContainerStyle={{

205
screens/SelfMenuScreen.js
View file

@ -1,92 +1,159 @@
// @flow
import * as React from 'react';
import {Platform, View} from 'react-native';
import {Container, Spinner} from 'native-base';
import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import {View} from 'react-native';
import {Text, H2, H3, Card, CardItem} from 'native-base';
import ThemeManager from "../utils/ThemeManager";
import CustomHeader from "../components/CustomHeader";
import i18n from "i18n-js";
import FetchedDataSectionList from "../components/FetchedDataSectionList";
import LocaleManager from "../utils/LocaleManager";
type Props = {
navigation: Object,
}
const RU_URL = 'http://m.insa-toulouse.fr/ru.html';
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/RU/customGeneral.css';
const CUSTOM_CSS_LIGHT = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/RU/customLight.css';
const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
/**
* Class defining the app's planex screen.
* This screen uses a webview to render the planex page
* Class defining the app's menu screen.
* This screen fetches data from etud to render the RU menu
*/
export default class SelfMenuScreen extends React.Component<Props> {
export default class SelfMenuScreen extends FetchedDataSectionList {
webview: WebView;
customInjectedJS: string;
// Hard code strings as toLocaleDateString does not work on current android JS engine
daysOfWeek = [];
monthsOfYear = [];
constructor() {
super();
this.customInjectedJS =
'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';';
if (!ThemeManager.getNightMode())
this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_LIGHT + '" type="text/css"/>\';';
super(DATA_URL, 0);
this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.thursday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.friday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.saturday"));
this.daysOfWeek.push(i18n.t("date.daysOfWeek.sunday"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.january"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.february"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.march"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.april"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.may"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.june"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.july"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.august"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.september"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.october"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.november"));
this.monthsOfYear.push(i18n.t("date.monthsOfYear.december"));
}
getRefreshButton() {
return (
<Touchable
style={{padding: 6}}
onPress={() => this.refreshWebview()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="refresh"/>
</Touchable>
getHeaderTranslation() {
return i18n.t("screens.menuSelf");
}
getUpdateToastTranslations() {
return [i18n.t("homeScreen.listUpdated"), i18n.t("homeScreen.listUpdateFail")];
}
getKeyExtractor(item: Object) {
return item !== undefined ? item.name : undefined;
}
hasBackButton() {
return true;
}
createDataset(fetchedData: Object) {
let result = [];
// Prevent crash by giving a default value when fetchedData is empty (not yet available)
if (Object.keys(fetchedData).length === 0) {
result = [
{
title: '',
data: {},
extraData: super.state,
keyExtractor: this.getKeyExtractor
}
];
}
// fetched data is an array here
for (let i = 0; i < fetchedData.length; i++) {
result.push(
{
title: this.getFormattedDate(fetchedData[i].date),
data: fetchedData[i].meal[0].foodcategory,
extraData: super.state,
keyExtractor: this.getKeyExtractor
}
);
};
refreshWebview() {
this.webview.reload();
}
return result
}
render() {
const nav = this.props.navigation;
getFormattedDate(dateString: string) {
let dateArray = dateString.split('-');
let date = new Date();
date.setFullYear(parseInt(dateArray[0]), parseInt(dateArray[1]) - 1, parseInt(dateArray[2]));
return this.daysOfWeek[date.getDay() - 1] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear();
}
getRenderSectionHeader(title: String) {
return (
<Container>
<CustomHeader navigation={nav} title={i18n.t('screens.menuSelf')} hasBackButton={true}
rightButton={this.getRefreshButton()}/>
<WebView
ref={ref => (this.webview = ref)}
source={{uri: RU_URL}}
style={{
width: '100%',
height: '100%',
}}
startInLoadingState={true}
injectedJavaScript={this.customInjectedJS}
javaScriptEnabled={true}
renderLoading={() =>
<View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
position: 'absolute',
top: 0,
right: 0,
width: '100%',
height: '100%',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
<Card style={{
marginLeft: 10,
marginRight: 10,
marginTop: 10,
marginBottom: 10,
}}>
<Spinner/>
</View>
}
/>
</Container>
<H2 style={{
textAlign: 'center',
marginTop: 10,
marginBottom: 10
}}>{title}</H2>
</Card>
);
}
getRenderItem(item: Object, section: Object, data: Object) {
return (
<Card style={{
flex: 0,
marginLeft: 20,
marginRight: 20
}}>
<CardItem style={{
paddingBottom: 0,
flexDirection: 'column'
}}>
<H3 style={{
marginTop: 10,
marginBottom: 0,
color: ThemeManager.getCurrentThemeVariables().listNoteColor
}}>{item.name}</H3>
<View style={{
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
borderBottomWidth: 1,
borderBottomColor: ThemeManager.getCurrentThemeVariables().listBorderColor,
marginTop: 10,
marginBottom: 5,
}}/>
</CardItem>
<CardItem style={{
flexDirection: 'column',
paddingTop: 0,
}}>
{item.dishes.map((object, i) =>
<View>
{object.name !== "" ?
<Text style={{
marginTop: 5,
marginBottom: 5
}}>{object.name.toLowerCase()}</Text>
: <View/>}
</View>)}
</CardItem>
</Card>
);
}
}

25
translations/en.json
View file

@ -151,5 +151,30 @@
"general": {
"loading": "Loading...",
"networkError": "Unable to contact servers. Make sure you are connected to Internet."
},
"date": {
"daysOfWeek": {
"monday": "Monday",
"tuesday": "Tuesday",
"wednesday": "Wednesday",
"thursday": "Thursday",
"friday": "Friday",
"saturday": "Saturday",
"sunday": "Sunday"
},
"monthsOfYear": {
"january": "January",
"february": "February",
"march": "March",
"april": "April",
"may": "May",
"june": "June",
"july": "July",
"august": "August",
"september": "September",
"october": "October",
"november": "November",
"december": "December"
}
}
}

27
translations/fr.json
View file

@ -4,7 +4,7 @@
"planning": "Planning",
"proxiwash": "Proxiwash",
"proximo": "Proximo",
"menuSelf": "Menu Ru",
"menuSelf": "Menu du RU",
"settings": "Paramètres",
"about": "À Propos",
"debug": "Debug"
@ -153,5 +153,30 @@
"general": {
"loading": "Chargement...",
"networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
},
"date": {
"daysOfWeek": {
"monday": "Lundi",
"tuesday": "Mardi",
"wednesday": "Mercredi",
"thursday": "Jeudi",
"friday": "Vendredi",
"saturday": "Samedi",
"sunday": "Dimanche"
},
"monthsOfYear": {
"january": "Janvier",
"february": "Février",
"march": "Mars",
"april": "Avril",
"may": "Mai",
"june": "Juin",
"july": "Juillet",
"august": "Août",
"september": "Septembre",
"october": "Octobre",
"november": "Novembre",
"december": "Décembre"
}
}
}