lateset

2017-03-06 16:37:44 -05:00
parent 4efefa3b72
commit 16a675133c
31 changed files with 684 additions and 19 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/bookstore-api/.idea/workspace.xml
+++ b/bookstore-api/.idea/workspace.xml
@@ -19,8 +19,8 @@
      <file leaf-file-name="BookResource.java" pinned="false" current-in-tab="true">
        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/BookResource.java">
          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="420">
-              <caret line="59" column="9" lean-forward="true" selection-start-line="59" selection-start-column="9" selection-end-line="59" selection-end-column="9" />
+            <state relative-caret-position="330">
+              <caret line="52" column="27" lean-forward="true" selection-start-line="52" selection-start-column="27" selection-end-line="52" selection-end-column="27" />
              <folding />
            </state>
          </provider>
@@ -121,10 +121,10 @@
    </option>
  </component>
  <component name="ProjectFrameBounds">
-    <option name="x" value="71" />
-    <option name="y" value="38" />
-    <option name="width" value="1663" />
-    <option name="height" value="961" />
+    <option name="x" value="50" />
+    <option name="y" value="23" />
+    <option name="width" value="1351" />
+    <option name="height" value="797" />
  </component>
  <component name="ProjectView">
    <navigator currentView="ProjectPane" proportions="" version="1">
@@ -841,15 +841,15 @@
      <workItem from="1486538831944" duration="450000" />
      <workItem from="1488378219247" duration="650000" />
      <workItem from="1488461561430" duration="18419000" />
-      <workItem from="1488731165185" duration="8339000" />
+      <workItem from="1488731165185" duration="9523000" />
    </task>
    <servers />
  </component>
  <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="70351000" />
+    <option name="totallyTimeSpent" value="71535000" />
  </component>
  <component name="ToolWindowManager">
-    <frame x="71" y="38" width="1663" height="961" extended-state="0" />
+    <frame x="50" y="23" width="1351" height="797" extended-state="0" />
    <editor active="true" />
    <layout>
      <window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
@@ -869,11 +869,11 @@
      <window_info id="Palette&#9;" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
      <window_info id="Image Layers" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
      <window_info id="Capture Analysis" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
-      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.26697353" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
+      <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32907802" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
      <window_info id="Spring" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.32907802" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
      <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="10" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24244294" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3002292" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
      <window_info id="Bean Validation" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
      <window_info id="Theme Preview" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="true" content_ui="tabs" />
@@ -1257,8 +1257,8 @@
    </entry>
    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/BookResource.java">
      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="420">
-          <caret line="59" column="9" lean-forward="true" selection-start-line="59" selection-start-column="9" selection-end-line="59" selection-end-column="9" />
+        <state relative-caret-position="330">
+          <caret line="52" column="27" lean-forward="true" selection-start-line="52" selection-start-column="27" selection-end-line="52" selection-end-column="27" />
          <folding />
        </state>
      </provider>
--- a/store-front/package.json
+++ b/store-front/package.json
@@ -17,10 +17,13 @@
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
+    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
+    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
--- a/store-front/src/app/app.component.html
+++ b/store-front/src/app/app.component.html
@@ -1,3 +1,6 @@
-<h1>
-  {{title}}
-</h1>
+<app-nav-bar></app-nav-bar>
+<router-outlet></router-outlet>
+
+
+
+
--- a/store-front/src/app/app.module.ts
+++ b/store-front/src/app/app.module.ts
@@ -3,20 +3,32 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { MaterialModule } from '@angular/material';
+import { routing }  from './app.routing';
+
+import 'hammerjs';

 import { AppComponent } from './app.component';
+import { HomeComponent } from './components/home/home.component';
+import { NavBarComponent } from './components/nav-bar/nav-bar.component';
+
+import { LoginService } from './services/login.service';

