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