swimtracker-app/SwimTracker/views/MainMenuView.js

import React from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  ImageBackground,
  Text,
  TouchableOpacity,
} from "react-native";
import themeColors from '../components/themeColors';
import MaterialIcon from "react-native-vector-icons/MaterialIcons";
import MaterialCommIcon from "react-native-vector-icons/MaterialCommunityIcons";

import EntypoIcon from "react-native-vector-icons/Entypo";

import { i18n } from '../utility/i18n';

import { ConnState, startSession } from '../state/DeviceReduxCoupling';
import { connect } from 'react-redux';


// ---------------------------------------------------------------------------------------------

function LargeHeaderView(props) {
  return (
    <View style={largeHeaderStyles.container}>
      <Text style={largeHeaderStyles.titleText}>swimtracker</Text>
      <View style={largeHeaderStyles.separator}></View>
      <Text style={largeHeaderStyles.subText}>bauer.tech</Text>
    </View>
  );
}

const largeHeaderStyles = StyleSheet.create({
  container: {
    height: 160,
    maxHeight: 160,
    flex: 1,
    alignItems: "center",
    justifyContent: "flex-end",
    paddingBottom: 10,
  },
  titleText: {
    color: "rgba(255,255,255,1)",
    fontSize: 48,
  },
  subText: {
    color: "rgba(255,255,255, 0.8)",
    marginTop: 15,
    textAlign: "center",
  },
  separator: {
    height: 7,
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 0.5,
    width: 230
  }
});

// ---------------------------------------------------------------------------------------------

function ButtonGrid(props) {
  return (
    <View style={buttonGridStyles.rowContainer}>
      <View style={buttonGridStyles.columnContainer}>
        <TouchableOpacity
          onPress={props.onLastSessionsPress}
          style={[{ backgroundColor: themeColors["GREEN SEA"] }, buttonGridStyles.button]}
          activeOpacity={0.6}
        >
          <MaterialCommIcon name="swim" style={buttonGridStyles.icon}></MaterialCommIcon>
          <Text style={buttonGridStyles.buttonText}>{ i18n.t('lastSessions').toUpperCase().split(" ").join("\n") }</Text>
        </TouchableOpacity>
      </View>
      <View style={buttonGridStyles.columnContainer}>
        <TouchableOpacity
          onPress={props.onSocialPress}
          style={[{ backgroundColor: "#444" }, buttonGridStyles.button]}
          activeOpacity={0.6}
          disabled={true}
        >
          <MaterialCommIcon name="account-group" style={buttonGridStyles.icon}></MaterialCommIcon>
          <Text style={buttonGridStyles.buttonText}>{ i18n.t('mainMenu_social').toUpperCase()}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={props.onSettingsPress}
          style={[{ backgroundColor: themeColors["MIDNIGHT BLUE"] }, buttonGridStyles.button]}
          activeOpacity={0.6}
        >
          <MaterialIcon name="settings" style={buttonGridStyles.icon}></MaterialIcon>
          <Text style={buttonGridStyles.buttonText}>{ i18n.t('settings').toUpperCase()}</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}

const buttonGridStyles = StyleSheet.create({
  rowContainer: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-around",
    alignItems: "center",
    paddingTop: 20,
    paddingBottom: 50,
  },
  columnContainer: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
  },
  button: {
    flex: 1,
    margin: 14,
    padding: 20,
    width: 120,
    height: 130,
    borderRadius: 10,
    opacity: 0.95,
    justifyContent: "space-around",
    alignItems: "center",
  },
  buttonText: {
    color: "rgba(255,255,255,1)",
    textAlign: "center",
    fontSize: 14,
  },
  icon: {
    color: "rgba(255,255,255,1)",
    fontSize: 60,
  }
});

// ---------------------------------------------------------------------------------------------

function FullWidthButton(props) {
  let textStyle = [fullWidthButtonStyles.buttonText];
  let iconStyle = [fullWidthButtonStyles.icon];
  if (props.disabled) {
    textStyle.push(fullWidthButtonStyles.buttonTextDisabled);
    iconStyle.push(fullWidthButtonStyles.iconDisabled);
  }
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={fullWidthButtonStyles.container}
      disabled={props.disabled}
      activeOpacity={0.6}>
      <View style={{ flex: 1, flexDirection: "row", justifyContent: "center" }}>
        <EntypoIcon name="air" style={iconStyle}></EntypoIcon>
        <Text style={textStyle}>{props.text}</Text>
      </View>
    </TouchableOpacity>
  )
}

const fullWidthButtonStyles = StyleSheet.create({
  container: {
    flex: 1,
    maxHeight: 70,
    backgroundColor: themeColors["WET ASPHALT"],
    flexDirection: "row",
    alignItems: "center",
    //paddingBottom: 10,
    justifyContent: "center",
  },
  buttonText: {
    padding: 10,
    color: "rgba(255,255,255,1)",
    fontSize: 25,
    fontWeight: "600",
    textAlign: "center",
  },
  buttonTextDisabled: {
    opacity: 0.3,
  },
  icon: {
    fontSize: 40,
    padding: 10,
    color: themeColors["GREEN SEA"],
  },
  iconDisabled: {
    color: themeColors["POMEGRANATE"],
  },
});


// ---------------------------------------------------------------------------------------------

function MainMenuView(props) {
  const s = props.connState;
  let startButtonText = i18n.t('mainMenu_swimNow').toUpperCase();
  let startButtonDisabled = false;
  if (s === ConnState.DISCONNECTED) {
    startButtonText = "NICHT VERBUNDEN";
    startButtonDisabled = true;
  } else if (s === ConnState.CONNECTED_RUNNING || s === ConnState.CONNECTED_STARTING) {
    startButtonText = "TRAINING LÄUFT";
  } else if (s === ConnState.CONNECTED_STOPPING) {
    startButtonDisabled = true;
  }

  const onStartButtonPress = () => {
    if (props.connState !== ConnState.CONNECTED_RUNNING) {
      props.dispatch(startSession());
    }
    props.navigation.navigate('Training')
  };

  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="light-content" backgroundColor="rgba(0,0,0,0.4)" translucent={true} />
      <ImageBackground
        source={require("../assets/pool_sky_background_blurred.jpg")}
        resizeMode="cover"
        style={{ flex: 1 }}
      >
        <View style={{ flex: 1 }}>
          <LargeHeaderView />
          <ButtonGrid 
            onSettingsPress={() => props.navigation.navigate('Settings')}
            onLastSessionsPress = {() => props.navigation.navigate("LastSessions")}   
          />
          <FullWidthButton
            onPress={onStartButtonPress}
            text={startButtonText}
            disabled={startButtonDisabled} />
        </View>
      </ImageBackground>
    </View>
  );
}

const mapStateToProps = (state) => {
  return { connState: state.deviceState.connState };
};

export default connect(mapStateToProps)(MainMenuView);