location-menu #5

Merged
whysman merged 26 commits from location-menu into master 2025-03-30 01:56:40 +00:00
2 changed files with 66 additions and 76 deletions
Showing only changes of commit 6eff2b311f - Show all commits

View File

@ -3,7 +3,15 @@ import {StyleSheet} from "react-native";
const styles = StyleSheet.create({ const styles = StyleSheet.create({
//StatusPage //StatusPage
container: { flex: 1, alignItems: "stretch" }, container: { flex: 1, alignItems: "stretch" },
listContainer: { flex: 1, width: "100%", backgroundColor: 'transparent' }, listContainer: {
flex: 1,
width: "100%",
backgroundColor: 'transparent',
flexDirection: "row",
justifyContent: "space-between",
//alignItems: "flex-start", // Aligns subheaders properly
paddingHorizontal: 10, // Adds some spacing
},
listSubheader: { listSubheader: {
fontFamily: "Medium", fontFamily: "Medium",
fontSize: 18, // Larger text fontSize: 18, // Larger text
@ -12,20 +20,16 @@ const styles = StyleSheet.create({
marginBottom: 10, // Add spacing below marginBottom: 10, // Add spacing below
zIndex: 0, zIndex: 0,
}, },
listWrapper: { flex: 1, padding: 5 }, //listWrapper: { flex: 1, padding: 5 },
listRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-start", // Aligns subheaders properly
paddingHorizontal: 10, // Adds some spacing
},
listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1}, listColumn: { flex: 1, paddingHorizontal: 5, zIndex: 1},
buttonContainer: { buttonContainer: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignSelf: "stretch", alignSelf: "stretch",
verticalAlign: "bottom",
paddingHorizontal: 10, paddingHorizontal: 10,
paddingBottom: 20, paddingBottom: 20,
marginHorizontal: 5,
}, },
actionButton: { actionButton: {
flex: 1, flex: 1,

View File

@ -167,53 +167,42 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
return ( return (
<View style={[styles.container, isProfileActive && { display: 'none' }]}> <View style={[styles.container, isProfileActive && { display: 'none' }]}>
<ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
<View style={styles.listContainer}> <View style={styles.listContainer}>
<View style={styles.listRow}> <List.Section style={styles.listColumn}>
<View style={styles.listColumn}>
<List.Section>
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader> <List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>On the Way</List.Subheader>
{messages.filter(msg => msg.Status === "On the Way") {messages.filter(msg => msg.Status === "On the Way")
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()) .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
.map(item => ( .map(item => (
<View key={item.Id} style={[styles.card,
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
<List.Item <List.Item
key={item.Id} key={item.Id}
title={item.Name} title={item.Name}
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }} titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })} description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }} descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />} left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/> />
</View>
))} ))}
</List.Section> </List.Section>
</View> <List.Section style={styles.listColumn}>
<View style={styles.listColumn}>
<List.Section>
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader> <List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
{messages.filter(msg => msg.Status === "Arrived") {messages.filter(msg => msg.Status === "Arrived")
.sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime()) .sort((a, b) => new Date(a.Timestamp).getTime() - new Date(b.Timestamp).getTime())
.map(item => ( .map(item => (
<View key={item.Id} style={[styles.card,
{ backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}>
<List.Item <List.Item
key={item.Id} key={item.Id}
title={item.Name} title={item.Name}
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }} titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceBold" }}
style={[styles.card, { backgroundColor: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primaryContainer }]}
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })} description={new Date(item.Timestamp).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', hour12: true })}
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }} descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.primary, fontFamily: "SpaceReg" }}
left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />} left={(props) => <Avatar.Image {...props} size={50} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/> />
</View>
))} ))}
</List.Section> </List.Section>
</View> </View>
</View>
</View>
<ImageBackground source={require('../assets/images/bg.webp')} style={styles.imageBackground} />
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
<Animated.View style={{ flex: 1 }}>
<Button <Button
mode="contained" mode="contained"
onPress={() => handleStatusPress("On the Way")} onPress={() => handleStatusPress("On the Way")}
@ -224,8 +213,6 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}> labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
{getButtonLabel("On the Way")} {getButtonLabel("On the Way")}
</Button> </Button>
</Animated.View>
<Animated.View style={{ flex: 1 }}>
<Button <Button
mode="contained" mode="contained"
onPress={() => handleStatusPress("Arrived")} onPress={() => handleStatusPress("Arrived")}
@ -236,7 +223,6 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}> labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
{getButtonLabel("Arrived")} {getButtonLabel("Arrived")}
</Button> </Button>
</Animated.View>
</View> </View>
</View> </View>
); );