Mockup for last session view

2020-07-26 14:58:22 +02:00
parent 4544f19938
commit c6b517cfe4
10 changed files with 283 additions and 68 deletions
--- a/views/ImageHeader.js
+++ b/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;
--- a/views/LastSessionView.js
+++ b/views/LastSessionView.js
--- a/views/LastSessionsView.js
+++ b/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;
--- a/views/MainMenuView.js
+++ b/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}
--- a/views/SettingsView.js
+++ b/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