Removing unnecessary Views

This commit is contained in:
whysman 2025-03-22 17:06:21 -04:00
parent c2d173a4ba
commit 6eff2b311f
2 changed files with 66 additions and 76 deletions

View File

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

View File

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