swimtracker-app/views/SettingsView.js

167 lines
4.0 KiB
JavaScript

import React, { useState } from "react";
import {
StyleSheet,
View,
StatusBar,
TextInput,
Text,
Slider,
Switch,
} from "react-native";
import themeColors from '../components/themeColors';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import EntypoIcon from "react-native-vector-icons/Entypo";
import ImageHeader from "../components/ImageHeader";
// ---------------------------------------------------------------------------------------------
function SettingsTextInput(props) {
return (
<React.Fragment>
<Text style={settingsGroupStyles.label}>{props.label}</Text>
<TextInput
style={settingsGroupStyles.textInput}
placeholder={props.placeholder}
placeholderTextColor="rgba(167,167,167,1)"
selectionColor='rgb(120,120,120)'
></TextInput>
</React.Fragment>
);
}
function SettingsSwitch(props) {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<React.Fragment>
<Text style={settingsGroupStyles.label}>{props.label}</Text>
<Switch
value={isEnabled}
//thumbColor={themeColors["WET ASPHALT"]}
onValueChange={toggleSwitch}
trackColor={{ false: "#767577", true: themeColors["NEPHRITIS"] }}
//thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="grey"
style={settingsGroupStyles.switch}
/>
</React.Fragment>
)
}
function SettingsSlider(props) {
return (
<React.Fragment>
<Text style={settingsGroupStyles.label}>{props.label}</Text>
<Slider
value={props.value}
disabled={props.disabled}
thumbTintColor={themeColors["WET ASPHALT"]}
minimumTrackTintColor={themeColors["CLOUDS"]}
maximumTrackTintColor={themeColors["CLOUDS"]}
style={settingsGroupStyles.slider}
/>
</React.Fragment>
)
}
function SettingsCombo(props) {
}
function SettingsGroup(props) {
return (
<View style={settingsGroupStyles.container}>
<Text style={settingsGroupStyles.title}>{props.title}</Text>
<View style={settingsGroupStyles.subsettings}>
{React.Children.map(props.children, (child, idx) =>
<View style={idx == 0 ? [settingsGroupStyles.row, settingsGroupStyles.firstRow] : settingsGroupStyles.row}>
{child}
</View>
)}
</View>
</View>
);
};
const settingsGroupStyles = StyleSheet.create({
container: {
padding: 20,
paddingRight: 30,
},
title: {
color: "white",
fontSize: 20,
fontWeight: "600",
},
subsettings: {
padding: 10,
paddingLeft: 30,
},
row: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderTopColor: "rgba(255, 255,255, 0.6)",
paddingTop: 5,
paddingBottom: 5,
borderTopWidth: 0.5,
minHeight: 40,
},
firstRow: {
paddingTop: 0,
borderTopWidth: 0,
},
label: {
color: "white",
fontSize: 17,
},
textInput: {
color: "rgba(255,255,255,1)",
marginTop: 8,
},
slider: {
minWidth: 100,
width: 150,
//minHeight: 50,
},
switch: {
//minHeight: 50,
//minWidth: 80,
}
});
// ---------------------------------------------------------------------------------------------
function SettingsView(props) {
return (
<View style={{ flex: 1 }}>
<StatusBar hidden={true} />
<View style={{ flex: 1 }}>
<ImageHeader
text="EINSTELLUNGEN"
navigation={props.navigation}
image={require("../assets/infinity_pool2.jpg")}
/>
<View style={{ flex: 1, backgroundColor: themeColors["BELIZE HOLE"] }}>
<SettingsGroup title="swimtracker Device">
<SettingsTextInput
label="URL/IP"
placeholder="192.168.178.??"
/>
<SettingsSwitch
label="SomeSwitch"
/>
</SettingsGroup>
</View>
</View>
</View>
)
}
export default SettingsView;