Merge pull request #45 from csc301-winter-2019/feat/30

Feat/30

6 files changed, 88 insertions, 75 deletions

diff --git a/web/package-lock.json b/web/package-lock.json
index f2472bd..0c7f4d6 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@types/babel-types": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.5.tgz",
-      "integrity": "sha512-0t0R7fKAXT/P++S98djRkXbL9Sxd9NNtfNg3BNw2EQOjVIkiMBdmO55N2Tp3wGK3mylmM7Vck9h5tEoSuSUabA=="
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.6.tgz",
+      "integrity": "sha512-8zYZyy2kgwBXdz2j8Ix7LOghGiZbOiHf6vqmmBX1r76FdAzVNv7cODyJTEglUWiOdRnXh0s/o58neUwv5vaitQ=="
     },
     "@types/babylon": {
       "version": "6.16.5",
@@ -56,11 +56,6 @@
         "repeat-string": "^1.5.2"
       }
     },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
-    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -167,12 +162,11 @@
       }
     },
     "clean-css": {
-      "version": "3.4.28",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
-      "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
       "requires": {
-        "commander": "2.8.x",
-        "source-map": "0.4.x"
+        "source-map": "~0.6.0"
       }
     },
     "cliui": {
@@ -185,14 +179,6 @@
         "wordwrap": "0.0.2"
       }
     },
-    "commander": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
-      "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
-      "requires": {
-        "graceful-readlink": ">= 1.0.0"
-      }
-    },
     "constantinople": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
@@ -357,11 +343,6 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
-    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -665,18 +646,18 @@
       }
     },
     "pug": {
-      "version": "2.0.0-beta11",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.0-beta11.tgz",
-      "integrity": "sha1-Favmr1AEx+LPRhPksnRlyVRrXwE=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.3.tgz",
+      "integrity": "sha1-ccuoJTfJWl6rftBGluQiH1Oqh44=",
       "requires": {
-        "pug-code-gen": "^1.1.1",
-        "pug-filters": "^2.1.1",
-        "pug-lexer": "^3.0.0",
-        "pug-linker": "^2.0.2",
-        "pug-load": "^2.0.5",
-        "pug-parser": "^2.0.2",
-        "pug-runtime": "^2.0.3",
-        "pug-strip-comments": "^1.0.2"
+        "pug-code-gen": "^2.0.1",
+        "pug-filters": "^3.1.0",
+        "pug-lexer": "^4.0.0",
+        "pug-linker": "^3.0.5",
+        "pug-load": "^2.0.11",
+        "pug-parser": "^5.0.0",
+        "pug-runtime": "^2.0.4",
+        "pug-strip-comments": "^1.0.3"
       }
     },
     "pug-attrs": {
@@ -690,16 +671,16 @@
       }
     },
     "pug-code-gen": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-1.1.1.tgz",
-      "integrity": "sha1-HPcnRO8qA56uajNAyqoRBYcSWOg=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.1.tgz",
+      "integrity": "sha1-CVHsgyJddNjPxHan+Zolm199BQw=",
       "requires": {
         "constantinople": "^3.0.1",
         "doctypes": "^1.1.0",
         "js-stringify": "^1.0.1",
-        "pug-attrs": "^2.0.2",
+        "pug-attrs": "^2.0.3",
         "pug-error": "^1.3.2",
-        "pug-runtime": "^2.0.3",
+        "pug-runtime": "^2.0.4",
         "void-elements": "^2.0.1",
         "with": "^5.0.0"
       }
@@ -710,23 +691,23 @@
       "integrity": "sha1-U659nSm7A89WRJOgJhCfVMR/XyY="
     },
     "pug-filters": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-2.1.5.tgz",
-      "integrity": "sha512-xkw71KtrC4sxleKiq+cUlQzsiLn8pM5+vCgkChW2E6oNOzaqTSIBKIQ5cl4oheuDzvJYCTSYzRaVinMUrV4YLQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.0.tgz",
+      "integrity": "sha1-JxZVVbwEwjbkqisDZiRt+gIbYm4=",
       "requires": {
-        "clean-css": "^3.3.0",
+        "clean-css": "^4.1.11",
         "constantinople": "^3.0.1",
         "jstransformer": "1.0.0",
         "pug-error": "^1.3.2",
-        "pug-walk": "^1.1.5",
+        "pug-walk": "^1.1.7",
         "resolve": "^1.1.6",
         "uglify-js": "^2.6.1"
       }
     },
     "pug-lexer": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-3.1.0.tgz",
