Package updates & minor fixes.

This commit is contained in:
Patrick Fic
2021-03-09 14:10:26 -08:00
parent 2759c3322b
commit d3b3436a93
9 changed files with 9480 additions and 29528 deletions

View File

@@ -1,103 +1,103 @@
// src/toolbar.component.js file
import { Ionicons } from "@expo/vector-icons";
import { Camera } from "expo-camera";
import React from "react";
import {
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
View,
} from "react-native";
// // src/toolbar.component.js file
// import { Ionicons } from "@expo/vector-icons";
// import { Camera } from "expo-camera";
// import React from "react";
// import {
// StyleSheet,
// TouchableOpacity,
// TouchableWithoutFeedback,
// View,
// } from "react-native";
const styles = StyleSheet.create({
alignCenter: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
bottomToolbar: {
marginTop: "auto",
height: 100,
display: "flex",
justifyContent: "space-evenly",
alignItems: "center",
flexDirection: "row",
},
captureBtn: {
width: 60,
height: 60,
borderWidth: 2,
borderRadius: 60,
borderColor: "#FFFFFF",
},
captureBtnActive: {
width: 80,
height: 80,
},
captureBtnInternal: {
width: 76,
height: 76,
borderWidth: 2,
borderRadius: 76,
backgroundColor: "red",
borderColor: "transparent",
},
});
// const styles = StyleSheet.create({
// alignCenter: {
// flex: 1,
// alignItems: "center",
// justifyContent: "center",
// },
// bottomToolbar: {
// marginTop: "auto",
// height: 100,
// display: "flex",
// justifyContent: "space-evenly",
// alignItems: "center",
// flexDirection: "row",
// },
// captureBtn: {
// width: 60,
// height: 60,
// borderWidth: 2,
// borderRadius: 60,
// borderColor: "#FFFFFF",
// },
// captureBtnActive: {
// width: 80,
// height: 80,
// },
// captureBtnInternal: {
// width: 76,
// height: 76,
// borderWidth: 2,
// borderRadius: 76,
// backgroundColor: "red",
// borderColor: "transparent",
// },
// });
const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;
// const { FlashMode: CameraFlashModes, Type: CameraTypes } = Camera.Constants;
export default function CameraControls({
capturing = false,
cameraType = CameraTypes.back,
flashMode = CameraFlashModes.off,
setFlashMode,
setCameraType,
onCaptureIn,
onCaptureOut,
onLongCapture,
onShortCapture,
}) {
return (
<View style={styles.bottomToolbar}>
<TouchableOpacity
onPress={() =>
setFlashMode(
flashMode === CameraFlashModes.on
? CameraFlashModes.off
: CameraFlashModes.on
)
}
>
<Ionicons
name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
color="white"
size={30}
/>
</TouchableOpacity>
// export default function CameraControls({
// capturing = false,
// cameraType = CameraTypes.back,
// flashMode = CameraFlashModes.off,
// setFlashMode,
// setCameraType,
// onCaptureIn,
// onCaptureOut,
// onLongCapture,
// onShortCapture,
// }) {
// return (
// <View style={styles.bottomToolbar}>
// <TouchableOpacity
// onPress={() =>
// setFlashMode(
// flashMode === CameraFlashModes.on
// ? CameraFlashModes.off
// : CameraFlashModes.on
// )
// }
// >
// <Ionicons
// name={flashMode == CameraFlashModes.on ? "md-flash" : "md-flash-off"}
// color="white"
// size={30}
// />
// </TouchableOpacity>
<TouchableWithoutFeedback
onPressIn={onCaptureIn}
onPressOut={onCaptureOut}
onLongPress={onLongCapture}
onPress={onShortCapture}
disabled={capturing}
>
<View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
{capturing && <View style={styles.captureBtnInternal} />}
</View>
</TouchableWithoutFeedback>
// <TouchableWithoutFeedback
// onPressIn={onCaptureIn}
// onPressOut={onCaptureOut}
// onLongPress={onLongCapture}
// onPress={onShortCapture}
// disabled={capturing}
// >
// <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}>
// {capturing && <View style={styles.captureBtnInternal} />}
// </View>
// </TouchableWithoutFeedback>
<TouchableOpacity
onPress={() =>
setCameraType(
cameraType === CameraTypes.back
? CameraTypes.front
: CameraTypes.back
)
}
>
<Ionicons name="md-reverse-camera" color="white" size={30} />
</TouchableOpacity>
</View>
);
}
// <TouchableOpacity
// onPress={() =>
// setCameraType(
// cameraType === CameraTypes.back
// ? CameraTypes.front
// : CameraTypes.back
// )
// }
// >
// <Ionicons name="md-reverse-camera" color="white" size={30} />
// </TouchableOpacity>
// </View>
// );
// }

