diff --git a/R-Dash/components/SessionCmp.tsx b/R-Dash/components/SessionCmp.tsx new file mode 100644 index 0000000..2f23f6f --- /dev/null +++ b/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 ( + props.onPress(props.session)}> + {props.session.getName()} + + {props.session.getType().toString() } + { formattedTime } + + + + ) + } + + 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, + } + }); + \ No newline at end of file diff --git a/R-Dash/core/SessionType.ts b/R-Dash/core/SessionType.ts index 3bde289..b1d360c 100644 --- a/R-Dash/core/SessionType.ts +++ b/R-Dash/core/SessionType.ts @@ -1,8 +1,8 @@ -enum SessionType { - Test, - PrivateTest, - Qualification, - ShortStroke, - LongStroke, - Unknown, -} \ No newline at end of file +export enum SessionType { + Test = "Test", + PrivateTest = "Private Test", + Qualification = "Qualification", + ShortStroke = "Short Stroke", + LongStroke = "Long Stroke", + Unknown = "Unknown", + } \ No newline at end of file diff --git a/R-Dash/core/WaitingMember.ts b/R-Dash/core/WaitingMember.ts index e7fbbdc..3c80e42 100644 --- a/R-Dash/core/WaitingMember.ts +++ b/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 { diff --git a/R-Dash/screens/Session_browser.tsx b/R-Dash/screens/Session_browser.tsx index ccea87a..ab56ea4 100644 --- a/R-Dash/screens/Session_browser.tsx +++ b/R-Dash/screens/Session_browser.tsx @@ -1,91 +1,82 @@ -import { BackgroundImage } from '@rneui/base'; -import React from 'react'; -import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native'; -import TopBar from '../components/TopBar'; +import { BackgroundImage, SearchBar } from "@rneui/base"; +import React, { useState } from "react"; +import { + 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) => ( - - {title} - - ); - 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 ( - - - {/* Header */} - +export default function Session_browser(props: { navigation: any }) { + const { navigation } = props; + const [search, setSearch] = useState(""); - {/* Body */} - - + const handlePress = (item: Session) => { + setSearch(""); + navigation.navigate("Lap", { lap: item }); + }; - Sessions - - - navigation.navigate('Lap', { "lap": item })}> - - - } keyExtractor={(Item) => Item.title} /> + const filteredData = + search !== "" + ? SESSIONS.filter((item) => + item.getName().toLowerCase().includes(search.toLowerCase()) + ) + : SESSIONS; - navigation.navigate('Add')}> - - Add a session - - - - - - + return ( + + + {/* Header */} + + {/* Body */} + + - + Sessions + + ( + + )} + keyExtractor={(Item) => Item.getName()} + /> + navigation.navigate("Add")} + > + + Add a session + + + + + ); } const styles = StyleSheet.create({ item: { - borderRadius:10, - opacity:0.9, - backgroundColor: '#C5C5C5', + borderRadius: 10, + opacity: 0.9, + backgroundColor: "#C5C5C5", padding: 20, marginVertical: 8, marginHorizontal: 16, @@ -94,51 +85,50 @@ const styles = StyleSheet.create({ fontSize: 32, }, backgroundImage: { - flex:1, - width:'100%', + flex: 1, + width: "100%", }, container: { - flex:1, + flex: 1, }, - - addImageContainer:{ - backgroundColor: '#fff', + + addImageContainer: { + backgroundColor: "#fff", borderRadius: 50, width: 40, height: 40, - overflow: 'hidden', - alignItems:'center' + overflow: "hidden", + alignItems: "center", }, - - addContainerButton:{ - margin:10, - alignItems:'center', - justifyContent:'center', - height: "10%", - paddingVertical: 12, - paddingHorizontal: 32, - borderRadius: 10, - elevation: 3, - backgroundColor: '#BF181F', + + addContainerButton: { + margin: 10, + alignItems: "center", + justifyContent: "center", + height: "10%", + paddingVertical: 12, + paddingHorizontal: 32, + borderRadius: 10, + elevation: 3, + backgroundColor: "#BF181F", }, button_text: { - color:'#fff', - fontSize:20, + color: "#fff", + fontSize: 20, }, - + text_title: { - fontWeight: 'bold', + fontWeight: "bold", fontSize: 30, - textAlign:'center', - padding:10, - textShadowColor: '#fff', + textAlign: "center", + padding: 10, + textShadowColor: "#fff", textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 10, - }, + }, - topbar: { - height: '10%', - } - + topbar: { + height: "10%", + }, }); diff --git a/R-Dash/stub/stub.tsx b/R-Dash/stub/stub.tsx index 1a1dab9..8314b8c 100644 --- a/R-Dash/stub/stub.tsx +++ b/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 ] \ No newline at end of file