Commit e95e3f84a5c6da7529f29f58de2598718bd6b535

Authored by Sing Chung Xiao
1 parent 038abefbdd
Exists in master

Refactored code for Nodejs and Heroku, added a landing page.

Showing 16 changed files with 348 additions and 55 deletions Inline Diff

File was created 1 TIMES=2
File was created 1 web: node index.js
File was created 1 # node-js-getting-started
2
3 A barebones Node.js app using [Express 4](http://expressjs.com/).
4
5 This application supports the [Getting Started with Node on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs) article - check it out.
6
7 ## Running Locally
8
9 Make sure you have [Node.js](http://nodejs.org/) and the [Heroku Toolbelt](https://toolbelt.heroku.com/) installed.
10
11 ```sh
12 $ git clone git@github.com:heroku/node-js-getting-started.git # or clone your own fork
13 $ cd node-js-getting-started
14 $ npm install
15 $ npm start
16 ```
17
18 Your app should now be running on [localhost:5000](http://localhost:5000/).
19
20 ## Deploying to Heroku
21
22 ```
23 $ heroku create
24 $ git push heroku master
25 $ heroku open
26 ```
27 or
File was created 1 {
2 "name": "Start on Heroku: Node.js",
3 "description": "A barebones Node.js app using Express 4",
4 "repository": "https://github.com/heroku/node-js-getting-started",
5 "logo": "http://node-js-sample.herokuapp.com/node.svg",
6 "keywords": ["node", "express", "static"],
7 "image": "heroku/nodejs"
8 }
File was created 1 var express = require('express');
2
3 var app = express();
4
5 app.set('port', (process.env.PORT || 5000));
6
7 app.use(express.static(__dirname + '/public'));
8
9 // views is directory for all template files
10 app.set('views', __dirname + '/views');
11 app.set('view engine', 'ejs');
12
13 app.get('/', function(request, response) {
14 response.render('pages/index');
15 });
16
package.json View file @ e95e3f8
File was created 1 {
2 "name": "node-js-getting-started",
3 "version": "0.2.5",
4 "description": "A sample Node.js app using Express 4",
5 "engines": {
6 "node": "5.9.1"
7 },
8 "main": "index.js",
9 "scripts": {
10 "start": "node index.js"
11 },
12 "dependencies": {
13 "ejs": "2.4.1",
14 "express": "4.13.3"
15 },
16 "repository": {
17 "type": "git",
18 "url": "https://github.com/heroku/node-js-getting-started"
19 },
20 "keywords": [
21 "node",
22 "heroku",
23 "express"
24 ],
25 "license": "MIT"
26 }
public/images/temp.png View file @ e95e3f8

234 KB

public/lang-logo.png View file @ e95e3f8

2.24 KB

public/node.svg View file @ e95e3f8
File was created 1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
6 <path fill="#8CC84B" d="M255.5,495.4c-6.4,0-12.8-1.7-18.4-4.9l-58.5-34.6c-8.7-4.9-4.5-6.6-1.6-7.6c11.7-4,14-5,26.5-12
7 c1.3-0.7,3-0.5,4.4,0.3l45,26.7c1.6,0.9,3.9,0.9,5.4,0L433.6,362c1.6-0.9,2.7-2.8,2.7-4.7V154.9c0-2-1-3.8-2.7-4.8L258.3,49
8 c-1.6-0.9-3.8-0.9-5.4,0L77.7,150.1c-1.7,1-2.8,2.9-2.8,4.8v202.3c0,1.9,1.1,3.8,2.8,4.7l48,27.7c26.1,13,42-2.3,42-17.7V172.2
9 c0-2.8,2.3-5.1,5.1-5.1H195c2.8,0,5.1,2.2,5.1,5.1V372c0,34.8-18.9,54.7-51.9,54.7c-10.1,0-18.1,0-40.4-11l-46-26.5
10 c-11.4-6.6-18.4-18.8-18.4-32V154.9c0-13.1,7-25.4,18.4-32L237.1,21.7c11.1-6.3,25.8-6.3,36.8,0L449.3,123
11 c11.4,6.6,18.4,18.8,18.4,32v202.3c0,13.1-7.1,25.4-18.4,32L274,490.5C268.4,493.7,262,495.4,255.5,495.4z"/>
12 <path fill="#8CC84B" d="M309.7,356c-76.7,0-92.8-35.2-92.8-64.8c0-2.8,2.3-5.1,5.1-5.1h22.7c2.5,0,4.6,1.8,5,4.3
13 c3.4,23.1,13.6,34.7,60,34.7c36.9,0,52.7-8.4,52.7-28c0-11.3-4.5-19.7-61.9-25.3c-48-4.7-77.6-15.3-77.6-53.7
14 c0-35.4,29.8-56.5,79.8-56.5c56.2,0,84,19.5,87.5,61.3c0.1,1.4-0.4,2.8-1.3,3.9c-1,1-2.3,1.6-3.7,1.6h-22.8c-2.4,0-4.4-1.7-4.9-4
15 c-5.5-24.3-18.7-32-54.8-32c-40.3,0-45,14-45,24.6c0,12.8,5.5,16.5,60,23.7c53.9,7.1,79.5,17.2,79.5,55.1
16 C397.1,334.1,365.3,356,309.7,356z"/>
17 </svg>
public/stylesheets/main.css View file @ e95e3f8
File was created 1 #alt-routes {
2 height: 75px;
3 }
4
5 #map {
6 margin-bottom: 10px;
7 }
8
9 #map-top {
10 margin-bottom: 30px;
11 }
12
13 .img-responsive {
14 margin: 0 auto;
15 }
16
17 .status {
18 margin-top: 5px;
19 }
public/views/index.html View file @ e95e3f8
<!DOCTYPE html> 1 File was deleted
<html lang="en"> 2
<head> 3
<meta charset="utf-8"> 4
<!-- Ensure that Bootstrap is mobile friendly --> 5
<meta name="viewport" content="width=device-width, initial-scale=1"> 6
<!-- Latest compiled and minified CSS --> 7
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 8
9
<!-- Optional theme --> 10
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 11
12
<!-- Latest compiled and minified JavaScript --> 13
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> 14
15
16
<body> 17
<!-- <nav class="fixed-nav-bar group nav-collapse"> 18
<ul class="group"> 19
<li><a href="Files/PaulWallaceResume.6.1.1.pdf" class="resume-link" target="_blank">Resume</a></li> 20
</ul> 21
<a href="#" id="pull" ontouchend="this.onclick=fix">Menu</a> 22
</nav> --> 23
24
<!--asdifhasdfasdfapsdbfasdfa--> 25
26
27
28
<div class="container-fluid"> 29
30
31
<div class="jumbotron text-center"> 32
<h1>Safe Routes</h1> 33
<p>The best way to find the safest routes.</p> 34
</div> 35
36
<!--What are for and type for?--> 37
38
<form class="text-center"> 39
<div class="form-group text-center"> 40
views/pages/db.ejs View file @ e95e3f8
File was created 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <% include ../partials/header.ejs %>
5 </head>
6
7 <body>
8
9 <% include ../partials/nav.ejs %>
10
11 <div class="container">
12 <h2>Database Results</h2>
13
14 <ul>
15 <% results.forEach(function(r) { %>
16 <li><%= r.id %> - <%= r.name %></li>
17 <% }); %>
views/pages/index.ejs View file @ e95e3f8
File was created 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <% include ../partials/header %>
5 </head>
6
7
8 <body>
9 <!-- <nav class="fixed-nav-bar group nav-collapse">
10 <ul class="group">
11 <li><a href="Files/PaulWallaceResume.6.1.1.pdf" class="resume-link" target="_blank">Resume</a></li>
12 </ul>
13 <a href="#" id="pull" ontouchend="this.onclick=fix">Menu</a>
14 </nav> -->
15
16 <!--asdifhasdfasdfapsdbfasdfa-->
17
18
19
20 <div class="container-fluid">
21
22
23 <div class="jumbotron text-center">
24 <h1>Safe Routes</h1>
25 <p>The best way to find the safest routes.</p>
26 </div>
27
28 <!--What are for and type for?-->
29
30 <form class="text-center" action="/landing">
31 <div class="form-group text-center">
32 <label for="currentLocation">From</label>
33 <input type="currentLocation" class="form-control" placeholder="Enter Current Location">
views/pages/landing.ejs View file @ e95e3f8
File was created 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <% include ../partials/header %>
5 </head>
6
7
8 <body>
9 <div class="container">
10
11 <!-- My LOCATION -->
12 <div>
13 <input type="text" class="form-control text-field" placeholder="MY LOCATION">
14 </div>
15 <!-- Destination -->
16 <div>
17 <input type="text" class="form-control text-field" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...">
18 </div>
19
20 <!-- Buttons and status information on top of the map. -->
21 <div class="container" id="map-top">
22 <div class="row">
23 <!-- Status -->
24 <div class="col-xs-6">
25 <!-- Title: Current Route -->
26 <div>
27 Current Route:
28 </div>
29 <!-- Icons + Status -->
30 <div class="row status">
31 <!-- Safety Rating -->
32 <div class="col-xs-6">
33 80% Safe
34 </div>
35 <!-- Travel Duration -->
36 <div class="col-xs-6">
37 10 Mins
38 </div>
39 </div>
40 </div>
41 <!-- Alt Routes -->
42 <div class="col-xs-6">
43 <button type="button" class="btn btn-default btn-block" id="alt-routes" onclick="todo()">Alternate Routes</button>
44 </div>
45 </div>
46 </div>
47
48 <!-- Google Maps -->
49 <div class="container" id="map">
50 <!-- Placeholder -->
51 <img class="img-responsive" src="images/temp.png" alt="temp" width="800" height="600">
52 </div>
53
54 <!-- Buttons at the bottom of the map -->
55 <div class="container">
56 <div class="row">
57 <!-- Status -->
58 <div class="col-xs-4">
59 <!-- Title: Current Area -->
60 <div>
61 Current Area:
62 </div>
63 <!-- Icons + Status -->
64 <div>
65 80% Safe
66 </div>
67 </div>
68 <!-- Emergency -->
69 <div class="col-xs-4">
70 <button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>
71 </div>
72 <!-- Open Map -->
73 <div class="col-xs-4">
74 <button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>
75 </div>
76 </div>
77 </div>
78
79 </div>
views/partials/header.ejs View file @ e95e3f8
File was created 1 <meta charset="utf-8">
2 <!-- Ensure that Bootstrap is mobile friendly -->
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <!-- Latest compiled and minified CSS -->
5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
6
7 <!-- Optional theme -->
8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
9
10 <!-- JQuery
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
12
views/partials/nav.ejs View file @ e95e3f8
File was created 1 <nav class="navbar navbar-default navbar-static-top navbar-inverse">
2 <div class="container">
3 <ul class="nav navbar-nav">
4 <li class="active">
5 <a href="/"><span class="glyphicon glyphicon-home"></span> Home</a>
6 </li>
7 <li>
8 <a href="https://devcenter.heroku.com/articles/how-heroku-works"><span class="glyphicon glyphicon-user"></span> How Heroku Works</a>
9 </li>
10 <li class="dropdown">
11 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-info-sign"></span> Getting Started Guides <span class="caret"></span></a>
12 <ul class="dropdown-menu" role="menu">
13 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-ruby">Getting Started with Ruby on Heroku</a></li>
14 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started with Node on Heroku</a></li>
15 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-php">Getting Started with PHP on Heroku</a></li>
16 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-python">Getting Started with Python on Heroku</a></li>
17 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-java">Getting Started with Java on Heroku</a></li>
18 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-go">Getting Started with Go on Heroku</a></li>
19 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-clojure">Getting Started with Clojure on Heroku</a></li>
20 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-scala">Getting Started with Scala on Heroku</a></li>
21 <li class="divider"></li>
22 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-heroku-and-connect-without-local-dev">Getting Started on Heroku with Heroku Connect</a></li>
23 <li><a href="https://devcenter.heroku.com/articles/getting-started-with-jruby">Getting Started with Ruby on Heroku (Microsoft Windows)</a></li>
24 </ul>
25 </li>
26 </ul>
27 <ul class="nav navbar-nav navbar-right">
28 <li class="navbar-right">
29 <a href="https://devcenter.heroku.com"><span class="glyphicon glyphicon-book"></span> Heroku Dev Center</a>
30 </li>
31 </ul>
32 </div>
33 </nav>