View File

@@ -1,10 +1,9 @@
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import * as ImagePicker from "expo-image-picker";
import { Body, H3, Icon, ListItem, Right } from "native-base";
import React, { useEffect } from "react";
import React from "react";
import { useTranslation } from "react-i18next";
import { Animated, Platform, Text } from "react-native";
import { Animated, Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { connect } from "react-redux";
@@ -24,33 +23,33 @@ export function JobListItem({ setCameraJob, setCameraJobId, item }) {
const { t } = useTranslation();
const navigation = useNavigation();
useEffect(() => {
(async () => {
if (Platform.OS !== "web") {
const {
status,
} = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== "granted") {
alert("Sorry, we need camera roll permissions to make this work!");
}
}
})();
}, []);
// useEffect(() => {
// (async () => {
// if (Platform.OS !== "web") {
// const {
// status,
// } = await ImagePicker.requestMediaLibraryPermissionsAsync();
// if (status !== "granted") {
// alert("Sorry, we need camera roll permissions to make this work!");
// }
// }
// })();
// }, []);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
// const pickImage = async () => {
// let result = await ImagePicker.launchImageLibraryAsync({
// mediaTypes: ImagePicker.MediaTypeOptions.All,
// allowsEditing: true,
// aspect: [4, 3],
// quality: 1,
// });
console.log(result);
// console.log(result);
if (!result.cancelled) {
// setImage(result.uri);
}
};
// if (!result.cancelled) {
// // setImage(result.uri);
// }
// };
const RenderRightAction = (progress, dragX) => {
const scale = dragX.interpolate({

View File

@@ -11,7 +11,7 @@ export default function NoteListItem({ item }) {
<Text>{item.text}</Text>
<View
style={{
flexDirection: "row",
flexDirection: "column",
alignSelf: "flex-end",
alignItems: "center",
}}
@@ -32,6 +32,7 @@ export default function NoteListItem({ item }) {
color="tomato"
/>
)}
<Text style={{ fontSize: 12 }}>{item.created_by}</Text>
<Text style={{ fontSize: 12 }}>
{DateTime.fromISO(item.created_at).toLocaleString(
DateTime.DATETIME_SHORT

View File

@@ -1,213 +0,0 @@
import React, { Component } from "react";
import {
ActivityIndicator,
Button,
Clipboard,
Image,
Share,
StatusBar,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { Constants } from "expo";
import * as Permissions from "expo-permissions";
import * as ImagePicker from "expo-image-picker";
export default class ScreenCameraRoll extends Component {
state = {
image: null,
uploading: false,
};
render() {
let { image } = this.state;
return (
<View style={styles.container}>
<StatusBar barStyle="default" />
<Text style={styles.exampleText}>
Example: Upload ImagePicker result
</Text>
<Button
onPress={this._pickImage}
title="Pick an image from camera roll"
/>
<Button onPress={this._takePhoto} title="Take a photo" />
{this._maybeRenderImage()}
{this._maybeRenderUploadingOverlay()}
</View>
);
}
_maybeRenderUploadingOverlay = () => {
if (this.state.uploading) {
return (
<View style={[StyleSheet.absoluteFill, styles.maybeRenderUploading]}>
<ActivityIndicator color="#fff" size="large" />
</View>
);
}
};
_maybeRenderImage = () => {
let { image } = this.state;
if (!image) {
return;
}
return (
<View style={styles.maybeRenderContainer}>
<View style={styles.maybeRenderImageContainer}>
<Image source={{ uri: image }} style={styles.maybeRenderImage} />
</View>
<Text
onPress={this._copyToClipboard}
onLongPress={this._share}
style={styles.maybeRenderImageText}
>
{image}
</Text>
</View>
);
};
_share = () => {
Share.share({
message: this.state.image,
title: "Check out this photo",
url: this.state.image,
});
};
_copyToClipboard = () => {
Clipboard.setString(this.state.image);
alert("Copied image URL to clipboard");
};
_takePhoto = async () => {
const { status: cameraPerm } = await Permissions.askAsync(
Permissions.CAMERA
);
const { status: cameraRollPerm } = await Permissions.askAsync(
Permissions.CAMERA_ROLL
);
// only if user allows permission to camera AND camera roll
if (cameraPerm === "granted" && cameraRollPerm === "granted") {
let pickerResult = await ImagePicker.launchCameraAsync({
allowsMultipleSelection: true,
quality: 0.8,
//allowsEditing: true,
aspect: [4, 3],
});
if (!pickerResult.cancelled) {
this.setState({ image: pickerResult.uri });
}
this.uploadImageAsync(pickerResult.uri);
}
};
_pickImage = async () => {
const { status: cameraRollPerm } = await Permissions.askAsync(
Permissions.CAMERA_ROLL
);
// only if user allows permission to camera roll
if (cameraRollPerm === "granted") {
let pickerResult = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
base64: true,
aspect: [4, 3],
});
if (!pickerResult.cancelled) {
this.setState({ image: pickerResult.uri });
}
this.uploadImageAsync(pickerResult.uri);
}
};
uploadImageAsync(pictureuri) {
let apiUrl = "http://123.123.123.123/ABC";
var data = new FormData();
data.append("file", {
uri: pictureuri,
name: "file",
type: "image/jpg",
});
fetch(apiUrl, {
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data",
},
method: "POST",
body: data,
})
.then((response) => {
console.log("succ ");
console.log(response);
})
.catch((err) => {
console.log("err ");
console.log(err);
});
}
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
exampleText: {
fontSize: 20,
marginBottom: 20,
marginHorizontal: 15,
textAlign: "center",
},
maybeRenderUploading: {
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.4)",
justifyContent: "center",
},
maybeRenderContainer: {
borderRadius: 3,
elevation: 2,
marginTop: 30,
shadowColor: "rgba(0,0,0,1)",
shadowOpacity: 0.2,
shadowOffset: {
height: 4,
width: 4,
},
shadowRadius: 5,
width: 250,
},
maybeRenderImageContainer: {
borderTopLeftRadius: 3,
borderTopRightRadius: 3,
overflow: "hidden",
},
maybeRenderImage: {
height: 250,
width: 250,
},
maybeRenderImageText: {
paddingHorizontal: 10,
paddingVertical: 10,
},
});

View File

@@ -1,157 +1,157 @@
import { useFocusEffect } from "@react-navigation/native";
import { Camera } from "expo-camera";
import * as FileSystem from "expo-file-system";
import React, { useEffect, useRef, useState } from "react";
import { Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
selectCurrentCameraJob,
selectCurrentCameraJobId,
} from "../../redux/app/app.selectors";
import { addPhoto } from "../../redux/photos/photos.actions";
import CameraControls from "../camera-controls/camera-controls.component";
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
// import { useFocusEffect } from "@react-navigation/native";
// import { Camera } from "expo-camera";
// import * as FileSystem from "expo-file-system";
// import React, { useEffect, useRef, useState } from "react";
// import { Text, View } from "react-native";
// import { connect } from "react-redux";
// import { createStructuredSelector } from "reselect";
// import {
// selectCurrentCameraJob,
// selectCurrentCameraJobId,
// } from "../../redux/app/app.selectors";
// import { addPhoto } from "../../redux/photos/photos.actions";
// import CameraControls from "../camera-controls/camera-controls.component";
// import CameraSelectJob from "../camera-select-job/camera-select-job.component";
const mapStateToProps = createStructuredSelector({
cameraJobId: selectCurrentCameraJobId,
cameraJob: selectCurrentCameraJob,
});
const mapDispatchToProps = (dispatch) => ({
addPhoto: (photo) => dispatch(addPhoto(photo)),
});
// const mapStateToProps = createStructuredSelector({
// cameraJobId: selectCurrentCameraJobId,
// cameraJob: selectCurrentCameraJob,
// });
// const mapDispatchToProps = (dispatch) => ({
// addPhoto: (photo) => dispatch(addPhoto(photo)),
// });
export function ScreenCamera({ cameraJobId, addPhoto }) {
const [hasPermission, setHasPermission] = useState(null);
const [state, setState] = useState({
flashMode: Camera.Constants.FlashMode.off,
capturing: null,
cameraType: Camera.Constants.Type.back,
tabHasFocus: null,
});
const cameraRef = useRef(null);
// export function ScreenCamera({ cameraJobId, addPhoto }) {
// const [hasPermission, setHasPermission] = useState(null);
// const [state, setState] = useState({
// flashMode: Camera.Constants.FlashMode.off,
// capturing: null,
// cameraType: Camera.Constants.Type.back,
// tabHasFocus: null,
// });
// const cameraRef = useRef(null);
useFocusEffect(
React.useCallback(() => {
// Do something when the screen is focused
setState({ ...state, tabHasFocus: true });
return () => {
// Do something when the screen is unfocused
// Useful for cleanup functions
setState({ ...state, tabHasFocus: false });
};
}, [])
);
// useFocusEffect(
// React.useCallback(() => {
// // Do something when the screen is focused
// setState({ ...state, tabHasFocus: true });
// return () => {
// // Do something when the screen is unfocused
// // Useful for cleanup functions
// setState({ ...state, tabHasFocus: false });
// };
// }, [])
// );
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
// useEffect(() => {
// (async () => {
// const { status } = await Camera.requestPermissionsAsync();
// setHasPermission(status === "granted");
// })();
// }, []);
const setFlashMode = (flashMode) => setState({ ...state, flashMode });
const setCameraType = (cameraType) => setState({ ...state, cameraType });
const handleCaptureIn = () => setState({ ...state, capturing: true });
// const setFlashMode = (flashMode) => setState({ ...state, flashMode });
// const setCameraType = (cameraType) => setState({ ...state, cameraType });
// const handleCaptureIn = () => setState({ ...state, capturing: true });
const handleCaptureOut = () => {
if (state.capturing) cameraRef.current.stopRecording();
};
// const handleCaptureOut = () => {
// if (state.capturing) cameraRef.current.stopRecording();
// };
const handleShortCapture = async () => {
if (cameraRef.current) {
const options = {
quality: 0.8,
//base64: true,
skipProcessing: true,
};
// const handleShortCapture = async () => {
// if (cameraRef.current) {
// const options = {
// quality: 0.8,
// //base64: true,
// skipProcessing: true,
// };
let photo = await cameraRef.current.takePictureAsync(options);
const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
const newUri = FileSystem.documentDirectory + "photos/" + filename;
// let photo = await cameraRef.current.takePictureAsync(options);
// const filename = photo.uri.substring(photo.uri.lastIndexOf("/") + 1);
// const newUri = FileSystem.documentDirectory + "photos/" + filename;
await FileSystem.moveAsync({
from: photo.uri,
to: newUri,
});
setState({ ...state, capturing: false });
addPhoto({
...photo,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: false,
});
}
};
// await FileSystem.moveAsync({
// from: photo.uri,
// to: newUri,
// });
// setState({ ...state, capturing: false });
// addPhoto({
// ...photo,
// id: filename,
// uri: newUri,
// jobId: cameraJobId,
// video: false,
// });
// }
// };
const handleLongCapture = async () => {
console.log("Taking a video!");
if (cameraRef.current) {
let video = await cameraRef.current.recordAsync();
// const handleLongCapture = async () => {
// console.log("Taking a video!");
// if (cameraRef.current) {
// let video = await cameraRef.current.recordAsync();
const filename = video.uri.substring(video.uri.lastIndexOf("/") + 1);
const newUri = FileSystem.documentDirectory + "photos/" + filename;
// const filename = video.uri.substring(video.uri.lastIndexOf("/") + 1);
// const newUri = FileSystem.documentDirectory + "photos/" + filename;
await FileSystem.moveAsync({
from: video.uri,
to: newUri,
});
setState({ ...state, capturing: false });
console.log("Adding Photo", {
...video,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: true,
});
addPhoto({
...video,
id: filename,
uri: newUri,
jobId: cameraJobId,
video: true,
});
}
};
// await FileSystem.moveAsync({
// from: video.uri,
// to: newUri,
// });
// setState({ ...state, capturing: false });
// console.log("Adding Photo", {
// ...video,
// id: filename,
// uri: newUri,
// jobId: cameraJobId,
// video: true,
// });
// addPhoto({
// ...video,
// id: filename,
// uri: newUri,
// jobId: cameraJobId,
// video: true,
// });
// }
// };
if (hasPermission === null || !state.tabHasFocus) {
return <View />;
}
// if (hasPermission === null || !state.tabHasFocus) {
// return <View />;
// }
if (hasPermission === false) {
return <Text>No access to camera. Please ensure that you allow it.</Text>;
}
// if (hasPermission === false) {
// return <Text>No access to camera. Please ensure that you allow it.</Text>;
// }
const { flashMode, cameraType, capturing } = state;
// const { flashMode, cameraType, capturing } = state;
return (
<Camera
style={{ flex: 1, display: "flex" }}
type={state.cameraType}
ref={cameraRef}
ratio={"16:9"}
>
<View
style={{
flex: 1,
}}
>
<CameraSelectJob />
// return (
// <Camera
// style={{ flex: 1, display: "flex" }}
// type={state.cameraType}
// ref={cameraRef}
// ratio={"16:9"}
// >
// <View
// style={{
// flex: 1,
// }}
// >
// <CameraSelectJob />
<CameraControls
capturing={capturing}
flashMode={flashMode}
cameraType={cameraType}
setFlashMode={setFlashMode}
setCameraType={setCameraType}
onCaptureIn={handleCaptureIn}
onCaptureOut={handleCaptureOut}
onLongCapture={handleLongCapture}
onShortCapture={handleShortCapture}
/>
</View>
</Camera>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScreenCamera);
// <CameraControls
// capturing={capturing}
// flashMode={flashMode}
// cameraType={cameraType}
// setFlashMode={setFlashMode}
// setCameraType={setCameraType}
// onCaptureIn={handleCaptureIn}
// onCaptureOut={handleCaptureOut}
// onLongCapture={handleLongCapture}
// onShortCapture={handleShortCapture}
// />
// </View>
// </Camera>
// );
// }
// export default connect(mapStateToProps, mapDispatchToProps)(ScreenCamera);

View File

@@ -201,16 +201,6 @@ export const GET_JOB_BY_PK = gql`
towing_payable
storage_payable
adjustment_bottom_line
federal_tax_rate
state_tax_rate
local_tax_rate
tax_tow_rt
tax_str_rt
tax_paint_mat_rt
tax_sub_rt
tax_lbr_rt
tax_levies_rt
parts_tax_rates
job_totals
ownr_fn
ownr_ln
@@ -235,30 +225,7 @@ export const GET_JOB_BY_PK = gql`
ownr_ctry
ownr_ph1
}
labor_rate_desc
rate_la1
rate_la2
rate_la3
rate_la4
rate_laa
rate_lab
rate_lad
rate_lae
rate_laf
rate_lag
rate_lam
rate_lar
rate_las
rate_lau
rate_ma2s
rate_ma2t
rate_ma3s
rate_mabl
rate_macs
rate_mahw
rate_mapa
rate_mash
rate_matd
actual_in
scheduled_completion
scheduled_in
@@ -300,6 +267,7 @@ export const GET_JOB_BY_PK = gql`
private
created_at
updated_at
created_by
}
documents(order_by: { created_at: desc }) {
id

29012
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -21,10 +21,8 @@
"expo": "^40.0.0",
"expo-app-loading": "^1.0.0",
"expo-av": "~8.7.0",
"expo-camera": "~9.1.0",
"expo-file-system": "~9.3.0",
"expo-font": "~8.4.0",
"expo-image-picker": "~9.2.0",
"expo-images-picker": "https://github.com/snaptsoft/expo-images-picker/",
"expo-localization": "~9.1.0",
"expo-media-library": "~10.0.0",
@@ -43,7 +41,6 @@
"react-dom": "16.13.1",
"react-i18next": "^11.8.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-easy-grid": "^0.2.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-image-zoom-viewer": "^3.0.1",
"react-native-indicators": "^0.17.0",

9212
yarn.lock Normal file

File diff suppressed because it is too large Load Diff