130 lines
3.2 KiB
TypeScript
130 lines
3.2 KiB
TypeScript
import ScanQRCode from "@/components/ScanQRCode";
|
|
import Select from "@/components/Select";
|
|
import { useState } from "react";
|
|
import {
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
export default function Sensor() {
|
|
const [scanModalVisible, setScanModalVisible] = useState(false);
|
|
const [scannedData, setScannedData] = useState<string | null>(null);
|
|
const handleQRCodeScanned = (data: string) => {
|
|
setScannedData(data);
|
|
// Alert.alert("QR Code Scanned", `Result: ${data}`);
|
|
};
|
|
|
|
const handleScanPress = () => {
|
|
setScanModalVisible(true);
|
|
};
|
|
const [selectedValue, setSelectedValue] = useState<
|
|
string | number | undefined
|
|
>(undefined);
|
|
|
|
const options = [
|
|
{ label: "Apple", value: "apple" },
|
|
{ label: "Banana", value: "banana" },
|
|
{ label: "Cherry", value: "cherry", disabled: true },
|
|
];
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
|
<View style={styles.container}>
|
|
<Text style={styles.titleText}>Cảm biến trên tàu</Text>
|
|
<Select
|
|
style={{ width: "80%", marginBottom: 20 }}
|
|
options={options}
|
|
value={selectedValue}
|
|
onChange={(val) => {
|
|
setSelectedValue(val);
|
|
console.log("Value: ", val);
|
|
}}
|
|
placeholder="Select a fruit"
|
|
allowClear
|
|
/>
|
|
<Pressable style={styles.scanButton} onPress={handleScanPress}>
|
|
<Text style={styles.scanButtonText}>📱 Scan QR Code</Text>
|
|
</Pressable>
|
|
|
|
{scannedData && (
|
|
<View style={styles.resultContainer}>
|
|
<Text style={styles.resultLabel}>Last Scanned:</Text>
|
|
<Text style={styles.resultText}>{scannedData}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<ScanQRCode
|
|
visible={scanModalVisible}
|
|
onClose={() => setScanModalVisible(false)}
|
|
onScanned={handleQRCodeScanned}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
},
|
|
container: {
|
|
alignItems: "center",
|
|
padding: 15,
|
|
},
|
|
titleText: {
|
|
fontSize: 32,
|
|
fontWeight: "700",
|
|
lineHeight: 40,
|
|
marginBottom: 30,
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
scanButton: {
|
|
backgroundColor: "#007AFF",
|
|
paddingVertical: 14,
|
|
paddingHorizontal: 30,
|
|
borderRadius: 10,
|
|
marginVertical: 15,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
scanButtonText: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
textAlign: "center",
|
|
},
|
|
resultContainer: {
|
|
marginTop: 30,
|
|
padding: 15,
|
|
backgroundColor: "#f0f0f0",
|
|
borderRadius: 10,
|
|
minWidth: "80%",
|
|
},
|
|
resultLabel: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#666",
|
|
marginBottom: 8,
|
|
},
|
|
resultText: {
|
|
fontSize: 14,
|
|
color: "#333",
|
|
fontFamily: "Menlo",
|
|
fontWeight: "500",
|
|
},
|
|
});
|