@NgModule({
  declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    NavBarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
+    routing,
    MaterialModule
  ],
-  providers: [],
+  providers: [
+    LoginService
+  ],
  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/store-front/src/app/app.routing.ts
+++ b/store-front/src/app/app.routing.ts
@@ -0,0 +1,22 @@
+/**
+ * Created by z00382545 on 1/16/17.
+ */
+import {ModuleWithProviders}  from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {HomeComponent} from './components/home/home.component';
+
+
+const appRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    component: HomeComponent
+  }
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
--- a/store-front/src/app/components/home/home.component.css
+++ b/store-front/src/app/components/home/home.component.css
--- a/store-front/src/app/components/home/home.component.html
+++ b/store-front/src/app/components/home/home.component.html
@@ -0,0 +1,62 @@
+<div class="container">
+    <div class="row">
+        <div class="col-xs-8">
+            <h2 class="section-headline"><span>Home</span></h2>
+        </div>
+        <div class="col-xs-4">
+            <img src="../../../assets/image/logo.png" class="img-responsive right" style="width:400px; z-index: 1;" />
+        </div>
+        <img class="img-responsive" src="../../../assets/image/wood.png" style="position: absolute;margin-top: 90px;z-index: -2;" />
+    </div>
+    
+        <hr style="position: absolute; width:85%; height:6px; background-color: #333; z-index: -1; margin-top: -170px " />
+    <hr/>
+    <div class="row">
+        <div class="col-xs-4">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <a th:href="@{/bookshelf}"> <img src="../../../assets/image/bestseller.png" class="img-responsive" /></a>
+                </div>
+            </div>
+        </div>
+        <div class="col-xs-4">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <a th:href="@{/hours}"><img src="../../../assets/image/hours.png" class="img-responsive" /></a>
+                </div>
+            </div>
+        </div>
+        <div class="col-xs-4">
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <a th:href="@{/faq}"><img src="../../../assets/image/faq.png" class="img-responsive" /></a>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div class="home-headline"><span>Featured Books</span></div>
+            <hr style="margin-top: -15px;" />
+        </div>
+        <img class="img-responsive" src="../../../assets/image/shelf.png" style="margin-top: -75px;z-index: -1;" />
+        <div class="row " style="margin:auto; margin-top: -190px; margin-bottom: 50px; width:90%; ">
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+            <div class="col-xs-2">
+                <img class="img-responsive" style="width:100px;" src="../../../assets/image/book1.png" />
+            </div>
+        </div>
+    </div>
+</div>
--- a/store-front/src/app/components/home/home.component.spec.ts
+++ b/store-front/src/app/components/home/home.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/store-front/src/app/components/home/home.component.ts
+++ b/store-front/src/app/components/home/home.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/store-front/src/app/components/nav-bar/nav-bar.component.css
+++ b/store-front/src/app/components/nav-bar/nav-bar.component.css
--- a/store-front/src/app/components/nav-bar/nav-bar.component.html
+++ b/store-front/src/app/components/nav-bar/nav-bar.component.html
@@ -0,0 +1,33 @@
+<div class="page-top " style="width: 100%; height: 20px; background-color: #f46b42;"></div>
+<nav class="navbar navbar-default navbar-inverse">
+    <div class="container">
+        <div class="navbar-header">
+            <!-- The mobile navbar-toggle button can be safely removed since you do not need it in a non-responsive implementation -->
+            <a class="navbar-brand" th:href="@{/}">LE'S BOOKSTORE</a>
+        </div>
+        <!-- Note that the .navbar-collapse and .collapse classes have been removed from the #navbar -->
+        <div id="navbar">
+            <ul class="nav navbar-nav navbar-left">
+                <li class="dropdown">
+                    <a th:href="@{/bookshelf}" class="dropdown-toggle" data-hover="dropdown" role="button"> <span style="font-size: large">BOOKS</span></a>
+                    <ul class="dropdown-menu">
+                        <li><a th:href="@{/bookshelf}">Browse the bookshelf</a></li>
+                        <li><a th:href="@{/hours}">Store hours &#38; Directions</a></li>
+                        <li><a th:href="@{/faq}">FAQ</a></li>
+                    </ul>
+                </li>
+                <form class="navbar-form" th:action="@{/searchBook}" method="post">
+                    <div class="form-group">
+                        <input type="text" name="keyword" class="form-control" placeholder="Book title" />
+                    </div>
+                    <button type="submit" class="btn btn-default">Search</button>
+                </form>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li><a th:href="@{/shoppingCart/cart}">SHOPPING CART</a></li>
+                <li sec:authorize="isAuthenticated()"><a th:href="@{/logout}">LOGOUT</a></li>
+            </ul>
+        </div>
+        <!--/.nav-collapse -->
+    </div>
+</nav>
--- a/store-front/src/app/components/nav-bar/nav-bar.component.spec.ts
+++ b/store-front/src/app/components/nav-bar/nav-bar.component.spec.ts
@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/store-front/src/app/components/nav-bar/nav-bar.component.ts
+++ b/store-front/src/app/components/nav-bar/nav-bar.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import {LoginService} from "../../services/login.service";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+  private loggedIn = false;
+
+  constructor(private loginService: LoginService, private router: Router) { }
+
+  ngOnInit() {
+    this.loginService.checkSession().subscribe(
+      res => {
+        this.loggedIn=true;
+      },
+      error => {
+        this.loggedIn=false;
+      }
+    );
+  }
+
+  logout(){
+    this.loginService.logout().subscribe(
+      res => {
+        location.reload();
+      },
+      err => console.log(err)
+    );
+    // location.reload();
+    this.router.navigate(['/']);
+  }
+
+}
--- a/store-front/src/app/constants/app-const.ts
+++ b/store-front/src/app/constants/app-const.ts
@@ -0,0 +1,3 @@
+export class AppConst {
+   public static serverPath='http://127.0.0.1:8181';
+}
--- a/store-front/src/app/models/book.ts
+++ b/store-front/src/app/models/book.ts
@@ -0,0 +1,18 @@
+export class Book {
+  public id: number;
+  public title: string;
+  public author: string;
+  public publisher: string;
+  public publicationDate: string;
+  public language: string;
+  public category: string;
+  public numberOfPages: number;
+  public format: string;
+  public isbn: number;
+  public shippingWeight: number;
+  public listPrice: number;
+  public ourPrice: number;
+  public active: boolean;
+  public description: string;
+  public inStockNumber: number;
+}
--- a/store-front/src/app/models/user.ts
+++ b/store-front/src/app/models/user.ts
@@ -0,0 +1,7 @@
+export class User {
+  public id: number;
+  public firstName: string;
+  public lastName: string;
+  public username: string;
+  public password: string;
+}
--- a/store-front/src/app/services/login.service.spec.ts
+++ b/store-front/src/app/services/login.service.spec.ts
@@ -0,0 +1,16 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [LoginService]
+    });
+  });
+
+  it('should ...', inject([LoginService], (service: LoginService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/store-front/src/app/services/login.service.ts
+++ b/store-front/src/app/services/login.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import {Http, Headers} from '@angular/http';
+import {Observable} from 'rxjs/Observable';
+import {AppConst} from '../constants/app-const';
+
+
+@Injectable()
+export class LoginService {
+  private serverPath:string = AppConst.serverPath;
+
+  constructor (private http: Http) {}
+
+  sendCredential(username: string, password: string) {
+    let url = this.serverPath+"/token";
+    let encodedCredentials = btoa(username+":"+password);
+    let basicHeader = "Basic "+ encodedCredentials;
+    let headers = new Headers(
+      {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Authorization' : basicHeader
+
+        // 'Access-Control-Allow-Credentials' : true
+      });
+    return this.http.get(url, {headers: headers});
+  }
+
+  checkSession() {
+    let url = this.serverPath+"/checkSession";
+    let tokenHeader = new Headers ({
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.get(url, {headers : tokenHeader});
+  }
+
+  logout() {
+    let url = this.serverPath+"/user/logout";
+    let tokenHeader = new Headers ({
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.post(url,'', {headers : tokenHeader});
+  }
+
+}
--- a/store-front/src/assets/image/bestseller.png
+++ b/store-front/src/assets/image/bestseller.png
--- a/store-front/src/assets/image/book1.png
+++ b/store-front/src/assets/image/book1.png
--- a/store-front/src/assets/image/creditcard.png
+++ b/store-front/src/assets/image/creditcard.png
--- a/store-front/src/assets/image/faq.png
+++ b/store-front/src/assets/image/faq.png
--- a/store-front/src/assets/image/favicon.ico
+++ b/store-front/src/assets/image/favicon.ico
--- a/store-front/src/assets/image/hours.png
+++ b/store-front/src/assets/image/hours.png
--- a/store-front/src/assets/image/logo.png
+++ b/store-front/src/assets/image/logo.png
--- a/store-front/src/assets/image/shelf.png
+++ b/store-front/src/assets/image/shelf.png
--- a/store-front/src/assets/image/wood.png
+++ b/store-front/src/assets/image/wood.png
--- a/store-front/src/index.html
+++ b/store-front/src/index.html
@@ -5,7 +5,8 @@
  <title>StoreFront</title>
  <base href="/">

-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
--- a/store-front/src/non-responsive.css
+++ b/store-front/src/non-responsive.css
@@ -0,0 +1,262 @@
+/* Template-specific stuff
+ *
+ * Customizations just for the template; these are not necessary for anything
+ * with disabling the responsiveness.
+ */
+
+/* Account for fixed navbar */
+body {
+  padding-top: 70px;
+  padding-bottom: 30px;
+}
+
+body,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  min-width: 970px;
+}
+
+/* Don't let the lead text change font-size. */
+.lead {
+  font-size: 16px;
+}
+
+/* Finesse the page header spacing */
+.page-header {
+  margin-bottom: 30px;
+}
+.page-header .lead {
+  margin-bottom: 10px;
+}
+
+
+/* Non-responsive overrides
+ *
+ * Utilize the following CSS to disable the responsive-ness of the container,
+ * grid system, and navbar.
+ */
+
+/* Reset the container */
+.container {
+  width: 970px;
+  max-width: none !important;
+}
+
+/* Demonstrate the grids */
+.col-xs-4 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  /*background-color: #eee;*/
+  /*background-color: rgba(86,61,124,.15);*/
+  /*border: 1px solid #ddd;*/
+  /*border: 1px solid rgba(86,61,124,.2);*/
+}
+
+.container .navbar-header,
+.container .navbar-collapse {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+/* Always float the navbar header */
+.navbar-header {
+  float: left;
+}
+
+/* Undo the collapsing navbar */
+.navbar-collapse {
+  display: block !important;
+  height: auto !important;
+  padding-bottom: 0;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+
+.navbar-toggle {
+  display: none;
+}
+.navbar-collapse {
+  border-top: 0;
+}
+
+.navbar-brand {
+  margin-left: -15px;
+}
+
+/* Always apply the floated nav */
+.navbar-nav {
+  float: left;
+  margin: 0;
+}
+.navbar-nav > li {
+  float: left;
+}
+.navbar-nav > li > a {
+  padding: 15px;
+}
+
+/* Redeclare since we override the float above */
+.navbar-nav.navbar-right {
+  float: right;
+}
+
+/* Undo custom dropdowns */
+.navbar .navbar-nav .open .dropdown-menu {
+  position: absolute;
+  float: left;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-width: 0 1px 1px;
+  border-radius: 0 0 4px 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+  color: #333;
+}
+.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
+.navbar .navbar-nav .open .dropdown-menu > .active > a,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+  color: #fff !important;
+  background-color: #428bca !important;
+}
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+  color: #999 !important;
+  background-color: transparent !important;
+}
+
+/* Undo form expansion */
+.navbar-form {
+  float: left;
+  width: auto;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+/* Copy-pasted from forms.less since we mixin the .form-inline styles. */
+.navbar-form .form-group {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.navbar-form .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.navbar-form .form-control-static {
+  display: inline-block;
+}
+
+.navbar-form .input-group {
+  display: inline-table;
+  vertical-align: middle;
+}
+
+.navbar-form .input-group .input-group-addon,
+.navbar-form .input-group .input-group-btn,
+.navbar-form .input-group .form-control {
+  width: auto;
+}
+
+.navbar-form .input-group > .form-control {
+  width: 100%;
+}
+
+.navbar-form .control-label {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.navbar-form .radio,
+.navbar-form .checkbox {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.navbar-form .radio label,
+.navbar-form .checkbox label {
+  padding-left: 0;
+}
+
+.navbar-form .radio input[type="radio"],
+.navbar-form .checkbox input[type="checkbox"] {
+  position: relative;
+  margin-left: 0;
+}
+
+.navbar-form .has-feedback .form-control-feedback {
+  top: 0;
+}
+
+/* Undo inline form compaction on small screens */
+.form-inline .form-group {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.form-inline .form-control {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+
+.form-inline .form-control-static {
+  display: inline-block;
+}
+
+.form-inline .input-group {
+  display: inline-table;
+  vertical-align: middle;
+}
+.form-inline .input-group .input-group-addon,
+.form-inline .input-group .input-group-btn,
+.form-inline .input-group .form-control {
+  width: auto;
+}
+
+.form-inline .input-group > .form-control {
+  width: 100%;
+}
+
+.form-inline .control-label {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.form-inline .radio,
+.form-inline .checkbox {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+.form-inline .radio label,
+.form-inline .checkbox label {
+  padding-left: 0;
+}
+
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  position: relative;
+  margin-left: 0;
+}
+
+.form-inline .has-feedback .form-control-feedback {
+  top: 0;
+}
--- a/store-front/src/styles.css
+++ b/store-front/src/styles.css
@@ -1 +1,73 @@
 /* You can add global styles to this file, and also import other style files */
+@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.css';
+@import './non-responsive.css';
+/*@import '../node_modules/@swimlane/ngx-datatable/release/index.css';
+@import '../node_modules/@swimlane/ngx-datatable/release/themes/material.css';
+@import '../node_modules/@swimlane/ngx-datatable/release/assets/icons.css';*/
+
+.container {
+  width: 90%;
+}
+
+.section-headline {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 24px;
+  color: #fff;
+  margin: auto;
+  text-align: center;
+  margin-top: 90px;
+}
+
+.section-headline span {
+  background-color: #231F20;
+  padding: 5px 22px;
+}
+
+.box {
+  border: 1px solid red;
+}
+
+.li {
+  display:inline;
+  white-space: nowrap;
+}
+
+.box {
+	border: 1px solid black;
+}
+
+hr {
+    border: none;
+    height: 1px;
+    /* Set the hr color */
+    color: #333; /* old IE */
+    background-color: #333; /* Modern Browsers */
+}
+
+body {
+    font-family: Tahoma, Serif;
+    margin:0;
+    padding-top: 0;
+}
+
+md-input-container {
+    width: 100%;
+}
+
+md-select {
+    width: 100%;
+}
+
+md-slide-toggle {
+    width:100%;
+}
+
+.container {
+	width:90%;
+	margin:auto;
+}
+
+.full-width {
+	width: 100%;
+}