Remove global outlets
parent
b2d18e5cd0
commit
e8319d351f
|
@ -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
|
||||
|
|
|
@ -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];
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -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 => {
|
||||
|
@ -51,10 +44,4 @@ 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', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<router-outlet></router-outlet>
|
|
@ -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() {
|
||||
}
|
||||
}
|
|
@ -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: '',
|
||||
children: [
|
||||
{
|
||||
path: 'ranks',
|
||||
component: RankOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'decorations',
|
||||
component: DecorationOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
|
||||
|
||||
export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
|
||||
DecorationPanelComponent, RankPanelComponent, UserListSheetComponent];
|
||||
export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
|
||||
RankPanelComponent, UserListSheetComponent];
|
||||
|
||||
|
|
|
@ -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', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue