forked from vergnet/application-amicale
Fixed watchlist fetch + use modal instead of alert
This commit is contained in:
keplyx
parent
9e708bcf09
commit
798617d881
4 changed files with 87 additions and 29 deletions
|
|
@ -9,7 +9,7 @@ const ICON_AMICALE = require('../assets/amicale.png');
|
|||
function FeedItem(props) {
|
||||
const {colors} = props.theme;
|
||||
return (
|
||||
<Card style={{margin: 5}}>
|
||||
<Card style={{margin: 10}}>
|
||||
<Card.Title
|
||||
title={props.title}
|
||||
subtitle={props.subtitle}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import appJson from '../../app';
|
|||
import AsyncStorageManager from "../../utils/AsyncStorageManager";
|
||||
import {Modalize} from "react-native-modalize";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper';
|
||||
import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper';
|
||||
|
||||
const links = {
|
||||
appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
|
||||
|
|
@ -271,8 +271,8 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
return (
|
||||
<List.Item
|
||||
title={item.text}
|
||||
left={props => <List.Icon {...props} icon={item.icon} />}
|
||||
right={props => <List.Icon {...props} icon={'chevron-right'} />}
|
||||
left={props => <List.Icon {...props} icon={item.icon}/>}
|
||||
right={props => <List.Icon {...props} icon={'chevron-right'}/>}
|
||||
onPress={item.onPressCallback}
|
||||
/>
|
||||
);
|
||||
|
|
@ -280,7 +280,7 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
return (
|
||||
<List.Item
|
||||
title={item.text}
|
||||
left={props => <List.Icon {...props} icon={item.icon} />}
|
||||
left={props => <List.Icon {...props} icon={item.icon}/>}
|
||||
onPress={item.onPressCallback}
|
||||
/>
|
||||
);
|
||||
|
|
@ -311,7 +311,10 @@ export default class AboutScreen extends React.Component<Props, State> {
|
|||
return (
|
||||
<Modalize ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
|
||||
handlePosition={'inside'}
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
|
||||
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
|
||||
>
|
||||
<View style={{
|
||||
flex: 1,
|
||||
padding: 20
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ import WebSectionList from "../../components/WebSectionList";
|
|||
import NotificationsManager from "../../utils/NotificationsManager";
|
||||
import AsyncStorageManager from "../../utils/AsyncStorageManager";
|
||||
import * as Expo from "expo";
|
||||
import {Card, Banner, Avatar} from 'react-native-paper';
|
||||
import {Avatar, Banner, Button, Card, Text} from 'react-native-paper';
|
||||
import HeaderButton from "../../components/HeaderButton";
|
||||
import ProxiwashListItem from "../../components/ProxiwashListItem";
|
||||
import ProxiwashConstants from "../../constants/ProxiwashConstants";
|
||||
import {Modalize} from "react-native-modalize";
|
||||
import ThemeManager from "../../utils/ThemeManager";
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
|
||||
|
||||
|
|
@ -27,6 +29,7 @@ type Props = {
|
|||
type State = {
|
||||
refreshing: boolean,
|
||||
firstLoading: boolean,
|
||||
modalCurrentDisplayItem: React.Node,
|
||||
machinesWatched: Array<string>,
|
||||
bannerVisible: boolean,
|
||||
};
|
||||
|
|
@ -38,6 +41,8 @@ type State = {
|
|||
*/
|
||||
export default class ProxiwashScreen extends React.Component<Props, State> {
|
||||
|
||||
modalRef: { current: null | Modalize };
|
||||
|
||||
onAboutPress: Function;
|
||||
getRenderItem: Function;
|
||||
getRenderSectionHeader: Function;
|
||||
|
|
@ -52,6 +57,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
fetchedData: {},
|
||||
// machinesWatched: JSON.parse(dataString),
|
||||
machinesWatched: [],
|
||||
modalCurrentDisplayItem: null,
|
||||
bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1',
|
||||
};
|
||||
|
||||
|
|
@ -60,6 +66,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
*/
|
||||
constructor() {
|
||||
super();
|
||||
this.modalRef = React.createRef();
|
||||
stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
|
||||
stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
|
||||
stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
|
||||
|
|
@ -238,29 +245,40 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an alert fo a machine, allowing to enable/disable notifications if running
|
||||
*
|
||||
* @param title
|
||||
* @param item
|
||||
* @param isDryer
|
||||
*/
|
||||
showAlert(title: string, item: Object, isDryer: boolean) {
|
||||
let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
|
||||
showModal(title: string, item: Object, isDryer: boolean) {
|
||||
this.setState({
|
||||
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
|
||||
});
|
||||
if (this.modalRef.current) {
|
||||
this.modalRef.current.open();
|
||||
}
|
||||
}
|
||||
|
||||
onSetupNotificationsPress(machineId: string) {
|
||||
if (this.modalRef.current) {
|
||||
this.modalRef.current.close();
|
||||
}
|
||||
this.setupNotifications(machineId)
|
||||
}
|
||||
|
||||
getModalContent(title: string, item: Object, isDryer: boolean) {
|
||||
let button = {
|
||||
text: i18n.t("proxiwashScreen.modal.ok"),
|
||||
icon: '',
|
||||
onPress: undefined
|
||||
};
|
||||
let message = modalStateStrings[ProxiwashConstants.machineStates[item.state]];
|
||||
const onPress = this.setupNotifications.bind(this, item.number);
|
||||
const onPress = this.onSetupNotificationsPress.bind(this, item.number);
|
||||
if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]) {
|
||||
buttons = [
|
||||
button =
|
||||
{
|
||||
text: this.isMachineWatched(item.number) ?
|
||||
i18n.t("proxiwashScreen.modal.disableNotifications") :
|
||||
i18n.t("proxiwashScreen.modal.enableNotifications"),
|
||||
icon: '',
|
||||
onPress: onPress
|
||||
},
|
||||
{
|
||||
text: i18n.t("proxiwashScreen.modal.cancel")
|
||||
}
|
||||
];
|
||||
;
|
||||
message = i18n.t('proxiwashScreen.modal.running',
|
||||
{
|
||||
start: item.startTime,
|
||||
|
|
@ -273,13 +291,39 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
else
|
||||
message += '\n' + i18n.t('proxiwashScreen.washersTariff');
|
||||
}
|
||||
Alert.alert(
|
||||
title,
|
||||
message,
|
||||
buttons
|
||||
return (
|
||||
<View style={{
|
||||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<Card.Title
|
||||
title={title}
|
||||
left={() => <Avatar.Icon
|
||||
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
color={ThemeManager.getCurrentThemeVariables().text}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text>{message}</Text>
|
||||
</Card.Content>
|
||||
|
||||
{button.onPress !== undefined ?
|
||||
<Card.Actions>
|
||||
<Button
|
||||
icon={button.icon}
|
||||
mode="contained"
|
||||
onPress={button.onPress}
|
||||
style={{marginLeft: 'auto', marginRight: 'auto'}}
|
||||
>
|
||||
{button.text}
|
||||
</Button>
|
||||
</Card.Actions> : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
onAboutPress() {
|
||||
this.props.navigation.navigate('ProxiwashAboutScreen');
|
||||
}
|
||||
|
|
@ -305,10 +349,18 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
icon={() => <Avatar.Icon
|
||||
icon={'information'}
|
||||
size={40}
|
||||
/>}
|
||||
/>}
|
||||
>
|
||||
{i18n.t('proxiwashScreen.enableNotificationsTip')}
|
||||
</Banner>
|
||||
<Modalize ref={this.modalRef}
|
||||
adjustToContentHeight
|
||||
handlePosition={'inside'}
|
||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
|
||||
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
|
||||
>
|
||||
{this.state.modalCurrentDisplayItem}
|
||||
</Modalize>
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={nav}
|
||||
|
|
@ -374,7 +426,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
|
|||
const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"];
|
||||
const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
|
||||
const isDryer = section.title === i18n.t('proxiwashScreen.dryers');
|
||||
const onPress = this.showAlert.bind(this, machineName, item, isDryer);
|
||||
const onPress = this.showModal.bind(this, machineName, item, isDryer);
|
||||
let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0;
|
||||
if (ProxiwashConstants.machineStates[item.state] === '0')
|
||||
width = '100%';
|
||||
|
|
|
|||
|
|
@ -123,7 +123,10 @@ export default class NotificationsManager {
|
|||
'Content-Type': 'application/json',
|
||||
}),
|
||||
body: JSON.stringify(data) // <-- Post parameters
|
||||
});
|
||||
}).then((response) => response.json())
|
||||
.then((responseJson) => {
|
||||
callback(responseJson);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue