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

Merge branch 'search_proximo' into dev

Browse source
This commit is contained in:
keplyx 2019-11-15 19:39:13 +01:00
commit 4e2045925a
7 changed files with 213 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
components/CustomHeader.js
View file

@ -1,15 +1,19 @@
// @flow
import * as React from "react";
import {Body, Header, Left, Right, Title} from "native-base";
import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
import {Platform, StyleSheet, View} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon";
import i18n from "i18n-js";
type Props = {
hasBackButton: boolean,
hasSearchField: boolean,
searchCallback: Function,
shouldFocusSearchBar: boolean,
leftButton: React.Node,
rightButton: React.Node,
title: string,
@ -29,11 +33,43 @@ export default class CustomHeader extends React.Component<Props> {
static defaultProps = {
hasBackButton: false,
hasSearchField: false,
searchCallback: () => null,
shouldFocusSearchBar: false,
title: '',
leftButton: <View/>,
rightButton: <View/>,
hasTabs: false,
};
componentDidMount() {
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
// does not work if called to early for some reason...
setTimeout(() => this.refs.searchInput._root.focus(), 500);
}
}
getSearchBar() {
return (
<Form>
<Item
style={{
width: '100%',
marginBottom: 7
}}>
<CustomMaterialIcon
icon={'magnify'}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
ref="searchInput"
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/>
</Item>
</Form>
);
}
render() {
let button;
// Does the app have a back button or a burger menu ?
@ -52,13 +88,15 @@ export default class CustomHeader extends React.Component<Props> {
return (
<Header style={styles.header}
hasTabs={this.props.hasTabs}>
<Left>
<Left style={{flex: 0}}>
{button}
</Left>
<Body>
<Title>{this.props.title}</Title>
{this.props.hasSearchField ?
this.getSearchBar() :
<Title>{this.props.title}</Title>}
</Body>
<Right>
<Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
{this.props.rightButton}
{this.props.hasBackButton ? <View/> :
<Touchable

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

@ -154,6 +154,7 @@ export default {
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",

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

@ -155,6 +155,7 @@ export default {
toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",

112
screens/Proximo/ProximoListScreen.js
View file

@ -45,12 +45,12 @@ type Props = {
}
type State = {
navData: Array<Object>,
currentSortMode: string,
isSortReversed: boolean,
sortPriceIcon: React.Node,
sortNameIcon: React.Node,
modalCurrentDisplayItem: Object,
currentlyDisplayedData: Array<Object>,
};
/**
@ -58,20 +58,24 @@ type State = {
*/
export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
modalRef: { current: null | Modalize };
originalData: Array<Object>;
navData = this.props.navigation.getParam('data', []);
shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.originalData = this.navData['data'];
}
state = {
navData: this.props.navigation.getParam('data', []).sort(sortPrice),
currentlyDisplayedData: this.navData['data'].sort(sortPrice),
currentSortMode: sortMode.price,
isSortReversed: false,
sortPriceIcon: '',
sortNameIcon: '',
modalCurrentDisplayItem: {}
modalCurrentDisplayItem: {},
};
_menu: Menu;
@ -111,7 +115,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
currentSortMode: mode,
isSortReversed: isReverse
});
let data = this.state.navData;
let data = this.state.currentlyDisplayedData;
switch (mode) {
case sortMode.price:
if (isReverse) {
@ -192,6 +196,35 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
}
sanitizeString(str: 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 {[]}
*/
filterData(str: string) {
let filteredData = [];
const testStr = this.sanitizeString(str);
const articles = this.originalData;
for (const article of articles) {
const name = this.sanitizeString(article.name);
if (name.includes(testStr)) {
filteredData.push(article)
}
}
return filteredData;
}
search(str: string) {
this.setState({
currentlyDisplayedData: this.filterData(str)
})
}
getModalContent() {
return (
<View style={{
@ -232,10 +265,39 @@ export default class ProximoListScreen extends React.Component<Props, State> {
}
}
getSortMenu() {
return (
<Menu
ref={this.setMenuRef}
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
</Touchable>
}
>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.name)}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.price)}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu>
);
}
render() {
const nav = this.props.navigation;
const navType = nav.getParam('type', '{name: "Error"}');
return (
<Container>
<Modalize ref={this.modalRef}
@ -243,38 +305,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
{this.getModalContent()}
</Modalize>
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
<Menu
ref={this.setMenuRef}
button={
<Touchable
style={{padding: 6}}
onPress={() =>
this._menu.show()
}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon={'sort'}/>
</Touchable>
}
>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.name)}>
{this.state.sortNameIcon}
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={() => this.sortModeSelected(sortMode.price)}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu>
}/>
<CustomHeader
hasBackButton={true}
navigation={nav}
hasSearchField={true}
searchCallback={(text) => this.search(text)}
shouldFocusSearchBar={this.shouldFocusSearchBar}
rightButton={this.getSortMenu()}/>
<Content>
<FlatList
data={this.state.navData}
extraData={this.state.navData}
data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData}
keyExtractor={(item) => item.name + item.code}
style={{minHeight: 300, width: '100%'}}
renderItem={({item}) =>

92
screens/Proximo/ProximoMainScreen.js
View file

@ -2,7 +2,7 @@
import * as React from 'react';
import {Platform, View} from 'react-native'
import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base';
import {Badge, Body, Left, ListItem, Right, Text} from 'native-base';
import i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import FetchedDataSectionList from "../../components/FetchedDataSectionList";
@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
return [
{
title: '',
data: ProximoMainScreen.generateData(fetchedData),
data: this.generateData(fetchedData),
extraData: super.state,
keyExtractor: this.getKeyExtractor
}
@ -52,66 +52,120 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
* @param fetchedData The array of articles represented by objects
* @returns {Array} The formatted dataset
*/
static generateData(fetchedData: Object) {
generateData(fetchedData: Object) {
let finalData = [];
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
let types = fetchedData.types;
let articles = fetchedData.articles;
finalData.push({
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.getAvailableArticles(articles, undefined)
});
for (let i = 0; i < types.length; i++) {
finalData.push({
type: types[i],
data: []
data: this.getAvailableArticles(articles, types[i])
});
for (let k = 0; k < articles.length; k++) {
if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) {
finalData[i].data.push(articles[k]);
}
}
}
}
finalData.sort(ProximoMainScreen.sortFinalData);
return finalData;
}
/**
* Get an array of available articles (in stock) of the given type
*
* @param articles The list of all articles
* @param type The type of articles to find (undefined for any type)
* @return {Array} The array of available articles
*/
getAvailableArticles(articles: Array<Object>, type: ?Object) {
let availableArticles = [];
for (let k = 0; k < articles.length; k++) {
if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
|| type === undefined)
&& parseInt(articles[k]['quantity']) > 0) {
availableArticles.push(articles[k]);
}
}
return availableArticles;
}
static sortFinalData(a: Object, b: Object) {
return a.type.id - b.type.id;
}
getRightButton() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.state.fetchedData.articles !== undefined ?
this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
},
};
return (
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
<View
style={{
flexDirection: 'row'
}}>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
</View>
);
}
getRenderItem(item: Object, section: Object, data: Object) {
let dataToSend = {
shouldFocusSearchBar: false,
data: item,
};
if (item.data.length > 0) {
return (
<ListItem
button
thumbnail
onPress={() => {
this.props.navigation.navigate('ProximoListScreen', item);
this.props.navigation.navigate('ProximoListScreen', dataToSend);
}}
>
<Left>
<CustomMaterialIcon
icon={item.type.icon}
fontSize={30}
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
/>
</Left>
<Body>
<Text>
{item.type.name}
</Text>
<Badge><Text>
<Text note>
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
</Text></Badge>
</Text>
</Body>
<Right>
<CustomMaterialIcon icon="chevron-right"/>

8
translations/en.json
View file

@ -25,7 +25,7 @@
},
"slide4": {
"title": "Proximo",
"text": "Are you short on pasta? Or you maybe you feel a little peckish, then look up your INSA shop's stock in real time"
"text": "Are you short on pasta? Or maybe you feel a little peckish, then look up your INSA shop's stock in real time"
},
"slide5": {
"title": "Planex",
@ -129,7 +129,9 @@
"description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
"openingHours": "Openning Hours",
"paymentMethods": "Payment Methods",
"paymentMethodsDescription": "Cash or Lydia"
"paymentMethodsDescription": "Cash or Lydia",
"search": "Search",
"all": "All"
},
"proxiwashScreen": {
"dryer": "Dryer",
@ -141,7 +143,7 @@
"listUpdateFail": "Error while updating machines state",
"error": "Could not update machines state. Pull down to retry.",
"loading": "Loading...",
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.",
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.",
"informationTab": "Information",
"paymentTab": "Payment",
"tariffs": "Tariffs",

26
translations/fr.json
View file

@ -21,11 +21,11 @@
},
"slide3": {
"title": "N'oubliez plus votre linge !",
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !"
},
"slide4": {
"title": "Proximo",
"text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
"text": "Il vous manque des pâtes ? Ou un petit creux au goûter, regardez les stocks de votre supérette insaienne en temps réel"
},
"slide5": {
"title": "Planex",
@ -75,7 +75,7 @@
"dashboard": {
"seeMore": "Cliquez pour plus d'infos",
"todayEventsTitle": "Événements aujourd'hui",
"todayEventsSubtitleNA": "Pas d'événements",
"todayEventsSubtitleNA": "Pas d'événement",
"todayEventsSubtitle": " événement aujourd'hui",
"todayEventsSubtitlePlural": " événements aujourd'hui",
"proximoTitle": "Proximo",
@ -126,10 +126,12 @@
"listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
"loading": "Chargement...",
"inStock": "en stock",
"description": "Le Proximo c’est ta petite épicerie étudiante tenu par les étudiants directement sur le campus. Ouvert tous les jours de 18h30 à 19h30, nous t’accueillons et te souvent quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galère, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
"description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
"openingHours": "Horaires d'ouverture",
"paymentMethods" : "Moyens de Paiement",
"paymentMethodsDescription" : "Espèce ou Lydia"
"paymentMethodsDescription" : "Espèce ou Lydia",
"search": "Rechercher",
"all": "Tout"
},
"proxiwashScreen": {
"dryer": "Sèche-Linge",
@ -137,9 +139,9 @@
"washer": "Lave-Linge",
"washers": "Lave-Linges",
"min": "min",
"listUpdated": "Etat des machines mis à jour",
"listUpdateFail": "Erreur lors de la mise à jour del'état des machines",
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
"listUpdated": "État des machines mis à jour",
"listUpdateFail": "Erreur lors de la mise à jour de l'état des machines",
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour réessayer.",
"loading": "Chargement...",
"description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
"informationTab": "Informations",
@ -152,7 +154,7 @@
"washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
"washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
"dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le seche-linge n'est pas chargé.",
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.",
"procedure": "Procédure",
"tips": "Conseils",
@ -161,7 +163,7 @@
"disableNotifications": "Désactiver les notifications",
"ok": "OK",
"cancel": "Annuler",
"finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
"finished": "Cette machine est terminée. Si vous l'avez démarrée, vous pouvez récupérer votre linge.",
"ready": "Cette machine est vide et prête à être utilisée.",
"running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
"broken": "Cette machine est hors service. Merci pour votre compréhension.",
@ -171,7 +173,7 @@
},
"states": {
"finished": "TERMINE",
"finished": "TERMINÉ",
"ready": "DISPONIBLE",
"running": "EN COURS",
"broken": "HORS SERVICE",
@ -195,7 +197,7 @@
},
"general": {
"loading": "Chargement...",
"networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
"networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
},
"date": {
"daysOfWeek": {