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

Theme name now sent for remote card coloring
All checks were successful
Build Flutter Web and Docker Image for Local Registry / Build React Native Web App (push) Successful in 10m30s
Details

Browse Source
This commit is contained in:
whysman 2025-02-26 12:12:24 -05:00
parent 144b0daaa5
commit be53dc63c1
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/StatusPage.tsx
View File

@ -1,8 +1,9 @@
import React, { useEffect, useState, useRef } from "react";
import useWebSocket from "react-use-websocket";
import axios from "axios";
import { Animated, Easing, ImageBackground, StyleSheet, View } from "react-native";
import {Animated, Easing, ImageBackground, StyleSheet, useColorScheme, View} from "react-native";
import { Avatar, List, Button, useTheme, } from "react-native-paper";
import { themes } from "@/app/themes";
export const API_URL = process.env.EXPO_PUBLIC_API_URL;
export const WS_URL = process.env.EXPO_PUBLIC_WS_URL;
@ -12,6 +13,7 @@ interface Message {
Name: string;
Image: string;
Status: string;
Theme: string;
Timestamp: string;
}
@ -69,13 +71,15 @@ interface StatusProps {
image: string;
currentStatus: string;
setStatus: (currentStatus: string) => void;
currentTheme: string;
isProfileActive: boolean;
}
const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, isProfileActive }) => {
const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive }) => {
//console.log("WebSocket URL: ", WS_URL);
//console.log("API URL: ", API_URL);
const theme = useTheme();
const colorScheme = useColorScheme();
const [messages, setMessages] = useState<Message[]>([]);
const { lastMessage } = useWebSocket(WS_URL + "/ws", {
shouldReconnect: () => true,
@ -146,6 +150,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
Name: name,
Image: image,
Status: "none",
Theme: currentTheme,
Timestamp: new Date().toISOString()
};
await axios.post(API_URL + "/set", message);
@ -160,6 +165,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
Name: name,
Image: image,
Status: status,
Theme: currentTheme,
Timestamp: new Date().toISOString()
};
await axios.post(API_URL + "/set", message);
@ -213,13 +219,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
{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: theme.colors.primaryContainer }]}>
<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: theme.colors.onSurface }}
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
descriptionStyle={{ color: theme.colors.onSurface }}
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/>
</View>
@ -232,13 +239,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
{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: theme.colors.primaryContainer }]}>
<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: theme.colors.onSurface }}
titleStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
description={new Date(item.Timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true })}
descriptionStyle={{ color: theme.colors.onSurface }}
descriptionStyle={{ color: themes[item.Theme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light'].colors.onSurface }}
left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/>
</View>

5
app/_layout.tsx
View File

@ -41,12 +41,13 @@ function InnerRootLayout() {
const themeKey: 'blue' | 'green' | 'red' | 'yellow' | 'orange' = (currentTheme as 'blue' | 'green' | 'red' | 'yellow' | 'orange') || 'blue';
// Use the themeKey to index into the themes object
const appTheme = themes[themeKey][colorScheme === 'dark' ? 'dark' : 'light'];
const appTheme = themes[themeKey][colorScheme === 'dark' ? 'dark' : 'light'];
const appTheme2 = themes[currentTheme as keyof typeof themes][colorScheme === 'dark' ? 'dark' : 'light']
return (
<Provider>
<PaperProvider theme={appTheme}>
<PaperProvider theme={appTheme2}>
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
</Stack>

1
app/index.tsx
View File

@ -45,6 +45,7 @@ const Index = () => {
image={userImage}
currentStatus={userStatus}
setStatus={setUserStatus}
currentTheme={currentTheme}
isProfileActive={isProfileActive}
/>
<ProfileScreen