bs4

Author: codediodeio

package.json

@@ -25,6 +25,7 @@
     "@angular/router": "^4.0.0",
     "@types/lodash": "^4.14.61",
     "angularfire2": "^2.0.0-beta.8",
+    "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "firebase": "^3.7.2",
     "lodash": "^4.17.4",

src/app/app.component.html

@@ -1,5 +1,28 @@
-<h1>{{title}}</h1>
+  <top-nav></top-nav>
 
-<user-profile></user-profile>
+<!-- <div class="jumbotron jumbotron-fluid">
+  <div class="container">
+    <h1 class="display-3"><i class="fa fa-fire"></i> {{title}}</h1>
+    <p class="lead">Angular v4 starter app wired up with Firebase</p>
+  </div>
+</div> -->
 
-<router-outlet></router-outlet>
+<div class="container">
+
+  <div class="row">
+    <div class="col-md-3 align-self-start">
+
+      <user-profile></user-profile>
+
+      <a routerLink="/items">Realtime DB Demo</a><br>
+      <a routerLink="/uploads">File Uploads Demo</a>
+
+
+    </div>
+    <div class="col-md-9">
+
+      <router-outlet></router-outlet>
+
+    </div>
+  </div>
+</div>

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -27,6 +28,11 @@ import { UploadFormComponent } from './uploads/upload-form/upload-form.component
 import { UploadsListComponent } from './uploads/uploads-list/uploads-list.component';
 import { UploadDetailComponent } from './uploads/upload-detail/upload-detail.component';
 
+// FireStarter Navigation
+import { NavService } from './ui/shared/nav.service';
+import { TopNavComponent } from './ui/top-nav/top-nav.component';
+
+
 export const firebaseConfig = environment.firebaseConfig;
 
 ///// End FireStarter
@@ -42,19 +48,22 @@ export const firebaseConfig = environment.firebaseConfig;
     ItemDetailComponent,
     UploadFormComponent,
     UploadsListComponent,
-    UploadDetailComponent
+    UploadDetailComponent,
+    TopNavComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     AppRoutingModule,
-    AngularFireModule.initializeApp(firebaseConfig)
+    AngularFireModule.initializeApp(firebaseConfig),
+    BrowserAnimationsModule,
   ],
   providers: [
     AuthService,
     ItemService,
     UploadService,
+    NavService,
 
   ],
   bootstrap: [

src/app/items/item-detail/item-detail.component.html

@@ -1,13 +1,15 @@
-{{ item.title || 'no title' }}<br>
-{{ item.body || 'no body' }}<br>
-Active: {{ item.active }}<br>
-{{ item.lastClick | date: 'medium' }}<br>
 
+<h5 class="card-header">{{ item.title || 'missing title' }}</h5>
+<div class="card-block">
 
-<span (click)='deleteItem()'>Delete</span>
-<span (click)='updateTimeStamp()'>Log Timestamp</span>
+  Active: {{ item.active }}<br>
+  {{ item.timeStamp | date: 'medium' }}
 
-<span *ngIf='item.active' (click)='updateActive(false)'>Mark Active</span>
-<span *ngIf='!item.active' (click)='updateActive(true)'>Mark Complete</span>
+</div>
 
-<hr>
+<div class="card-footer text-muted text-xs-center">
+  <span class="btn btn-sm btn-secondary" (click)='updateTimeStamp()'>Update Timestamp</span>
+  <span class="btn btn-sm btn-success" *ngIf='item.active' (click)='updateActive(false)'>Mark Complete</span>
+  <span class="btn btn-sm btn-primary" *ngIf='!item.active' (click)='updateActive(true)'>Mark Active</span>
+  <span class="btn btn-sm btn-danger" (click)='deleteItem()'>Delete</span>
+</div>

src/app/items/item-detail/item-detail.component.ts

@@ -18,7 +18,7 @@ export class ItemDetailComponent implements OnInit {
 
   updateTimeStamp() {
     let date = new Date()
-    this.itemSvc.updateItem(this.item.$key, { lastClick: date })
+    this.itemSvc.updateItem(this.item.$key, { timeStamp: date })
   }
 
   updateActive(value: boolean) {

src/app/items/item-form/item-form.component.html

@@ -1,26 +1,39 @@
 <h3>New Task Form</h3>
 
-<div>
-  <label>Name: </label>
-  <input placeholder="Item Title" class="form-control"
-  [(ngModel)]="item.title"
-  required minlength="2" maxlength="23"
-  #title='ngModel'>
-
-  <div *ngIf="title.dirty || title.touched">
-    <p *ngIf='title.errors; then errors else valid'>template renders here...</p>
-  </div>
-
-  <br>
-  <label>Body: </label>
-  <textarea  placeholder="Item Body" class="form-control"
-  [(ngModel)]="item.body"
-  required minlength="2" maxlength="23"
-  #body='ngModel'>
-  </textarea>
-  <br>
-  <button (click)='createItem()' [disabled]="!title.valid || !body.valid">Create</button>
+<div class='form-group'>
+  <fieldset>
+    <label class="control-label">Name: </label>
+
+    <input placeholder="Item Title" class="form-control"
+    [(ngModel)]="item.title"
+    required minlength="2" maxlength="23"
+    #title='ngModel'>
+
+    <div *ngIf="title.dirty">
+      <span *ngIf='title.errors; then errors else valid'>template renders here...</span>
+    </div>
+
+    <!-- <br>
+    <label class="control-label">Body</label>
+    <textarea  placeholder="Item Body" class="form-control" rows="5"
+    [(ngModel)]="item.body"
+    required minlength="5" maxlength="200"
+    #body='ngModel'>
+    </textarea>
+
+    <div *ngIf="body.dirty">
+      <span *ngIf='body.errors; then errors else valid'>template renders here...</span>
+    </div> -->
+
+
+    <button class="btn btn-primary" (click)='createItem()' [disabled]="!title.valid">Create</button>
+  </fieldset>
 </div>
 
-<ng-template #valid>looks good!</ng-template>
-<ng-template #errors>form contains errors!</ng-template>
+<ng-template #valid>
+  <p class="text-success">looks good!</p>
+</ng-template>
+
+<ng-template #errors>
+  <p class="text-danger">form contains errors!</p>
+</ng-template>

src/app/items/items-list/items-list.component.html

@@ -1,13 +1,12 @@
 <h1>Items</h1>
 
-<div *ngFor="let item of items | async">
+<div *ngFor="let item of items | async" class="card">
   <item-detail [item]='item'></item-detail>
 </div>
 
 
 
-<button (click)='addEmptyItem()'>Add Item</button>
-<button (click)='deleteItems()'>Delete Entire List</button>
+<button type="button" class="btn btn-danger" (click)='deleteItems()'>Delete Entire List</button>
 
 <hr>
 

src/app/items/items-list/items-list.component.ts

@@ -15,7 +15,7 @@ export class ItemsListComponent implements OnInit {
   constructor(private itemSvc: ItemService) { }
 
   ngOnInit() {
-    this.items = this.itemSvc.getItemsList()
+    this.items = this.itemSvc.getItemsList({limitToLast: 5})
   }
 
 

src/app/items/shared/item.ts

@@ -9,5 +9,5 @@ export class Item {
   title: string;
   body: string;
   active: boolean = true;
-  lastClick: Date = new Date();
+  timeStamp: Date = new Date();
 }

src/app/ui/shared/nav.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class NavService {
+
+  constructor() { }
+
+}