Mockup for last session view

components/NewAppMain.js

@@ -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>
+        <NavigationContainer>
-                <Stack.Navigator initialRouteName="Home">
+            <Stack.Navigator initialRouteName="Home">
-                    <Stack.Screen
+                <Stack.Screen
-                        name="Home"
+                    name="Home"
-                        component={MainMenuView}
+                    component={MainMenuView}
-                        options={screenOptions}
+                    options={screenOptions}
-                    />
+                />
-                    <Stack.Screen
+                <Stack.Screen
-                        name="Settings"
+                    name="Settings"
-                        component={SettingsView}
+                    component={SettingsView}
-                        options={screenOptions}
+                    options={screenOptions}
-                    />
+                />
-                    <Stack.Screen
+                <Stack.Screen
-                        name="Training"
+                    name="Training"
-                        component={TrainingView}
+                    component={TrainingView}
-                        options={screenOptions}
+                    options={screenOptions}
-                    />
+                />
-                </Stack.Navigator>
+                <Stack.Screen
-            </NavigationContainer>
+                    name="LastSessions"
+                    component={LastSessionsView}
+                    options={screenOptions}
+                />
+            </Stack.Navigator>
+        </NavigationContainer>
     )
 };
 

package-lock.json

@@ -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",

package.json

@@ -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",

state/Reducer.js

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

views/ImageHeader.js

@@ -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;

views/LastSessionsView.js

@@ -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;

views/MainMenuView.js

@@ -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}

views/SettingsView.js

@@ -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