application-amicale/screens/ProxiwashScreen.js

// @flow

import * as React from 'react';
import {SectionList, RefreshControl, View} from 'react-native';
import {Body, Container, Icon, Left, ListItem, Right, Text, Toast, H2, Button} from 'native-base';
import CustomHeader from "../components/CustomHeader";
import ThemeManager from '../utils/ThemeManager';
import NotificationsManager from '../utils/NotificationsManager';
import i18n from "i18n-js";
import {AsyncStorage} from 'react-native'
import CustomMaterialIcon from "../components/CustomMaterialIcon";

const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";

let reminderNotifTime = 5;

const MACHINE_STATES = {
    TERMINE: "0",
    DISPONIBLE: "1",
    FONCTIONNE: "2",
    HS: "3",
    ERREUR: "4"
};

let stateStrings = {};

let stateColors = {};

type Props = {
    navigation: Object,
};

type State = {
    refreshing: boolean,
    firstLoading: boolean,
    data: Object,
    machinesWatched: Array<Object>
};

export default class ProxiwashScreen extends React.Component<Props, State> {

    state = {
        refreshing: false,
        firstLoading: true,
        data: {},
        machinesWatched: [],
    };

    constructor(props: Props) {
        super(props);
        let colors = ThemeManager.getInstance().getCurrentThemeVariables();
        stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
        stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
        stateColors[MACHINE_STATES.FONCTIONNE] = colors.proxiwashRunningColor;
        stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
        stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;

        stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
        stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
        stateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.states.running');
        stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
        stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
    }

    async readData() {
        try {
            let response = await fetch(DATA_URL);
            let responseJson = await response.json();
            this.setState({
                data: responseJson
            });
        } catch (error) {
            console.error(error);
        }
    }

    async componentWillMount() {
        let dataString = await AsyncStorage.getItem(WATCHED_MACHINES_PREFKEY);
        if (dataString === null)
            dataString = '[]';
        this.setState({
            machinesWatched: JSON.parse(dataString)
        });
    }


    componentDidMount() {
        this._onRefresh();
    }

    _onRefresh = () => {
        this.setState({refreshing: true});
        this.readData().then(() => {
            this.setState({
                refreshing: false,
                firstLoading: false
            });
            Toast.show({
                text: i18n.t('proxiwashScreen.listUpdated'),
                buttonText: 'OK',
                type: "success",
                duration: 2000
            })
        });
    };

    static getRemainingTime(startString: string, endString: string, percentDone: string): number {
        let startArray = startString.split(':');
        let endArray = endString.split(':');
        let startDate = new Date();
        startDate.setHours(parseInt(startArray[0]), parseInt(startArray[1]), 0, 0);
        let endDate = new Date();
        endDate.setHours(parseInt(endArray[0]), parseInt(endArray[1]), 0, 0);
        // Convert milliseconds into minutes
        let time: string = (((100 - parseFloat(percentDone)) / 100) * (endDate - startDate) / (60 * 1000)).toFixed(0);
        return parseInt(time);
    }

    async setupNotifications(machineId: string, remainingTime: number) {
        if (!this.isMachineWatched(machineId)) {
            let endNotifID = await NotificationsManager.scheduleNotification(
                i18n.t('proxiwashScreen.notifications.machineFinishedTitle'),
                i18n.t('proxiwashScreen.notifications.machineFinishedBody', {number: machineId}),
                new Date().getTime() + remainingTime * (60 * 1000) // Convert back to milliseconds
            );
            let reminderNotifID = undefined;
            let val = await AsyncStorage.getItem('proxiwashNotifKey');
            if (val === null)
                val = "5";
            if (val !== "never")
                reminderNotifTime = parseInt(val);
            else
                reminderNotifTime = -1;
            console.log(reminderNotifTime);
            if (remainingTime > reminderNotifTime && reminderNotifTime > 0) {
                reminderNotifID = await NotificationsManager.scheduleNotification(
                    i18n.t('proxiwashScreen.notifications.machineRunningTitle', {time: reminderNotifTime}),
                    i18n.t('proxiwashScreen.notifications.machineRunningBody', {number: machineId}),
                    new Date().getTime() + (remainingTime - reminderNotifTime) * (60 * 1000) // Convert back to milliseconds
                );
            }
            let data = this.state.machinesWatched;
            data.push({machineNumber: machineId, endNotifID: endNotifID, reminderNotifID: reminderNotifID});
            this.setState({machinesWatched: data});
            AsyncStorage.setItem(WATCHED_MACHINES_PREFKEY, JSON.stringify(data));
        } else
            this.disableNotification(machineId);
    }

