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,50 +1,32 @@
-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 }) {
-    type ItemProps = { title: string };
   const { navigation } = props;
-  const Item = ({title}: ItemProps) => (
+  const [search, setSearch] = useState("");
-    <View style={styles.item}>
+
-      <Text style={styles.title}>{title}</Text>
+  const handlePress = (item: Session) => {
-    </View>
+    setSearch("");
-    );
+    navigation.navigate("Lap", { lap: item });
-  const DATA = [
+  };
-    {
+
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
+  const filteredData =
-      title: 'First Item',
+    search !== ""
-    },
+      ? SESSIONS.filter((item) =>
-    {
+          item.getName().toLowerCase().includes(search.toLowerCase())
-      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
+        )
-      title: 'Second Item',
+      : SESSIONS;
-    },
-    {
-      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}>
@@ -54,29 +36,38 @@ export default function Session_browser(props: {navigation: any}) {
 
         {/* Body */}
         <View style={styles.container}>
-            <BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" style={styles.backgroundImage}>
+          <BackgroundImage
+            source={require("../assets/images/rdash.png")}
+            resizeMode="contain"
+            style={styles.backgroundImage}
+          >
 
             <Text style={styles.text_title}>Sessions</Text>
-              
+            <SearchBar
-                      <FlatList data={DATA} renderItem={({ item }) =>
+              platform="default"
-                          <TouchableHighlight onPress={() => navigation.navigate('Lap', { "lap": item })}>
+              lightTheme
-                              <Item title={item.title} />
+              value={search}
-                          </TouchableHighlight>
+              onChangeText={setSearch}
-                      } keyExtractor={(Item) => Item.title} />
+            />
-
+            <FlatList
-             <TouchableOpacity style={styles.addContainerButton} onPress={() => navigation.navigate('Add')}>
+              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>
   );
 }
@@ -85,7 +76,7 @@ const styles = StyleSheet.create({
   item: {
     borderRadius: 10,
     opacity: 0.9,
-    backgroundColor: '#C5C5C5',
+    backgroundColor: "#C5C5C5",
     padding: 20,
     marginVertical: 8,
     marginHorizontal: 16,
@@ -95,7 +86,7 @@ const styles = StyleSheet.create({
   },
   backgroundImage: {
     flex: 1,
-    width:'100%',
+    width: "100%",
   },
 
   container: {
@@ -103,42 +94,41 @@ const styles = StyleSheet.create({
   },
 
   addImageContainer: {
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
     borderRadius: 50,
     width: 40,
     height: 40,
-    overflow: 'hidden',
+    overflow: "hidden",
-    alignItems:'center'
+    alignItems: "center",
   },
 
   addContainerButton: {
     margin: 10,
-      alignItems:'center',
+    alignItems: "center",
-      justifyContent:'center',
+    justifyContent: "center",
     height: "10%",
     paddingVertical: 12,
     paddingHorizontal: 32,
     borderRadius: 10,
     elevation: 3,
-      backgroundColor: '#BF181F',
+    backgroundColor: "#BF181F",
   },
   button_text: {
-    color:'#fff',
+    color: "#fff",
     fontSize: 20,
   },
 
   text_title: {
-    fontWeight: 'bold',
+    fontWeight: "bold",
     fontSize: 30,
-    textAlign:'center',
+    textAlign: "center",
     padding: 10,
-    textShadowColor: '#fff',
+    textShadowColor: "#fff",
     textShadowOffset: { width: 0, height: 0 },
     textShadowRadius: 10,
   },
 
   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";
@@ -22,3 +27,27 @@ 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
+]