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

location-menu #5

Merged
whysman merged 26 commits from location-menu into master 2025-03-30 01:56:40 +00:00
Conversation 0 Commits 26 Files Changed 35 +356 -14
4 changed files with 356 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e891e4def9 - Show all commits

4
app/StatusPage.tsx
View File

@ -73,8 +73,8 @@ interface StatusProps {
} }
const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, isProfileActive }) => { const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, 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 [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const { lastMessage } = useWebSocket(WS_URL + "/ws", { const { lastMessage } = useWebSocket(WS_URL + "/ws", {

14
app/_layout.tsx
View File

@ -1,12 +1,11 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font'; import { useFonts } from 'expo-font';
import { Stack } from 'expo-router'; import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen'; import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react'; import { useEffect } from 'react';
import 'react-native-reanimated'; import 'react-native-reanimated';
import { useColorScheme } from 'react-native'; import { useColorScheme } from 'react-native';
import { Provider } from "react-native-paper"; import { PaperProvider, Provider } from "react-native-paper";
import { themes } from '@/app/themes'
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
@ -27,15 +26,16 @@ export default function RootLayout() {
if (!loaded) { if (!loaded) {
return null; return null;
} }
const selectedTheme = 'green';
//const [selectedTheme, setSelectedTheme] = useState<'red' | 'blue' | 'yellow' | 'green' | 'orange'>('red');
const appTheme = themes[selectedTheme][colorScheme === 'dark' ? 'dark' : 'light'];
return ( return (
<Provider> <Provider>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <PaperProvider theme={appTheme} >
<StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
<Stack> <Stack>
<Stack.Screen name="index" options={{ headerShown: false }} /> <Stack.Screen name="index" options={{ headerShown: false }} />
</Stack> </Stack>
</ThemeProvider> </PaperProvider>
</Provider> </Provider>
); );
} }

11
app/index.tsx
View File

@ -7,11 +7,10 @@ import ProfileScreen from "@/app/ProfileScreen";
import StatusPage from "@/app/StatusPage"; import StatusPage from "@/app/StatusPage";
import Nav from "@/app/Nav"; import Nav from "@/app/Nav";
import axios from "axios"; import axios from "axios";
export const API_URL = process.env.EXPO_PUBLIC_API_URL; export const API_URL = process.env.EXPO_PUBLIC_API_URL;
const Index = () => { const Index = () => {
const { colors } = useTheme(); const theme = useTheme();
const [isProfileActive, setProfileActive] = useState(false); const [isProfileActive, setProfileActive] = useState(false);
const [userId, setUserId] = useState(""); const [userId, setUserId] = useState("");
const [userName, setUserName] = useState(""); const [userName, setUserName] = useState("");
@ -68,10 +67,12 @@ const Index = () => {
useEffect(() => { useEffect(() => {
const handleAppStateChange = (nextAppState: string) => { const handleAppStateChange = (nextAppState: string) => {
//console.log("App state", appState);
//console.log("Next App state", nextAppState);
if (appState.match(/inactive|background/) && nextAppState === "active") { if (appState.match(/inactive|background/) && nextAppState === "active") {
// When the app comes to the foreground, fetch the status // When the app comes to the foreground, fetch the status
if (!isLoading) { if (!isLoading) {
fetchCurrentStatus().then(r => null); fetchCurrentStatus().then()
} else { } else {
console.log("Waiting for loading to complete before fetching status..."); console.log("Waiting for loading to complete before fetching status...");
} }
@ -104,14 +105,14 @@ const Index = () => {
if (isLoading) { if (isLoading) {
console.log("Still loading"); console.log("Still loading");
return ( return (
<View style={[styles.container, { backgroundColor: colors.background, justifyContent: 'center', alignItems: 'center' }]}> <View style={[styles.container, { backgroundColor: theme.colors.background, justifyContent: 'center', alignItems: 'center' }]}>
<Text>Loading...</Text> <Text>Loading...</Text>
</View> </View>
); );
} }
return ( return (
<View style={[styles.container, { backgroundColor: colors.background }]}> <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
<Nav <Nav
toggleProfile={() => setProfileActive(true)} toggleProfile={() => setProfileActive(true)}
/> />

341
app/themes.ts Normal file
View File

@ -0,0 +1,341 @@
import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
export const themes = {
purple: {
light: MD3LightTheme,
dark: MD3DarkTheme,
},
red: {
light: {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
primary: '#D32F2F',
onPrimary: '#FFFFFF',
primaryContainer: '#FFCDD2',
onPrimaryContainer: '#4A0D0D',
secondary: '#FF5252',
onSecondary: '#FFFFFF',
secondaryContainer: '#FFEBEE',
onSecondaryContainer: '#5D1E1E',
tertiary: '#C2185B',
onTertiary: '#FFFFFF',
tertiaryContainer: '#F8BBD0',
onTertiaryContainer: '#550027',
background: '#FFFFFF',
onBackground: '#121212',
surface: '#F5F5F5',
onSurface: '#1E1E1E',
error: '#B00020',
onError: '#FFFFFF',
outline: '#B71C1C',
inverseSurface: '#333333',
inverseOnSurface: '#FAFAFA',
inversePrimary: '#FFB4A9',
},
},
dark: {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#FF5252',
onPrimary: '#FFFFFF',
primaryContainer: '#7F0000',
onPrimaryContainer: '#FFDAD4',
secondary: '#FF8A80',
onSecondary: '#1E0000',
secondaryContainer: '#4A0D0D',
onSecondaryContainer: '#FFEBEE',
tertiary: '#FF4081',
onTertiary: '#1E001E',
tertiaryContainer: '#7A001A',
onTertiaryContainer: '#FFD9E3',
background: '#121212',
onBackground: '#E1E1E1',
surface: '#1E1E1E',
onSurface: '#FFFFFF',
error: '#CF6679',
onError: '#FFFFFF',
outline: '#FF6F61',
inverseSurface: '#E1E1E1',
inverseOnSurface: '#1E1E1E',
inversePrimary: '#D32F2F',
},
},
},
blue: {
light: {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
primary: '#1976D2',
onPrimary: '#FFFFFF',
primaryContainer: '#BBDEFB',
onPrimaryContainer: '#0D47A1',
secondary: '#64B5F6',
onSecondary: '#FFFFFF',
secondaryContainer: '#E3F2FD',
onSecondaryContainer: '#1565C0',
tertiary: '#0288D1',
onTertiary: '#FFFFFF',
tertiaryContainer: '#81D4FA',
onTertiaryContainer: '#01579B',
background: '#FFFFFF',
onBackground: '#121212',
surface: '#F5F5F5',
onSurface: '#1E1E1E',
error: '#B00020',
onError: '#FFFFFF',
outline: '#1565C0',
inverseSurface: '#333333',
inverseOnSurface: '#FAFAFA',
inversePrimary: '#90CAF9',
},
},
dark: {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#64B5F6',
onPrimary: '#FFFFFF',
primaryContainer: '#0D47A1',
onPrimaryContainer: '#BBDEFB',
secondary: '#81D4FA',
onSecondary: '#1E1E1E',
secondaryContainer: '#1565C0',
onSecondaryContainer: '#E3F2FD',
tertiary: '#29B6F6',
onTertiary: '#1E1E1E',
tertiaryContainer: '#01579B',
onTertiaryContainer: '#81D4FA',
background: '#121212',
onBackground: '#E1E1E1',
surface: '#1E1E1E',
onSurface: '#FFFFFF',
error: '#CF6679',
onError: '#FFFFFF',
outline: '#64B5F6',
inverseSurface: '#E1E1E1',
inverseOnSurface: '#1E1E1E',
inversePrimary: '#1976D2',
},
},
},
yellow: {
light: {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
primary: '#FBC02D',
onPrimary: '#000000',
primaryContainer: '#FFF9C4',
onPrimaryContainer: '#5F3700',
secondary: '#FFD54F',
onSecondary: '#000000',
secondaryContainer: '#FFF8E1',
onSecondaryContainer: '#775A00',
tertiary: '#FFB300',
onTertiary: '#FFFFFF',
tertiaryContainer: '#FFECB3',
onTertiaryContainer: '#603800',
background: '#FFFFFF',
onBackground: '#121212',
surface: '#F5F5F5',
onSurface: '#1E1E1E',
error: '#B00020',
onError: '#FFFFFF',
outline: '#FF8F00',
inverseSurface: '#333333',
inverseOnSurface: '#FAFAFA',
inversePrimary: '#FDD835',
},
},
dark: {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#FFD54F',
onPrimary: '#000000',
primaryContainer: '#5F3700',
onPrimaryContainer: '#FFF9C4',
secondary: '#FFEB3B',
onSecondary: '#000000',
secondaryContainer: '#775A00',
onSecondaryContainer: '#FFF8E1',
tertiary: '#FFB300',
onTertiary: '#1E1E1E',
tertiaryContainer: '#603800',
onTertiaryContainer: '#FFECB3',
background: '#121212',
onBackground: '#E1E1E1',
surface: '#1E1E1E',
onSurface: '#FFFFFF',
error: '#CF6679',
onError: '#FFFFFF',
outline: '#FDD835',
inverseSurface: '#E1E1E1',
inverseOnSurface: '#1E1E1E',
inversePrimary: '#FBC02D',
},
},
},
green: {
light: {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
primary: '#388E3C', // Material Green 700
onPrimary: '#FFFFFF',
primaryContainer: '#C8E6C9',
onPrimaryContainer: '#004D00',
secondary: '#66BB6A',
onSecondary: '#FFFFFF',
secondaryContainer: '#E8F5E9',
onSecondaryContainer: '#1B5E20',
tertiary: '#2E7D32',
onTertiary: '#FFFFFF',
tertiaryContainer: '#A5D6A7',
onTertiaryContainer: '#003300',
background: '#FFFFFF',
onBackground: '#121212',
surface: '#F5F5F5',
onSurface: '#1E1E1E',
error: '#B00020',
onError: '#FFFFFF',
outline: '#388E3C',
inverseSurface: '#333333',
inverseOnSurface: '#FAFAFA',
inversePrimary: '#A5D6A7', // Soft green
},
},
dark: {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#66BB6A',
onPrimary: '#FFFFFF',
primaryContainer: '#004D00',
onPrimaryContainer: '#C8E6C9',
secondary: '#81C784',
onSecondary: '#1E1E1E',
secondaryContainer: '#1B5E20',
onSecondaryContainer: '#E8F5E9',
tertiary: '#43A047',
onTertiary: '#1E1E1E',
tertiaryContainer: '#003300',
onTertiaryContainer: '#A5D6A7',
background: '#121212',
onBackground: '#E1E1E1',
surface: '#1E1E1E',
onSurface: '#FFFFFF',
error: '#CF6679',
onError: '#FFFFFF',
outline: '#A5D6A7',
inverseSurface: '#E1E1E1',
inverseOnSurface: '#1E1E1E',
inversePrimary: '#388E3C', // Same as light theme primary
}
}
},
orange: {
light: {
...MD3LightTheme,
colors: {
...MD3LightTheme.colors,
primary: '#F57C00', // Material Orange 700
onPrimary: '#FFFFFF',
primaryContainer: '#FFCC80',
onPrimaryContainer: '#7A3300',
secondary: '#FFA726',
onSecondary: '#FFFFFF',
secondaryContainer: '#FFE0B2',
onSecondaryContainer: '#8E4700',
tertiary: '#EF6C00', // Deep orange
onTertiary: '#FFFFFF',
tertiaryContainer: '#FFD180',
onTertiaryContainer: '#622600',
background: '#FFFFFF',
onBackground: '#121212',
surface: '#F5F5F5',
onSurface: '#1E1E1E',
error: '#B00020',
onError: '#FFFFFF',
outline: '#F57C00',
inverseSurface: '#333333',
inverseOnSurface: '#FAFAFA',
inversePrimary: '#FFAB40', // Soft orange
},
},
dark: {
...MD3DarkTheme,
colors: {
...MD3DarkTheme.colors,
primary: '#FFA726',
onPrimary: '#FFFFFF',
primaryContainer: '#7A3300',
onPrimaryContainer: '#FFCC80',
secondary: '#FFB74D',
onSecondary: '#1E1E1E',
secondaryContainer: '#8E4700',
onSecondaryContainer: '#FFE0B2',
tertiary: '#FB8C00',
onTertiary: '#1E1E1E',
tertiaryContainer: '#622600',
onTertiaryContainer: '#FFD180',
background: '#121212',
onBackground: '#E1E1E1',
surface: '#1E1E1E',
onSurface: '#FFFFFF',
error: '#CF6679',
onError: '#FFFFFF',
outline: '#FFAB40',
inverseSurface: '#E1E1E1',
inverseOnSurface: '#1E1E1E',
inversePrimary: '#F57C00', // Same as light theme primary
},
}
}
};
export const themePreviews = {
purple: {
light: '#6200EA', // Default Purple Light
dark: '#BB86FC', // Default Purple Dark
},
red: {
light: '#D32F2F',
dark: '#FF5252',
},
blue: {
light: '#1976D2',
dark: '#64B5F6',
},
yellow: {
light: '#FBC02D',
dark: '#FFD54F',
},
green: {
light: '#388E3C',
dark: '#66BB6A',
},
orange: {
light: '#F57C00',
dark: '#FFA726',
},
};