public/pogdark-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added scrolling lists

Browse Source
This commit is contained in:
whysman 2025-03-22 18:05:35 -04:00
parent 6eff2b311f
commit bf22da655f
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/Status.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import useWebSocket from "react-use-websocket"; import useWebSocket from "react-use-websocket";
import axios from "axios"; import axios from "axios";
import {Animated, Easing, ImageBackground, useColorScheme, View} from "react-native"; import {Animated, Easing, ImageBackground, ScrollView, useColorScheme, View} from "react-native";
import { Avatar, List, Button, useTheme, } from "react-native-paper"; import { Avatar, List, Button, useTheme, } from "react-native-paper";
import themes from "@/assets/themes"; import themes from "@/assets/themes";
import styles from "@/assets/styles"; import styles from "@/assets/styles";
@ -171,6 +171,7 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
<View style={styles.listContainer}> <View style={styles.listContainer}>
<List.Section style={styles.listColumn}> <List.Section style={styles.listColumn}>
<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>
<ScrollView>
{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 => (
@ -184,9 +185,11 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
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}` }} />}
/> />
))} ))}
</ScrollView>
</List.Section> </List.Section>
<List.Section style={styles.listColumn}> <List.Section style={styles.listColumn}>
<List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader> <List.Subheader style={[styles.listSubheader, { color: theme.colors.primary }]}>Arrived</List.Subheader>
<ScrollView>
{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 => (
@ -200,6 +203,7 @@ const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStat
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}` }} />}
/> />
))} ))}
</ScrollView>
</List.Section> </List.Section>
</View> </View>
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>