Remove global outlets

static/src/app/app.component.html

@@ -18,10 +18,10 @@
             <a routerLink='{{config.overviewPath}}' class="link">Armeeübersicht</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath,{outlets:{right:'ranks'}}]" class="link">Ränge</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">Ränge</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">Auszeichnungen</a>
           </li>
           <li routerLinkActive="active">
             <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
@@ -115,27 +115,10 @@
     <!--</mat-icon>-->
   <!--</button>-->
 
-
-  <div id="top">
-    <router-outlet name="top"></router-outlet>
-  </div>
-
-  <div id="left"
-       [style.background]="leftBackground"
-       [style.box-shadow]="leftBoxShadow"
-       *ngIf="sidebarOpen">
+  <div>
     <router-outlet></router-outlet>
   </div>
 
-  <div id="right">
-    <router-outlet name="right"></router-outlet>
-  </div>
-
-  <div id="footer">
-    <router-outlet name="footer"></router-outlet>
-  </div>
-</div>
-
 <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
 <button mat-icon-button

static/src/app/app.routing.ts

@@ -71,7 +71,7 @@ export const appRoutes: Routes = [
   } // always configure this last - first matching route gets processed
 ];
 
-export const appRouting = RouterModule.forRoot(appRoutes);
+export const appRouting = RouterModule.forRoot(appRoutes, { enableTracing: true });
 
 export const routingComponents = [...armyRoutingComponents, LoginComponent, SignupComponent, NotFoundComponent];
 

static/src/app/army/army-member/army-member.component.ts

@@ -6,15 +6,14 @@ import {Subscription} from 'rxjs/Subscription';
 import {RouteConfig} from '../../app.config';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {Fraction} from '../../utils/fraction.enum';
-import {DOCUMENT, Location} from '@angular/common';
-import {CSSHelpers} from '../../utils/global.helpers';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'army-member',
   templateUrl: './army-member.component.html',
   styleUrls: ['./army-member.component.css']
 })
-export class ArmyMemberComponent implements OnInit, OnDestroy {
+export class ArmyMemberComponent implements OnInit {
 
   subscription: Subscription;
 
@@ -32,13 +31,10 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
               private route: ActivatedRoute,
               private userService: UserService,
               private awardingService: AwardingService,
-              private location: Location,
-              @Inject(DOCUMENT) private document) {
+              private location: Location) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
 
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -53,12 +49,6 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
                             });
   };
 
-  ngOnDestroy() {
-    if (this.router.url !== '/' + RouteConfig.overviewPath) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   backToOverview() {
     this.location.back();
   }

static/src/app/army/army.component.ts

@@ -1,11 +1,8 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Army} from '../models/model-interfaces';
 import {ArmyService} from '../services/army-service/army.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Fraction} from '../utils/fraction.enum';
-import {DOCUMENT} from '@angular/common';
-import {RouteConfig} from '../app.config';
-import {CSSHelpers} from '../utils/global.helpers';
 
 
 @Component({
@@ -13,7 +10,7 @@ import {CSSHelpers} from '../utils/global.helpers';
   templateUrl: './army.component.html',
   styleUrls: ['./army.component.css']
 })
-export class ArmyComponent implements OnInit, OnDestroy {
+export class ArmyComponent implements OnInit {
 
   army: Army[] = [{}, {}];
 
@@ -21,14 +18,10 @@ export class ArmyComponent implements OnInit, OnDestroy {
 
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private armyService: ArmyService,
-              @Inject(DOCUMENT) private document) {
+              private armyService: ArmyService) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init army data
     this.armyService.getArmy()
         .subscribe(army => {
@@ -36,14 +29,8 @@ export class ArmyComponent implements OnInit, OnDestroy {
         });
   };
 
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-
   select(memberId) {
-    this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
+    this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
 
 }

static/src/app/army/army.routing.ts

@@ -3,18 +3,14 @@ import {ArmyComponent} from './army.component';
 import {ArmyMemberComponent} from './army-member/army-member.component';
 import {ArmySquadComponent} from './army-squad/army-squad.component';
 
-
-
 export const armyRoutes: Routes = [
   {
     path: '',
     component: ArmyComponent,
-    outlet: 'right'
   },
   {
     path: 'member/:id',
     component: ArmyMemberComponent,
-    outlet: 'right'
   }
 ];
 

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -1,10 +1,7 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
-import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../utils/global.helpers';
-import {RouteConfig} from '../../app.config';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {MatBottomSheet} from '@angular/material';
@@ -16,7 +13,7 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
   templateUrl: './decoration-overview.component.html',
   styleUrls: ['./decoration-overview.component.css']
 })
-export class DecorationOverviewComponent implements OnInit, OnDestroy {
+export class DecorationOverviewComponent implements OnInit {
 
   decorationsBlufor: Decoration[];
 
@@ -31,14 +28,10 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private decorationService: DecorationService,
-              private bottomSheet: MatBottomSheet,
-              @Inject(DOCUMENT) private document) {
+              private bottomSheet: MatBottomSheet) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init decoration data
     this.decorationService.findDecorations()
         .subscribe(decorations => {
@@ -49,12 +42,6 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   };
 
   select(decoration: Decoration) {
-    this.bottomSheet.open(UserListSheetComponent, {data: { decoration: decoration }});
-  }
-
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
+    this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
   }
 }

static/src/app/pub/public.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

static/src/app/pub/public.component.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'cc-public',
-  templateUrl: './public.component.html',
-  styleUrls: ['./public.component.css']
-})
-export class PublicComponent {
-  constructor() {
-  }
-}

static/src/app/pub/public.routing.ts

@@ -2,26 +2,28 @@ import {RouterModule, Routes} from '@angular/router';
 import {RankOverviewComponent} from './rank-overview/rank-overview.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
-import {PublicComponent} from './public.component';
 import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 
 export const publicRoutes: Routes = [
   {
-    path: 'ranks',
-    component: RankOverviewComponent,
-    outlet: 'right'
-  },
-  {
-    path: 'decorations',
-    component: DecorationOverviewComponent,
-    outlet: 'right'
+    path: '',
+    children: [
+      {
+        path: 'ranks',
+        component: RankOverviewComponent,
+      },
+      {
+        path: 'decorations',
+        component: DecorationOverviewComponent,
+      },
+    ]
   },
 ];
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
-export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
-  DecorationPanelComponent, RankPanelComponent, UserListSheetComponent];
+export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
+  RankPanelComponent, UserListSheetComponent];
 

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -15,7 +15,7 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
   templateUrl: './rank-overview.component.html',
   styleUrls: ['./rank-overview.component.css']
 })
-export class RankOverviewComponent implements OnInit, OnDestroy {
+export class RankOverviewComponent implements OnInit {
 
   ranksOpfor: Rank[];
 
@@ -28,14 +28,10 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private rankService: RankService,
-              private bottomSheet: MatBottomSheet,
-              @Inject(DOCUMENT) private document) {
+              private bottomSheet: MatBottomSheet) {
   }
 
   ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-
     // init rank data
     this.rankService.findRanks()
         .subscribe(ranks => {
@@ -47,10 +43,4 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   selectRow(rank: Rank) {
     this.bottomSheet.open(UserListSheetComponent, {data: { rank: rank }});
   }
-
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
 }