Skip to content

A
AppUms_Lecturer
Commit dfdfec82 by tungnq
Options

TODO: Đã hoàn thiện xong phần lấy camera

parent fa147e2a
Showing with 112 additions and 95 deletions
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"server": "json-server --watch db/database.json --port 3000" "server": "json-server --watch db/database.json --port 3000"
}, },
"dependencies": { "dependencies": {
"@react-native-camera-roll/camera-roll": "^7.10.2",
"@react-native-community/async-storage": "^1.12.1", "@react-native-community/async-storage": "^1.12.1",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-native-community/netinfo": "^7.1.7", "@react-native-community/netinfo": "^7.1.7",
......
src/config/Functions.js
...@@ -724,3 +724,18 @@ export const useRenderCount = (name = 'Component') => { ...@@ -724,3 +724,18 @@ export const useRenderCount = (name = 'Component') => {
return renderCount.current; return renderCount.current;
}; };
export const monthNames = [
'Tháng 1',
'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]
\ No newline at end of file
src/screens/class_schedule/view.js
...@@ -13,7 +13,7 @@ import R from '../../assets/R'; ...@@ -13,7 +13,7 @@ import R from '../../assets/R';
import {styles} from './style'; import {styles} from './style';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
import { monthNames } from '../../config/Functions';
LogBox.ignoreLogs([ LogBox.ignoreLogs([
'[Reanimated] Reduced motion setting is enabled', '[Reanimated] Reduced motion setting is enabled',
'Each child in a list should have a unique "key" prop' 'Each child in a list should have a unique "key" prop'
...@@ -61,21 +61,6 @@ const ClassScheduleView = ({ ...@@ -61,21 +61,6 @@ const ClassScheduleView = ({
}, },
}); });
const renderHeader = () => { const renderHeader = () => {
const monthNames = [
'Tháng 1',
'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
];
return ( return (
<View style={styles.header}> <View style={styles.header}>
<TouchableOpacity <TouchableOpacity
......
src/screens/profile/index.js
...@@ -131,18 +131,18 @@ const Profile = (props) => { ...@@ -131,18 +131,18 @@ const Profile = (props) => {
const openGallery = () => { const openGallery = () => {
const options = { const options = {
mediaType: 'photo', mediaType: 'photo',
includeBase64: false, quality: 1,
maxHeight: 2000,
maxWidth: 2000,
}; };
launchImageLibrary(options, response => { launchImageLibrary(options, response => {
if (response.didCancel || response.error) { if (response.didCancel || response.error) {
console.log('User cancelled image picker');
return; return;
} }
if (response.assets && response.assets[0]) { if (response.assets && response.assets[0]) {
const imageUri = response.assets[0].uri; const imageUri = response.assets && response.assets[0] ? response.assets[0].uri : null;
setPreviewUri(imageUri); setPreviewUri(imageUri);
setShowImageSourceModal(false); setShowImageSourceModal(false);
setShowPreview(true); setShowPreview(true);
...@@ -161,6 +161,7 @@ const Profile = (props) => { ...@@ -161,6 +161,7 @@ const Profile = (props) => {
setPreviewUri(uri); setPreviewUri(uri);
setShowCamera(false); setShowCamera(false);
setShowPreview(true); setShowPreview(true);
}; };
const onToggleCameraPosition = () => setUseFront(v => !v); const onToggleCameraPosition = () => setUseFront(v => !v);
...@@ -174,23 +175,26 @@ const Profile = (props) => { ...@@ -174,23 +175,26 @@ const Profile = (props) => {
setAvatarUri(previewUri); setAvatarUri(previewUri);
setPreviewUri(null); setPreviewUri(null);
setShowPreview(false); setShowPreview(false);
setShowCamera(false); // Đóng camera sau khi xác nhận
DeviceEventEmitter.emit('hideTabs', false); DeviceEventEmitter.emit('hideTabs', false);
}; };
const onRetakePhoto = () => { const onRetakePhoto = () => {
setPreviewUri(null); setPreviewUri(null);
setShowPreview(false); setShowPreview(false);
DeviceEventEmitter.emit('hideTabs', false); setShowCamera(true); // Quay lại camera để chụp lại
// Không emit hideTabs false vì vẫn đang trong camera mode
}; };
const onClosePreview = () => { const onClosePreview = () => {
setPreviewUri(null); setPreviewUri(null);
setShowPreview(false); setShowPreview(false);
setShowCamera(false); // Đóng cả camera
DeviceEventEmitter.emit('hideTabs', false); DeviceEventEmitter.emit('hideTabs', false);
}; };
const handleSave = () => { const handleSave = () => {
const [formData, setFormData] = useState({ const formData = {
phoneNumber, phoneNumber,
oldTeacherCode, oldTeacherCode,
workPlace, workPlace,
...@@ -225,8 +229,10 @@ const Profile = (props) => { ...@@ -225,8 +229,10 @@ const Profile = (props) => {
salaryIncreaseMilestone, salaryIncreaseMilestone,
lecturerTitle, lecturerTitle,
avatarUri, avatarUri,
}); };
setFormData(formData);
console.log('Form data to save:', formData);
Alert.alert('Thành công', 'Dữ liệu đã được lưu!');
// TODO: call API save // TODO: call API save
}; };
......
src/screens/profile/view.js
...@@ -743,6 +743,80 @@ const ProfileView = props => { ...@@ -743,6 +743,80 @@ const ProfileView = props => {
); );
}; };
const renderCamera = () => {
return (
<View style={styles.overlay}>
{device ? (
<>
<Camera
ref={cameraRef}
style={styles.absoluteFill}
device={device}
isActive={showCamera}
photo
/>
<TouchableOpacity
style={styles.topLeft}
onPress={onToggleCameraPosition}>
<Image
source={R.images.icSwitchCamera}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.topRight} onPress={onCloseCamera}>
<Image
source={R.images.icClose}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.bottomLeft} onPress={onSelectGallery}>
<View style={styles.galleryPreview}>
{recentPhotos.length > 0 ? (
<View style={styles.galleryGrid}>
{recentPhotos.slice(0, 4).map((photoUri, index) => (
<Image
key={index}
source={{uri: photoUri}}
style={styles.galleryThumbnail}
/>
))}
</View>
) : (
<Image
source={R.images.icTakePhoto}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.shutter} onPress={onTakePhoto}>
{/* <Image
source={R.images.icTakePhoto}
tintColor={R.colors.white}
style={{width: 24, height: 24}}
/> */}
</TouchableOpacity>
</>
) : (
<View style={[styles.overlay, styles.center]}>
<Text style={{color: '#fff'}}>Không tìm thấy camera</Text>
<TouchableOpacity
style={[styles.smallBtn, {marginTop: 16}]}
onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
)}
</View>
)
}
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Hồ sơ giảng viên'} isBack /> <Header title={'Hồ sơ giảng viên'} isBack />
...@@ -759,77 +833,7 @@ const ProfileView = props => { ...@@ -759,77 +833,7 @@ const ProfileView = props => {
{renderPreviewModal()} {renderPreviewModal()}
{/* Overlay Camera - chỉ UI, mọi handler/state nhận từ props */} {/* Overlay Camera - chỉ UI, mọi handler/state nhận từ props */}
{showCamera && ( {showCamera && renderCamera()}
<View style={styles.overlay}>
{device ? (
<>
<Camera
ref={cameraRef}
style={styles.absoluteFill}
device={device}
isActive={showCamera}
photo
/>
<TouchableOpacity
style={styles.topLeft}
onPress={onToggleCameraPosition}>
<Image
source={R.images.icSwitchCamera}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.topRight} onPress={onCloseCamera}>
<Image
source={R.images.icClose}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.bottomLeft} onPress={onSelectGallery}>
<View style={styles.galleryPreview}>
{recentPhotos.length > 0 ? (
<View style={styles.galleryGrid}>
{recentPhotos.slice(0, 4).map((photoUri, index) => (
<Image
key={index}
source={{uri: photoUri}}
style={styles.galleryThumbnail}
/>
))}
</View>
) : (
<Image
source={R.images.icTakePhoto}
tintColor={R.colors.white}
style={{width: 30, height: 30}}
/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.shutter} onPress={onTakePhoto}>
{/* <Image
source={R.images.icTakePhoto}
tintColor={R.colors.white}
style={{width: 24, height: 24}}
/> */}
</TouchableOpacity>
</>
) : (
<View style={[styles.overlay, styles.center]}>
<Text style={{color: '#fff'}}>Không tìm thấy camera</Text>
<TouchableOpacity
style={[styles.smallBtn, {marginTop: 16}]}
onPress={onCloseCamera}>
<Text style={styles.btnText}>Đóng</Text>
</TouchableOpacity>
</View>
)}
</View>
)}
</View> </View>
); );
}; };
......
yarn.lock
...@@ -1529,6 +1529,11 @@ ...@@ -1529,6 +1529,11 @@
dependencies: dependencies:
merge-options "^3.0.4" merge-options "^3.0.4"
"@react-native-camera-roll/camera-roll@^7.10.2":
version "7.10.2"
resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.10.2.tgz#af2234f60f0b55aff9afb60888ce7f0669d52593"
integrity sha512-XgJQJDFUycmqSX+MH7vTcRigQwEIQNLIu1GvOngCZRwlSV2mF61UzeruSmmHwkBcGnHZFXkKg9fil0FQVfyglw==
"@react-native-community/async-storage@^1.12.1": "@react-native-community/async-storage@^1.12.1":
version "1.12.1" version "1.12.1"
resolved "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.12.1.tgz" resolved "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.12.1.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment