martin
/
swimtracker-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mockup for last session view

This commit is contained in:
Martin Bauer 2020-07-26 14:58:22 +02:00
parent 4544f19938
commit c6b517cfe4
10 changed files with 283 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/swimmer.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

45
components/NewAppMain.js
View File

@ -6,7 +6,7 @@ import { createStackNavigator } from '@react-navigation/stack';
import MainMenuView from "../views/MainMenuView";
import SettingsView from "../views/SettingsView";
import TrainingView from "../views/TrainingView";
import LastSessionsView from "../views/LastSessionsView";
const Stack = createStackNavigator();
function NewAppMain(props) {
@ -16,25 +16,30 @@ function NewAppMain(props) {
}
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={MainMenuView}
options={screenOptions}
/>
<Stack.Screen
name="Settings"
component={SettingsView}
options={screenOptions}
/>
<Stack.Screen
name="Training"
component={TrainingView}
options={screenOptions}
/>
</Stack.Navigator>
</NavigationContainer>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={MainMenuView}
options={screenOptions}
/>
<Stack.Screen
name="Settings"
component={SettingsView}
options={screenOptions}
/>
<Stack.Screen
name="Training"
component={TrainingView}
options={screenOptions}
/>
<Stack.Screen
name="LastSessions"
component={LastSessionsView}
options={screenOptions}
/>
</Stack.Navigator>
</NavigationContainer>
)
};

5
package-lock.json generated
View File

@ -8021,6 +8021,11 @@
"resolved": "https://registry.npmjs.org/react-native-svg-web/-/react-native-svg-web-1.0.8.tgz",
"integrity": "sha512-oi+u8gNZvqkP35/XJNs8CDIlucqD6n1uhQZjQ+9J/m2abQ3YOAZSzZ23/8YeOsNDabl0pYsZFinG89K4E6EMgA=="
},
"react-native-swipe-list-view": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/react-native-swipe-list-view/-/react-native-swipe-list-view-3.2.3.tgz",
"integrity": "sha512-f0B92eZiO0mCk7ZFtn8tbLz4lb+mR8xzcfjFqCVSDeXnuNw7GenUMsccGnclIOhnxnip5BHvUHavlD41peGqig=="
},
"react-native-unimodules": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/react-native-unimodules/-/react-native-unimodules-0.8.1.tgz",

1
package.json
View File

@ -37,6 +37,7 @@
"react-native-screens": "~2.2.0",
"react-native-svg": "11.0.1",
"react-native-svg-web": "^1.0.7",
"react-native-swipe-list-view": "^3.2.3",
"react-native-unimodules": "~0.8.1",
"react-native-web": "^0.11.7",
"react-redux": "^7.2.0",

4
state/Reducer.js
View File

