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 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, 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 { 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 API_URL = process.env.EXPO_PUBLIC_API_URL;
export const WS_URL = process.env.EXPO_PUBLIC_WS_URL; export const WS_URL = process.env.EXPO_PUBLIC_WS_URL;
@ -12,6 +13,7 @@ interface Message {
Name: string; Name: string;
Image: string; Image: string;
Status: string; Status: string;
Theme: string;
Timestamp: string; Timestamp: string;
} }
@ -69,13 +71,15 @@ interface StatusProps {
image: string; image: string;
currentStatus: string; currentStatus: string;
setStatus: (currentStatus: string) => void; setStatus: (currentStatus: string) => void;
currentTheme: string;
isProfileActive: boolean; 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("WebSocket URL: ", WS_URL);
//console.log("API URL: ", API_URL); //console.log("API URL: ", API_URL);
const theme = useTheme(); const theme = useTheme();
const colorScheme = useColorScheme();
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const { lastMessage } = useWebSocket(WS_URL + "/ws", { const { lastMessage } = useWebSocket(WS_URL + "/ws", {
shouldReconnect: () => true, shouldReconnect: () => true,
@ -146,6 +150,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
Name: name, Name: name,
Image: image, Image: image,
Status: "none", Status: "none",
Theme: currentTheme,
Timestamp: new Date().toISOString() Timestamp: new Date().toISOString()
}; };
await axios.post(API_URL + "/set", message); await axios.post(API_URL + "/set", message);
@ -160,6 +165,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
Name: name, Name: name,
Image: image, Image: image,
Status: status, Status: status,
Theme: currentTheme,
Timestamp: new Date().toISOString() Timestamp: new Date().toISOString()
}; };
await axios.post(API_URL + "/set", message); 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") {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: 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 <List.Item
key={item.Id} key={item.Id}
title={item.Name} 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 })} 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}` }} />} left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/> />
</View> </View>
@ -232,13 +239,14 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
{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: 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 <List.Item
key={item.Id} key={item.Id}
title={item.Name} 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 })} 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}` }} />} left={(props) => <Avatar.Image {...props} size={40} source={{ uri: `data:image/png;base64,${item.Image}` }} />}
/> />
</View> </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'; const themeKey: 'blue' | 'green' | 'red' | 'yellow' | 'orange' = (currentTheme as 'blue' | 'green' | 'red' | 'yellow' | 'orange') || 'blue';
// Use the themeKey to index into the themes object // 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 ( return (
<Provider> <Provider>
<PaperProvider theme={appTheme}> <PaperProvider theme={appTheme2}>
<Stack> <Stack>
<Stack.Screen name="index" options={{ headerShown: false }} /> <Stack.Screen name="index" options={{ headerShown: false }} />
</Stack> </Stack>

1
app/index.tsx
View File

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