first commit

Author: manfredsteyer

.gitignore

@@ -0,0 +1,6 @@
+/node_modules/
+/dist/
+/npm-debug.log
+/typings/
+/.idea/
+/.vscode/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2015-2016 Google, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

app/app.component.css

@@ -0,0 +1,30 @@
+/* http://tobiasahlin.com/spinkit/ */
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    background-color: aqua;
+
+    margin: 100px auto;
+    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+    animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+    0% { -webkit-transform: perspective(120px) }
+    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes sk-rotateplane {
+    0% {
+        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+    } 50% {
+          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+      } 100% {
+            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        }
+}

app/app.component.html

@@ -0,0 +1,32 @@
+<nav class="navbar navbar-default">
+    <ul class="nav navbar-nav">
+        <li routerLinkActive="active"><a [routerLink]="['/home', {showDetail:false}]" [preserveQueryParams]="true">Home</a></li>
+        <li routerLinkActive="active"><a [routerLink]="['/flight-booking']" [preserveQueryParams]="true">Book a flight</a></li>
+        <li routerLinkActive="active"><a [routerLink]="['/bookings']" [preserveQueryParams]="true">Your Bookings</a></li>
+        <li><a (click)="activateExpertMode()">Activate Expert Mode</a></li>
+        <li><a (click)="deactivateExpertMode()">Deactivate Expert Mode</a></li>
+
+        <li><a [routerLink]="[{outlets: { aux: ['history', {showDetail: true}] }}]">Show History</a></li>
+        <li><a [routerLink]="[{outlets: { aux: null }}]">Hide History</a></li>
+
+    </ul>
+</nav>
+
+<div class="container">
+
+<div class="row">
+    <router-outlet></router-outlet>
+</div>
+
+<div class="row">
+    <router-outlet name="aux"></router-outlet>
+</div>
+
+</div>
+
+<div *ngIf="showWaitInfo" style="background-color: black; opacity: 0.3; width:100%; height:100%; left:0px; top:0px; position: absolute;" >
+    <div class="spinner"></div>
+</div>
+
+
+<!-- Fußzeile -->

app/app.component.ts

@@ -0,0 +1,99 @@
+import { Component } from '@angular/core';
+import { OAuthService } from 'angular2-oauth2/oauth-service';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import {LeaveComponentGuard} from "./shared/deactivation/leave-component-guard";
+import {CustomReuseStrategy} from "./shared/router/custom-reuse-strategy";
+
+@Component({
+    selector: 'flight-app',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+    public info: string = 'Welt';
+
+    public showWaitInfo: boolean = false;
+
+    constructor(private router: Router, private oauthService: OAuthService, private leaveComponentGuard: LeaveComponentGuard ) {
+
+        router.events.subscribe(
+            (event) => {
+
+                console.debug('router-event', event);
+
+                if (event instanceof NavigationStart) {
+                    this.showWaitInfo = true;
+                }
+                if (event instanceof NavigationEnd
+                    || event instanceof NavigationCancel
+                    || event instanceof NavigationError) {
+                    this.showWaitInfo = false;
+                }
+
+            }
+        );
+
+        leaveComponentGuard.guardStated.subscribe(_ => {
+            this.showWaitInfo = false;
+        });
+
+        leaveComponentGuard.guardFinished.subscribe(_ => {
+            this.showWaitInfo = true;
+        });
+
+        oauthService.loginUrl = '';
+
+
+        this.oauthService.loginUrl = 'https://steyer-identity-server.azurewebsites.net/identity/connect/authorize'; // Id-Provider?
+
+        this.oauthService.redirectUri = window.location.origin + '/index.html';
+
+        this.oauthService.clientId = 'spa-demo';
+
+        this.oauthService.issuer = 'https://steyer-identity-server.azurewebsites.net/identity';
+
+        // set the scope for the permissions the client should request
+        this.oauthService.scope = 'openid profile email voucher';
+
+        // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
+        // OAuth2-based access_token
+        this.oauthService.oidc = true;
+
+        // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
+        // instead of localStorage
+        this.oauthService.setStorage(sessionStorage);
+
+        // To also enable single-sign-out set the url for your auth-server's logout-endpoint here
+        this.oauthService.logoutUrl = 'https://steyer-identity-server.azurewebsites.net/identity/connect/endsession?id_token={{id_token}}';
+
+        // This method just tries to parse the token within the url when
+        // the auth-server redirects the user back to the web-app
+        // It dosn't initiate the login
+        this.oauthService.tryLogin({});
+
+    }
+
+    goHome() {
+        this.router.navigate(['/home']);
+    }
+
+    activateExpertMode() {
+        let queryParams = {
+            expertMode: 'true'
+        };
+        this.router.navigate([], {queryParams});
+    }
+
+    deactivateExpertMode() {
+        let queryParams = {
+            expertMode: 'false'
+        };
+        this.router.navigate([], {queryParams});
+        // , fragment: '123'
+
+    }
+
+}
+
+
+

app/app.module.ts

@@ -0,0 +1,42 @@
+import { AppComponent } from './app.component';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BASE_URL } from './app.tokens';
+import { SharedModule } from './shared/shared.module';
+import { AppRouterModule } from './app.routes';
+import { HomeComponent } from './home/home.component';
+import { FlightHistoryComponent } from './flight-history/flight-history.component';
+import { BookingsComponent } from './bookings/bookings.component';
+import { FlightBookingModule } from './flight-booking/flight-booking.module';
+import { ChatComponent } from './flight-booking/chat/chat.component';
+import {RouteReuseStrategy} from "@angular/router";
+import {CustomReuseStrategy} from "./shared/router/custom-reuse-strategy";
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpModule,
+        FormsModule,
+        ReactiveFormsModule,
+        SharedModule.forRoot(),
+        AppRouterModule,
+        //FlightBookingModule // <-- Würde Lazy Loading verhindern
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        BookingsComponent,
+        FlightHistoryComponent
+    ],
+    providers: [
+        {provide: BASE_URL, useValue: 'http://www.angular.at'},
+        {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
+    ],
+    bootstrap: [
+        AppComponent
+    ]
+})
+export class AppModule {
+}

