158 lines
4.7 KiB
TypeScript
158 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Alert,
|
|
Modal,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import { saveServerDomain } from '../services/api';
|
|
|
|
const PRESETS = [
|
|
{ label: 'aa.pfgame.org', host: 'aa.pfgame.org', port: '443' },
|
|
{ label: '192.168.1.117:16000', host: '192.168.1.117', port: '16000' },
|
|
];
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
host: string;
|
|
port: string;
|
|
onHostChange: (host: string) => void;
|
|
onPortChange: (port: string) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export const ServerSettingsModal: React.FC<Props> = ({
|
|
visible,
|
|
host,
|
|
port,
|
|
onHostChange,
|
|
onPortChange,
|
|
onClose,
|
|
}) => (
|
|
<Modal visible={visible} transparent animationType="fade">
|
|
<View style={styles.overlay}>
|
|
<View style={styles.box}>
|
|
<Text style={styles.title}>Server Settings</Text>
|
|
<View style={styles.presets}>
|
|
{PRESETS.map((p) => (
|
|
<TouchableOpacity
|
|
key={p.label}
|
|
onPress={() => {
|
|
onHostChange(p.host);
|
|
onPortChange(p.port);
|
|
}}
|
|
style={[styles.presetBtn, host === p.host && port === p.port && styles.presetBtnActive]}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: host === p.host && port === p.port ? '#fff' : '#333',
|
|
}}
|
|
>
|
|
{p.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
<Text style={styles.inputLabel}>Host</Text>
|
|
<TextInput
|
|
style={styles.textInput}
|
|
value={host}
|
|
onChangeText={onHostChange}
|
|
placeholder="192.168.1.198"
|
|
autoCapitalize="none"
|
|
/>
|
|
<Text style={styles.inputLabel}>Port</Text>
|
|
<TextInput
|
|
style={[styles.textInput, { marginBottom: 20 }]}
|
|
value={port}
|
|
onChangeText={onPortChange}
|
|
placeholder="16000"
|
|
keyboardType="number-pad"
|
|
/>
|
|
<View style={styles.actions}>
|
|
<TouchableOpacity onPress={onClose} style={styles.cancelBtn}>
|
|
<Text style={{ color: '#666' }}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={async () => {
|
|
const domain = port ? `${host}:${port}` : host;
|
|
await saveServerDomain(domain, port === '443');
|
|
onClose();
|
|
Alert.alert('Saved', 'Restart app to take effect');
|
|
}}
|
|
style={styles.saveBtn}
|
|
>
|
|
<Text style={{ color: '#fff', fontWeight: 'bold' }}>Save</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
box: {
|
|
backgroundColor: '#fff',
|
|
borderRadius: 10,
|
|
padding: 20,
|
|
width: '85%',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
marginBottom: 12,
|
|
},
|
|
presets: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 6,
|
|
marginBottom: 14,
|
|
},
|
|
presetBtn: {
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
borderRadius: 6,
|
|
backgroundColor: '#f0f0f0',
|
|
},
|
|
presetBtnActive: { backgroundColor: '#3498db' },
|
|
inputLabel: {
|
|
fontSize: 13,
|
|
color: '#666',
|
|
marginBottom: 4,
|
|
},
|
|
textInput: {
|
|
borderWidth: 1,
|
|
borderColor: '#ddd',
|
|
borderRadius: 6,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 8,
|
|
marginBottom: 12,
|
|
fontSize: 14,
|
|
},
|
|
actions: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
cancelBtn: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
marginRight: 10,
|
|
},
|
|
saveBtn: {
|
|
backgroundColor: '#3498db',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 6,
|
|
},
|
|
});
|