\r\n \r\n \r\n This page illustrates the usage of one of our services - single route web service. Via the drop-downs and options you customize inputs that will affect the JSON request (shown below in the clear - on the Request tab - for you to inspect). When you click the \"Request a Route\" button the service will reply with a JSON response (the Response tab). The page showcases what is possible; however, it isn't a comprehensive demo of every feature available (e.g., route partitioning, route restrictions) in the single route web service. For more info, please refer to the documentation or contact us. We would love to hear from you!\r\n \r\n \r\n\r\n \r\n \r\n
\r\n )\r\n }\r\n onClickHandler = () => {\r\n //alert(\"here\");\r\n if (this !== undefined) {\r\n const { map } = this.state;\r\n console.log(map);\r\n alert((map as any).getCenter());\r\n }\r\n }\r\n loadBingMapScript() {\r\n var BingMaps = document.getElementById(\"BingMaps\");\r\n if (BingMaps) {\r\n document.body.removeChild(BingMaps);\r\n }\r\n\r\n (window as any).loadMapScenario = () => this.InitBingMap();\r\n\r\n const script = document.createElement(\"script\");\r\n script.src = \"https://www.bing.com/maps/sdk/mapcontrol?callback=loadMapScenario&key=AjRG7BulAwhWObPP8d8Hn5ckNFjYgPmYaYFAgD08GD7P-kCXRmeOxA8TYSrJNj-l\";\r\n script.async = true;\r\n script.defer = true;\r\n script.crossOrigin = null;\r\n\r\n script.id = \"BingMaps\";\r\n document.body.appendChild(script);\r\n }\r\n loadGoogleMapsScript() {\r\n var GoogleMaps = document.getElementById(\"GoogleMaps\");\r\n if (GoogleMaps) {\r\n document.body.removeChild(GoogleMaps);\r\n }\r\n (window as any).InitMap = () => this.InitGoogleMap();\r\n\r\n const script = document.createElement(\"script\");\r\n script.src = \"https://maps.googleapis.com/maps/api/js?key=AIzaSyAockBLjgb31OVYTBzkay2IkPH6213EcgY&callback=InitMap&libraries=&v=weekly\";\r\n script.async = true;\r\n script.defer = true;\r\n script.crossOrigin = null;\r\n\r\n script.id = \"GoogleMaps\";\r\n document.body.appendChild(script);\r\n }\r\n InitGoogleMap(): void {\r\n console.log(\"InitGoogleMap called\");\r\n gmap = new google.maps.Map(document.getElementById(\"gmap\") as HTMLElement, {\r\n zoom: 3,\r\n center: { lat: 39.393486, lng: -98.100769 },\r\n streetViewControl: false,\r\n mapTypeControlOptions: {\r\n mapTypeIds: []\r\n },\r\n });\r\n\r\n }\r\n\r\n InitBingMap(): void {\r\n Microsoft = (window as any).Microsoft;\r\n\r\n if (Microsoft !== undefined) {\r\n let mapElement: HTMLElement = this.refs.map as HTMLElement;\r\n\r\n var map = new Microsoft.Maps.Map(mapElement, {\r\n credentials: 'AjRG7BulAwhWObPP8d8Hn5ckNFjYgPmYaYFAgD08GD7P-kCXRmeOxA8TYSrJNj-l',\r\n center: new Microsoft.Maps.Location(39.393486, -98.100769),\r\n zoom: 3\r\n });\r\n\r\n console.log(\"in InitBingMap\");\r\n //this.state.map = map;\r\n this.setState({ map: map });\r\n\r\n //this.onVisible(document.querySelector(\".MicrosoftMap\"), this.resetTheBingMapView);\r\n }\r\n }\r\n componentDidMount() {\r\n //http://23.100.76.139/routing/services/v1/agrouter1\r\n this.loadBingMapScript();\r\n this.loadGoogleMapsScript();\r\n }\r\n\r\n chartGoogleMap(data: any) : any {\r\n console.log(data);\r\n if (data.polyline) {\r\n let coords = data.polyline.map((point: any) => {\r\n //return {lat: point.latY, lng: point.lonX};\r\n return new google.maps.LatLng(point.latY, point.lonX);\r\n }); \r\n console.log(coords);\r\n var lineSymbol = {\r\n path: 'M 0,-1 0,1',\r\n strokeOpacity: 1,\r\n strokeColor: '#FF0000',\r\n scale: 4\r\n };\r\n let gmapPolyline = new google.maps.Polyline({\r\n path: coords,\r\n strokeOpacity: 0,\r\n icons: [{\r\n icon: lineSymbol,\r\n offset: '0',\r\n repeat: '20px'\r\n }],\r\n });\r\n\r\n gmapPolyline.setMap(gmap);\r\n var latlngbounds = new google.maps.LatLngBounds();\r\n for (var i = 0; i < coords.length; i++) {\r\n latlngbounds.extend(coords[i]);\r\n }\r\n gmap.fitBounds(latlngbounds);\r\n \r\n this.setState({gmaplatlngbounds: latlngbounds});\r\n\r\n return gmapPolyline;\r\n }\r\n }\r\n //class MissingInputRouteCriteria(): void {}\r\n\r\n getRouteRequestAsJson(): any {\r\n let selectedTab = this.runtimeTabConfig[\"selectedTab\"];\r\n if (!selectedTab) throw new MissingInputRouteCriteria();\r\n\r\n let cityData = this.runtimeTabConfig.cityData[selectedTab];\r\n if (!cityData) throw new MissingInputRouteCriteria();\r\n\r\n let cityDataConfig: any = (this.configData as []).find(function (element: any) { return element.city === selectedTab });\r\n if (!cityDataConfig) throw new MissingInputRouteCriteria();\r\n const routeStops = this.runtimeTabConfig.cityData[selectedTab].stops;\r\n if (!Array.isArray(routeStops) || !routeStops.length)\r\n throw new MissingInputRouteCriteria();\r\n\r\n if (cityDataConfig) {\r\n let startDepot = cityDataConfig.depots[cityData.startDepot];\r\n let endDepot = cityDataConfig.depots[cityData.endDepot];\r\n let startDepotCoords = startDepot ? (startDepot as string).split(\",\") : [0, 0];\r\n let endDepotCoords = endDepot ? (endDepot as string).split(\",\") : [0, 0];\r\n console.log(\"startDepot: \" + startDepot);\r\n let route: any = {\r\n routeID: selectedTab,\r\n routeDisplayName: selectedTab,\r\n routeDesiredDirectionality: this.runtimeOtherConfig.routePathMode,\r\n routeStartTime: \"1317952800000\",\r\n startDepot: {\r\n isUsed: (startDepot && (startDepot !== \"0,0\")) ? true : false,\r\n displayName: cityData.startDepot,\r\n latitudeY: startDepotCoords[0],\r\n longitudeX: startDepotCoords[1]\r\n },\r\n endDepot: {\r\n isUsed: (endDepot && (endDepot !== \"0,0\")) ? true : false,\r\n displayName: cityData.endDepot,\r\n latitudeY: endDepotCoords[0],\r\n longitudeX: endDepotCoords[1]\r\n },\r\n stops: []\r\n }\r\n this.runtimeTabConfig.cityData[selectedTab].stops.forEach((item: any) => {\r\n let stopCoords = (cityDataConfig.stops[item] as string).split(\",\");\r\n //console.log(\"-->\" + item + \", \" + cityDataConfig.stops[item]);\r\n route.stops.push({ stopID: item, stopDisplayName: item, latitudeY: stopCoords[0], longitudeX: stopCoords[1] })\r\n });\r\n //console.log(JSON.stringify(route));\r\n return route;\r\n }\r\n\r\n return {};\r\n }\r\n getRequestAsJson(): any {\r\n let selectedTab = this.runtimeTabConfig[\"selectedTab\"];\r\n console.log(\"Selected tab is: \" + selectedTab);\r\n // now we do the lookup in our config data for the items to get their coordinates\r\n //let cityDataConfig: any = (this.configData as []).find(function (element: any) { return element.city === selectedTab });\r\n console.log(\"Print runtime Other Config\");\r\n const {runtimeOtherConfig} = this.state as any;\r\n if (runtimeOtherConfig) {\r\n this.runtimeOtherConfig = runtimeOtherConfig;\r\n } else {\r\n this.runtimeOtherConfig = this.getDefaultsForCriteria();\r\n }\r\n console.log(this.runtimeOtherConfig);\r\n console.log(\"End print runtime other config\");\r\n let r: any = {\r\n apiKey: this.runtimeOtherConfig.apiKey ? this.runtimeOtherConfig.apiKey : \"DefaultAPIKey\",\r\n passthroughGUID: this.runtimeOtherConfig.guid ? this.runtimeOtherConfig.guid : \"DefaultGUID\",\r\n requestOptions: {\r\n routePlanAction: this.runtimeOtherConfig.routePlanAction,\r\n routePlanMode: this.runtimeOtherConfig.routePlanMode\r\n },\r\n inputRoutes: []\r\n }\r\n r.inputRoutes.push(this.getRouteRequestAsJson());\r\n\r\n //console.log(JSON.stringify(r));\r\n //let x = this.getRouteRequestAsJson();\r\n return r;\r\n }\r\n createPostRequest(url = '', data = {}) {\r\n\r\n // Default options are marked with *\r\n const request = new Request(url, {\r\n method: 'POST', // *GET, POST, PUT, DELETE, etc.\r\n cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n 'PassthroughGUID': this.runtimeOtherConfig.guid\r\n },\r\n redirect: 'follow', // manual, *follow, error\r\n //referrer: 'no-referrer', // no-referrer, *client\r\n body: JSON.stringify(data) // body data type must match \"Content-Type\" header\r\n });\r\n\r\n return request; // parses JSON response into native JavaScript objects\r\n }\r\n createMapPin(ppLocation: any, titleValue: any, labelValue: any, colorValue: any): any {\r\n var pin = new Microsoft.Maps.Pushpin(\r\n ppLocation, {\r\n title: titleValue,\r\n subTitle: '',\r\n text: labelValue,\r\n color: colorValue\r\n });\r\n return pin;\r\n }\r\n createGoogleMapMarker(ppLocation: any, titleValue: any, labelValue: any, colorValue: any) : google.maps.Marker|null {\r\n if (gmap !== undefined) {\r\n if (typeof labelValue === 'string') {\r\n let labelLength = labelValue.length;\r\n let markerScale = 8;\r\n if (labelLength > 1) markerScale = 10;\r\n let marker = new google.maps.Marker({\r\n position: { lat: ppLocation.latitude, lng: ppLocation.longitude },\r\n title: titleValue,\r\n label: { text: labelValue, color: 'white', fontSize: (labelLength > 1 ? \"12px\" : \"14px\") },\r\n icon: {\r\n path: 'M -1,0 A 1,1 0 1 1 1,0 M -1,0 A 1,1 0 1 0 1,0',\r\n strokeColor: colorValue,\r\n fillColor: colorValue,\r\n fillOpacity: 1.0,\r\n strokeWeight: 1,\r\n scale: markerScale\r\n },\r\n map: gmap,\r\n });\r\n return marker;\r\n //gmapMarkers.push(marker);\r\n }\r\n }\r\n return null;\r\n }\r\n observerCallback(mutationsList: MutationRecord[], observer: any): void {\r\n // Use traditional 'for loops' for IE 11\r\n for (const mutation of mutationsList) {\r\n //const blah = mutation.target as HTMLElement;\r\n //if (blah) {\r\n // console.log('mutation on target: ' + mutation.target.nodeName + ', id: ' + blah.id);\r\n //}\r\n \r\n if (mutation.type === 'childList') {\r\n console.log('A child node has been added or removed.');\r\n }\r\n else if (mutation.type === 'attributes') {\r\n console.log('The ' + mutation.attributeName + ' attribute was modified');\r\n //if (blah && mutation.attributeName) {\r\n // let theAttribute = blah.getAttribute(mutation.attributeName);\r\n // if (theAttribute) {\r\n // let newValue = theAttribute.valueOf;\r\n // if (newValue)\r\n // console.log(\"the new value: \" + newValue);\r\n // }\r\n //}\r\n if (mutation.attributeName === 'height') {\r\n observer.disconnect(); \r\n this.resetTheBingMapView();\r\n }\r\n }\r\n }\r\n }\r\n waitForBingMapElement(): void {\r\n const {selectedMapTab} = this.state as any;\r\n console.log('waitForBingMapElement: ' + selectedMapTab);\r\n let idToWatch = 'map';\r\n //if (selectedMapTab === 'tabBingMaps')\r\n // idToWatch = 'gmap';\r\n\r\n const targetNode: Node = document.getElementById(idToWatch) as Node;\r\n // Options for the observer (which mutations to observe)\r\n const config = { attributes: true, childList: true, subtree: true };\r\n // Callback function to execute when mutations are observed\r\n\r\n // Create an observer instance linked to the callback function\r\n const observer = new MutationObserver(this.observerCallback);\r\n\r\n // Start observing the target node for configured mutations\r\n observer.observe(targetNode, config);\r\n\r\n };\r\n blah2 = async () => {\r\n\r\n if (this === undefined) {\r\n return;\r\n }\r\n const { map } = this.state as any;\r\n if (map) {\r\n map.entities.clear();\r\n }\r\n if (gmap !== undefined) {\r\n // all this to clear markers and the polyline - we had to keep state\r\n const {gmapMarkers} = this.state as any;\r\n const {gmapPolyline} = this.state as any;\r\n if (gmapPolyline) \r\n gmapPolyline.setMap(null);\r\n const gm = gmapMarkers as google.maps.Marker[];\r\n if (gm) {\r\n for (var iter in gm) {\r\n gm[iter].setMap(null);\r\n }\r\n }\r\n\r\n }\r\n if (!this.runtimeTabConfig) {\r\n alert(\"No runtime config/missing input route critera\");\r\n return;\r\n }\r\n // couldn't call the function except by way of this\r\n const gmm = this.createGoogleMapMarker;\r\n //console.log(\"runTimeConfig: \" + this.runtimeTabConfig[\"selectedTab\"]);\r\n let reqData: any = null;\r\n try {\r\n reqData = this.getRequestAsJson();\r\n this.setState({ requestData: JSON.stringify(reqData, null, \" \") });\r\n }\r\n catch (e) {\r\n if (e instanceof MissingInputRouteCriteria) {\r\n alert(\"Missing input route critera\");\r\n this.setState({ requestData: \" \", responseData: \" \" });\r\n return;\r\n }\r\n alert(\"unknown exception occurred while crafiting request data\");\r\n return;\r\n }\r\n let spinnerShow = document.getElementById(\"spinnerDataLoading\");\r\n if (spinnerShow != null) spinnerShow.style.visibility = \"visible\";\r\n\r\n //const payload = JSON.parse('{\"apiKey\": \"myKey\", \"passthroughGUID\": \"myGUID\", \"requestOptions\": {\"routePlanAction\": \"calculate\", \"routePlanMode\": \"futurePlanning\" }, \"inputRoutes\": [ { \"routeID\": \"RouteABC\", \"routeDisplayName\": \"Joe Smith\", \"routeDesiredDirectionality\": \"bestPath\", \"routeStartTime\": \"1317981600000\", \"startDepot\": { \"isUsed\": true, \"displayName\": \"Home\", \"latitudeY\": 27.993426, \"longitudeX\": -82.57547 }, \"endDepot\": { \"isUsed\": true, \"displayName\": \"Home\", \"latitudeY\": 27.993426, \"longitudeX\": -82.57547 }, \"stops\": [ { \"stopID\": \"myStop1\", \"stopDisplayName\": \"Palm Harbor\", \"latitudeY\": 28.081844, \"longitudeX\": -82.762905 }, { \"stopID\": \"myStop2\", \"stopDisplayName\": \"Ybor City\", \"latitudeY\": 27.963067, \"longitudeX\": -82.423285 }, { \"stopID\": \"myStop3\", \"stopDisplayName\": \"Aquarium\", \"latitudeY\": 27.944249, \"longitudeX\": -82.445648 }, { \"stopID\": \"myStop4\", \"stopDisplayName\": \"Palmetto Beach\", \"latitudeY\": 27.945178, \"longitudeX\": -82.431989 }, { \"stopID\": \"myStop5\", \"stopDisplayName\": \"Airport\", \"latitudeY\": 27.974887, \"longitudeX\": -82.534969 }, { \"stopID\": \"myStop6\", \"stopDisplayName\": \"Raymond James Stadium\", \"latitudeY\": 27.975638, \"longitudeX\": -82.501913 } ] } ]}');\r\n let httpResponse: any;\r\n let fetchErrorOccurred: boolean = false;\r\n try {\r\n //httpResponse = await fetch(this.createPostRequest('/services/v1/single-router',reqData))\r\n\r\n let serviceUrl = process.env.REACT_APP_SERVICE_URL;\r\n if (!serviceUrl)\r\n serviceUrl = \"/services/v1/single-router\";\r\n\r\n httpResponse = await fetch(this.createPostRequest(serviceUrl, reqData))\r\n .then(function (response) {\r\n //console.log(\"Checking for response.ok\");\r\n if (!response.ok) {\r\n fetchErrorOccurred = true;\r\n throw Error(response.statusText);\r\n }\r\n return response.text();\r\n })\r\n .catch(function (error) {\r\n fetchErrorOccurred = true;\r\n //console.log(\"Catching the error\");\r\n console.log(error);\r\n });\r\n }\r\n catch (e) {\r\n fetchErrorOccurred = true;\r\n console.log(\"in fetch catch\");\r\n console.log(e);\r\n }\r\n if (fetchErrorOccurred)\r\n return;\r\n\r\n console.log(httpResponse);\r\n let spinnerHide = document.getElementById(\"spinnerDataLoading\");\r\n if (spinnerHide != null) spinnerHide.style.visibility = \"hidden\";\r\n\r\n let jsonResponse: any = JSON.parse(httpResponse);\r\n const dataAsFormattedJson: string = JSON.stringify(jsonResponse, null, ' ');\r\n\r\n this.setState({ responseData: dataAsFormattedJson });\r\n \r\n //console.log(\"dataAsFormattedJson-begin\");\r\n //console.log(dataAsFormattedJson);\r\n //console.log(\"dataAsFormattedJson-end\");\r\n\r\n //var map = new window.Microsoft.Maps.Map('#myMap');\r\n //console.log(json);\r\n const {selectedMapTab} = this.state as any;\r\n if (selectedMapTab === \"tabBingMaps\") {\r\n // switch to the google maps as it's tricky to get google maps to zoom properly\r\n this.setState({selectedMapTab: \"tabGoogleMaps\"});\r\n }\r\n\r\n if (jsonResponse && jsonResponse.outputRoutes && jsonResponse.outputRoutes.length) {\r\n let route1 = jsonResponse.outputRoutes[0];\r\n console.log(route1);\r\n console.log(route1.polyline);\r\n\r\n this.setState({gmapPolyline: this.chartGoogleMap(route1)}) ;\r\n\r\n //let coordsTemp = route1.polyline.split(\"%\")\r\n let coords = route1.polyline.map((point: any) => {\r\n return new Microsoft.Maps.Location(point.latY, point.lonX)\r\n });\r\n console.log(coords);\r\n console.log(\"routeDisplayName: \" + route1.routeDisplayName);\r\n if (route1.routedItems && route1.routedItems.length) {\r\n let locations: any[] = [];\r\n let startDepot: any;\r\n let endDepot: any;\r\n let gmapMarkers: any[] = [];\r\n\r\n route1.routedItems.forEach(function (element: any) {\r\n let stopType = element.stopType;\r\n if (stopType === 1 || stopType === 4) {\r\n console.log(\"Detected start depot in response\");\r\n startDepot = element;\r\n startDepot.colorValue = \"green\";\r\n startDepot.labelValue = \"S\";\r\n }\r\n if (stopType === 2 || stopType === 5) {\r\n console.log(\"Detected end depot in response\");\r\n endDepot = element;\r\n endDepot.colorValue = \"red\";\r\n endDepot.labelValue = \"E\";\r\n }\r\n });\r\n if (startDepot) {\r\n let ppLocation: any = new Microsoft.Maps.Location(startDepot.latitudeY, startDepot.longitudeX);\r\n startDepot.ppLocation = ppLocation;\r\n locations.push(ppLocation);\r\n\r\n }\r\n if (endDepot) {\r\n if (startDepot) {\r\n if (endDepot.latitudeY.toString() === startDepot.latitudeY.toString() &&\r\n endDepot.longitudeX.toString() === startDepot.longitudeX.toString()) {\r\n endDepot = null;\r\n startDepot.colorValue = \"blue\";\r\n startDepot.labelValue = \"S/E\";\r\n }\r\n else {\r\n let ppLocation: any = new Microsoft.Maps.Location(endDepot.latitudeY, endDepot.longitudeX);\r\n endDepot.ppLocation = ppLocation;\r\n locations.push(ppLocation);\r\n }\r\n } else {\r\n let ppLocation: any = new Microsoft.Maps.Location(endDepot.latitudeY, endDepot.longitudeX);\r\n endDepot.ppLocation = ppLocation;\r\n locations.push(ppLocation);\r\n }\r\n\r\n }\r\n if (startDepot) {\r\n let sd = startDepot;\r\n map.entities.push(\r\n this.createMapPin(sd.ppLocation, sd.stopDisplayName, sd.labelValue, sd.colorValue)\r\n );\r\n gmapMarkers.push(this.createGoogleMapMarker(sd.ppLocation, sd.stopDisplayName, sd.labelValue, sd.colorValue));\r\n }\r\n if (endDepot) {\r\n let ed = endDepot;\r\n map.entities.push(\r\n this.createMapPin(ed.ppLocation, ed.stopDisplayName, ed.labelValue, ed.colorValue)\r\n );\r\n gmapMarkers.push(this.createGoogleMapMarker(ed.ppLocation, ed.stopDisplayName, ed.labelValue, ed.colorValue));\r\n }\r\n route1.routedItems.forEach(function (element: any) {\r\n console.log(element.stopDisplayName);\r\n\r\n //Create custom Pushpin\r\n let ppLocation: any = new Microsoft.Maps.Location(element.latitudeY, element.longitudeX);\r\n\r\n let labelValue;\r\n let colorValue = \"purple\";\r\n switch (element.stopType) {\r\n case 3: {\r\n labelValue = element.stopSequence.toString();\r\n break;\r\n }\r\n default:\r\n break;\r\n }\r\n if (labelValue) {\r\n locations.push(ppLocation);\r\n var pin = new Microsoft.Maps.Pushpin(\r\n ppLocation, {\r\n title: element.stopDisplayName,\r\n subTitle: '',\r\n text: labelValue,\r\n color: colorValue\r\n });\r\n\r\n //Add the pushpin to the map\r\n map.entities.push(pin);\r\n //const { thisthis} = this as any;\r\n gmapMarkers.push(gmm(ppLocation, element.stopDisplayName, labelValue, colorValue));\r\n }\r\n }, this);\r\n // telling the map to ensure all our locations are in the view\r\n var rect = Microsoft.Maps.LocationRect.fromLocations(locations);\r\n map.setView({ bounds: rect, padding: 40 });\r\n // need to save off these locations\r\n this.setState({ bingMapsBoundingRectangle: rect });\r\n this.setState({gmapMarkers: gmapMarkers});\r\n }\r\n var polyline = new Microsoft.Maps.Polyline(coords, {\r\n strokeColor: 'red',\r\n strokeThickness: 5,\r\n strokeDashArray: [2, 2],\r\n generalizable: false\r\n });\r\n\r\n //Add the polyline to map\r\n map.entities.push(polyline);\r\n\r\n this.waitForBingMapElement();\r\n \r\n \r\n }\r\n }\r\n}\r\n\r\nexport default AGDemo;\r\n\r\n","import React, { Component } from 'react';\r\nimport { Tabs, Tab, Form, Row, Col, Card} from 'react-bootstrap';\r\n\r\n\r\nclass AGDemoTabs extends Component {\r\n constructor(props) {\r\n super(props);\r\n //console.log(props);\r\n this.state = {\r\n selectedTab: \"Chicago\"\r\n };\r\n this.configData = this.props.configData;\r\n console.log(this.configData);\r\n\r\n this.runtimeConfig = {\r\n selectedTab: \"Chicago\",\r\n cityData: {}\r\n }\r\n\r\n this.handleTabSelect = this.handleTabSelect.bind(this);\r\n this.handlePropertyChange = this.handlePropertyChange.bind(this);\r\n }\r\n handleTabSelect(selectedTab) {\r\n console.log('selected tab: ' + selectedTab);\r\n this.runtimeConfig.selectedTab = selectedTab;\r\n this.setState({ selectedTab: selectedTab });\r\n var d = new Date();\r\n console.log(\"current date is: \" + d);\r\n console.log(\"current time is: \" + d.getTime());\r\n }\r\n\r\n handlePropertyChange(event) {\r\n //const name = event.target.name;\r\n const id = event.target.id;\r\n const value = event.target.type === \"checkbox\" ? event.target.checked : event.target.value;\r\n //console.log(\"handleCheckChange-id: \" + id);\r\n if (value) {\r\n let cityData = this.runtimeConfig.cityData[this.state.selectedTab];\r\n if (cityData === undefined) {\r\n // since the cityData object doesn't exist, we need to define it\r\n this.runtimeConfig.cityData[this.state.selectedTab] = {\r\n startDepot : \"\", endDepot: \"\", stops: []\r\n }\r\n cityData = this.runtimeConfig.cityData[this.state.selectedTab];\r\n }\r\n console.log(this.runtimeConfig);\r\n if (id.indexOf(\"StartDepot\") > 0) {\r\n cityData.startDepot = value;\r\n } else if (id.indexOf(\"EndDepot\") > 0) {\r\n cityData.endDepot = value;\r\n } else {\r\n cityData.stops.push(id);\r\n }\r\n console.log(cityData.stops);\r\n this.props.onTabPropertyChange(this.runtimeConfig);\r\n }\r\n else {\r\n let {selectedTab} = this.state;\r\n let arr = this.runtimeConfig.cityData[selectedTab].stops;\r\n if (selectedTab && arr.includes(id)) {\r\n let i = arr.indexOf(id);\r\n if (i >= 0) {\r\n arr.splice(i, 1);\r\n }\r\n }\r\n this.props.onTabPropertyChange(this.runtimeConfig);\r\n\r\n }\r\n\r\n }\r\n onDepotChanged = (event) => {\r\n console.log(\"Depot changed: \" + event.target.value + \", \" + event.target.id);\r\n //this.propagateChangeToParent({ routePlanAction: event.target.value });\r\n }\r\n render() {\r\n return (\r\n \r\n {this.configData.map(tabData => (\r\n \r\n \r\n \r\n\r\n ))}\r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default AGDemoTabs;","import React, { Component } from 'react';\r\nimport { Form, Row, Col, Tooltip, OverlayTrigger, InputGroup, FormControl } from 'react-bootstrap';\r\n\r\nclass AGCriteria extends Component {\r\n constructor(props) {\r\n super(props);\r\n //console.log(props);\r\n if (this.props.hasOwnProperty(\"initialDefaults\")) {\r\n let x = JSON.stringify(this.props.initialDefaults);\r\n this.state = JSON.parse(x);\r\n } \r\n\r\n }\r\n propagateChangeToParent = (stateProps) => {\r\n let copyOfState = JSON.parse(JSON.stringify(this.state));\r\n for (let key in stateProps) {\r\n copyOfState[key] = stateProps[key];\r\n }\r\n this.setState(stateProps);\r\n this.props.onCriteriaPropertyChange(copyOfState);\r\n }\r\n onApiKeyInput = (event) => {\r\n //console.log(\"API Key changed: \" + event.target.value);\r\n this.propagateChangeToParent({ apiKey: event.target.value });\r\n }\r\n onGUIDInput = (event) => {\r\n //console.log(\"GUID changed: \" + event.target.value);\r\n this.propagateChangeToParent({ guid: event.target.value });\r\n }\r\n onPlanActionChanged = (event) => {\r\n //console.log(\"Plan Action changed: \" + event.target.value);\r\n this.propagateChangeToParent({ routePlanAction: event.target.value });\r\n }\r\n onPlanModeChanged = (event) => {\r\n //console.log(\"Plan Mode changed: \" + event.target.value);\r\n this.propagateChangeToParent({routePlanMode: event.target.value });\r\n }\r\n onPathModeChanged = (event) => {\r\n //console.log(\"Path Mode changed: \" + event.target.value);\r\n this.propagateChangeToParent({ routePathMode: event.target.value });\r\n }\r\n onStartTimeChanged = (event) => {\r\n //console.log(\"Start Time changed: \" + event.target.value);\r\n this.propagateChangeToParent({ routeStartTime: event.target.value });\r\n }\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default AGCriteria;","import React from 'react';\n// import logo from './logo.svg';\nimport './App.css';\nimport AGDemo from './components/AGDemo';\n//import BingMap from './components/BingMap';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nrequire('dotenv').config({ debug: process.env.DEBUG });\n\nfunction App() {\n \n return (\n
\n{/* \n \n \n */}\n \n \n
\n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}