Various fixes

views/ConnectingView.js

@@ -2,13 +2,23 @@ import React from "react";
 import {
   StyleSheet,
   Text,
+  View,
+  TextInput,
   ActivityIndicator,
 } from "react-native";
+
 import SetupView from '../components/SetupView';
+import EvilIcon from "react-native-vector-icons/EvilIcons";
+import { connect } from 'react-redux';
+import { changeSwimTrackerHostname } from '../state/Reducer';
 
 
 function ConnectingView(props) {
 
+  let onHostnameChange = newHostName => {
+    props.dispatch(changeSwimTrackerHostname(newHostName));
+  };
+
   return (
     <SetupView
       headerText="Connecting..."
@@ -18,8 +28,17 @@ function ConnectingView(props) {
       <ActivityIndicator size="large" color="#ffffff" />
       <Text style={styles.subtext}>
         Please connect your phone to the WiFi of your SwimTracker
-            </Text>
-
+      </Text>
+      <View style={styles.row}>
+        <EvilIcon name="archive" style={styles.hostIcon}></EvilIcon>
+        <TextInput
+          onChangeText={onHostnameChange}
+          value={props.swimTrackerHost}
+          style={styles.hostnameInput}
+          placeholder="Hostname/IP"
+          placeholderTextColor="rgba(255,255,255,0.5)"
+        ></TextInput>
+      </View>
     </SetupView>
   )
 }
@@ -27,11 +46,38 @@ function ConnectingView(props) {
 const styles = StyleSheet.create({
   subtext: {
     color: "rgba(255,255,255,1)",
-    textAlign: "left",
+    textAlign: "center",
     fontSize: 18,
     lineHeight: 25,
     width: "80%",
+  },
+  row: {
+    backgroundColor: "rgba(255,255,255,0.4)",
+    borderRadius: 5,
+    width: "80%",
+    height: 50,
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 60,
+    marginBottom: 5,
+  },
+  hostIcon: {
+    fontSize: 25,
+    color: "rgba(255,255,255,1)",
+    marginLeft: 15,
+    marginRight: 15,
+  },
+  hostnameInput: {
+    height: 30,
+    color: "rgba(255,255,255,1)",
+    width: "80%",
+    fontSize: 18,
   }
 });
 
-export default ConnectingView;
+
+const mapStateToProps = (state) => {
+  return { swimTrackerHost: state.settings.swimTrackerHost };
+};
+
+export default connect(mapStateToProps)(ConnectingView);

views/MainMenuView.js

@@ -8,12 +8,13 @@ import {
   TouchableOpacity,
 } from "react-native";
 import themeColors from '../components/themeColors';
-import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
+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 FeatherIcon from "react-native-vector-icons/Feather";
 
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-
+//import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 
 import { ConnState, startSession } from '../state/DeviceReduxCoupling';
@@ -70,7 +71,7 @@ function ButtonGrid(props) {
           style={[{ backgroundColor: themeColors["GREEN SEA"] }, buttonGridStyles.button]}
           activeOpacity={0.6}
         >
-          <MaterialIcon name="swim" style={buttonGridStyles.icon}></MaterialIcon>
+          <MaterialCommIcon name="swim" style={buttonGridStyles.icon}></MaterialCommIcon>
           <Text style={buttonGridStyles.buttonText}>{"LETZTE\nSESSIONS"}</Text>
         </TouchableOpacity>
       </View>
@@ -80,7 +81,7 @@ function ButtonGrid(props) {
           style={[{ backgroundColor: themeColors["MIDNIGHT BLUE"] }, buttonGridStyles.button]}
           activeOpacity={0.6}
         >
-          <MaterialIcon name="account-group" style={buttonGridStyles.icon}></MaterialIcon>
+          <MaterialCommIcon name="account-group" style={buttonGridStyles.icon}></MaterialCommIcon>
           <Text style={buttonGridStyles.buttonText}>SOCIAL</Text>
         </TouchableOpacity>
         <TouchableOpacity
@@ -88,7 +89,7 @@ function ButtonGrid(props) {
           style={[{ backgroundColor: themeColors["MIDNIGHT BLUE"] }, buttonGridStyles.button]}
           activeOpacity={0.6}
         >
-          <MaterialCommunityIcons name="settings" style={buttonGridStyles.icon}></MaterialCommunityIcons>
+          <MaterialIcon name="settings" style={buttonGridStyles.icon}></MaterialIcon>
           <Text style={buttonGridStyles.buttonText}>EINSTELLUNGEN</Text>
         </TouchableOpacity>
       </View>

views/WifiPasswordView.js

@@ -47,8 +47,10 @@ function WifiPasswordView(props) {
       setErrorMsg("Password has to be at least 8 characters long")
     else if (password1.length > 128)
       setErrorMsg("Password too long");
-    else
+    else {
+      props.onSubmit(props.ssid, password1);
       setErrorMsg("");
+    }
   };
 
   return (

views/WifiSelectionView.js

@@ -113,7 +113,7 @@ class WifiSelectionView extends React.Component {
     if (this.state.wifiInfo.length > 0) {
       inner = (
         <View style={styles.listContainer}>
-          <ScrollView style={{backgroundColor: "red", centerContent: true, paddingTop: 20}}>
+          <ScrollView style={{centerContent: true, paddingTop: 20}}>
             {this.state.wifiInfo.map(e => (
               <WifiListElement
                 text={e.ssid}
@@ -128,6 +128,9 @@ class WifiSelectionView extends React.Component {
                     confirmPwInput: false,
                     buttonText: "OK",
                     subText: "Please enter the password for your home WiFi",
+                    onSubmit: (ssid, pw) => {
+                      this.props.device.conn.wifiSetModeSTA(ssid, pw);
+                    },
                   });
                 }}>
               </WifiListElement>)
@@ -157,6 +160,9 @@ class WifiSelectionView extends React.Component {
             confirmPwInput: true,
             buttonText: "Set Password",
             subText: "Use this option only if you're home WiFi doesn't reach the SwimTracker. The SwimTracker creates its own WiFi with the password you set here.",
+            onSubmit: (ssid, pw) => {
+              this.props.device.conn.wifiSetModeAP(pw);
+            },
           });
         }}
         lowerRightButtonText="Need help?"