Merge pull request #3 from rbs333/transiiton-from-bottom

Transiiton from bottom

.editorconfig

@@ -1,13 +1,13 @@
-# Editor configuration, see http://editorconfig.org
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
 root = true
 
 [*]
-charset = utf-8
 indent_style = space
 indent_size = 2
-insert_final_newline = true
+end_of_line = lf
+charset = utf-8
 trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
+insert_final_newline = true

.eslintignore

@@ -0,0 +1 @@
+/client/

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "loopback"
+}

.yo-rc.json

@@ -0,0 +1,3 @@
+{
+  "generator-loopback": {}
+}

client/README.md

@@ -0,0 +1,3 @@
+## Client
+
+This is the place for your application front-end files.

server/boot/authentication.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = function enableAuthentication(server) {
+  // enable authentication
+  server.enableAuth();
+};

server/boot/root.js

@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = function(server) {
+  // Install a `/` route that returns server status
+  var router = server.loopback.Router();
+  router.get('/', server.loopback.status());
+  server.use(router);
+};

server/component-config.json

@@ -0,0 +1,6 @@
+{
+  "loopback-component-explorer": {
+    "mountPath": "/explorer",
+    "generateOperationScopedModels": true
+  }
+}

server/config.json

@@ -0,0 +1,22 @@
+{
+  "restApiRoot": "/api",
+  "host": "0.0.0.0",
+  "port": 3000,
+  "remoting": {
+    "context": false,
+    "rest": {
+      "handleErrors": false,
+      "normalizeHttpPath": false,
+      "xml": false
+    },
+    "json": {
+      "strict": false,
+      "limit": "100kb"
+    },
+    "urlencoded": {
+      "extended": true,
+      "limit": "100kb"
+    },
+    "cors": false
+  }
+}

server/datasources.json

@@ -0,0 +1,6 @@
+{
+  "db": {
+    "name": "db",
+    "connector": "memory"
+  }
+}

server/middleware.development.json

@@ -0,0 +1,10 @@
+{
+  "final:after": {
+    "strong-error-handler": {
+      "params": {
+        "debug": true,
+        "log": true
+      }
+    }
+  }
+}

server/middleware.json

@@ -0,0 +1,48 @@
+{
+  "initial:before": {
+    "loopback#favicon": {}
+  },
+  "initial": {
+    "compression": {},
+    "cors": {
+      "params": {
+        "origin": true,
+        "credentials": true,
+        "maxAge": 86400
+      }
+    },
+    "helmet#xssFilter": {},
+    "helmet#frameguard": {
+      "params": { "action": "deny" }
+    },
+    "helmet#hsts": {
+      "params": {
+        "maxAge": 0,
+        "includeSubdomains": true
+      }
+    },
+    "helmet#hidePoweredBy": {},
+    "helmet#ieNoOpen": {},
+    "helmet#noSniff": {},
+    "helmet#noCache": {
+      "enabled": false
+    }
+  },
+  "session": {},
+  "auth": {},
+  "parse": {},
+  "routes": {
+    "loopback#rest": {
+      "paths": [
+        "${restApiRoot}"
+      ]
+    }
+  },
+  "files": {},
+  "final": {
+    "loopback#urlNotFound": {}
+  },
+  "final:after": {
+    "strong-error-handler": {}
+  }
+}

server/model-config.json

@@ -0,0 +1,38 @@
+{
+  "_meta": {
+    "sources": [
+      "loopback/common/models",
+      "loopback/server/models",
+      "../common/models",
+      "./models"
+    ],
+    "mixins": [
+      "loopback/common/mixins",
+      "loopback/server/mixins",
+      "../common/mixins",
+      "./mixins"
+    ]
+  },
+  "User": {
+    "dataSource": "db"
+  },
+  "AccessToken": {
+    "dataSource": "db",
+    "public": false
+  },
+  "ACL": {
+    "dataSource": "db",
+    "public": false
+  },
+  "RoleMapping": {
+    "dataSource": "db",
+    "public": false,
+    "options": {
+      "strictObjectIDCoercion": true
+    }
+  },
+  "Role": {
+    "dataSource": "db",
+    "public": false
+  }
+}

server/server.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var loopback = require('loopback');
+var boot = require('loopback-boot');
+
+var app = module.exports = loopback();
+
+app.start = function() {
+  // start the web server
+  return app.listen(function() {
+    app.emit('started');
+    var baseUrl = app.get('url').replace(/\/$/, '');
+    console.log('Web server listening at: %s', baseUrl);
+    if (app.get('loopback-component-explorer')) {
+      var explorerPath = app.get('loopback-component-explorer').mountPath;
+      console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
+    }
+  });
+};
+
+// Bootstrap the application, configure models, datasources and middleware.
+// Sub-apps like REST API are mounted via boot scripts.
+boot(app, __dirname, function(err) {
+  if (err) throw err;
+
+  // start the server if `$ node server.js`
+  if (require.main === module)
+    app.start();
+});

src/app/app.component.css

@@ -3,19 +3,22 @@
 	width: 100%;
 }
 
