R-Dash
/
R-Dash_Application
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Session browser fini + ajout data dans le stub.

Browse Source
Backend/Page/Session_Browser
mohamed 2 years ago
parent b9eb0b5444
commit 011553d47e
5 changed files with 193 additions and 115 deletions
Show Stats Download Patch File Download Diff File

60
R-Dash/components/SessionCmp.tsx
Unescape View File

@ -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,
}
});

16
R-Dash/core/SessionType.ts
Unescape View File

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

1
R-Dash/core/WaitingMember.ts
Unescape View File

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

202
R-Dash/screens/Session_browser.tsx
Unescape View File

@ -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';
export default function Session_browser(props: {navigation: any}) {
type ItemProps = { title: string };
const { navigation } = props;
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',
},
];
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 }) {
const { navigation } = props;
const [search, setSearch] = useState("");
const handlePress = (item: Session) => {
setSearch("");
navigation.navigate("Lap", { lap: item });
};
const filteredData =
search !== ""
? SESSIONS.filter((item) =>
item.getName().toLowerCase().includes(search.toLowerCase())
)
: SESSIONS;
return (
<View style={styles.container}>
<View style={styles.container}>
{/* Header */}
<TopBar navigation={navigation} />
{/* Body */}
<View style={styles.container}>
<BackgroundImage source={require('../assets/images/rdash.png')} resizeMode="contain" style={styles.backgroundImage}>
<Text style={styles.text_title}>Sessions</Text>
<FlatList data={DATA} renderItem={({ item }) =>
<TouchableHighlight onPress={() => navigation.navigate('Lap', { "lap": item })}>
<Item title={item.title} />
</TouchableHighlight>
} keyExtractor={(Item) => Item.title} />
<TouchableOpacity style={styles.addContainerButton} onPress={() => navigation.navigate('Add')}>
<View>
<Text style={styles.button_text} >Add a session</Text>
</View>
</TouchableOpacity>
</BackgroundImage>
</View>
<View style={styles.container}>
{/* Header */}
<TopBar navigation={navigation} />
{/* Body */}
<View style={styles.container}>
<BackgroundImage
source={require("../assets/images/rdash.png")}
resizeMode="contain"
style={styles.backgroundImage}
>
<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,
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%",
},
});

29
R-Dash/stub/stub.tsx
Unescape View File

@ -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
]
Write Preview
Loading…
Cancel
Save