From 904ccabe4324cb2e7c985a2dbe25cce462f14d7c Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 8 Apr 2019 21:51:53 -0400 Subject: added proper content, no styling --- web/routes/index.js | 3 ++- web/views/index.pug | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 54 insertions(+), 3 deletions(-) diff --git a/web/routes/index.js b/web/routes/index.js index 2a828bc..05df4d4 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -12,7 +12,8 @@ const glookup = new GeoJsonGeometriesLookup(torontoNeighbourhoords); /* GET home page. */ router.get('/', function(req, res, next) { // for now just redirect to /map - res.redirect('/map'); + //res.redirect('/map'); + res.render('index'); }); /* GET Map page. */ diff --git a/web/views/index.pug b/web/views/index.pug index be7ff98..8adb664 100644 --- a/web/views/index.pug +++ b/web/views/index.pug @@ -1,5 +1,55 @@ extends layout block content - h1= title - p Welcome to our site, please go to /map to see a map + h1 Welcome to Helpthehome(less) + h2 About this project + p + | This project is under the UN's SDG Goals + | + a(href="https://www.un.org/sustainabledevelopment/sustainable-development-goals/") (Sustainable Development Goals) + | + | umbrella. The issue it tries to address, falls under Goal 1: No Poverty. + p + | Our small attempt to tackle this issue involves helping with the + | + strong visibly homeless + | + | in the City of Toronto. + p + | This project contains two main components: mobile, and web. The Mobile component consists of a mobile app through which an ordinary citizen may report the location, and a few identifying characteristics of a homeless person they see. + | Once they submit the report on the app, the Web component receives this report and displays it so that an outreach worker can take appropriate action. + p + | Note: We do not store any personal data from any user in order to use this service. + h2 How it works + p + | Adding /map to the URL above will load a new page with the Map of City of Toronto. + br + | On this map you will find map Markers. + br + | Each marker represents a Report sent in by our companion mobile application by an anonymous person in the city. The position of the marker on the map corresponds to the location of the homeless person in the city. + br + | This report contains useful information about spotting a homeless person. The report can be accessed by clicking on any one of the Markers. + p + | The page can be accessed + | + a(href="/map") here + | . + h2 How it's built + ul + li Website + ul + li HTML/CSS/Javascript (ES6) + li MongoDB, Express, Pug, NodeJs + li OpenStreetMap, Leaflet.js, Jquery + li: a(href="https://portal0.cf.opendata.inter.sandbox-toronto.ca/dataset/neighbourhoods/") City Neighborhood data + li Mobile + ul + li Javascript + li React-Native, Expo + h2 Who built it + ul + li Samarth Agarwal, GitHub + li Fahim Ahmed, GitHub + li Kumar Damani, GitHub + li Andrew Mihai, GitHub + li Ivan Shen, GitHub -- cgit v1.2.3 From b690e02cf870fd7ec14d3efcde9b0ffc5793a88a Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 8 Apr 2019 22:15:24 -0400 Subject: added very minimal styling --- web/public/stylesheets/home.css | 18 +++++++ web/views/index.pug | 113 +++++++++++++++++++++------------------- 2 files changed, 76 insertions(+), 55 deletions(-) create mode 100644 web/public/stylesheets/home.css diff --git a/web/public/stylesheets/home.css b/web/public/stylesheets/home.css new file mode 100644 index 0000000..28251ed --- /dev/null +++ b/web/public/stylesheets/home.css @@ -0,0 +1,18 @@ +body { + background-color: #faf2e4; + margin: 0 15%; + font: 18px sans-serif; +} + +h1 { + text-align: center; + font-family: serif; + font-weight: normal; + border-bottom: 1px solid #57b1dc; + margin-top: 30px; +} + +h2 { + color: #d1633c; + font-family: serif; +} diff --git a/web/views/index.pug b/web/views/index.pug index 8adb664..f38e645 100644 --- a/web/views/index.pug +++ b/web/views/index.pug @@ -1,55 +1,58 @@ -extends layout - -block content - h1 Welcome to Helpthehome(less) - h2 About this project - p - | This project is under the UN's SDG Goals - | - a(href="https://www.un.org/sustainabledevelopment/sustainable-development-goals/") (Sustainable Development Goals) - | - | umbrella. The issue it tries to address, falls under Goal 1: No Poverty. - p - | Our small attempt to tackle this issue involves helping with the - | - strong visibly homeless - | - | in the City of Toronto. - p - | This project contains two main components: mobile, and web. The Mobile component consists of a mobile app through which an ordinary citizen may report the location, and a few identifying characteristics of a homeless person they see. - | Once they submit the report on the app, the Web component receives this report and displays it so that an outreach worker can take appropriate action. - p - | Note: We do not store any personal data from any user in order to use this service. - h2 How it works - p - | Adding /map to the URL above will load a new page with the Map of City of Toronto. - br - | On this map you will find map Markers. - br - | Each marker represents a Report sent in by our companion mobile application by an anonymous person in the city. The position of the marker on the map corresponds to the location of the homeless person in the city. - br - | This report contains useful information about spotting a homeless person. The report can be accessed by clicking on any one of the Markers. - p - | The page can be accessed - | - a(href="/map") here - | . - h2 How it's built - ul - li Website - ul - li HTML/CSS/Javascript (ES6) - li MongoDB, Express, Pug, NodeJs - li OpenStreetMap, Leaflet.js, Jquery - li: a(href="https://portal0.cf.opendata.inter.sandbox-toronto.ca/dataset/neighbourhoods/") City Neighborhood data - li Mobile - ul - li Javascript - li React-Native, Expo - h2 Who built it - ul - li Samarth Agarwal, GitHub - li Fahim Ahmed, GitHub - li Kumar Damani, GitHub - li Andrew Mihai, GitHub - li Ivan Shen, GitHub +doctype html +html + head + title Welcome to Helpthehome + link(rel='stylesheet', href='/stylesheets/home.css') + body + h1 Welcome to Helpthehome(less) + h2 About this project + p + | This project is under the UN's SDG Goals + | + a(href="https://www.un.org/sustainabledevelopment/sustainable-development-goals/") (Sustainable Development Goals) + | + | umbrella. The issue it tries to address, falls under Goal 1: No Poverty. + p + | Our small attempt to tackle this issue involves helping with the + | + strong visibly homeless + | + | in the City of Toronto. + p + | This project contains two main components: mobile, and web. The Mobile component consists of a mobile app through which an ordinary citizen may report the location, and a few identifying characteristics of a homeless person they see. + | Once they submit the report on the app, the Web component receives this report and displays it so that an outreach worker can take appropriate action. + p + | Note: We do not store any personal data from any user in order to use this service. + h2 How it works + p + | Adding /map to the URL above will load a new page with the Map of City of Toronto. + br + | On this map you will find map Markers. + br + | Each marker represents a Report sent in by our companion mobile application by an anonymous person in the city. The position of the marker on the map corresponds to the location of the homeless person in the city. + br + | This report contains useful information about spotting a homeless person. The report can be accessed by clicking on any one of the Markers. + p + | The page can be accessed + | + a(href="/map") here + | . + h2 How it's built + ul + li Website + ul + li HTML/CSS/Javascript (ES6) + li MongoDB, Express, Pug, NodeJs + li OpenStreetMap, Leaflet.js, Jquery + li: a(href="https://portal0.cf.opendata.inter.sandbox-toronto.ca/dataset/neighbourhoods/") City Neighborhood data + li Mobile + ul + li Javascript + li React-Native, Expo + h2 Who built it + ul + li Samarth Agarwal, GitHub + li Fahim Ahmed, GitHub + li Kumar Damani, GitHub + li Andrew Mihai, GitHub + li Ivan Shen, GitHub -- cgit v1.2.3 From 5e4bcf6cf9aabe46d544db8c56f33fb08543cc49 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 8 Apr 2019 22:18:19 -0400 Subject: copy edit --- web/views/index.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/views/index.pug b/web/views/index.pug index f38e645..4de1efd 100644 --- a/web/views/index.pug +++ b/web/views/index.pug @@ -33,7 +33,7 @@ html br | This report contains useful information about spotting a homeless person. The report can be accessed by clicking on any one of the Markers. p - | The page can be accessed + | The map page can be accessed | a(href="/map") here | . -- cgit v1.2.3 From 750db994aaba6af8205ce62d4e05de19aaa508f6 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 18 Apr 2019 19:37:12 -0400 Subject: updated readmes, removed db url link --- mobile/README.md | 31 +++++++++++++++++++++++++++++++ web/README.md | 20 ++++++++++---------- web/app.js | 2 -- 3 files changed, 41 insertions(+), 12 deletions(-) create mode 100644 mobile/README.md diff --git a/mobile/README.md b/mobile/README.md new file mode 100644 index 0000000..5517dd1 --- /dev/null +++ b/mobile/README.md @@ -0,0 +1,31 @@ +# The Mobile Component + +## Installation + +### Requirements + +1. npm +2. Mobile emulator or real a device with Expo Client [Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www), [iOS](https://itunes.apple.com/app/apple-store/id982107779) installed + +### Steps + +1. From this directory: + + `npm install` + + `npm start` + + This should open your browser to a page on localhost created by Expo with a QR code. + +2. Open the Expo Client and scan the QR code from the browser. The app now build on the device. + +> Note: If you want to connect to the Web Component from the mobile, you need to have the Web Component running simultaneously on localhost. Then you need to update the ip address found in app.json under "apiUrl" under "dev" to your local ip. Leave the port and remainder url as is. + +## Latest Production build (master branch) + +https://expo.io/@csc301dreamteam/helpthehome?release-channel=prod + +## Latest QA build (qa branch) + +https://expo.io/@csc301dreamteam/helpthehome?release-channel=staging + diff --git a/web/README.md b/web/README.md index b7f02b3..66790a1 100644 --- a/web/README.md +++ b/web/README.md @@ -1,20 +1,20 @@ -# The web component +# The Web Component -## How to run in your LOCAL env: +## Installation ### Requirements 1. docker (or local mongodb install) 2. npm -#### Steps +### Steps +> Docker steps below might not work on Windows. Refer to Docker docs. -1. Spawn up a docker container with mongodb OR start mongo from local install +1. Spawn up a docker container with mongodb OR start mongo from your local install `docker run -d --name mymongo -p 27017:27017 mongo` - -2. Now you are ready to start the app: +2. Now you are ready to start the web component: From this directory: @@ -24,13 +24,13 @@ Then open your browser to `localhost:3000` -You should be greeted with a page with a map. From next time onwards, just start up the mongo container with `docker start mymongo`. +You should be greeted with the home page. From next time onwards, just start up the mongo container with `docker start mymongo`. -## You can view the current latest production site on Heroku (master branch) +## Latest Production site (master branch) -not yet. +https://helpthehome-prod.herokuapp.com/ -## You can view the current latest QA site on Heroku (qa branch) +## Latest QA site (qa branch) https://helpthehome-qa.herokuapp.com/ diff --git a/web/app.js b/web/app.js index aa2e75b..d2831a9 100644 --- a/web/app.js +++ b/web/app.js @@ -25,8 +25,6 @@ var env = process.env.NODE_ENV || 'development'; var uri; if (env === 'development') { uri = 'mongodb://localhost:27017/helpthehome' - // use for small testing only if really necessary - // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome_devel?retryWrites=true' } else { // for qa and production set it on heroku config vars uri = process.env.MONGODB_URI -- cgit v1.2.3 From 14f3642f1ea4d32c17d56ffebf5cfd14fb5f5f2c Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 18 Apr 2019 21:20:51 -0400 Subject: web ui updates --- web/README.md | 1 + web/public/assets/blue-icon-focused.png | Bin 4220 -> 0 bytes web/public/assets/blue-icon.png | Bin 2586 -> 0 bytes web/public/assets/orange-icon-focused.png | Bin 7428 -> 0 bytes web/public/assets/orange-icon.png | Bin 12341 -> 0 bytes web/public/images/blue-icon-focused.png | Bin 0 -> 4220 bytes web/public/images/blue-icon.png | Bin 0 -> 2586 bytes web/public/images/marker-shadow.png | Bin 0 -> 618 bytes web/public/images/orange-icon-focused.png | Bin 0 -> 7428 bytes web/public/images/orange-icon.png | Bin 0 -> 12341 bytes web/public/javascripts/map.js | 21 +++++++++++---------- web/public/stylesheets/style.css | 26 +++++++++++++++----------- 12 files changed, 27 insertions(+), 21 deletions(-) delete mode 100644 web/public/assets/blue-icon-focused.png delete mode 100644 web/public/assets/blue-icon.png delete mode 100644 web/public/assets/orange-icon-focused.png delete mode 100644 web/public/assets/orange-icon.png create mode 100644 web/public/images/blue-icon-focused.png create mode 100644 web/public/images/blue-icon.png create mode 100644 web/public/images/marker-shadow.png create mode 100644 web/public/images/orange-icon-focused.png create mode 100644 web/public/images/orange-icon.png diff --git a/web/README.md b/web/README.md index 66790a1..622751d 100644 --- a/web/README.md +++ b/web/README.md @@ -8,6 +8,7 @@ 2. npm ### Steps + > Docker steps below might not work on Windows. Refer to Docker docs. 1. Spawn up a docker container with mongodb OR start mongo from your local install diff --git a/web/public/assets/blue-icon-focused.png b/web/public/assets/blue-icon-focused.png deleted file mode 100644 index 728d06d..0000000 Binary files a/web/public/assets/blue-icon-focused.png and /dev/null differ diff --git a/web/public/assets/blue-icon.png b/web/public/assets/blue-icon.png deleted file mode 100644 index e4abba3..0000000 Binary files a/web/public/assets/blue-icon.png and /dev/null differ diff --git a/web/public/assets/orange-icon-focused.png b/web/public/assets/orange-icon-focused.png deleted file mode 100644 index 26d8b52..0000000 Binary files a/web/public/assets/orange-icon-focused.png and /dev/null differ diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png deleted file mode 100644 index 4b89e0e..0000000 Binary files a/web/public/assets/orange-icon.png and /dev/null differ diff --git a/web/public/images/blue-icon-focused.png b/web/public/images/blue-icon-focused.png new file mode 100644 index 0000000..728d06d Binary files /dev/null and b/web/public/images/blue-icon-focused.png differ diff --git a/web/public/images/blue-icon.png b/web/public/images/blue-icon.png new file mode 100644 index 0000000..e4abba3 Binary files /dev/null and b/web/public/images/blue-icon.png differ diff --git a/web/public/images/marker-shadow.png b/web/public/images/marker-shadow.png new file mode 100644 index 0000000..9fd2979 Binary files /dev/null and b/web/public/images/marker-shadow.png differ diff --git a/web/public/images/orange-icon-focused.png b/web/public/images/orange-icon-focused.png new file mode 100644 index 0000000..26d8b52 Binary files /dev/null and b/web/public/images/orange-icon-focused.png differ diff --git a/web/public/images/orange-icon.png b/web/public/images/orange-icon.png new file mode 100644 index 0000000..4b89e0e Binary files /dev/null and b/web/public/images/orange-icon.png differ diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 5326bb2..3f1f040 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -15,10 +15,11 @@ const Races = { const PendingIcon = new L.Icon({ iconAnchor: [ 12, 41 ], - iconUrl: "../assets/orange-icon.png", + iconUrl: "../images/orange-icon.png", iconSize: [ 25, 41 ], popupAnchor: [ 1, -34 ], shadowSize: [ 41, 41 ], + shadowUrl: "../images/marker-shadow.png", tooltipAnchor: [ 16, -28 ] }); @@ -44,22 +45,22 @@ function plotPointsOnMap(points) { function showDetails(e) { if(currPoint !== undefined) { if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../assets/blue-icon.png'; + currPoint._icon.src = '../images/blue-icon.png'; } else if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../assets/orange-icon.png'; + currPoint._icon.src = '../images/orange-icon.png'; } } // layer.feature.geometry gives you access to all the fields let layer = e.layer; currPoint = layer; - + if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../assets/blue-icon-focused.png'; + currPoint._icon.src = '../images/blue-icon-focused.png'; } else if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../assets/orange-icon-focused.png'; + currPoint._icon.src = '../images/orange-icon-focused.png'; } const pointBounds = [currPoint.getLatLng()]; @@ -128,13 +129,13 @@ function markAsPending(e) { let currPointId = currPointDetails._id; if (currPointDetails.status === "pending") return; - currPoint._icon.src = '../assets/orange-icon-focused.png'; + currPoint._icon.src = '../images/orange-icon-focused.png'; currPointDetails.status = "pending"; updatePointStatusInDb(currPointId, "pending") .then(function(responseJson) { alert("Your change has been saved."); - currPoint._icon.src = '../assets/orange-icon-focused.png'; + currPoint._icon.src = '../images/orange-icon-focused.png'; }) .catch(function(error) { alert(error); @@ -163,10 +164,10 @@ function closeDetails(e) { details.style.visibility = 'hidden'; if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../assets/orange-icon.png'; + currPoint._icon.src = '../images/orange-icon.png'; } else if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../assets/blue-icon.png'; + currPoint._icon.src = '../images/blue-icon.png'; } } diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 5f39fcf..fd6ed87 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -21,11 +21,14 @@ a { left: 5px; z-index: 2; width: 350px; + height: 99vh; position: relative; float: left; - background-color: lightgrey; + background-color: #7b7b7b33; border-radius: 10px; visibility: hidden; + display: flex; + flex-direction: column; } #details-header { text-align: center; @@ -34,15 +37,16 @@ a { } #report-container { overflow: auto; - max-height: 500px; + height: 80vh; } #report { - background-color: #0CC5EA; + background-color: #5694AD; + box-shadow: 10px 10px 8px -5px #888; width: 90%; margin-left: auto; margin-right: auto; margin-bottom: 5px; - padding: 5px; + padding: 0px; border-radius: 10px; display: flex; justify-content: flex-end; @@ -57,7 +61,6 @@ a { #report span { background-color: white; padding: 15px; - border-radius: 10px; font-weight: lighter; font-size: large; text-align: center; @@ -65,13 +68,14 @@ a { word-wrap: break-word; } #btn-container { - height: 30px; - top: 250px; - background-color: lightgrey; width: 350px; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - text-align: center; + position: absolute; + bottom: 0; + margin-top: 10px; + margin-bottom: 10px; +} +#btn-container button { + box-shadow: 5px 5px 8px #888; } .details-btn { position: relative; -- cgit v1.2.3 From 8f0e47f48bd732eee3a825dd6626fd3a759b1985 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 18 Apr 2019 22:04:44 -0400 Subject: bug fix for initial load without any points --- web/public/javascripts/map.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 3f1f040..1f18e09 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -169,6 +169,7 @@ function closeDetails(e) { else if (currPoint.feature.geometry.status === "new") { currPoint._icon.src = '../images/blue-icon.png'; } + map.fitBounds(latlngbounds.pad(0.20)); } // returns a Promise object @@ -201,7 +202,10 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} // map to fit them all var latlngbounds = new L.latLngBounds(); -plotPointsOnMap(points); +if (points.length) { + plotPointsOnMap(points); +} +// setup live updates if (window.EventSource) { var source = new EventSource('/stream'); -- cgit v1.2.3 From f5d81a36b4869ad0f91aa97451cbbc26004889d6 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 22 Apr 2019 21:31:03 -0400 Subject: removing jquery as never used --- web/views/layout.pug | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/web/views/layout.pug b/web/views/layout.pug index f46138c..900a601 100644 --- a/web/views/layout.pug +++ b/web/views/layout.pug @@ -2,11 +2,8 @@ doctype html html head title= title - link(rel='stylesheet', href='https://unpkg.com/leaflet@1.0.3/dist/leaflet.css') - link(rel='stylesheet', href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css') + link(rel='stylesheet', href='https://unpkg.com/leaflet@1.4.0/dist/leaflet.css') link(rel='stylesheet', href='/stylesheets/style.css') - script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js') - script(src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js') - script(src='https://unpkg.com/leaflet@1.0.3/dist/leaflet.js') + script(src='https://unpkg.com/leaflet@1.4.0/dist/leaflet.js') body block content -- cgit v1.2.3