-.header {
+.navBar {
+	display: block;
 	position: relative;
 	top: -.625rem;
 	left: -.625rem;
-	display: block;
 	padding: 10px;
 	width: 100%;
-	background-color: black;
-	color: white;
+	background-color: darkgray;
+	color: black;
 }
 
 .title {
-	font-size: 1.5rem;
+	float: center;
+	font-size: 1.25rem;
+	font-style: italic;
+	font-weight: bold;
 }
 .slogan {
 	font-size: .75rem;

src/app/app.component.html

@@ -1,10 +1,7 @@
 <div id="rootContainer" class="rootContainer">
-	<div class="header">
-		<div class="titleBox">
-			<span class="title">Hot Cakes & Hot Takes</span><br/>
-			<span class="slogan">The premier post-pancake podcast</span>
-		</div>
-	</div>
+	<nav class="navBar">
+		<span class="title"><mat-icon>home</mat-icon>HCHT</span><br/>
+	</nav>
 	<app-episodes></app-episodes>
 </div>
 

src/app/app.module.ts

@@ -1,21 +1,25 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule }    from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { EpisodesComponent } from './episodes/episodes.component';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     HomePageComponent,
-    EpisodesComponent
+    EpisodesComponent,
   ],
   imports: [
     BrowserModule,
-    MatCardModule
+    MatCardModule,
+    MatIconModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/episodes/episode.ts

@@ -1,8 +1,8 @@
 
 export class Episode {
-	number: string;
 	title: string;
-	summary: string;
-	img: string;
-	audio: string;
+	number: string;
+	description: string;
+	imageLoc: string;
+	mp3Loc: string;
 }

src/app/episodes/episodes.component.html

@@ -1,12 +1,12 @@
 <div id="audioPanel" class="audioPanel">
 	<button class="closeBtn" (click)="close()">X</button>
 	<div class="title">{{selectedEpisode.title}} </div><br/>
-	<audio controls src="{{selectedEpisode.audio}}" type="audio/mpeg"></audio>
+	<audio controls src="{{selectedEpisode.mp3Loc}}" type="audio/mpeg"></audio>
 </div>
 <div id="episodes" class="episodes">
 	<mat-card class="episodeCard" *ngFor="let episode of episodes" (click)="setSelected(episode)">
 		<mat-card-header></mat-card-header>
-		<img mat-card-image src="{{episode.img}}">
+		<img mat-card-image src="{{episode.imageLoc}}">
 		<mat-card-footer> 
 			<mat-card-title> {{episode.number}} </mat-card-title>
 		</mat-card-footer>

src/app/episodes/episodes.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EPISODES } from './mock-episodes';
+import { EpisodesService } from '../services/episodes.service';
 import { Episode } from './episode';
 
 @Component({
@@ -9,13 +9,19 @@ import { Episode } from './episode';
 })
 export class EpisodesComponent implements OnInit {
 
-  episodes = EPISODES; 
   selected = false;
-  selectedEpisode = new Episode();
+  selectedEpisode = new Episode(); 
+  episodes = new Array<Episode>();
 
-  constructor() { }
+  constructor(private episodesService: EpisodesService) { }
 
   ngOnInit() {
+    this.getEpisodes();
+  }
+
+  getEpisodes(): void {
+    this.episodesService.getEpisodes()
+    .subscribe(episodes => this.episodes = episodes);
   }
 
   close() {

src/app/episodes/mock-episodes.ts

@@ -1,21 +1,21 @@
-import { Episode } from './episode';
+// import { Episode } from './episode';
 
-export const EPISODES: Episode[] = [
-	{number: '001', title: '2017 Year in Review', 
-	summary: 'Tyler and Robert breakdown all things 2017. Favorite movies, books, TV, feelings in addition to analysis on the state of the world and tons of other great stuff that they would love to talk about', 
-	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
-	{number: '002', title: 'What Makes A Good Concert?', summary: 'We', 
-	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
-	{number: '003', title: 'College Expectations vs. Reality', summary: 'We', 
-	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/003.mp3'},
-	{number: '004', title: 'Waste', summary: 'We', img: '../../assets/images/003.jpg',
-	audio: '../../assets/mp3/004.mp3'},
-	{number: '005', title: 'Values of Genre', summary: 'We', img: '../../assets/images/003.jpg',
-	audio: '../../assets/mp3/005.mp3'},
-	{number: '006', title: 'Millennial Life', summary: 'We', img: '../../assets/images/003.jpg', 
-	audio: '../../assets/mp3/006.mp3'},
-	{number: '007', title: 'Cant Remember', summary: 'We', img: '../../assets/images/007.png', 
-	audio: '../../assets/mp3/007.mp3'},
-	{number: '008', title: 'Values of Genre', summary: 'We', img: '../../assets/images/008.jpg', 
-	audio: '../../assets/mp3/008.mp3'}
-] 
+// export const EPISODES: Episode[] = [
+// 	{number: '001', title: '2017 Year in Review', 
+// 	summary: 'Tyler and Robert breakdown all things 2017. Favorite movies, books, TV, feelings in addition to analysis on the state of the world and tons of other great stuff that they would love to talk about', 
+// 	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
+// 	{number: '002', title: 'What Makes A Good Concert?', summary: 'We', 
+// 	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/002.mp3'},
+// 	{number: '003', title: 'College Expectations vs. Reality', summary: 'We', 
+// 	img: '../../assets/images/003.jpg', audio: '../../assets/mp3/003.mp3'},
+// 	{number: '004', title: 'Waste', summary: 'We', img: '../../assets/images/003.jpg',
+// 	audio: '../../assets/mp3/004.mp3'},
+// 	{number: '005', title: 'Values of Genre', summary: 'We', img: '../../assets/images/003.jpg',
+// 	audio: '../../assets/mp3/005.mp3'},
+// 	{number: '006', title: 'Millennial Life', summary: 'We', img: '../../assets/images/003.jpg', 
+// 	audio: '../../assets/mp3/006.mp3'},
+// 	{number: '007', title: 'Cant Remember', summary: 'We', img: '../../assets/images/007.png', 
+// 	audio: '../../assets/mp3/007.mp3'},
+// 	{number: '008', title: 'Values of Genre', summary: 'We', img: '../../assets/images/008.jpg', 
+// 	audio: '../../assets/mp3/008.mp3'}
+// ]