diff options
| -rw-r--r-- | mobile/App.js | 29 | ||||
| -rw-r--r-- | mobile/components/FormPage.js | 20 | ||||
| -rw-r--r-- | mobile/components/GreetingPage.js | 112 | ||||
| -rw-r--r-- | web/app.js | 2 | ||||
| -rw-r--r-- | web/public/javascripts/map.js | 66 | ||||
| -rw-r--r-- | web/routes/index.js | 16 | ||||
| -rw-r--r-- | web/routes/sse.js | 15 |
7 files changed, 228 insertions, 32 deletions
diff --git a/mobile/App.js b/mobile/App.js index 7271bc2..4348381 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -1,17 +1,16 @@ import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { createStackNavigator, createAppContainer } from 'react-navigation'; -export default class HelloWorldApp extends Component { - //Every component needs a render() function - render() { - return ( - //<View> acts like the way <div> does in JavaScript - //style={...} stores properties about where you want the component to be placed - //and how you want it to look. It's similar to adding CSS styles to HTML elements - //when creating web pages - <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> - <Text>Hello world!</Text> - </View> - ); - } -} +import GreetingPage from './components/GreetingPage'; +import FormPage from './components/FormPage'; + + +const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage,}, + {headerMode: 'none'}) + +const App = createAppContainer(RootStack) + +export default App; + diff --git a/mobile/components/FormPage.js b/mobile/components/FormPage.js new file mode 100644 index 0000000..9ea3dce --- /dev/null +++ b/mobile/components/FormPage.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { createStackNavigator, createAppContainer } from 'react-navigation'; + +export default class FormPage extends Component { + render() { + return ( + <View marginTop = {50}> + <Text> + Put the form stuff here + </Text> + <Button + onPress={() => this.props.navigation.navigate('GreetingPage')} + title='Go Back' + /> + </View> + ); + } +} diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js new file mode 100644 index 0000000..8b87474 --- /dev/null +++ b/mobile/components/GreetingPage.js @@ -0,0 +1,112 @@ +import React, { Component } from 'react'; +import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight} from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { createStackNavigator, createAppContainer } from 'react-navigation'; + +export default class GreetingPage extends Component { + //Every component needs a render() function + render() { + return ( + //<View> acts like the way <div> does in JavaScript + //style={...} stores properties about where you want the component to be placed + //and how you want it to look. It's similar to adding CSS styles to HTML elements + //when creating web pages + + <View style={styles.container}> + + <View style={styles.titleContainer}> + <Text style={styles.title}> + [Place text here!] + </Text> + </View> + + <TouchableHighlight + style={styles.first_button_container} + onPress={() => this.props.navigation.navigate('FormPage')}> + + <View style={styles.press_button}> + + <View> + <Text style={styles.current_location_title}> + Use Current Location + </Text> + </View> + + <View marginTop = {20}> + <Ionicons name="md-locate" size={40} color="white"/> + </View> + + </View> + + </TouchableHighlight> + + <TouchableHighlight + style={styles.second_button_container} + onPress={() => this.props.navigation.navigate('FormPage')}> + <View style={styles.press_button}> + + <View> + <Text style={styles.current_location_title}> + Drop Pin + </Text> + </View> + + <View marginTop = {20}> + <Ionicons name="md-pin" size={40} color="white"/> + </View> + + </View> + </TouchableHighlight> + + </View> + ); + } +} + + +const styles = StyleSheet.create( { + container: { + flex: 1, + flexDirection: 'column', + backgroundColor: '#40739e', + alignItems: 'stretch' + }, + titleContainer: { + flex: 3, + //position: 'absolute', + marginTop: 205, + //flexGrow: 1 + }, + title: { + color: '#FFF', + marginTop: 10, + textAlign: 'center', + opacity: 0.9, + fontSize: 30 + }, + current_location_title: { + color: '#FFF', + marginTop: 15, + textAlign: 'center', + opacity: 0.9, + fontSize: 20 + }, + first_button_container: { + flex: 1, + //position: 'absolute', + //marginTop: 360, + backgroundColor: '#c0392b', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'stretch' + }, + press_button: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center' + }, + second_button_container: { + flex: 1, + backgroundColor: '#535c68' + } +}) @@ -19,6 +19,7 @@ app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); +app.use(require('./routes/sse')); var env = process.env.NODE_ENV || 'development'; var uri; @@ -45,7 +46,6 @@ mongoose.connect(uri, { useNewUrlParser: true }, function (error) { app.use('/', indexRouter); app.use('/users', usersRouter); - // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 4a1e697..3f33bcf 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -3,21 +3,19 @@ // attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' // }).addTo(map); -// different basemap -L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { - attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', - subdomains: 'abcd', - minZoom: 0, - maxZoom: 18, - ext: 'png' -}).addTo(map); +function plotPointsOnMap(points) { + L.geoJson(points, { + pointToLayer: function (feature, latlng) { + //return L.circleMarker(latlng); + latlngbounds.extend(latlng); + return L.marker(latlng); + } + }).on('click', showDetails).addTo(map) -L.geoJson(points, { - pointToLayer: function (feature, latlng) { - //return L.circleMarker(latlng); - return L.marker(latlng); - } -}).on('click', showDetails).addTo(map) + // rezoom the map so that all the markers fit in the view, add 20% padding so + // that marker dont cut off + map.fitBounds(latlngbounds.pad(0.20)); +} // show details about point // e is the event info @@ -85,4 +83,42 @@ function showDetails(e) { function closeDetails(e) { let details = document.getElementById('sidebar') details.style.visibility = 'hidden' -}
\ No newline at end of file +} + +// different basemap +L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { + attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', + subdomains: 'abcd', + minZoom: 0, + maxZoom: 18, + ext: 'png' +}).addTo(map); + +// keep track of the boundary of the markers so that we can update the +// map to fit them all +var latlngbounds = new L.latLngBounds(); + +plotPointsOnMap(points); +if (window.EventSource) { + var source = new EventSource('/stream'); + + source.addEventListener('message', function(e) { + var data = JSON.parse(e.data); + if (data.coordinates) { + points.push(data); + plotPointsOnMap(points); + } + }, false) + + source.addEventListener('open', function(e) { + console.log("Connection was opened") + }, false) + + source.addEventListener('error', function(e) { + if (e.readyState == EventSource.CLOSED) { + console.log("Connection was closed") + } + }, false) +} else { + console.log("sse not supported."); +} diff --git a/web/routes/index.js b/web/routes/index.js index b2d0796..b2ba91f 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -2,7 +2,7 @@ var express = require('express'); var router = express.Router(); var Mockpoints = require('../models/mockpoints'); var Points = require('../models/points'); - +const connections = []; /* GET home page. */ router.get('/', function(req, res, next) { // for now just redirect to /map @@ -36,10 +36,24 @@ router.post('/mobilerequest', function(req, res) { console.log(`err inserting mobile request into db: ${err}`); res.status(500).send({ error: "boo:(" }); } else { + // send event to all connections + for(var i = 0; i < connections.length; i++) { + connections[i].sseSend(data); + } console.log(result); res.status(200).send({'status': 'success', 'data': data}); } }); + }); + +router.get('/stream', function(req, res){ + // set up server side event (communication line between front end and server) + res.sseSetup(); + // send an event to the front end to open the connection + res.sseSend('ok'); + // push connection to connection array + connections.push(res); +}); module.exports = router; diff --git a/web/routes/sse.js b/web/routes/sse.js new file mode 100644 index 0000000..5cd9a3f --- /dev/null +++ b/web/routes/sse.js @@ -0,0 +1,15 @@ +module.exports = function (req, res, next) { + res.sseSetup = function() { + res.writeHead(200, { + 'Content-Type': 'text/event-stream', + 'Cache-Control': 'no-cache', + 'Connection': 'keep-alive' + }) + } + + res.sseSend = function(data) { + res.write("data: " + JSON.stringify(data) + "\n\n"); + } + + next() +}
\ No newline at end of file |