New WiFi setup views, not functional yet
This commit is contained in:
Martin Bauer
parent
90ae6df6de
commit
fee67e04aa
|
|
@ -0,0 +1,103 @@
|
|||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
StatusBar,
|
||||
ImageBackground,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
import EntypoIcon from "react-native-vector-icons/Entypo";
|
||||
|
||||
|
||||
function AdditionalOptionsBottomBar(props) {
|
||||
return (
|
||||
<View style={bottomBarStyles.container}>
|
||||
{ props.leftText ?
|
||||
<TouchableOpacity onPress={props.onLeftPress}>
|
||||
<Text style={bottomBarStyles.text}>{props.leftText} </Text>
|
||||
</TouchableOpacity> : <View></View>
|
||||
}
|
||||
{props.rightText &&
|
||||
<TouchableOpacity onPress={props.onRightPress}>
|
||||
<Text style={bottomBarStyles.text}>{props.rightText}</Text>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const bottomBarStyles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingBottom: 30,
|
||||
},
|
||||
text: {
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
}
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
function SetupView(props) {
|
||||
|
||||
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={setupViewStyles.container}>
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
{props.backButton &&
|
||||
<TouchableOpacity onPress={props.navigation.goBack}>
|
||||
<EntypoIcon name="chevron-left" style={setupViewStyles.backButton}></EntypoIcon>
|
||||
</TouchableOpacity>
|
||||
}
|
||||
<Text style={setupViewStyles.headerText}>
|
||||
{props.headerText}
|
||||
</Text>
|
||||
</View>
|
||||
{props.children}
|
||||
<AdditionalOptionsBottomBar leftText={props.lowerLeftButtonText}
|
||||
onLeftPress={props.onLowerLeftButtonPress}
|
||||
rightText={props.lowerRightButtonText}
|
||||
onRightPress={props.onLowerRightButtonPress}>
|
||||
</AdditionalOptionsBottomBar>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const setupViewStyles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "space-between",
|
||||
width: "80%",
|
||||
marginLeft: 40,
|
||||
marginTop: 60,
|
||||
},
|
||||
headerText: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
fontSize: 25,
|
||||
},
|
||||
subtext: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
textAlign: "left",
|
||||
fontSize: 18,
|
||||
lineHeight: 25,
|
||||
width: "80%",
|
||||
},
|
||||
backButton: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
fontSize: 40
|
||||
},
|
||||
});
|
||||
|
||||
export default SetupView;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import SetupView from '../components/SetupView';
|
||||
|
||||
|
||||
function ConnectingView(props) {
|
||||
|
||||
return (
|
||||
<SetupView
|
||||
headerText="Connecting..."
|
||||
lowerLeftButtonText="Advanced Setup"
|
||||
lowerRightButtonText="Need help?"
|
||||
>
|
||||
<ActivityIndicator size="large" color="#ffffff" />
|
||||
<Text style={styles.subtext}>
|
||||
Please connect your phone to the WiFi of your SwimTracker
|
||||
</Text>
|
||||
|
||||
</SetupView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
subtext: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
textAlign: "left",
|
||||
fontSize: 18,
|
||||
lineHeight: 25,
|
||||
width: "80%",
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectingView;
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
TextInput,
|
||||
} from "react-native";
|
||||
import SetupView from '../components/SetupView';
|
||||
import EvilIcon from "react-native-vector-icons/EvilIcons";
|
||||
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
import themeColors from '../components/themeColors';
|
||||
|
||||
|
||||
function WifiPasswordView(props) {
|
||||
|
||||
let iconName = "wifi-strength-" + props.strength;
|
||||
if (props.lock) {
|
||||
iconName += "-lock";
|
||||
}
|
||||
|
||||
return (
|
||||
<SetupView
|
||||
headerText="WiFi Password"
|
||||
lowerRightButtonText="Need help?"
|
||||
>
|
||||
<Text style={styles.subtext}>
|
||||
{props.subText}
|
||||
</Text>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<View style={[styles.row, { backgroundColor: "rgba(155,155,155,0.8)" }]}>
|
||||
<MaterialIcon style={styles.ssidIcon} name={iconName}></MaterialIcon>
|
||||
<Text style={styles.ssidLabel} >{props.ssid}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.row}>
|
||||
<EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
|
||||
<TextInput style={styles.passwordInput}
|
||||
autoCompleteType="password"
|
||||
placeholder="Password"
|
||||
placeholderTextColor="rgba(255,255,255,0.5)"
|
||||
secureTextEntry={true}
|
||||
></TextInput>
|
||||
</View>
|
||||
|
||||
{props.confirmPwInput &&
|
||||
< View style={styles.row}>
|
||||
<EvilIcon name="lock" style={styles.ssidIcon}></EvilIcon>
|
||||
<TextInput style={styles.passwordInput}
|
||||
autoCompleteType="password"
|
||||
placeholder="Repeat Password"
|
||||
placeholderTextColor="rgba(255,255,255,0.5)"
|
||||
secureTextEntry={true}
|
||||
></TextInput>
|
||||
</View>
|
||||
}
|
||||
|
||||
<TouchableOpacity style={[styles.row, styles.button]}>
|
||||
<Text style={[styles.ssidLabel, { alignSelf: "center", textAlign: "center" }]}>{props.buttonText}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
</View>
|
||||
|
||||
</SetupView >
|
||||
);
|
||||
}
|
||||
|
||||
WifiPasswordView.defaultProps = {
|
||||
lock: true,
|
||||
strength: 2,
|
||||
ssid: "TheWLANName",
|
||||
confirmPwInput: false,
|
||||
buttonText: "Set Password",
|
||||
subText: "Please enter password for your home WiFi"
|
||||
}
|
||||
|
||||
|
||||
WifiPasswordView.defaultProps = {
|
||||
lock: true,
|
||||
strength: 3,
|
||||
ssid: "swimtracker-E2842S",
|
||||
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.",
|
||||
confirmPwInput: true,
|
||||
buttonText: "Set Password",
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
subtext: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
textAlign: "left",
|
||||
fontSize: 18,
|
||||
lineHeight: 25,
|
||||
width: "80%",
|
||||
},
|
||||
formContainer: {
|
||||
},
|
||||
row: {
|
||||
backgroundColor: "rgba(255,255,255,0.4)",
|
||||
borderRadius: 5,
|
||||
width: "100%",
|
||||
height: 50,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 5,
|
||||
marginBottom: 5,
|
||||
},
|
||||
ssidLabel: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
fontSize: 18,
|
||||
width: "100%"
|
||||
},
|
||||
button: {
|
||||
marginTop: 20,
|
||||
backgroundColor: themeColors["GREEN SEA"],
|
||||
justifyContent: "center"
|
||||
},
|
||||
ssidIcon: {
|
||||
fontSize: 25,
|
||||
color: "rgba(255,255,255,1)",
|
||||
marginLeft: 15,
|
||||
marginRight: 15,
|
||||
},
|
||||
passwordInput: {
|
||||
height: 30,
|
||||
color: "rgba(255,255,255,1)",
|
||||
width: "100%",
|
||||
fontSize: 18,
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
export default WifiPasswordView;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
} from "react-native";
|
||||
import SetupView from '../components/SetupView';
|
||||
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
|
||||
|
||||
|
||||
function WifiListElement(props) {
|
||||
let iconName = "wifi-strength-" + props.strength;
|
||||
if(props.lock) {
|
||||
iconName += "-lock";
|
||||
}
|
||||
|
||||
return (
|
||||
<TouchableOpacity>
|
||||
<View style={wifiListElementStyles.container}>
|
||||
<MaterialIcon style={wifiListElementStyles.icon} name={iconName}></MaterialIcon>
|
||||
<Text style={wifiListElementStyles.text} >{props.text}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
const wifiListElementStyles = {
|
||||
container: {
|
||||
backgroundColor: "rgba(255,255,255,0.4)",
|
||||
borderRadius: 5,
|
||||
width: "100%",
|
||||
height: 50,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
icon: {
|
||||
fontSize: 25,
|
||||
color: "rgba(255,255,255,1)",
|
||||
marginLeft: 15,
|
||||
marginRight: 15,
|
||||
},
|
||||
text: {
|
||||
color: "rgba(255,255,255,1)",
|
||||
fontSize: 18,
|
||||
width: "100%"
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------------------------
|
||||
|
||||
|
||||
function WifiSelectionView(props) {
|
||||
|
||||
return (
|
||||
<SetupView
|
||||
headerText="WiFi Connection"
|
||||
lowerLeftButtonText="My WiFi wasn't found"
|
||||
lowerRightButtonText="Need help?"
|
||||
>
|
||||
<View style={styles.listContainer}>
|
||||
<ScrollView>
|
||||
<WifiListElement text="WLAN" strength="4" lock={true}></WifiListElement>
|
||||
<WifiListElement text="GastWLAN" strength="2" lock={false}></WifiListElement>
|
||||
|
||||
<WifiListElement text="WLAN" strength="4"></WifiListElement>
|
||||
<WifiListElement text="GastWLAN" strength="2"></WifiListElement>
|
||||
|
||||
<WifiListElement text="WLAN" strength="4"></WifiListElement>
|
||||
<WifiListElement text="GastWLAN" strength="2"></WifiListElement>
|
||||
</ScrollView>
|
||||
|
||||
</View>
|
||||
</SetupView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
listContainer: {
|
||||
height: "75%",
|
||||
//backgroundColor: "red",
|
||||
}
|
||||
});
|
||||
|
||||
export default WifiSelectionView;
|
||||
Loading…
Reference in New Issue