Merged code, moved some code from constructor to componentDidMount to avoid bugs on really slow devices

main
Fan-Wu Yang 7 years ago
commit 25ad511530

271
App.js

@ -17,7 +17,7 @@ import { RNCamera } from 'react-native-camera';
import RunInfo from './components/run-info'; import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num'; import RunInfoNumeric from './components/run-info-num';
import {updateAreas} from './update-map' import {updateAreas, sendArea} from './update-map'
import MapView from 'react-native-maps'; import MapView from 'react-native-maps';
import WalkButton from "./components/new-button"; import WalkButton from "./components/new-button";
import JoinButton from "./components/join-button"; import JoinButton from "./components/join-button";
@ -33,69 +33,84 @@ const instructions = Platform.select({
type Props = {}; type Props = {};
let id = 0; let id = 0;
export default class App extends Component<Props> { export default class App extends Component<Props> {
// constructor(props) { constructor(props) {
// super(props); super(props);
// setInterval(() => { this.state = {
// this.updateCaptures(); activeWalk: false,
// }, 5000); username: "",
gameNumber: "",
walkMarkers: [],
captures: [
// new CapturedArea("fanded", [
// {latitude: -43.5623, longitude:172.5655},
// {latitude: -43.5623, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5655}
// ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
// let watchID = navigator.geolocation.watchPosition((position) => { new CapturedArea("samded", [
// this.setState({ {latitude: -43.5663, longitude:172.5615},
// walkMarkers: [ {latitude: -43.5663, longitude:172.5610},
// ...this.state.walkMarkers, { {latitude: -43.5668, longitude:172.5610},
// coordinate: position.coords, {latitude: -43.5668, longitude:172.5615}
// key: id++ ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
// } ],
// ] watchID
// }); };
// }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15}); }
// this.state = { componentDidMount() {
// activeWalk: false, let watchID = navigator.geolocation.watchPosition((position) => {
// username: "", console.log(this.state.activeWalk)
// gameNumber: "", if(this.state.activeWalk){
// walkMarkers: [], this.setState({
// captures: [ walkMarkers: [
// // new CapturedArea("fanded", [ ...this.state.walkMarkers, {
// // {latitude: -43.5623, longitude:172.5655}, coordinate: position.coords,
// // {latitude: -43.5623, longitude:172.5650}, key: id++
// // {latitude: -43.5628, longitude:172.5650}, }
// // {latitude: -43.5628, longitude:172.5655} ]
// // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53), });
}
// if(!this.state.activeWalk){
// this.setState({
// walkMarkers: []
// })
// }
}, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
// new CapturedArea("samded", [ setInterval(() => {
// {latitude: -43.5663, longitude:172.5615}, this.updateCaptures();
// {latitude: -43.5663, longitude:172.5610}, }, 5000);
// {latitude: -43.5668, longitude:172.5610}, }
// {latitude: -43.5668, longitude:172.5615}
// ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53) updateCaptures(){
// ], updateAreas(this.state.gameNumber, (polygons) => {
// watchID this.setState({
// }; captures: polygons
// } })
// updateCaptures(){ })
// updateAreas(this.state.gameNumber, (polygons) => { }
// this.setState({ setGameNumber(user, number){
// captures: polygons this.setState({username: user, gameNumber: number})
// }) }
// })
// }
// setGameNumber(user, number){
// this.setState({username: user, gameNumber: number})
// }
// startWalk(){ startWalk(){
// this.setState({walkMarkers: [], activeWalk: true}) console.log("starting walk")
// } this.setState({walkMarkers: [], activeWalk: true})
}
stopWalk(){
console.log("stopping walk")
sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
this.setState({activeWalk: false})
// stopWalk(){ }
// this.setState({activeWalk: false})
// }
// componentWillUnmount() { componentWillUnmount() {
// navigator.geolocation.stopWatch(this.state.watchID); navigator.geolocation.stopWatch(this.state.watchID);
// } }
takePicture = async function() { takePicture = async function() {
if (this.camera) { if (this.camera) {
const options = { quality: 0.5, base64: true }; const options = { quality: 0.5, base64: true };
@ -108,82 +123,82 @@ export default class App extends Component<Props> {
render() { render() {
return ( return (
<View style={styles.container}> // <View style={styles.container}>
<RNCamera // <RNCamera
ref={ref => { // ref={ref => {
this.camera = ref; // this.camera = ref;
}} // }}
style = {styles.preview} // style = {styles.preview}
type={RNCamera.Constants.Type.back} // type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on} // flashMode={RNCamera.Constants.FlashMode.on}
permissionDialogTitle={'Permission to use camera'} // permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'} // permissionDialogMessage={'We need your permission to use your camera phone'}
onGoogleVisionBarcodesDetected={({ barcodes }) => { // onGoogleVisionBarcodesDetected={({ barcodes }) => {
console.log(barcodes) // console.log(barcodes)
}} // }}
/> // />
<View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}> // <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
<TouchableOpacity // <TouchableOpacity
onPress={this.takePicture.bind(this)} // onPress={this.takePicture.bind(this)}
style = {styles.capture} // style = {styles.capture}
> // >
<Text style={{fontSize: 14}}> SNAP </Text> // <Text style={{fontSize: 14}}> SNAP </Text>
</TouchableOpacity> // </TouchableOpacity>
</View> // </View>
</View> // </View>
<View style ={{flex: 1}}>
// <View style ={{flex: 1}}> <MapView
// <MapView showsUserLocation
// showsUserLocation style = {styles.map}
// style = {styles.map} initialRegion={{
// initialRegion={{ latitude: -43.5610623,
// latitude: -43.5610623, longitude: 172.5655853,
// longitude: 172.5655853, latitudeDelta: 0.02,
// latitudeDelta: 0.02, longitudeDelta: 0.02,
// longitudeDelta: 0.02, }}
// }}
// // onRegionChange = {(region)=> this.addMarker((region))} >
// >
// <MapView.Polyline <MapView.Polyline
// coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)} coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
// strokeWidth={5} strokeWidth={5}
// /> strokeColor={"rgb(148,0,211)"}
// {this.state.captures.map((capture, i) => { />
// return <MapView.Polygon {this.state.captures.map((capture, i) => {
// key={i} return <MapView.Polygon
// coordinates={capture.coordinates} key={i}
// strokeWidth={2} coordinates={capture.coordinates}
// strokeColor={capture.strokeColor} strokeWidth={2}
// fillColor={capture.fillColor} strokeColor={capture.strokeColor}
// /> fillColor={capture.fillColor}
// } />
// ) }
// } )
// </MapView> }
// <Text style={styles.gameNumber}> </MapView>
// {"name: " + this.state.username + "\ngame: " + this.state.gameNumber} <Text style={styles.gameNumber}>
{"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
// </Text> </Text>
// <RoomInput <RoomInput
// ref={instance => this.roomInputModal = instance} ref={instance => this.roomInputModal = instance}
// join={(user, number) => this.setGameNumber(user, number)}/> join={(user, number) => this.setGameNumber(user, number)}/>
// <View style={styles.menu}> <View style={styles.menu}>
// <View style={styles.walk}> <View style={styles.walk}>
// <WalkButton <WalkButton
// start={() => {this.startWalk()}} start={() => {this.startWalk()}}
// stop={() => {this.stopWalk()}} stop={() => {this.stopWalk()}}
// /> />
// </View> </View>
// <View style={styles.infoWrapper}> <View style={styles.infoWrapper}>
// <JoinButton <JoinButton
// modal={() => this.roomInputModal.setModalVisible(true)}/> modal={() => this.roomInputModal.setModalVisible(true)}/>
// </View> </View>
// </View> </View>
// </View> </View>
); );
} }
} }

@ -10,6 +10,8 @@ exports.connect = function(done){
host: 'localhost', host: 'localhost',
user: 'admin_seng440', user: 'admin_seng440',
password: 'seng440', password: 'seng440',
// user: 'root',
// password: '',
port: 3306, port: 3306,
database: "admin_territory-walker", database: "admin_territory-walker",
//multipleStatements: true //multipleStatements: true

568
api/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -95,7 +95,7 @@ module.exports = {
}); });
let area = mathFunc.calculateArea(points); let area = mathFunc.calculateArea(points);
module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged); // module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged);
module.exports.submitFinalCollation(res, gameID, userID, polygonPoints, area, polygonsMerged); module.exports.submitFinalCollation(res, gameID, userID, polygonPoints, area, polygonsMerged);
}); });
}, },

