Session browser fini + ajout data dans le stub.

R-Dash/components/SessionCmp.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View,Image,Text, StyleSheet, Touchable } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { Session } from "../core/Session";
+
+type SessionListItemProps = {
+    session: Session;
+    onPress: (team: Session) => void;
+  }
+  
+  export default function SessionListItem(props: SessionListItemProps) {
+    const timeInSeconds = props.session.getLaps()[props.session.getLaps().length - 1].getTime();
+    const timeInMs = timeInSeconds * 1000;
+    const date = new Date(timeInMs);
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const seconds = date.getSeconds().toString().padStart(2, "0");
+    const milliseconds = date.getMilliseconds().toString().padStart(3, "0");
+    const formattedTime = `${minutes}:${seconds}:${milliseconds}`;
+    return (
+      <TouchableOpacity style={styles.container} 
+                        onPress={()=> props.onPress(props.session)}>
+        <Text style={styles.text_style}> {props.session.getName()}</Text>
+        <View style={styles.container_low}>
+             <Text style={styles.text_under}> {props.session.getType().toString() }</Text>
+            <Text style={styles.text_under}> { formattedTime }</Text>
+        </View>
+
+      </TouchableOpacity>
+    )
+  }
+  
+  const styles = StyleSheet.create({
+    container: {
+        borderRadius:30,
+        alignItems:'center',
+        backgroundColor:'#e1e8ee',
+        padding:1,
+        flex: 1,
+        margin:10,
+    },
+    container_low: {
+        borderRadius:30,
+        alignItems:'center',
+        backgroundColor:'#e1e8ee',
+        padding:10,
+        flex: 1,
+        flexDirection: "row",
+        marginBottom:10,
+    },
+    text_style:{
+        textAlign:'center',
+        fontSize:25,
+    },
+    text_under:{
+        marginLeft:15,
+        textAlign:'center',
+        fontSize:20,
+    }
+  });
+  

R-Dash/core/SessionType.ts

@@ -1,8 +1,8 @@
-enum SessionType {
+export enum SessionType {
-    Test,
+    Test = "Test",
-    PrivateTest,
+    PrivateTest = "Private Test",
-    Qualification,
+    Qualification = "Qualification",
-    ShortStroke,
+    ShortStroke = "Short Stroke",
-    LongStroke,
+    LongStroke = "Long Stroke",
-    Unknown,
+    Unknown = "Unknown",
-}
+  }

R-Dash/core/WaitingMember.ts

@@ -1,5 +1,4 @@
 import { Session } from "./Session";
