Merge pull request #31 from csc301-winter-2019/qa

Qa

6 files changed, 201 insertions, 18 deletions

diff --git a/web/app.js b/web/app.js
index f0ae3a5..9d6e9d0 100644
--- a/web/app.js
+++ b/web/app.js
@@ -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 190307d..3f33bcf 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -3,6 +3,88 @@
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).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)
+
+	// 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
+function showDetails(e) {
+	// layer.feature.geometry gives you access to all the fields
+	let layer = e.layer
+	
+	let sideBar = document.getElementById('sidebar')
+
+	if (getComputedStyle(sideBar).visibility === 'hidden') {
+		sideBar.style.visibility = 'visible'
+	}
+
+	let point = document.getElementById('point')
+
+	//get the previous input text from the previous point
+	let prevUserInput = point.getElementsByClassName('user-input')
+
+	// remove the previous point text
+	while (prevUserInput.length !== 0) {
+		prevUserInput[0].parentNode.removeChild(prevUserInput[0])
+	}
+
+	let pointBreaks = point.getElementsByClassName('point-break')
+
+	// put age range of person
+	let ageRangeTextSpan = document.createElement('span')
+	ageRangeTextSpan.className = 'user-input'
+	let ageRangeText = document.createTextNode(layer.feature.geometry['ageRange'])
+	ageRangeTextSpan.appendChild(ageRangeText)
+	pointBreaks[0].parentNode.insertBefore(ageRangeTextSpan, pointBreaks[0])
+
+	// put clothing description of person
+	let clothingDescTextSpan = document.createElement('span')
+	clothingDescTextSpan.className = 'user-input'
+	let clothingDescText = document.createTextNode(layer.feature.geometry['clothingDescription'])
+	clothingDescTextSpan.appendChild(clothingDescText)
+	pointBreaks[1].parentNode.insertBefore(clothingDescTextSpan, pointBreaks[1])
+
+	// put whether person is injured or not
+	let isInjured = layer.feature.geometry['isInjured']
+	let injurySpan = document.createElement('span')
+	injurySpan.className = 'user-input'
+	if (isInjured) {
+		injurySpan.appendChild(document.createTextNode('Injured'))
+		injurySpan.style.color = 'red'
+	}
+	else {
+		injurySpan.appendChild(document.createTextNode('Not injured'))
+		injurySpan.style.color = 'green'
+	}
+	pointBreaks[2].parentNode.insertBefore(injurySpan, pointBreaks[2])
+
+	// put reason for help
+	let helpReasonTextSpan = document.createElement('span')
+	helpReasonTextSpan.className = 'user-input'
+	let helpReasonText = document.createTextNode(layer.feature.geometry['reasonForHelp'])
+	helpReasonTextSpan.appendChild(helpReasonText)
+	point.appendChild(helpReasonTextSpan)
+
+	let closeBtn = document.getElementById('close-btn')
+	closeBtn.addEventListener('click', closeDetails)
+}
+
+function closeDetails(e) {
+	let details = document.getElementById('sidebar')
+	details.style.visibility = 'hidden'
+}
+
 // 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> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
@@ -12,12 +94,31 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}
 	ext: 'png'
 }).addTo(map);
 
-L.geoJson(points, {
-	pointToLayer: function (feature, latlng) {
-		//return L.circleMarker(latlng);
-		return L.marker(latlng);
-	}
-}).bindPopup(function (layer) {
-	// layer.feature.geometry gives you access to all the fields
-	return "<p>" + JSON.stringify(layer.feature.geometry) + "</p>";
-}).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/public/stylesheets/style.css b/web/public/stylesheets/style.css
index c3bd05c..d8618cd 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -3,9 +3,10 @@ html, body {
   overflow: hidden;
 }
 #map {
-  width: 65%;
+  width: 100%;
   height: 100%;
-  float: right;
+  position: absolute;
+  z-index: 1;
 }
 body {
   margin:0;
@@ -16,11 +17,51 @@ a {
   color:#00B7FF;
 }
 #sidebar {
-  width: 35%;
-  height: 100%;
+  top: 5px;
+  left: 5px;
+  z-index: 2;
+  width: 350px;
+  height: 275px;
+  max-height: 275px;
+  position: relative;
   float: left;
-  background-color: #e70000;
+  background-color: lightgrey;
+  border-radius: 10px;
+  visibility: hidden;
 }
-h1 {
+#details-header {
   text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+#point-container {
+    overflow: auto;
+    max-height: 195px;
 }
+#point {
+  background-color: #0CC5EA;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 10px;
+}
+#close-btn-container {
+  position: fixed;
+  height: 30px;
+  top: 250px;
+  background-color: lightgrey;
+  width: 350px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+#close-btn {
+  background-color: red;
+  position: relative;
+  margin-top: 4px;
+  float: right;
+  margin-right: 20px;
+  border-radius: 10px;
+  width: 100px;
+}
\ No newline at end of file
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
diff --git a/web/views/map.pug b/web/views/map.pug
index 725c8a8..f5837b6 100644
--- a/web/views/map.pug
+++ b/web/views/map.pug
@@ -1,7 +1,19 @@
 extends layout.pug
 block content
 	#sidebar
-		h1 This is a sidebar
+		h1#details-header Details
+		#point-container
+			#point
+				strong Age range: 
+				br.point-break
+				strong Clothing description: 
+				br.point-break
+				strong Injury status: 
+				br.point-break
+				strong Reason for help: 
+		#close-btn-container
+			button#close-btn Close
+
 	#map
 
 	script(type='text/javascript').