@ -27,8 +27,8 @@ export const stopSession = () => ({
const INITIAL_SETTINGS = {
theme: "hot",
username: "",
//swimTrackerHost: "192.168.178.107",
swimTrackerHost: "192.168.178.110",
//swimTrackerHost: "192.168.178.107", // am pool
swimTrackerHost: "192.168.178.110", // testgeraet
analysis: {
peaksPerLap: 30,

56
views/ImageHeader.js Normal file
View File

@ -0,0 +1,56 @@
import React from "react";
import {
View,
ImageBackground,
Text,
TouchableOpacity,
StyleSheet,
} from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";
function ImageHeader(props) {
return (
<View style={imageHeaderStyles.container}>
<ImageBackground
source={props.image}
resizeMode="cover"
style={{ flex: 1 }}
>
<View style={imageHeaderStyles.row}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<EntypoIcon name="chevron-left" style={imageHeaderStyles.icon}></EntypoIcon>
</TouchableOpacity>
<Text style={imageHeaderStyles.text}>{props.text}</Text>
</View>
</ImageBackground>
</View >
)
}
const imageHeaderStyles = StyleSheet.create({
container: {
flex: 1,
minHeight: 175,
maxHeight: 175,
height: 175,
width: "100%",
},
row: {
paddingTop: 30,
flexDirection: "row",
},
icon: {
color: "white",
fontSize: 40,
paddingRight: 10,
paddingLeft: 10,
},
text: {
color: "white",
fontSize: 30,
},
});
export default ImageHeader;

0
views/LastSessionView.js
View File

182
views/LastSessionsView.js Normal file
View File

@ -0,0 +1,182 @@
import React from "react";
import {
StyleSheet,
View,
StatusBar,
Text,
TouchableOpacity,
} from "react-native";
import themeColors from './themeColors';
import EntypoIcon from "react-native-vector-icons/Entypo";
import AntDesignIcon from "react-native-vector-icons/AntDesign";
import FaIcon from "react-native-vector-icons/FontAwesome5";
import ImageHeader from "./ImageHeader";
import { SwipeListView } from 'react-native-swipe-list-view';
function SessionCard(props) {
return (
<View style={sessionCardStyles.card}>
<View>
<Text style={sessionCardStyles.firstLineText}>{props.textFirstLine}</Text>
</View>
<View style={sessionCardStyles.secondLine}>
<View style={sessionCardStyles.iconTextPair}>
<FaIcon name="stopwatch" style={sessionCardStyles.icon} />
<Text style={sessionCardStyles.secondLineText}>{props.activeTime}</Text>
</View>
<View style={sessionCardStyles.iconTextPair}>
<EntypoIcon name="ruler" style={sessionCardStyles.icon} />
<Text style={sessionCardStyles.secondLineText}>{props.momentum}</Text>
</View>
<View style={sessionCardStyles.iconTextPair}>
<AntDesignIcon name="retweet" style={sessionCardStyles.icon} />
<Text style={sessionCardStyles.secondLineText}>{props.laps}</Text>
</View>
</View>
</View>
)
}
function SessionCardBehindSwipe(props) {
return (
<View style={sessionCardStyles.rowBack}>
<TouchableOpacity
style={sessionCardStyles.deleteButton}
onPress={() => deleteRow(rowMap, data.item.key)}
>
<Text style={{ fontSize: 18, color: "white" }}>Löschen</Text>
</TouchableOpacity>
</View>
);
}
const sessionCardStyles = StyleSheet.create({
card: {
backgroundColor: "#559ac8",
borderRadius: 12,
height: 100,
maxHeight: 100,
flex: 1,
flexDirection: "column",
justifyContent: "space-around",
padding: 10,
margin: 10,
paddingLeft: 20,
},
firstLineText: {
color: "white",
fontSize: 22
},
iconTextPair: {
maxWidth: 100,
flex: 1,
flexDirection: "row",
alignItems: "center",
},
secondLine: {
flex: 1,
justifyContent: "space-between",
alignContent: "center",
flexDirection: "row",
maxHeight: 30,
marginTop: 14,
},
icon: {
fontSize: 30,
color: "white",
paddingRight: 10,
},
secondLineText: {
color: "white",
fontSize: 18,
},
spacerHidden: {
flex: 1,
color: "black",
},
rowBack: {
alignItems: 'center',
backgroundColor: themeColors['ALIZARIN'],
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
height: 100,
padding: 10,
margin: 10,
paddingLeft: 20,
borderRadius: 12,
},
deleteButton: {
alignItems: 'center',
bottom: 0,
justifyContent: 'center',
position: 'absolute',
backgroundColor: themeColors['ALIZARIN'],
top: 0,
width: 150,
right: 0,
borderTopRightRadius: 12,
borderBottomRightRadius: 12,
},
})
// ---------------------------------------------------------------------------------------------
function LastSessionsView(props) {
const data = [
{
textFirstLine: "Gestern 19:12 Uhr",
laps: "31",
activeTime: "26:13",
laps: "35",
momentum: "120",
},
{
textFirstLine: "Montag 18:10 Uhr",
laps: "27",
activeTime: "26:13",
laps: "35",
momentum: "120",
},
]
const renderHiddenItem = (data, rowMap) => (
<SessionCardBehindSwipe />
);
return (
<View style={{ flex: 1 }}>
<StatusBar hidden={true} />
<View style={{ flex: 1 }}>
<ImageHeader
text="LETZTE SESSIONS"
navigation={props.navigation}
image={require("../assets/swimmer.jpg")}
/>
<View style={{ flex: 1, backgroundColor: themeColors["BELIZE HOLE"] }}>
<SwipeListView
style={{ width: "100%" }}
disableRightSwipe="true"
data={data}
renderItem={(data, rowMap) => (
<SessionCard
textFirstLine={data.item.textFirstLine}
laps={data.item.laps}
momentum={data.item.momentum}
activeTime={data.item.activeTime}
laps={data.item.laps} />
)}
renderHiddenItem={renderHiddenItem}
leftOpenValue={0}
rightOpenValue={-120}
stopRightSwipe={-145}
/>
</View>
</View>
</View>
)
}
export default LastSessionsView;

5
views/MainMenuView.js
View File

@ -215,7 +215,10 @@ function MainMenuView(props) {
>
<View style={{ flex: 1 }}>
<LargeHeaderView />
<ButtonGrid onSettingsPress={() => props.navigation.navigate('Settings')} />
<ButtonGrid
onSettingsPress={() => props.navigation.navigate('Settings')}
onLastSessionsPress = {() => props.navigation.navigate("LastSessions")}
/>
<FullWidthButton
onPress={onStartButtonPress}
text={startButtonText}

53
views/SettingsView.js
View File

@ -14,51 +14,9 @@ import {
import themeColors from './themeColors';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import EntypoIcon from "react-native-vector-icons/Entypo";
import ImageHeader from "./ImageHeader";
function ImageHeader(props) {
return (
<View style={imageHeaderStyles.container}>
<ImageBackground
source={require("../assets/infinity_pool2.jpg")}
resizeMode="cover"
style={{ flex: 1 }}
>
<View style={imageHeaderStyles.row}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<EntypoIcon name="chevron-left" style={imageHeaderStyles.icon}></EntypoIcon>
</TouchableOpacity>
<Text style={imageHeaderStyles.text}>{props.text}</Text>
</View>
</ImageBackground>
</View >
)
}
const imageHeaderStyles = StyleSheet.create({
container: {
flex: 1,
minHeight: 175,
maxHeight: 175,
height: 175,
width: "100%",
},
row: {
paddingTop: 30,
flexDirection: "row",
},
icon: {
color: "white",
fontSize: 40,
paddingRight: 10,
paddingLeft: 10,
},
text: {
color: "white",
fontSize: 30,
},
});
// ---------------------------------------------------------------------------------------------
function SettingsTextInput(props) {
@ -86,7 +44,7 @@ function SettingsSwitch(props) {
value={isEnabled}
//thumbColor={themeColors["WET ASPHALT"]}
onValueChange={toggleSwitch}
trackColor={{ false: "#767577", true: themeColors["NEPHRITIS"] }}
trackColor={{ false: "#767577", true: themeColors["NEPHRITIS"] }}
//thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="grey"
style={settingsGroupStyles.switch}
@ -187,7 +145,12 @@ function SettingsView(props) {
<View style={{ flex: 1 }}>
<StatusBar hidden={true} />
<View style={{ flex: 1 }}>
<ImageHeader text="EINSTELLUNGEN" navigation={props.navigation} />
<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