-import { Team } from "./Team";
 import { User } from "./User";
 
 export class WaitingMember extends User {

R-Dash/screens/Session_browser.tsx

@@ -1,91 +1,82 @@
-import { BackgroundImage } from '@rneui/base';
+import { BackgroundImage, SearchBar } from "@rneui/base";
-import React from 'react';
+import React, { useState } from "react";
-import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';
+import {
-import TopBar from '../components/TopBar';
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+} from "react-native";
+import SessionListItem from "../components/SessionCmp";
+import TopBar from "../components/TopBar";
+import { Session } from "../core/Session";
+import { SESSIONS } from "../stub/stub";
 
-export default function Session_browser(props: {navigation: any}) {
+export default function Session_browser(props: { navigation: any }) {
-    type ItemProps = { title: string };
+  const { navigation } = props;
-    const { navigation } = props;
+  const [search, setSearch] = useState("");
-  const Item = ({title}: ItemProps) => (
-    <View style={styles.item}>
-      <Text style={styles.title}>{title}</Text>
-    </View>
-    );
-  const DATA = [
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-      title: 'First Item',
-    },
-    {
-      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-      title: 'Second Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d71',
-      title: 'Third Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d78',
-      title: 'c Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d76',
-      title: 'b Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d75',
-      title: 'a Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d73',
-      title: 's Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d13',
-      title: 's Item',
-    },
-  ];
-  
-  return (
-    <View style={styles.container}>
-          <View style={styles.container}>
-                  {/* Header */}
-                  <TopBar navigation={navigation} />
 
-          {/* Body */}
+  const handlePress = (item: Session) => {
-          <View style={styles.container}>
+    setSearch("");
-            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" style={styles.backgroundImage}>
+    navigation.navigate("Lap", { lap: item });
+  };
 
-              <Text style={styles.text_title}>Sessions</Text>
+  const filteredData =
-              
+    search !== ""
-                      <FlatList data={DATA} renderItem={({ item }) =>
+      ? SESSIONS.filter((item) =>
-                          <TouchableHighlight onPress={() => navigation.navigate('Lap', { "lap": item })}>
+          item.getName().toLowerCase().includes(search.toLowerCase())
-                              <Item title={item.title} />
+        )
-                          </TouchableHighlight>
+      : SESSIONS;
-                      } keyExtractor={(Item) => Item.title} />
 
-             <TouchableOpacity style={styles.addContainerButton} onPress={() => navigation.navigate('Add')}>
+  return (
-                <View>
+    <View style={styles.container}>
-                  <Text style={styles.button_text} >Add a session</Text>
+      <View style={styles.container}>
-                </View>
+        {/* Header */}
-             </TouchableOpacity>
+        <TopBar navigation={navigation} />
-              
-            </BackgroundImage>
-            
-          </View>
 
+        {/* Body */}
+        <View style={styles.container}>
+          <BackgroundImage
+            source={require("../assets/images/rdash.png")}
+            resizeMode="contain"
+            style={styles.backgroundImage}
+          >
 
-        </View>
+            <Text style={styles.text_title}>Sessions</Text>
+            <SearchBar
+              platform="default"
+              lightTheme
+              value={search}
+              onChangeText={setSearch}
+            />
+            <FlatList
+              data={filteredData}
+              renderItem={({ item }) => (
+                <SessionListItem session={item} onPress={handlePress} />
+              )}
+              keyExtractor={(Item) => Item.getName()}
+            />
 
+            <TouchableOpacity
+              style={styles.addContainerButton}
+              onPress={() => navigation.navigate("Add")}
+            >
+              <View>
+                <Text style={styles.button_text}>Add a session</Text>
+              </View>
+            </TouchableOpacity>
+          </BackgroundImage>
+        </View>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   item: {
-    borderRadius:10,
+    borderRadius: 10,
-    opacity:0.9,
+    opacity: 0.9,
-    backgroundColor: '#C5C5C5',
+    backgroundColor: "#C5C5C5",
     padding: 20,
     marginVertical: 8,
     marginHorizontal: 16,
@@ -94,51 +85,50 @@ const styles = StyleSheet.create({
     fontSize: 32,
   },
   backgroundImage: {
-    flex:1,
+    flex: 1,
-    width:'100%',
+    width: "100%",
   },
 
   container: {
-    flex:1,
+    flex: 1,
   },
-  
+
-  addImageContainer:{
+  addImageContainer: {
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     borderRadius: 50,
     width: 40,
     height: 40,
-    overflow: 'hidden',
+    overflow: "hidden",
-    alignItems:'center'
+    alignItems: "center",
   },
-  
+
-  addContainerButton:{
+  addContainerButton: {
-      margin:10,
+    margin: 10,
-      alignItems:'center',
+    alignItems: "center",
-      justifyContent:'center',
+    justifyContent: "center",
-      height: "10%",
+    height: "10%",
-      paddingVertical: 12,
+    paddingVertical: 12,
-      paddingHorizontal: 32,
+    paddingHorizontal: 32,
-      borderRadius: 10,
+    borderRadius: 10,
-      elevation: 3,
+    elevation: 3,
-      backgroundColor: '#BF181F',
+    backgroundColor: "#BF181F",
   },
   button_text: {
-    color:'#fff',
+    color: "#fff",
-    fontSize:20,
+    fontSize: 20,
   },
-  
+
   text_title: {
-    fontWeight: 'bold',
+    fontWeight: "bold",
     fontSize: 30,
-    textAlign:'center',
+    textAlign: "center",
-    padding:10,
+    padding: 10,
-    textShadowColor: '#fff',
+    textShadowColor: "#fff",
     textShadowOffset: { width: 0, height: 0 },
     textShadowRadius: 10,
-    },
+  },
 
-    topbar: {
+  topbar: {
-        height: '10%',
+    height: "10%",
-    }
+  },
-  
 });

R-Dash/stub/stub.tsx

@@ -1,5 +1,10 @@
+import { Geocalisation } from "../core/Geocalisation";
+import { Lap } from "../core/Lap";
 import { Member } from "../core/Member";
 import { Owner } from "../core/Owner";
+import { Point } from "../core/Point";
+import { Session } from "../core/Session";
+import { SessionType } from "../core/SessionType";
 import { Team } from "../core/Team";
 import { User } from "../core/User";
 import { WaitingMember } from "../core/WaitingMember";
@@ -21,4 +26,28 @@ export const USERS2 : User[] = [
 export const TEAMS : Team[] = [
     new Team("La team 1",owner1, USERS1),
     new Team("Bat INFO",owner2,USERS2)
+]
+
+
+const geo1 = new Geocalisation(40.7128, -74.0060);
+const geo2 = new Geocalisation(51.5074, -0.1278);
+const geo3 = new Geocalisation(35.6895, 139.6917);
+
+
+const point1 = new Point(geo1, 120, 10, 3, 50, 90, 20, 10, 20, 100);
+const point2 = new Point(geo2, 130, 15, 4, 60, 100, 30, 15, 25, 120);
+const point3 = new Point(geo3, 140, 20, 5, 70, 110, 40, 20, 30, 140);
+
+
+const lap1 = new Lap(1, [point1, point2], 250);
+const lap2 = new Lap(2, [point2, point3], 300);
+const lap3 = new Lap(3, [point3, point1], 350);
+
+
+const session1 = new Session("First Session", [lap1, lap2], SessionType.PrivateTest);
+const session2 = new Session("Second Session", [lap2, lap3], SessionType.Qualification);
+const session3 = new Session("Third Session", [lap3, lap1], SessionType.Unknown);
+
+export const SESSIONS : Session[] = [ 
+    session1,session2,session3
 ]