added api calls to get polygons from server

App.js

@@ -15,7 +15,7 @@ import {
 
 import RunInfo from './components/run-info';
 import RunInfoNumeric from './components/run-info-num';
-
+import {updateAreas} from './update-map'
 import MapView from 'react-native-maps';
 import WalkButton from "./components/new-button";
 import JoinButton from "./components/join-button";
@@ -35,10 +35,8 @@ export default class App extends Component<Props> {
         super(props);
 
          setInterval(() => {
-            // this.distanceInfo.setState({value: Math.random() * 100});
+            this.updateCaptures();
-            // this.speedInfo.setState({value: Math.random() * 15});
+        }, 5000);
-            // this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
-        }, 1000);
 
         let watchID = navigator.geolocation.watchPosition((position) => {
             this.setState({
@@ -49,19 +47,20 @@ export default class App extends Component<Props> {
                     }
                 ]
             });
-        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
+        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
 
         this.state = {
+            activeWalk: false,
             username: "",
             gameNumber: "",
             walkMarkers: [],
             captures: [
-                new CapturedArea("fanded", [
+                // new CapturedArea("fanded", [
-                    {latitude: -43.5623, longitude:172.5655},
+                //     {latitude: -43.5623, longitude:172.5655},
-                    {latitude: -43.5623, longitude:172.5650},
+                //     {latitude: -43.5623, longitude:172.5650},
-                    {latitude: -43.5628, longitude:172.5650},
+                //     {latitude: -43.5628, longitude:172.5650},
-                    {latitude: -43.5628, longitude:172.5655}
+                //     {latitude: -43.5628, longitude:172.5655}
-                ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
+                // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
 
                 new CapturedArea("samded", [
                     {latitude: -43.5663, longitude:172.5615},
@@ -73,10 +72,25 @@ export default class App extends Component<Props> {
             watchID 
         };
     }
+    updateCaptures(){
+        updateAreas(this.state.gameNumber, (polygons) => {
+            this.setState({
+                captures: polygons
+            })
+        })
+    }
     setGameNumber(user, number){
         this.setState({username: user, gameNumber: number})
     }
     
+    startWalk(){
+        this.setState({walkMarkers: [], activeWalk: true})
+    }
+
+    stopWalk(){
+        this.setState({activeWalk: false})
+    }
+
     componentWillUnmount() {
         navigator.geolocation.stopWatch(this.state.watchID);
     }
@@ -124,7 +138,10 @@ export default class App extends Component<Props> {
                 <View style={styles.menu}>
                 
                     <View style={styles.walk}>
-                        <WalkButton erase={() => {this.setState({walkMarkers: []})}}/>
+                        <WalkButton 
+                            start={() => {this.startWalk()}}
+                            stop={() => {this.stopWalk()}}
+                            />
                     </View>
 
                     <View style={styles.infoWrapper}>

api/config/db.js

@@ -9,7 +9,7 @@ exports.connect = function(done){
     state.pool = mysql.createPool({
         host: 'localhost',
         user: 'root',
-        password: 'root',
+        password: '',
         port:  3306,
         database: "territory-walker",
         //multipleStatements: true

components/new-button.js

@@ -11,8 +11,14 @@ import {
 export default class WalkButton extends Component {
     constructor(props) {
         super(props);
-        this.erase = this.props.erase;
+        this.start = this.props.start;
-        this.state = { value: this.props.value};
+        this.stop = this.props.stop;
+        this.state = {
+            value: this.props.value,
+            activeWalk: false,  
+            buttonText: "Start Capture",
+            buttonColour: 'rgba(0,255,0,0.5)'
+        };
     }
     
     formatValue() {
@@ -23,14 +29,31 @@ export default class WalkButton extends Component {
         return (
             <View style ={[{paddingVertical: 15}, {flex: 1}]}>
             <TouchableHighlight
-                onPress=  {() => this.erase()}
+                onPress=  {() => {
+                    if (this.state.activeWalk){
+                        console.log("state true to false")
+                        this.setState({
+                            activeWalk: false,
+                            buttonText: "Start Capture",
+                            buttonColour: 'rgba(0,255,0,0.5)'
+                        })
+                        this.start();
+                    }else{
+                        console.log("state false to true")
+                        this.setState({
+                            activeWalk: true,
+                            buttonText: "Stop Capture",
+                            buttonColour: 'rgba(255,0,0,0.5)'
+                        })
+                        this.stop()
+                    }}}
                 // style={sharedStyles.new}
             >
                     <Text style={{
                         paddingVertical: 10,
                         fontSize: 30, 
-                        backgroundColor: 'rgba(0,255,0,0.5)',
+                        backgroundColor: this.state.buttonColour,
-                        textAlign: 'center'}}>Start Capture</Text>
+                        textAlign: 'center'}}>{this.state.buttonText}</Text>
                     
             </TouchableHighlight>
             </View>

config.json

@@ -0,0 +1,4 @@
+{
+  "host"  : "192.168.178.74",
+  "port" : "8080"
+}

update-map.js

@@ -0,0 +1,45 @@
+const config = require("./config.json");
+import CapturedArea from "./components/captured-area";
+
+export const updateAreas = (gameID, update) => {
+    getPolygons(gameID).then((responseJson) => {
+        let polygons = []
+        responseJson.map((polygon) => {
+            let userID = polygon.userID
+            let strokeColor = "#"+polygon.colour
+            let fillColor = "#"+polygon.colour
+            let coordinates = []
+            polygon.coords.map((point) => {
+                coordinates.push({
+                    "latitude" : point.lat,
+                    "longitude" : point.lng
+                })
+            });
+            polygons.push(new CapturedArea(userID, coordinates, strokeColor, hexToRgbA(fillColor,0.2), 1));
+        });
+        update(polygons);
+    })
+}
+
+function getPolygons(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',
+    headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},})
+    .then((response) => response.json())
+    .catch((error) => {
+    console.error(error);
+    });
+}
+
+function hexToRgbA(hex, a){
+    var c;
+    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+        c= hex.substring(1).split('');
+        if(c.length== 3){
+            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+        }
+        c= '0x'+c.join('');
+        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + a + ')';
+    }
+    throw new Error('Bad Hex');
+}