Geotouchka.mobile/app/(tabs)/index.tsx

150 lines
4.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Image, StyleSheet, Button, TextInput } from 'react-native';
import React, { useState, useEffect } from 'react';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import * as Location from 'expo-location';
import io, { Socket } from 'socket.io-client';
export default function HomeScreen() {
const [btnColor, setBtnColor] = useState("#008000");
const [broadcastState, setBroadcastState] = useState(false);
const [token, setToken] = useState<string>(""); // State для ввода токена
const [socket, setSocket] = useState<Socket | null>(null);
useEffect(() => {
// Очистка подключения при размонтировании компонента
return () => {
if (socket) {
socket.disconnect();
}
};
}, [socket]);
const onPressSwitchBroadcast = () => {
setBtnColor(btnColor === "#008000" ? "#FF0000" : "#008000");
setBroadcastState(!broadcastState);
if (socket) {
socket.disconnect();
setSocket(null);
} else {
if (token) {
const newSocket = io(`ws://192.168.0.76:9992/ws/${token}/sendGeo`);
newSocket.on('connect', () => {
console.log('Connected to WebSocket Server');
});
newSocket.on('disconnect', () => {
console.log('Disconnected from WebSocket Server');
});
newSocket.on('location_ack', (data) => {
console.log('Location acknowledged by server:', data);
});
setSocket(newSocket);
} else {
console.error('Token is required to start the broadcast');
}
}
};
const getLocation = async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
console.error('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
console.log('Location:', location);
sendLocation(location.coords.latitude, location.coords.longitude);
};
const sendLocation = (latitude: number, longitude: number) => {
if (socket) {
const locationData = {
latitude,
longitude,
token, // Include token in the message
};
socket.emit('location', locationData);
console.log('Location sent:', locationData);
}
};
useEffect(() => {
if (broadcastState) {
getLocation();
}
}, [broadcastState]);
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Шаг 1: Введите токен</ThemedText>
<ThemedText>
Токен:
</ThemedText>
<TextInput
style={styles.input}
onChangeText={setToken}
value={token}
editable={!broadcastState} // Поле ввода будет неактивным, если трансляция активна
/>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Начать трансляцию геолокации</ThemedText>
<ThemedText>
Нажмите ниже для трансляции геолокации.
</ThemedText>
<Button
onPress={onPressSwitchBroadcast}
title={broadcastState ? "Остановить трансляцию" : "Начать трансляцию геолокации"}
color={btnColor}
accessibilityLabel="Learn more about this purple button"
/>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
input: {
height: 40,
borderColor: 'gray',
color: 'white',
borderWidth: 1,
padding: 8,
margin: 10,
borderRadius: 4,
}
});