Chapter 04 views

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+.env
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/cli/shrinkwrap#caveats
+node_modules
+
+# Debug log from npm
+npm-debug.log

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:11.2.0-alpine
+
+RUN apk add --no-cache curl-dev libzip-dev autoconf build-base gmp-dev coreutils python
+
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+COPY . /usr/src/app
+
+RUN npm i
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

Procfile

@@ -0,0 +1 @@
+web: npm start

README.md

@@ -1 +1,45 @@
-# gettingMean-2
+# gettingMean-2
+# Getting MEAN Second Edition application code
+
+This is the code for the sample 'Loc8r' application that is built through the course of the book Getting MEAN Second Edition.
+
+Getting MEAN Second Edition is published by Manning, and teaches readers how to develop web applications end-to-end using the MEAN stack with Node 10 and Angular 6. It is currently in early access through the MEAP program, with new chapters being released regularly.
+
+> Note: if you have the First Edition of the book using Node 4 and Angular 1 you need the [First Edition code](https://github.com/simonholmes/getting-MEAN/) instead.
+
+## The application at various stages
+
+There will be named branches for the various states of the code throughout the book:
+
+* `master` **Chapter 3 start**: A blank Express 4.16.3 project
+* `chapter-03` **Chapter 3 end**: Creating and setting up a MEAN project
+* `chapter-04-views` **Chapter 4 mid-point**: The data is hard coded into views
+* `chapter-04` **Chapter 4 end**: Building a static site with Node.js and Express
+* `chapter-05` **Chapter 5**: Building a data model with MongoDB and Mongoose
+* `chapter-06` **Chapter 6**: Writing a REST API: Exposing your MongoDB database to the application
+* `chapter-07` **Chapter 7**: Consuming a REST API: Using an API from inside Express
+* `chapter-08` **Chapter 8**: Creating an Angular application with TypeScript
+* `chapter-09` **Chapter 9**: Building a Single Page Application with Angular
+* `chapter-10` **Chapter 10**: Building a Single Page Application with Angular: The next level
+* `chapter-11` **Chapter 11**: Authenticating users, managing sessions and securing APIs
+* `chapter-12` **Chapter 12**: Using an authentication API in Angular applications
+
+## Get the code
+
+Pre-requisites:
+
+* Git installed
+* A command line interface capable of running Git commands
+* Node v6 installed (don't use 7 as it is unstable)
+
+To get the code for a specific branch:
+
+`$ git clone -b branch-name https://github.com/simonholmes/getting-MEAN-2.git`
+
+Then change into the folder the git clone command will create:
+
+`$ cd getting-MEAN-2`
+
+And finally install the dependencies:
+
+`npm install`

app.js

@@ -0,0 +1,41 @@
+const createError = require('http-errors');
+const express = require('express');
+const path = require('path');
+const cookieParser = require('cookie-parser');
+const logger = require('morgan');
+
+const indexRouter = require('./app_server/routes/index');
+const usersRouter = require('./app_server/routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'app_server', 'views'));
+app.set('view engine', 'pug');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

app_server/controllers/locations.js

@@ -0,0 +1,17 @@
+const homelist = (req, res) => {
+  res.render('locations-list', { title: 'Home' });
+};
+
+const locationInfo = (req, res) => {
+  res.render('location-info', { title: 'Location Info' });
+};
+
+const addReview = (req, res) => {
+  res.render('location-review-form', { title: 'Add review' });
+};
+
+module.exports = {
+  homelist,
+  locationInfo,
+  addReview
+};

app_server/controllers/others.js

@@ -0,0 +1,8 @@
+/* GET homepage */
+const about = (req, res) => {
+  res.render('generic-text', { title: 'About' });
+};
+
+module.exports = {
+  about
+};

app_server/routes/index.js

@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const ctrlLocations = require('../controllers/locations');
+const ctrlOthers = require('../controllers/others');
+
+router.get('/', ctrlLocations.homelist);
+router.get('/location', ctrlLocations.locationInfo);
+router.get('/location/review/new', ctrlLocations.addReview);
+
+router.get('/about', ctrlOthers.about);
+
+module.exports = router;

app_server/routes/users.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;

app_server/views/error.pug

@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}

app_server/views/generic-text.pug

@@ -0,0 +1,12 @@
+extends layout
+
+block content
+  .row.banner
+    .col-12
+      h1= title
+  .row
+    .col-12.col-lg-8
+      p
+        | Loc8r was created to help people find places to sit down and get a bit of work done.
+        | <br /><br />
+        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lorem ac nisi dignissim accumsan.

app_server/views/index.pug

@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}

app_server/views/layout.pug

@@ -0,0 +1,30 @@
+doctype html
+html
+  head
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    title= title
+    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
+    link(rel='stylesheet', href='/stylesheets/all.min.css')
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+    nav.navbar.fixed-top.navbar-expand-md
+        .container
+            a.navbar-brand(href='/') Loc8r
+            button.navbar-toggler.navbar-toggler-left(type='button', data-toggle='collapse', data-target='#navbarMain')
+                span.navbar-toggler-icon
+            #navbarMain.navbar-collapse.collapse
+                ul.navbar-nav.mr-auto
+                    li.nav-item
+                        a.nav-link(href='/about/') About
+
+    .container.content
+        block content
+
+        footer
+            .row
+                .col-12
+                    small © Getting Mean - Simon Holmes/Clive Harber 2018
+
+    script(src='https://code.jquery.com/jquery-3.3.1.slim.min.js')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js')
+    script(src='/javascripts/bootstrap.min.js')

app_server/views/location-info.pug

@@ -0,0 +1,79 @@
+extends layout
+
+block content
+  .row.banner
+    .col-12
+      h1 Starcups
+  .row
+    .col-12.col-lg-9
+      .row
+        .col-12.col-md-6
+          p.rating
+            i.fas.fa-star
+            i.fas.fa-star
+            i.fas.fa-star
+            i.far.fa-star
+            i.far.fa-star
+          p 125 High Street, Reading, RG6 1PS
+          .card.card-primary
+            .card-block
+              h2.card-title Opening hours
+              p.card-text Monday - Friday : 7:00am - 7:00pm
+              p.card-text Saturday : 8:00am - 5:00pm
+              p.card-text Sunday : closed
+          .card.card-primary
+            .card-block
+              h2.card-title Facilities
+              span.badge.badge-warning
+                i.fa.fa-check
+                |  Hot drinks
+              |  
+              span.badge.badge-warning
+                i.fa.fa-check
+                |  Food
+              |  
+              span.badge.badge-warning
+                i.fa.fa-check
+                |  Premium wifi
+              |  
+        .col-12.col-md-6.location-map
+          .card.card-primary
+            .card-block
+              h2.card-title Location map
+              img.img-fluid.rounded(src='https://maps.googleapis.com/maps/api/staticmap?center=51.455041,-0.9690884&zoom=17&size=400x350&sensor=false&markers=51.455041,-0.9690884&scale=2')
+      .row
+        .col-12
+          .card.card-primary.review-card
+            .card-block
+              a.btn.btn-primary.float-right(href='/location/review/new') Add review
+              h2.card-title Customer reviews
+              .row.review
+                .col-12.no-gutters.review-header
+                  span.rating
+                    i.fas.fa-star
+                    i.fas.fa-star
+                    i.fas.fa-star
+                    i.far.fa-star
+                    i.far.fa-star
+                  span.reviewAuthor Simon Holmes
+                  small.reviewTimestamp 16 February 2017
+                .col-12
+                  p What a great place.
+              .row.review
+                .col-12.no-gutters.review-header
+                  span.rating
+                    i.fas.fa-star
+                    i.fas.fa-star
+                    i.fas.fa-star
+                    i.far.fa-star
+                    i.far.fa-star
+                  span.reviewAuthor Charlie Chaplin
+                  small.reviewTimestamp 14 February 2017
+                .col-12
+                  p It was okay. Coffee wasn't great.
+    .col-12.col-lg-3
+      p.lead
+        | Starcups is on Loc8r because it has accessible wifi and space to sit down with your laptop and get some work done.
+      p
+        | If you've been and you like it - or if you don't - please leave a review to help other people just like you.
+

app_server/views/location-review-form.pug

@@ -0,0 +1,29 @@
+extends layout
+
+block content
+  .row.banner
+    .col-12
+      h1 Review Starcups
+
+  .row
+    .col-12.col-md-8
+      form(action="/location", method="get", role="form")
+        .form-group.row
+          label.col-10.col-sm-2.col-form-label(for="name") Name
+          .col-12.col-sm-10
+            input#name.form-control(name="name")
+        .form-group.row
+          label.col-10.col-sm-2.col-form-label(for="rating") Rating
+          .col-12.col-sm-2
+            select#rating.form-control.input-sm(name="rating")
+              option 5
+              option 4
+              option 3
+              option 2
+              option 1
+        .form-group.row
+          label.col-10.col-sm-2.col-form-label(for="review") Review
+          .col-12.col-sm-10
+            textarea#review.form-control(name="review", rows="5")
+        button.btn.btn-primary.float-right Add my review
+    .col-12.col-md-4

app_server/views/locations-list.pug

@@ -0,0 +1,29 @@
+extends layout
+
+block content
+  .row.banner
+    .col-12
+      h1 Loc8r
+        small  Find places to work with wifi near you!
+
+  .row
+    .col-12.col-md-8
+      .card
+        .card-block
+          h4
+            a(href='/location') Starcups
+            small  
+              i.fas.fa-star
+              i.fas.fa-star
+              i.fas.fa-star
+              i.far.fa-star
+              i.far.fa-star
+            span.badge.badge-pill.badge-default.float-right 100m
+          p.address 125 High Street, Reading RG6 1PS
+          .facilities
+            span.badge.badge-warning Hot drinks
+            span.badge.badge-warning Food
+            span.badge.badge-warning Premium Wifi
+
+    .col-12.col-md-4
+      p.lead Looking for wifi and a seat? Loc8r helps you find places to work when out and about. Perhaps with coffee, cake or a pint? Let Loc8r help you find the place you're looking for.