Azusa Kawakami / CSE 170 Group Project

Download as
Browse Code ยป

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 Side-by-side Diff

.env View file @ e95e3f8
  1 +TIMES=2
Procfile View file @ e95e3f8
  1 +web: node index.js
README.md View file @ e95e3f8
  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
  28 +
  29 +[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)
  30 +
  31 +## Documentation
  32 +
  33 +For more information about using Node.js on Heroku, see these Dev Center articles:
  34 +
  35 +- [Getting Started with Node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs)
  36 +- [Heroku Node.js Support](https://devcenter.heroku.com/articles/nodejs-support)
  37 +- [Node.js on Heroku](https://devcenter.heroku.com/categories/nodejs)
  38 +- [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices)
  39 +- [Using WebSockets on Heroku with Node.js](https://devcenter.heroku.com/articles/node-websockets)
app.json View file @ e95e3f8
  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 +}
index.js View file @ e95e3f8
  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 +
  17 +app.get('/landing', function(request, response) {
  18 + response.render('pages/landing');
  19 +});
  20 +
  21 +app.listen(app.get('port'), function() {
  22 + console.log('Node app is running on port', app.get('port'));
  23 +});
package.json View file @ e95e3f8
  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
  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
  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 +}
  20 +
  21 +.text-field {
  22 + margin-top: 30px;
  23 + margin-bottom: 30px;
  24 +}
public/views/index.html View file @ e95e3f8
1   -<!DOCTYPE html>
2   -<html lang="en">
3   - <head>
4   - <meta charset="utf-8">
5   - <!-- Ensure that Bootstrap is mobile friendly -->
6   - <meta name="viewport" content="width=device-width, initial-scale=1">
7   - <!-- Latest compiled and minified CSS -->
8   - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9   -
10   - <!-- Optional theme -->
11   - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
12   -
13   - <!-- Latest compiled and minified JavaScript -->
14   - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head>
15   -
16   -
17   - <body>
18   -<!-- <nav class="fixed-nav-bar group nav-collapse">
19   - <ul class="group">
20   - <li><a href="Files/PaulWallaceResume.6.1.1.pdf" class="resume-link" target="_blank">Resume</a></li>
21   - </ul>
22   - <a href="#" id="pull" ontouchend="this.onclick=fix">Menu</a>
23   - </nav> -->
24   -
25   - <!--asdifhasdfasdfapsdbfasdfa-->
26   -
27   -
28   -
29   - <div class="container-fluid">
30   -
31   -
32   - <div class="jumbotron text-center">
33   - <h1>Safe Routes</h1>
34   - <p>The best way to find the safest routes.</p>
35   - </div>
36   -
37   - <!--What are for and type for?-->
38   -
39   - <form class="text-center">
40   - <div class="form-group text-center">
41   - <label for="currentLocation">From</label>
42   - <input type="currentLocation" class="form-control" placeholder="Enter Current Location">
43   - </div>
44   -
45   - <div class="form-group text-center">
46   - <label for="destination">To</label>
47   - <input type="destination" class="form-control" placeholder="Enter Destination">
48   - </div>
49   - <button type="submit" class="btn btn-primary">Go</button>
50   - </form>
51   -
52   - </div>
53   -
54   - </body>
55   -</html>
views/pages/db.ejs View file @ e95e3f8
  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 + <% }); %>
  18 +</ul>
  19 +
  20 +</div>
  21 +
  22 +</body>
  23 +</html>
views/pages/index.ejs View file @ e95e3f8
  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">
  34 + </div>
  35 +
  36 + <div class="form-group text-center">
  37 + <label for="destination">To</label>
  38 + <input type="destination" class="form-control" placeholder="Enter Destination">
  39 + </div>
  40 + <button type="submit" class="btn btn-primary">Go</button>
  41 + </form>
  42 +
  43 + </div>
  44 +
  45 + </body>
  46 +</html>
views/pages/landing.ejs View file @ e95e3f8
  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>
  80 +
  81 +
  82 + <script>
  83 + function todo() {
  84 + alert("This button is brought to you by the wonderful Wizard of Oz.");
  85 + }
  86 + </script>
  87 +
  88 + </body>
  89 +</html>
views/partials/header.ejs View file @ e95e3f8
  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 +
  13 + <!-- Latest compiled and minified JavaScript -->
  14 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  15 +
  16 + <link rel="stylesheet" type="text/css" href="stylesheets/main.css">
views/partials/nav.ejs View file @ e95e3f8
  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>