-      "integrity": "sha1-/QhzdtSmdbT1n4/vQiiDQ06VgaI=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.0.0.tgz",
+      "integrity": "sha1-IQwYRX7y4XYCQnQMXmR715TOwng=",
       "requires": {
         "character-parser": "^2.1.1",
         "is-expression": "^3.0.0",
@@ -734,12 +715,12 @@
       }
     },
     "pug-linker": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-2.0.3.tgz",
-      "integrity": "sha1-szH/olc33eacEntWwQ/xf652bco=",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.5.tgz",
+      "integrity": "sha1-npp65ABWgtAn3uuWsAD4juuDoC8=",
       "requires": {
         "pug-error": "^1.3.2",
-        "pug-walk": "^1.1.2"
+        "pug-walk": "^1.1.7"
       }
     },
     "pug-load": {
@@ -752,9 +733,9 @@
       }
     },
     "pug-parser": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-2.0.2.tgz",
-      "integrity": "sha1-U6aAz9BQOdywwn0CkJS8SnkmibA=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.0.tgz",
+      "integrity": "sha1-45Stmz/KkxI5QK/4hcBuRKt+aOQ=",
       "requires": {
         "pug-error": "^1.3.2",
         "token-stream": "0.0.1"
@@ -910,12 +891,9 @@
       "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
     },
     "source-map": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-      "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-      "requires": {
-        "amdefine": ">=0.0.4"
-      }
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "sparse-bitfield": {
       "version": "3.0.3",
diff --git a/web/public/assets/blue-icon.png b/web/public/assets/blue-icon.png
new file mode 100644
index 0000000..e4abba3
--- /dev/null
+++ b/web/public/assets/blue-icon.png
diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png
new file mode 100644
index 0000000..dd725de
--- /dev/null
+++ b/web/public/assets/orange-icon.png
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 8d4fc3b..544da9e 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -2,6 +2,7 @@
 // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
+let currPoint;
 
 const Races = {
 	"White"     : "European or White",
@@ -31,7 +32,8 @@ function plotPointsOnMap(points) {
 function showDetails(e) {
 	// layer.feature.geometry gives you access to all the fields
 	let layer = e.layer;
-
+	currPoint = layer;
+	
 	let sideBar = document.getElementById('sidebar');
 
 	if (getComputedStyle(sideBar).visibility === 'hidden') {
@@ -80,13 +82,27 @@ function showDetails(e) {
 	let extraText = document.createTextNode(layer.feature.geometry['extra']);
 	extraTextSpan.appendChild(extraText);
 
-	let closeBtn = document.getElementById('close-btn')
-	closeBtn.addEventListener('click', closeDetails)
+	let pendingBtn = document.getElementById('pending-btn');
+	pendingBtn.addEventListener('click', markAsPending);
+
+	let completedBtn = document.getElementById('completed-btn');
+	completedBtn.addEventListener('click', markAsCompleted);
+
+	let closeBtn = document.getElementById('close-btn');
+	closeBtn.addEventListener('click', closeDetails);
+}
+
+function markAsPending(e) {
+	currPoint._icon.src = '../assets/orange-icon.png';
+}
+
+function markAsCompleted(e) {
+	map.removeLayer(currPoint);
 }
 
 function closeDetails(e) {
 	let details = document.getElementById('sidebar')
-	details.style.visibility = 'hidden'
+	details.style.visibility = 'hidden';
 }
 
 // different basemap
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index ece8da4..5f39fcf 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -64,20 +64,37 @@ a {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
-#close-btn-container {
+#btn-container {
   height: 30px;
   top: 250px;
   background-color: lightgrey;
   width: 350px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
+  text-align: center;
 }
-#close-btn {
-  background-color: red;
+.details-btn {
   position: relative;
   margin-top: 4px;
-  float: right;
-  margin-right: 20px;
+  margin-bottom: 4px;
   border-radius: 10px;
-  width: 100px;
+  font-size: 18px;
+  padding: 10px;
+}
+#pending-btn {
+  background-color: orange;
+  float: left;
+  margin-left: 10px;
+}
+
+#completed-btn {
+  background-color: #2bbd2b;
+  float: left;
+  margin-left: 10px;
+}
+
+#close-btn {
+  background-color: red;
+  float: right;
+  margin-right: 10px;
 }
diff --git a/web/views/map.pug b/web/views/map.pug
index 484899c..af97f6c 100644
--- a/web/views/map.pug
+++ b/web/views/map.pug
@@ -14,8 +14,10 @@ block content
 				span#report-other
 				strong Distinctive Features
 				span#report-distinctive
-		#close-btn-container
-			button#close-btn Close
+		#btn-container
+			button.details-btn#pending-btn Pending
+			button.details-btn#completed-btn Completed
+			button.details-btn#close-btn Close
 
 	#map