farhantock
8 months ago
3 changed files with 0 additions and 694 deletions
Before Width: | Height: | Size: 14 KiB |
@ -1,385 +0,0 @@ |
|||||||
import { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper, Box, Button, ButtonText, Text, VStack } from '@gluestack-ui/themed'; |
|
||||||
import React, { useEffect, useMemo, useState } from 'react'; |
|
||||||
import { Alert, Dimensions, FlatList, Image as ImageRN, PermissionsAndroid, Pressable, RefreshControl, ScrollView, StyleSheet, View } from 'react-native'; |
|
||||||
import { launchCamera } from 'react-native-image-picker'; |
|
||||||
import Toast from 'react-native-toast-message'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { selectRow } from '../services/sqlite'; |
|
||||||
import { deletePhoto, storePhoto } from '../services/sqlite/ospod_photo'; |
|
||||||
import { getCoords } from '../utils/geolocation'; |
|
||||||
import { strings } from '../utils/i18n'; |
|
||||||
import ImageMarker, { Position, TextBackgroundType } from 'react-native-image-marker'; |
|
||||||
import RNFS from 'react-native-fs'; |
|
||||||
import { DATE_FORMAT } from '../utils/general'; |
|
||||||
import moment from 'moment'; |
|
||||||
import { requestAccessStoragePermission } from '../utils/storage'; |
|
||||||
|
|
||||||
const numColumns = 3 |
|
||||||
|
|
||||||
const DeliveryPicturesScreen = () => { |
|
||||||
const { user } = useSelector(state => state.userReducer) |
|
||||||
const { selectedDropPoint } = useSelector(state => state.shipmentReducer) |
|
||||||
const [photos, setPhotos] = useState([]) |
|
||||||
const [selectedPhoto, setSelectedPhoto] = useState(null) |
|
||||||
const [showActionsheet, setShowActionsheet] = useState(false) |
|
||||||
const [refreshing, setRefreshing] = useState(false) |
|
||||||
const [capturedImage, setCapturedImage] = useState(null); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (selectedDropPoint) { |
|
||||||
reloadPhotos() |
|
||||||
} |
|
||||||
}, []) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (selectedPhoto) { |
|
||||||
handleToggleActionSheet(); |
|
||||||
} |
|
||||||
}, [selectedPhoto]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!showActionsheet) { |
|
||||||
setSelectedPhoto(null) |
|
||||||
} |
|
||||||
}, [showActionsheet]) |
|
||||||
|
|
||||||
const formatData = (data, numColumns) => { |
|
||||||
const numberOfFullRows = Math.floor(data.length / numColumns); |
|
||||||
|
|
||||||
let numberOfElementsLastRow = data.length - (numberOfFullRows * numColumns); |
|
||||||
while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) { |
|
||||||
data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true }); |
|
||||||
numberOfElementsLastRow++; |
|
||||||
} |
|
||||||
|
|
||||||
return data; |
|
||||||
}; |
|
||||||
|
|
||||||
const reloadPhotos = () => { |
|
||||||
setRefreshing(true) |
|
||||||
selectRow('ospod_photo', { "drop_point_id": selectedDropPoint.id }, (rows) => { |
|
||||||
setPhotos(rows); |
|
||||||
setRefreshing(false) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
const openCamera = 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) { |
|
||||||
// console.log('You can use the camera');
|
|
||||||
handleLaunchCamera() |
|
||||||
} else { |
|
||||||
// console.log('Camera permission denied');
|
|
||||||
} |
|
||||||
} catch (err) { |
|
||||||
console.warn(err); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handleLaunchCamera = () => { |
|
||||||
let options = { |
|
||||||
storageOptions: { |
|
||||||
skipBackup: true, |
|
||||||
path: 'images', |
|
||||||
}, |
|
||||||
cameraType: 'back', |
|
||||||
maxWidth: 768, |
|
||||||
maxHeight: 1024, |
|
||||||
saveToPhotos: false, |
|
||||||
includeBase64: true |
|
||||||
}; |
|
||||||
|
|
||||||
launchCamera(options, (response) => { |
|
||||||
if (response.didCancel) { |
|
||||||
// console.log('User cancelled image picker');
|
|
||||||
} else if (response.error) { |
|
||||||
// console.log('ImagePicker Error: ', response.error);
|
|
||||||
} else if (response.customButton) { |
|
||||||
// console.log('User tapped custom button: ', response.customButton);
|
|
||||||
// alert(response.customButton);
|
|
||||||
} else { |
|
||||||
// console.log('response', response);
|
|
||||||
// response:
|
|
||||||
// {
|
|
||||||
// "assets": [
|
|
||||||
// {
|
|
||||||
// "base64": "/9j/4QBqRXhpZgAATU0AKgAAAAgABAEAAAQAAAABAAAEAAEBAAQ......"
|
|
||||||
// "fileName": "rn_image_picker_lib_temp_f5afd4ec-a31b-4854-8dc7-5c5dd750e3c6.jpg",
|
|
||||||
// "fileSize": 595470,
|
|
||||||
// "height": 1024,
|
|
||||||
// "originalPath": "file:///data/user/0/com.integrasiautama.ospodduta/cache/rn_image_picker_lib_temp_f5afd4ec-a31b-4854-8dc7-5c5dd750e3c6.jpg",
|
|
||||||
// "type": "image/jpeg",
|
|
||||||
// "uri": "file:///data/user/0/com.integrasiautama.ospodduta/cache/rn_image_picker_lib_temp_10e0c170-69ce-4a1d-8520-82f75945c125.jpg",
|
|
||||||
// "width": 768
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (response.assets && response.assets.length > 0) { |
|
||||||
setRefreshing(true) |
|
||||||
let user_id = user?.id; |
|
||||||
getCoords(loc => { |
|
||||||
// console.log('loc', loc)
|
|
||||||
if (loc) { |
|
||||||
let imageObject = { |
|
||||||
"user_id": user_id, |
|
||||||
"drop_point_id": selectedDropPoint?.id, |
|
||||||
"image_uri": response.assets[0].uri, |
|
||||||
"image_blob": response.assets[0].base64, |
|
||||||
"lat": loc.lat, |
|
||||||
"lon": loc.lon |
|
||||||
} |
|
||||||
addOverlay(imageObject) |
|
||||||
// addOverlayAndSave(imageObject);
|
|
||||||
// storePhoto(imageObject.user_id, imageObject.drop_point_id, imageObject.image_uri, imageObject.image_blob, imageObject.lat, imageObject.lon)
|
|
||||||
// storePhoto(user_id, selectedDropPoint?.id, response.assets[0].uri, response.assets[0].base64, loc.lat, loc.lon)
|
|
||||||
// reloadPhotos();
|
|
||||||
} |
|
||||||
else { |
|
||||||
setRefreshing(false) |
|
||||||
} |
|
||||||
|
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
const addOverlay = async (imageObject) => { |
|
||||||
try { |
|
||||||
const timestamp = new Date().toLocaleString(); |
|
||||||
const location = { latitude: imageObject.lat, longitude: imageObject.lon }; // Replace with actual coordinates
|
|
||||||
|
|
||||||
const overlayText = `${timestamp}\nLatitude: ${location.latitude}\nLongitude: ${location.longitude}`; |
|
||||||
|
|
||||||
// console.log('[addOverlay] imageObject.image_uri', imageObject.image_uri)
|
|
||||||
|
|
||||||
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', |
|
||||||
// shadowStyle: {
|
|
||||||
// dx: 10,
|
|
||||||
// dy: 10,
|
|
||||||
// radius: 10,
|
|
||||||
// color: '#008F6D',
|
|
||||||
// },
|
|
||||||
textBackgroundStyle: { |
|
||||||
padding: 10, |
|
||||||
type: TextBackgroundType.none, |
|
||||||
color: '#00000080' |
|
||||||
} |
|
||||||
}, |
|
||||||
}], |
|
||||||
position: 'bottomLeft', |
|
||||||
color: '#ffffff', |
|
||||||
fontName: 'Arial-BoldMT', |
|
||||||
fontSize: 16, |
|
||||||
scale: 1, |
|
||||||
}); |
|
||||||
// console.log('[addOverlay] markedImage: ', markedImage)
|
|
||||||
|
|
||||||
// Save the marked image to the temporary folder
|
|
||||||
await saveToTemporaryFolder(markedImage, imageObject); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} catch (error) { |
|
||||||
console.error('Error adding overlay:', error); |
|
||||||
setRefreshing(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const saveToTemporaryFolder = async (markedImage, imageObject) => { |
|
||||||
try { |
|
||||||
const tempPath = `file://${RNFS.TemporaryDirectoryPath}/drop_point_${imageObject.drop_point_id}_${moment().format('YYYYMMDDHHmmss')}.jpg`; |
|
||||||
|
|
||||||
if (!requestAccessStoragePermission()) { |
|
||||||
setRefreshing(false) |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
await RNFS.copyFile(markedImage, tempPath); |
|
||||||
const imageBase64 = await RNFS.readFile(tempPath, 'base64'); |
|
||||||
|
|
||||||
// Image is now saved in the temporary directory
|
|
||||||
// console.log('Image saved to temporary folder:', tempPath);
|
|
||||||
|
|
||||||
// setCapturedImage(tempPath);
|
|
||||||
storePhoto(imageObject.user_id, imageObject.drop_point_id, tempPath, imageBase64, imageObject.lat, imageObject.lon) |
|
||||||
reloadPhotos(); |
|
||||||
// setRefreshing(false)
|
|
||||||
} catch (error) { |
|
||||||
console.error('Error saving image to temporary folder:', error); |
|
||||||
setRefreshing(false) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const handlePressImage = (item) => { |
|
||||||
setSelectedPhoto(item); |
|
||||||
} |
|
||||||
|
|
||||||
const handleToggleActionSheet = () => { |
|
||||||
setShowActionsheet(!showActionsheet) |
|
||||||
} |
|
||||||
|
|
||||||
const handleDeletePhoto = () => { |
|
||||||
Alert.alert( |
|
||||||
strings('takePicture.deletePhoto'), |
|
||||||
strings('takePicture.confirmDelete'), |
|
||||||
[ |
|
||||||
{ text: strings('global.no') }, |
|
||||||
{ |
|
||||||
text: strings('global.yes'), onPress: async () => { |
|
||||||
if (selectedPhoto) { |
|
||||||
deletePhoto(selectedPhoto?.id, (deleted) => { |
|
||||||
if (deleted) { |
|
||||||
Toast.show({ type: 'success', text1: strings('takePicture.successDeletePhoto') }) |
|
||||||
setShowActionsheet(false) |
|
||||||
reloadPhotos() |
|
||||||
} |
|
||||||
else { |
|
||||||
Toast.show({ type: 'error', text1: strings('takePicture.failedDeletePhoto') }) |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const renderItem = ({ item, index }) => { |
|
||||||
if (item.empty === true) { |
|
||||||
return <View style={[styles.item, styles.itemInvisible]} />; |
|
||||||
} |
|
||||||
return ( |
|
||||||
<Pressable |
|
||||||
style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1, flex: 1, aspectRatio: 1, padding: 1 }]} |
|
||||||
onPress={() => handlePressImage(item)} |
|
||||||
> |
|
||||||
<ImageRN style={{ flex: 1 }} resizeMode='cover' source={{ uri: item.image_uri }} /> |
|
||||||
</Pressable> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
const NoImageContent = () => { |
|
||||||
return ( |
|
||||||
<Box flex={1} alignItems='center' my="$1/2"> |
|
||||||
<Text>{strings('takePicture.noImage')}</Text> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const ImageGrid = useMemo(() => { |
|
||||||
if (photos.length < 1) { |
|
||||||
return ( |
|
||||||
<ScrollView |
|
||||||
refreshControl={ |
|
||||||
<RefreshControl |
|
||||||
refreshing={refreshing} |
|
||||||
onRefresh={reloadPhotos} |
|
||||||
/> |
|
||||||
} |
|
||||||
> |
|
||||||
<NoImageContent /> |
|
||||||
</ScrollView> |
|
||||||
) |
|
||||||
} |
|
||||||
else { |
|
||||||
return ( |
|
||||||
<FlatList |
|
||||||
refreshControl={<RefreshControl |
|
||||||
refreshing={refreshing} |
|
||||||
onRefresh={reloadPhotos} |
|
||||||
/>} |
|
||||||
data={formatData(photos, numColumns)} |
|
||||||
renderItem={renderItem} |
|
||||||
numColumns={numColumns} |
|
||||||
/> |
|
||||||
) |
|
||||||
} |
|
||||||
}, [photos, refreshing]) |
|
||||||
|
|
||||||
return ( |
|
||||||
<Box style={styles.container}> |
|
||||||
<Box flex={1}> |
|
||||||
{ImageGrid} |
|
||||||
<Box mx={10} my={15}> |
|
||||||
<Button |
|
||||||
onPress={openCamera} |
|
||||||
h={50} |
|
||||||
action="primary" |
|
||||||
> |
|
||||||
<ButtonText color="#FFFFFF">{strings('takePicture.takePhoto').toUpperCase()}</ButtonText> |
|
||||||
</Button> |
|
||||||
</Box> |
|
||||||
|
|
||||||
<Actionsheet isOpen={showActionsheet} onClose={handleToggleActionSheet} zIndex={999}> |
|
||||||
<ActionsheetBackdrop /> |
|
||||||
<ActionsheetContent zIndex={999}> |
|
||||||
<ActionsheetDragIndicatorWrapper> |
|
||||||
<ActionsheetDragIndicator /> |
|
||||||
</ActionsheetDragIndicatorWrapper> |
|
||||||
<VStack space='xs'> |
|
||||||
<Box> |
|
||||||
<ImageRN style={{ height: Dimensions.get('window').height - 120, width: Dimensions.get('window').width - 50 }} resizeMode='contain' source={{ uri: selectedPhoto?.image_uri }} /> |
|
||||||
</Box> |
|
||||||
<Box> |
|
||||||
<Button |
|
||||||
onPress={handleDeletePhoto} |
|
||||||
h={50} |
|
||||||
action="negative" |
|
||||||
> |
|
||||||
<ButtonText color="#FFFFFF">{strings('takePicture.deletePhoto').toUpperCase()}</ButtonText> |
|
||||||
</Button> |
|
||||||
</Box> |
|
||||||
</VStack> |
|
||||||
</ActionsheetContent> |
|
||||||
</Actionsheet> |
|
||||||
</Box> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const styles = StyleSheet.create({ |
|
||||||
container: { |
|
||||||
flex: 1, |
|
||||||
backgroundColor: '#FAFAFA' |
|
||||||
}, |
|
||||||
item: { |
|
||||||
backgroundColor: '#4D243D', |
|
||||||
alignItems: 'center', |
|
||||||
justifyContent: 'center', |
|
||||||
flex: 1, |
|
||||||
margin: 1, |
|
||||||
height: Dimensions.get('window').width / numColumns, // approximate a square
|
|
||||||
}, |
|
||||||
itemInvisible: { |
|
||||||
backgroundColor: 'transparent', |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
export default DeliveryPicturesScreen |
|
@ -1,309 +0,0 @@ |
|||||||
import { Box, HStack, Text, VStack } from '@gluestack-ui/themed'; |
|
||||||
import Barcode from '@kichiyaki/react-native-barcode-generator'; |
|
||||||
import React, { useEffect, useMemo, useState } from 'react'; |
|
||||||
import { Dimensions, Image as ImageRN, RefreshControl, ScrollView, StyleSheet } from 'react-native'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import DUTATRANS_LOGO from '../assets/images/dutatrans_logo.jpeg'; |
|
||||||
import moment from 'moment'; |
|
||||||
import { dropPointLocationRenderer } from '../utils/general'; |
|
||||||
|
|
||||||
const ShipmentDigitalScreen = ({navigation}) => { |
|
||||||
|
|
||||||
const dispatch = useDispatch() |
|
||||||
const [showActionsheet, setShowActionsheet] = useState(false) |
|
||||||
const {shipmentData, selectedDropPoint} = useSelector(state => state.shipmentReducer) |
|
||||||
const {user} = useSelector(state => state.userReducer) |
|
||||||
const [refreshing, setRefreshing] = useState(false); |
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
// onRefresh();
|
|
||||||
console.log('shipmentData', JSON.stringify(shipmentData)) |
|
||||||
}, []) |
|
||||||
|
|
||||||
const onRefresh = () => { |
|
||||||
// setRefreshing(true);
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const RenderShipmentOrigin = useMemo(() => { |
|
||||||
let dropPoints = []; |
|
||||||
|
|
||||||
if (shipmentData && shipmentData.delivery_order && shipmentData.delivery_order.length > 0) { |
|
||||||
for (let i=0; i < shipmentData.delivery_order.length; i++) { |
|
||||||
if (shipmentData.delivery_order[i].drop_point && shipmentData.delivery_order[i].drop_point.length > 0) { |
|
||||||
for (let j=0; j < shipmentData.delivery_order[i].drop_point.length; j++) { |
|
||||||
dropPoints.push(shipmentData.delivery_order[i].drop_point[j]); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (dropPoints.length > 0) { |
|
||||||
dropPoints.pop() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4} minHeight={60}> |
|
||||||
<VStack> |
|
||||||
{ dropPoints && dropPoints.length > 0 ? |
|
||||||
dropPoints.map((item, idx) => { |
|
||||||
if (idx === 0) { |
|
||||||
return <Text>{dropPointLocationRenderer(item, 'name')}</Text> |
|
||||||
} |
|
||||||
else { |
|
||||||
return <Text></Text> |
|
||||||
} |
|
||||||
}) |
|
||||||
: null
|
|
||||||
} |
|
||||||
</VStack> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
}, [shipmentData]) |
|
||||||
|
|
||||||
const RenderShipmentDestinations = useMemo(() => { |
|
||||||
let dropPoints = []; |
|
||||||
|
|
||||||
if (shipmentData && shipmentData.delivery_order && shipmentData.delivery_order.length > 0) { |
|
||||||
for (let i=0; i < shipmentData.delivery_order.length; i++) { |
|
||||||
if (shipmentData.delivery_order[i].drop_point && shipmentData.delivery_order[i].drop_point.length > 0) { |
|
||||||
for (let j=0; j < shipmentData.delivery_order[i].drop_point.length; j++) { |
|
||||||
dropPoints.push(shipmentData.delivery_order[i].drop_point[j]); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (dropPoints.length > 0) { |
|
||||||
dropPoints.shift() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4} minHeight={60}> |
|
||||||
<VStack> |
|
||||||
{ dropPoints && dropPoints.length > 0 ? |
|
||||||
dropPoints.map((item, idx) =>
|
|
||||||
<Text>{`• ${dropPointLocationRenderer(item, 'name')}`}</Text> |
|
||||||
) |
|
||||||
: null
|
|
||||||
} |
|
||||||
</VStack> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
}, [shipmentData]) |
|
||||||
|
|
||||||
|
|
||||||
const RenderProducts = useMemo(() => { |
|
||||||
let dropPoints = []; |
|
||||||
|
|
||||||
if (shipmentData && shipmentData.delivery_order && shipmentData.delivery_order.length > 0) { |
|
||||||
for (let i=0; i < shipmentData.delivery_order.length; i++) { |
|
||||||
if (shipmentData.delivery_order[i].drop_point && shipmentData.delivery_order[i].drop_point.length > 0) { |
|
||||||
for (let j=0; j < shipmentData.delivery_order[i].drop_point.length; j++) { |
|
||||||
dropPoints.push(shipmentData.delivery_order[i].drop_point[j]); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (dropPoints.length > 0) { |
|
||||||
dropPoints.shift() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4} minHeight={60}> |
|
||||||
<VStack> |
|
||||||
{ dropPoints && dropPoints.length > 0 ? |
|
||||||
dropPoints.map((item, idx) =>
|
|
||||||
<Text>{item.product && item.product !== "" ? item.product : "-"}</Text> |
|
||||||
) |
|
||||||
: null
|
|
||||||
} |
|
||||||
</VStack> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
}, [shipmentData]) |
|
||||||
|
|
||||||
const RenderQuantity = useMemo(() => { |
|
||||||
let dropPoints = []; |
|
||||||
|
|
||||||
if (shipmentData && shipmentData.delivery_order && shipmentData.delivery_order.length > 0) { |
|
||||||
for (let i=0; i < shipmentData.delivery_order.length; i++) { |
|
||||||
if (shipmentData.delivery_order[i].drop_point && shipmentData.delivery_order[i].drop_point.length > 0) { |
|
||||||
for (let j=0; j < shipmentData.delivery_order[i].drop_point.length; j++) { |
|
||||||
dropPoints.push(shipmentData.delivery_order[i].drop_point[j]); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (dropPoints.length > 0) { |
|
||||||
dropPoints.shift() |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4} minHeight={60}> |
|
||||||
<VStack> |
|
||||||
{ dropPoints && dropPoints.length > 0 ? |
|
||||||
dropPoints.map((item, idx) =>
|
|
||||||
<Text>{item.weight ? item.weight === 0 ? '-' : item.weight : '-'}</Text> |
|
||||||
) |
|
||||||
: null
|
|
||||||
} |
|
||||||
</VStack> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
}, [shipmentData]) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<Box style={styles.container}> |
|
||||||
<Box bgColor='#FAFAFA'flex={1}> |
|
||||||
<ScrollView |
|
||||||
refreshControl={ |
|
||||||
<RefreshControl |
|
||||||
refreshing={refreshing} |
|
||||||
onRefresh={onRefresh} |
|
||||||
/> |
|
||||||
} |
|
||||||
> |
|
||||||
<ScrollView horizontal> |
|
||||||
<HStack space='md'> |
|
||||||
<VStack> |
|
||||||
<Box> |
|
||||||
<ImageRN |
|
||||||
style={{width: 150, height: 40}} |
|
||||||
source={DUTATRANS_LOGO} |
|
||||||
/> |
|
||||||
</Box> |
|
||||||
<VStack> |
|
||||||
<Text size='xs' fontSize={8}>Jl. Flores III Blok C3 No. 1 Kav. 63</Text> |
|
||||||
<Text size='xs' fontSize={8}>Cibitung</Text> |
|
||||||
<Text size='xs' fontSize={8}>Telp: 021-89981622 Fax: 021-89981621</Text> |
|
||||||
</VStack> |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Box px={10}> |
|
||||||
<Barcode |
|
||||||
format="CODE39" |
|
||||||
value={shipmentData?.shipment_internal !== "" ? shipmentData.shipment_internal : shipmentData.shipment_number} |
|
||||||
text={shipmentData?.shipment_internal !== "" ? shipmentData.shipment_internal : shipmentData.shipment_number} |
|
||||||
maxWidth={Dimensions.get('window').width / 2} |
|
||||||
/> |
|
||||||
</Box> |
|
||||||
</VStack> |
|
||||||
</HStack> |
|
||||||
</ScrollView> |
|
||||||
|
|
||||||
<VStack my={20}> |
|
||||||
<Text textAlign='center' underline bold>SURAT PERINTAH KERJA</Text> |
|
||||||
</VStack> |
|
||||||
|
|
||||||
<VStack> |
|
||||||
<Text>Kepada Yth,</Text> |
|
||||||
<Text>DUTA LOGISTINDO UTAMA</Text> |
|
||||||
</VStack> |
|
||||||
|
|
||||||
<VStack display='flex' alignItems='flex-end' mb={20}> |
|
||||||
<HStack space='sm'> |
|
||||||
<VStack> |
|
||||||
<Text>No. Polisi</Text> |
|
||||||
<Text>Nama Sopir</Text> |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Text>:</Text> |
|
||||||
<Text>:</Text> |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Text>{shipmentData?.license_plate}</Text> |
|
||||||
<Text>{shipmentData?.driver_name}</Text> |
|
||||||
</VStack> |
|
||||||
</HStack> |
|
||||||
</VStack> |
|
||||||
|
|
||||||
<ScrollView horizontal> |
|
||||||
<HStack> |
|
||||||
<VStack> |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4}> |
|
||||||
<Text>Dari</Text> |
|
||||||
</Box> |
|
||||||
{/* {shipmentData && shipmentData.delivery_order && shipmentData.delivery_order.length > 0 && shipmentData.delivery_order[0].drop_point && shipmentData.delivery_order[0].drop_point.length > 0 ? |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4} minHeight={60}> |
|
||||||
<Text>{ dropPointLocationRenderer(shipmentData.delivery_order[0].drop_point[0], 'name') }</Text> |
|
||||||
</Box> |
|
||||||
: null |
|
||||||
} */} |
|
||||||
{ RenderShipmentOrigin } |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4}> |
|
||||||
<Text>Tujuan</Text> |
|
||||||
</Box> |
|
||||||
{ RenderShipmentDestinations } |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4}> |
|
||||||
<Text>Produk</Text> |
|
||||||
</Box> |
|
||||||
{ RenderProducts } |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Box borderStyle='solid' borderWidth={1} alignItems='center' p={4}> |
|
||||||
<Text>Quantity</Text> |
|
||||||
</Box> |
|
||||||
{ RenderQuantity } |
|
||||||
</VStack> |
|
||||||
</HStack> |
|
||||||
</ScrollView> |
|
||||||
|
|
||||||
<VStack> |
|
||||||
<HStack space='sm'> |
|
||||||
<VStack> |
|
||||||
<Text size="xs">Putih</Text> |
|
||||||
<Text size="xs">Kuning</Text> |
|
||||||
<Text size="xs">Merah</Text> |
|
||||||
<Text size="xs">Biru</Text> |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Text size="xs">:</Text> |
|
||||||
<Text size="xs">:</Text> |
|
||||||
<Text size="xs">:</Text> |
|
||||||
<Text size="xs">:</Text> |
|
||||||
</VStack> |
|
||||||
<VStack> |
|
||||||
<Text size="xs">Driver</Text> |
|
||||||
<Text size="xs">Kasir</Text> |
|
||||||
<Text size="xs">Operasional</Text> |
|
||||||
<Text size="xs">File</Text> |
|
||||||
</VStack> |
|
||||||
</HStack> |
|
||||||
</VStack> |
|
||||||
|
|
||||||
<VStack display='flex' alignItems='flex-end'> |
|
||||||
<HStack space='sm'> |
|
||||||
<VStack> |
|
||||||
<Text>Cibitung, {shipmentData?.shipment_date ? moment(shipmentData.shipment_date).format('DD-MMM-YY') : null}</Text> |
|
||||||
<Text>Operasional</Text> |
|
||||||
</VStack> |
|
||||||
</HStack> |
|
||||||
</VStack> |
|
||||||
|
|
||||||
</ScrollView> |
|
||||||
|
|
||||||
</Box> |
|
||||||
</Box> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const styles = StyleSheet.create({ |
|
||||||
container: { |
|
||||||
flex: 1, |
|
||||||
backgroundColor: '#FAFAFA', |
|
||||||
padding: 10 |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
export default ShipmentDigitalScreen |
|
Loading…
Reference in new issue