@ -37,7 +37,7 @@ export default class WalkButton extends Component {
buttonText: "Start Capture", buttonText: "Start Capture",
buttonColour: 'rgba(0,255,0,0.5)' buttonColour: 'rgba(0,255,0,0.5)'
}) })
this.start(); this.stop();
}else{ }else{
console.log("state false to true") console.log("state false to true")
this.setState({ this.setState({
@ -45,7 +45,7 @@ export default class WalkButton extends Component {
buttonText: "Stop Capture", buttonText: "Stop Capture",
buttonColour: 'rgba(255,0,0,0.5)' buttonColour: 'rgba(255,0,0,0.5)'
}) })
this.stop() this.start()
}}} }}}
// style={sharedStyles.new} // style={sharedStyles.new}
> >

@ -1,4 +1,4 @@
{ {
"host" : "http://umbrasheep.com", "host" : "umbrasheep.com",
"port" : "13370" "port" : "13370"
} }

@ -1,6 +1,26 @@
const config = require("./config.json"); const config = require("./config.json");
import CapturedArea from "./components/captured-area"; import CapturedArea from "./components/captured-area";
export const sendArea = (gameID, username, polygon) => {
// console.log(polygon)
points = []
polygon.map((point) => {
points.push({lat: point.coordinate.latitude, lng: point.coordinate.longitude})
})
let formBody = [];
formBody.push("gameID=" + gameID);
formBody.push("userID=" + username);
formBody.push("points=" + JSON.stringify(points));
formBody = formBody.join("&");
console.log(formBody)
fetch("http://"+config.host + ":" + config.port + "/v1/polygon", {
method: "post",
headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
body: formBody
})
.then(res => {return res.json()}).then(data => console.log(data));
}
export const updateAreas = (gameID, update) => { export const updateAreas = (gameID, update) => {
getPolygons(gameID).then((responseJson) => { getPolygons(gameID).then((responseJson) => {
let polygons = [] let polygons = []
@ -24,10 +44,10 @@ export const updateAreas = (gameID, update) => {
function getPolygons(gameID) { function getPolygons(gameID) {
console.log("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID) console.log("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID)
return fetch("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID, {method: 'GET', return fetch("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID, {method: 'GET',
headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},}) headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}})
.then((response) => response.json()) .then(response => response.json())
.catch((error) => { .catch(error => {
console.error(error); console.error(error);
}); });
} }

Loading…
Cancel
Save