Remove global outlets

pull/43/head
HardiReady 2018-07-28 19:13:30 +02:00
parent b2d18e5cd0
commit e8319d351f
11 changed files with 30 additions and 107 deletions

View File

@ -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

View File

@ -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];

View File

@ -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();
}

View File

@ -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});
}
}

View File

@ -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'
}
];

View File

@ -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', '');
}
}
}

View File

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

View File

@ -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() {
}
}

View File

@ -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];

View File

@ -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', '');
}
}
}