    disableNotification(machineId: string) {
        let data: Object = this.state.machinesWatched;
        if (data.length > 0) {
            let elem = this.state.machinesWatched.find(function (elem) {
                return elem.machineNumber === machineId
            });
            let arrayIndex = data.indexOf(elem);
            NotificationsManager.cancelScheduledNotification(data[arrayIndex].endNotifID);
            if (data[arrayIndex].reminderNotifID !== undefined)
                NotificationsManager.cancelScheduledNotification(data[arrayIndex].reminderNotifID);
            data.splice(arrayIndex, 1);
            this.setState({machinesWatched: data});
            AsyncStorage.setItem(WATCHED_MACHINES_PREFKEY, JSON.stringify(data));
        }
    }

    isMachineWatched(number: string) {
        return this.state.machinesWatched.find(function (elem) {
            return elem.machineNumber === number
        }) !== undefined;
    }

    renderItem(item: Object, section: Object, data: Object) {
        return (
            <ListItem
                thumbnail
                style={{
                    marginLeft: 0,
                    backgroundColor: stateColors[MACHINE_STATES[item.state]]
                }}
            >
                <View style={{
                    height: '100%',
                    position: 'absolute',
                    alignSelf: 'flex-end',
                    right: 0,
                    width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
                    backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
                }}>
                </View>
                <Left>
                    <CustomMaterialIcon icon={section.title === data[0].title ? 'tumble-dryer' : 'washing-machine'}
                                        fontSize={30}
                    />
                </Left>
                <Body>
                    <Text>
                        {section.title === data[0].title ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
                    </Text>
                    <Text note>
                        {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
                    </Text>
                </Body>
                <Right>
                    {item.startTime !== '' ?
                        <Button
                            style={this.isMachineWatched(item.number) ?
                                {backgroundColor: '#ba7c1f'} : {}}
                            onPress={() => {
                                this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))
                            }}>
                            <Text>
                                {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}
                            </Text>
                            <Icon name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}
                                  type={'MaterialCommunityIcons'}
                                  style={{fontSize: 30, width: 30}}
                            />
                        </Button>
                        : <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
                            {fontWeight: 'bold'} : {}}
                        >{stateStrings[MACHINE_STATES[item.state]]}</Text>

                    }
                </Right>
            </ListItem>);
    }

    render() {
        const nav = this.props.navigation;
        const data = [
            {
                title: i18n.t('proxiwashScreen.dryers'),
                data: this.state.data.dryers === undefined ? [] : this.state.data.dryers,
                extraData: this.state
            },
            {
                title: i18n.t('proxiwashScreen.washers'),
                data: this.state.data.washers === undefined ? [] : this.state.data.washers,
                extraData: this.state
            },
        ];
        const loadingData = [
            {
                title: i18n.t('proxiwashScreen.loading'),
                data: []
            }
        ];
        return (
            <Container>
                <CustomHeader navigation={nav} title={'Proxiwash'}/>
                <SectionList
                    sections={this.state.firstLoading ? loadingData : data}
                    keyExtractor={(item) => item.number}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    renderSectionHeader={({section: {title}}) => (
                        <H2 style={{textAlign: 'center', paddingVertical: 10}}>{title}</H2>
                    )}
                    renderItem={({item, section}) =>
                        this.renderItem(item, section, data)
                    }
                />
            </Container>
        );
    }
}