diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/README.md | 21 | ||||
| -rw-r--r-- | web/app.js | 2 | ||||
| -rw-r--r-- | web/public/images/blue-icon-focused.png (renamed from web/public/assets/blue-icon-focused.png) | bin | 4220 -> 4220 bytes | |||
| -rw-r--r-- | web/public/images/blue-icon.png (renamed from web/public/assets/blue-icon.png) | bin | 2586 -> 2586 bytes | |||
| -rw-r--r-- | web/public/images/marker-shadow.png | bin | 0 -> 618 bytes | |||
| -rw-r--r-- | web/public/images/orange-icon-focused.png (renamed from web/public/assets/orange-icon-focused.png) | bin | 7428 -> 7428 bytes | |||
| -rw-r--r-- | web/public/images/orange-icon.png (renamed from web/public/assets/orange-icon.png) | bin | 12341 -> 12341 bytes | |||
| -rw-r--r-- | web/public/javascripts/map.js | 27 | ||||
| -rw-r--r-- | web/public/stylesheets/home.css | 18 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 26 | ||||
| -rw-r--r-- | web/routes/index.js | 3 | ||||
| -rw-r--r-- | web/views/index.pug | 63 | ||||
| -rw-r--r-- | web/views/layout.pug | 7 |
13 files changed, 122 insertions, 45 deletions
diff --git a/web/README.md b/web/README.md index b7f02b3..622751d 100644 --- a/web/README.md +++ b/web/README.md @@ -1,20 +1,21 @@ -# 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 -1. Spawn up a docker container with mongodb OR start mongo from local install +> Docker steps below might not work on Windows. Refer to Docker docs. - `docker run -d --name mymongo -p 27017:27017 mongo` +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 +25,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/ @@ -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 diff --git a/web/public/assets/blue-icon-focused.png b/web/public/images/blue-icon-focused.png Binary files differindex 728d06d..728d06d 100644 --- a/web/public/assets/blue-icon-focused.png +++ b/web/public/images/blue-icon-focused.png diff --git a/web/public/assets/blue-icon.png b/web/public/images/blue-icon.png Binary files differindex e4abba3..e4abba3 100644 --- a/web/public/assets/blue-icon.png +++ b/web/public/images/blue-icon.png diff --git a/web/public/images/marker-shadow.png b/web/public/images/marker-shadow.png Binary files differnew file mode 100644 index 0000000..9fd2979 --- /dev/null +++ b/web/public/images/marker-shadow.png diff --git a/web/public/assets/orange-icon-focused.png b/web/public/images/orange-icon-focused.png Binary files differindex 26d8b52..26d8b52 100644 --- a/web/public/assets/orange-icon-focused.png +++ b/web/public/images/orange-icon-focused.png diff --git a/web/public/assets/orange-icon.png b/web/public/images/orange-icon.png Binary files differindex 4b89e0e..4b89e0e 100644 --- a/web/public/assets/orange-icon.png +++ b/web/public/images/orange-icon.png diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 5326bb2..1f18e09 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,11 +164,12 @@ 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'; } + map.fitBounds(latlngbounds.pad(0.20)); } // returns a Promise object @@ -200,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'); 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/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; 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..4de1efd 100644 --- a/web/views/index.pug +++ b/web/views/index.pug @@ -1,5 +1,58 @@ -extends layout - -block content - h1= title - p Welcome to our site, please go to /map to see a map +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 <strong>Mobile</strong> 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 <strong>Web</strong> 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 <em>/map</em> to the URL above will load a new page with the <strong>Map</strong> of City of Toronto. + br + | On this map you will find map <strong>Markers</strong>. + br + | Each marker represents a <strong>Report</strong> 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 map 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, <a href="https://github.com/Samarth-Agarwal1">GitHub</a> + li Fahim Ahmed, <a href="https://github.com/fahim1997">GitHub</a> + li Kumar Damani, <a href="https://github.com/kdam0">GitHub</a> + li Andrew Mihai, <a href="https://github.com/AndrewMihai">GitHub</a> + li Ivan Shen, <a href="https://github.com/ivanshen">GitHub</a> 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 |