app/app.routes.ts

@@ -0,0 +1,44 @@
+import {Routes, RouterModule, PreloadAllModules} from "@angular/router";
+import {HomeComponent} from "./home/home.component";
+import {FlightHistoryComponent} from "./flight-history/flight-history.component";
+import {CustomPreloadingStrategy} from "./shared/preload/custom-preloading.strategy";
+import {AuthLoadGuard} from "./shared/auth/auth.load.guard";
+import {BookingsComponent} from "./bookings/bookings.component";
+import {AuthChildGuard} from "./shared/auth/auth.child.guard";
+
+let APP_ROUTES: Routes = [
+    {
+        path: '',
+        redirectTo: 'home',
+        pathMatch: 'full'
+    },
+    {
+        path: 'home',
+        component: HomeComponent
+    },
+
+    {
+        path: 'flight-booking',
+        loadChildren: './flight-booking/flight-booking.module#FlightBookingModule',
+        // canLoad: [AuthLoadGuard]
+    },
+
+    {
+        path: 'bookings',
+        component: BookingsComponent
+    },
+    {
+        path: 'history',
+        component: FlightHistoryComponent,
+        outlet: 'aux'
+    },
+
+    {
+        path: '**',
+        redirectTo: 'home'
+    }
+];
+
+export let AppRouterModule = RouterModule.forRoot(APP_ROUTES);
+
+// export let AppRouterModule = RouterModule.forRoot(APP_ROUTES, { useHash: true, enableTracing: true});

app/app.tokens.ts

@@ -0,0 +1,3 @@
+import { OpaqueToken } from '@angular/core';
+
+export const BASE_URL = new OpaqueToken('BASE_URL');

app/bookings/bookings.component.auto-detect.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { BookingsComponent } from './bookings.component';
+
+let fixture: ComponentFixture<BookingsComponent>;
+let componentTitle: HTMLElement;
+let componentInstance: BookingsComponent;
+
+describe('BookingsComponent', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [BookingsComponent],
+            providers: [
+                {provide: ComponentFixtureAutoDetect, useValue: true}
+            ]
+        });
+        fixture = TestBed.createComponent(BookingsComponent);
+        componentTitle = fixture.debugElement.query(By.css('h1')).nativeElement;
+        componentInstance = fixture.componentInstance;
+    });
+
+    it('should display Bookings title', () => {
+        expect(componentTitle.textContent).toBe('Bookings');
+    });
+
+    it('should change Bookings title', () => {
+        componentInstance.title = 'changed title';
+        fixture.detectChanges();
+        expect(componentTitle.textContent).toBe('changed title');
+    });
+
+});

app/bookings/bookings.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { BookingsComponent } from './bookings.component';
+
+let fixture: ComponentFixture<BookingsComponent>;
+let componentTitle: HTMLElement;
+let componentInstance: BookingsComponent;
+
+describe('BookingsComponent', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [BookingsComponent]
+        });
+        fixture = TestBed.createComponent(BookingsComponent);
+        componentTitle = fixture.debugElement.query(By.css('h1')).nativeElement;
+        componentInstance = fixture.componentInstance;
+    });
+
+    it('should display Bookings title', () => {
+        expect(componentTitle.textContent).toBe('');
+        fixture.detectChanges();
+        expect(componentTitle.textContent).toBe('Bookings');
+    });
+
+    it('should change Bookings title', () => {
+        componentInstance.title = 'changed title';
+        fixture.detectChanges();
+        expect(componentTitle.textContent).toBe('changed title');
+    });
+
+});

app/bookings/bookings.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+        <h1>{{title}}</h1>
+        
+        <div class="control-group">
+            <label>Your Passenger Number</label>
+            <input class="form-control" [(ngModel)]="passengerNumber">
+        </div>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <div>This use case is under construction ...</div>
+    `
+})
+export class BookingsComponent {
+    title = 'Bookings';
+    passengerNumber: string;
+}

app/custom-typings.d.ts

@@ -0,0 +1,4 @@
+// to support require.context
+interface NodeRequire {
+    context: any;
+}

app/entities/flight.ts

@@ -0,0 +1,7 @@
+export interface Flight {
+    id: number;     // int + double
+    from: string;
+    to: string;
+    date: string;
+    // JSON: ISO-String 2016-12-24T17:00:00.000+01:00
+}