From 248347cd99f24106bb134627afd20d61afb0a055 Mon Sep 17 00:00:00 2001 From: farhantock Date: Thu, 6 Jun 2024 12:24:50 +0700 Subject: [PATCH] feat(register):create register Page --- src/screens/registerPage/index.js | 460 ++++++++++++++++++++++++++++++ 1 file changed, 460 insertions(+) create mode 100644 src/screens/registerPage/index.js diff --git a/src/screens/registerPage/index.js b/src/screens/registerPage/index.js new file mode 100644 index 0000000..fbb0959 --- /dev/null +++ b/src/screens/registerPage/index.js @@ -0,0 +1,460 @@ +import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'; +import { StatusBar } from 'react-native'; +import { Button, IconButton, Text, Appbar, TextInput, TouchableRipple, Card, List } from 'react-native-paper'; +import { StyleSheet, View, ScrollView, PermissionsAndroid, Image } from 'react-native'; +import { colors } from '../../utils/color'; +import { strings } from '../../utils/i18n'; +import { launchCamera } from 'react-native-image-picker'; +import { requestAccessStoragePermission } from '../../utils/storage'; +import { getCoords } from '../../utils/geolocation'; +import { useNavigation } from '@react-navigation/native'; +import { + BottomSheetModal, + BottomSheetModalProvider, + BottomSheetView +} from '@gorhom/bottom-sheet'; +import RNFS from 'react-native-fs'; +import ImageMarker, { Position, TextBackgroundType } from 'react-native-image-marker'; +import DateTimePicker from '@react-native-community/datetimepicker'; +import moment from 'moment'; + +export default function DialogForm() { + const navigation = useNavigation(); + const [images, setImages] = useState([]); + const [selectedImageUri, setSelectedImageUri] = useState(null); + const bottomSheetImage = useRef(null); + const [selectedProject, setSelectedProject] = useState(null); + const [area, setArea] = useState({ external: false, internal: false }) + const [showExpDatePicker, setShowExpDatePicker] = useState(false); + const [expDate, setExpDate] = useState(''); + const bottomSheetModal = useRef(null); + const handleOpenSheet = useCallback(() => { + bottomSheetModal.current?.present(); + }, []); + const handleProjectPress = () => { + navigation.navigate('SearchPage', { dummyData, onSelect: handleProjectSelect }); + }; + + const handleProjectSelect = (project) => { + setSelectedProject(project); + }; + + const handleExpDateChange = (event, selectedDate) => { + const currentDate = selectedDate; + setShowExpDatePicker(false); + setExpDate(currentDate); + }; + + const showExpDatePickerFunc = () => { + setShowExpDatePicker(true); + }; + const handleOpenSheetImage = useCallback((uri) => { + + setSelectedImageUri(uri); + bottomSheetImage.current?.present(); + }, []); + + const manpower = [ + { id: '2', status: "Sakit", position: "Guard", name: "ibnu", date: '2024-02-10', timeIn: '08:15', timeOut: '17:30' }, + { id: '3', status: "Cuti", position: "Guard", name: "ardhi", date: '2024-02-11', timeIn: '08:10', timeOut: '17:20' }, + { id: '4', status: "", position: "Admin", name: "hana", date: '2024-02-12', timeIn: '08:10', timeOut: '17:20' }, + { id: '5', status: "", position: "Guard", name: "satori", date: '2024-02-13', timeIn: '08:10', timeOut: '17:20' }, + { id: '6', status: "", position: "Guard", name: "khaidir", date: '2024-02-14', timeIn: '08:10', timeOut: '17:20' }, + ]; + + const dummyData = [ + { id: '1', name: 'MRT', icn: 'test1', sicn: 'test"1' }, + { id: '2', name: 'PLN', icn: 'test1', sicn: 'test"1' }, + { id: '3', name: 'Pertamina', icn: 'test1', sicn: 'test"1' }, + { id: '4', name: 'MD Entertaiment', icn: 'test1', sicn: 'test"1' }, + { id: '5', name: 'Jhonny', icn: 'test1', sicn: 'test"1' }, + { id: '6', name: 'AIA', icn: 'test1', sicn: 'test"1' }, + { id: '7', name: 'PLN Pulogadung', icn: 'test1', sicn: 'test"1' }, + { id: '8', name: 'Google', icn: 'test1', sicn: 'test"1' }, + { id: '9', name: 'Amazon', icn: 'test1', sicn: 'test"1' }, + { id: '10', name: 'Microsoft', icn: 'test1', sicn: 'test"1' }, + { id: '11', name: 'Facebook', icn: 'test1', sicn: 'test"1' }, + { id: '12', name: 'Apple', icn: 'test1', sicn: 'test"1' }, + { id: '13', name: 'Tesla', icn: 'test1', sicn: 'test"1' }, + { id: '14', name: 'Netflix', icn: 'test1', sicn: 'test"1' }, + { id: '15', name: 'Twitter', icn: 'test1', sicn: 'test"1' }, + { id: '16', name: 'LinkedIn', icn: 'test1', sicn: 'test"1' }, + { id: '17', name: 'Instagram', icn: 'test1', sicn: 'test"1' }, + { id: '18', name: 'Snapchat', icn: 'test1', sicn: 'test"1' }, + { id: '19', name: 'WhatsApp', icn: 'test1', sicn: 'test"1' }, + { id: '20', name: 'Uber', icn: 'test1', sicn: 'test"1' }, + { id: '21', name: 'Airbnb', icn: 'test1', sicn: 'test"1' }, + { id: '22', name: 'Spotify', icn: 'test1', sicn: 'test"1' }, + { id: '23', name: 'Pinterest', icn: 'test1', sicn: 'test"1' }, + { id: '24', name: 'Reddit', icn: 'test1', sicn: 'test"1' }, + { id: '25', name: 'Dropbox', icn: 'test1', sicn: 'test"1' }, + { id: '26', name: 'Zoom', icn: 'test1', sicn: 'test"1' }, + { id: '27', name: 'Etsy' } + ]; + + const handleSetImageUri = (uri, description) => { + const newImage = { uri: uri, description: description || "" }; + setImages(prevImages => [...prevImages, newImage]); + } + + const handleDeleteImage = (index) => { + const updatedImages = [...images]; + updatedImages.splice(index, 1); + setImages(updatedImages); + }; + + const handleTakePicture = async () => { + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.CAMERA, + { + title: strings('takePicture.cameraPermissionTitle'), + message: strings('takePicture.cameraPermissionMessage'), + buttonNeutral: strings('takePicture.cameraPermissionBtnNeutral'), + buttonNegative: strings('takePicture.cameraPermissionBtnCancel'), + buttonPositive: strings('takePicture.cameraPermissionBtnPositive'), + }, + ); + if (granted === PermissionsAndroid.RESULTS.GRANTED) { + handleLaunchCamera() + } else { + } + } catch (err) { + console.warn(err); + } + }; + + const handleLaunchCamera = () => { + let options = { + storageOptions: { + skipBackup: true, + path: 'images', + }, + cameraType: 'front', + maxWidth: 768, + maxHeight: 1024, + saveToPhotos: false, + includeBase64: true + }; + + launchCamera(options, (response) => { + if (response.didCancel) { + } else if (response.error) { + } else if (response.customButton) { + } else { + if (response.assets && response.assets.length > 0) { + handleSetImageUri(response.assets[0].uri); + getCoords(loc => { + if (loc) { + let imageObject = { + "image_uri": response.assets[0].uri, + "image_blob": response.assets[0].base64, + "lat": loc.lat, + "lon": loc.lon + } + addOverlay(imageObject) + } + }) + } + } + }); + } + + const addOverlay = async (imageObject) => { + try { + const timestamp = new Date().toLocaleString(); + const location = { latitude: imageObject.lat, longitude: imageObject.lon }; + + const overlayText = `${timestamp}\nLatitude: ${location.latitude}\nLongitude: ${location.longitude}`; + + if (imageObject.image_uri) { + const markedImage = await ImageMarker.markText({ + backgroundImage: { + src: { uri: imageObject.image_uri } + }, + watermarkTexts: [{ + text: overlayText, + positionOptions: { + position: Position.bottomLeft, + }, + style: { + color: '#ffffff', + fontSize: 8, + fontName: 'Arial', + textBackgroundStyle: { + padding: 10, + type: TextBackgroundType.none, + color: '#00000080' + } + }, + }], + position: 'bottomLeft', + color: '#ffffff', + fontName: 'Arial-BoldMT', + fontSize: 16, + scale: 1, + }); + await saveToTemporaryFolder(markedImage, imageObject); + } + + } catch (error) { + console.error('Error adding overlay:', error); + } + } + + const saveToTemporaryFolder = async (markedImage, imageObject) => { + try { + const tempPath = `file://${RNFS.TemporaryDirectoryPath}/KTA/${moment().format('YYYYMMDDHHmmss')}.jpg`; + + if (!requestAccessStoragePermission()) { + return; + } + await RNFS.copyFile(markedImage, tempPath); + const imageBase64 = await RNFS.readFile(tempPath, 'base64'); + storePhoto(imageObject.user_id, imageObject.drop_point_id, tempPath, imageBase64, imageObject.lat, imageObject.lon) + reloadPhotos(); + } catch (error) { + console.error('Error saving image to temporary folder:', error); + } + } + const renderImages = useMemo(() => images.map((image, index) => ( + <> + + { handleOpenSheetImage(image.uri) }}> + + + + + + + + + )), [images]); + + return ( + <> + + + { navigation.goBack() }} /> + + + + + + + + } + /> + + + + } + /> + + + } + /> + + + } + /> + + + } + /> + + + + + {renderImages} + + + + + + + + + + + + + + + console.log("pagi")}> + } + /> + + console.log("siang")}> + } + /> + + console.log("malem")}> + } + /> + + + + + + + + + + + {showExpDatePicker && ( + + )} + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginHorizontal: 10 + }, + + scrollViewContainer: { + flex: 1, + marginVertical: 10, + }, + card: { + flex: 1, + marginHorizontal: 8, + marginVertical: 5, + backgroundColor: colors.pureWhite, + }, + subText: { + fontSize: 12, + color: colors.blue + }, + button: { + flex: 1, + margin: 5, + borderRadius: 5 + }, + buttonContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + padding: 10, + paddingBottom: 20, + backgroundColor: colors.pureWhite, + }, + imageBlock: { + marginTop: 10, + marginBottom: 10, + alignItems: 'center', + }, + imageContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + image: { + width: 330, + height: 150, + borderRadius: 7 + }, + imageDetail: { + width: 330, + height: 300, + borderRadius: 7 + } +}) \ No newline at end of file