Merge branch 'master' of gitlab.com:kdam0/helpthehomeless

4 files changed, 56 insertions, 33 deletions

diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json
index 606e044..7391ba7 100644
--- a/mobile/.expo/packager-info.json
+++ b/mobile/.expo/packager-info.json
@@ -1,9 +1,9 @@
 {
   "devToolsPort": 19002,
-  "expoServerPort": 19000,
-  "packagerPort": 19001,
-  "packagerPid": 29021,
-  "expoServerNgrokUrl": "https://h6-m98.csc301dreamteam.mobile.exp.direct",
-  "packagerNgrokUrl": "https://packager.h6-m98.csc301dreamteam.mobile.exp.direct",
-  "ngrokPid": 29069
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null
 }
\ No newline at end of file
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 5ee9219..db50cbe 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -3,6 +3,7 @@
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
 let currPoint;
+let darkmode = false;
 
 const Races = {
   "White"     : "European or White",
@@ -189,43 +190,57 @@ function updatePointStatusInDb(pointId, pointStatus) {
   });
 }
 
+function initLiveLoading() {
+  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(data);
+      }
+    }, 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.");
+  }
+}
+
+function toggleDarkMap(e) {
+  darkmode = !darkmode;
+  document.getElementById('map').style['-webkit-filter'] =
+    document.getElementById('sidebar').style['-webkit-filter'] =
+    (darkmode) ? "invert(100%)" : "invert(0%)";
+}
+
+let toggleDarkModeBtn = document.getElementById('toggle-btn')
+  .addEventListener("click", toggleDarkMap);
+
 // different basemap
-L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
+let mainTileLayer = 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',
   subdomains: 'abcd',
   minZoom: 0,
   maxZoom: 18,
-  ext: 'png'
+  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();
+let latlngbounds = new L.latLngBounds();
 
 if (points.length) {
   plotPointsOnMap(points);
 }
-// setup live updates
-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(data);
-    }
-  }, 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.");
-}
+initLiveLoading();
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index fd6ed87..71002de 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -102,3 +102,10 @@ a {
   float: right;
   margin-right: 10px;
 }
+#toggle-container {
+  position: fixed;
+  float: right;
+  z-index: 2;
+  bottom: 25px;
+  right: 25px;
+}
diff --git a/web/views/map.pug b/web/views/map.pug
index af97f6c..abd0af5 100644
--- a/web/views/map.pug
+++ b/web/views/map.pug
@@ -18,7 +18,8 @@ block content
 			button.details-btn#pending-btn Pending
 			button.details-btn#completed-btn Completed
 			button.details-btn#close-btn Close
-
+	#toggle-container
+		button#toggle-btn Toggle Dark Mode
 	#map
 
 	script(type='text/javascript').