Global layout (router outlet) rework and main setup for new stats page UI #43

Merged
hardi merged 1 commits from task/release-v1.8.0-rework-outlet-system into release/v1.8.0 2018-08-01 19:06:44 +02:00
25 changed files with 72 additions and 153 deletions

View File

@ -1,5 +1,5 @@
.overview { .overview {
padding: 80px 0 0 10% !important; padding-bottom: 50px!important;
} }
.trash { .trash {

View File

@ -105,17 +105,16 @@
</div> </div>
<div> <div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<div style="max-width:18%"> <div id="left">
<router-outlet name="left"></router-outlet> <router-outlet name="left"></router-outlet>
</div> </div>
<div id="right"> <div id="right">
<router-outlet name="right"></router-outlet> <router-outlet name="right"></router-outlet>
</div> </div>
</div>
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span> <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>

View File

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

View File

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

View File

@ -1,18 +1,14 @@
import {RouterModule, Routes} from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import {DecorationComponent} from './decoration.component';
import {DecorationListComponent} from './decoration-list/decoration-list.component'; import {DecorationListComponent} from './decoration-list/decoration-list.component';
import {EditDecorationComponent} from './edit-decoration/edit-decoration.component'; import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
import {ModuleWithProviders} from '@angular/core'; import {ModuleWithProviders} from '@angular/core';
import {DecorationItemComponent} from './decoration-list/decoration-item.component'; import {DecorationItemComponent} from './decoration-list/decoration-item.component';
export const decorationsRoutes: Routes = [{ export const decorationsRoutes: Routes = [
path: '', component: DecorationComponent,
children: [
{ {
path: '', path: '',
component: DecorationListComponent component: DecorationListComponent,
} outlet: 'left'
]
}, },
{ {
path: 'new', path: 'new',
@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes); export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent, export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
EditDecorationComponent];

View File

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

View File

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

View File

@ -1,18 +1,14 @@
import {RouterModule, Routes} from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import {RankComponent} from './ranks.component';
import {RankListComponent} from './rank-list/rank-list.component'; import {RankListComponent} from './rank-list/rank-list.component';
import {EditRankComponent} from './edit-rank/edit-rank.component'; import {EditRankComponent} from './edit-rank/edit-rank.component';
import {RankItemComponent} from './rank-list/rank-item.component'; import {RankItemComponent} from './rank-list/rank-item.component';
import {ModuleWithProviders} from '@angular/core'; import {ModuleWithProviders} from '@angular/core';
export const ranksRoutes: Routes = [{ export const ranksRoutes: Routes = [
path: '', component: RankComponent,
children: [
{ {
path: '', path: '',
component: RankListComponent component: RankListComponent,
} outlet: 'left'
]
}, },
{ {
path: 'new', path: 'new',
@ -27,5 +23,5 @@ export const ranksRoutes: Routes = [{
export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes); export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent]; export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];

View File

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

View File

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

View File

@ -1,18 +1,14 @@
import {RouterModule, Routes} from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import {SquadComponent} from './squads.component';
import {SquadListComponent} from './squad-list/squad-list.component'; import {SquadListComponent} from './squad-list/squad-list.component';
import {EditSquadComponent} from './edit-squad/edit-squad.component'; import {EditSquadComponent} from './edit-squad/edit-squad.component';
import {ModuleWithProviders} from '@angular/core'; import {ModuleWithProviders} from '@angular/core';
import {SquadItemComponent} from './squad-list/squad-item.component'; import {SquadItemComponent} from './squad-list/squad-item.component';
export const squadsRoutes: Routes = [{ export const squadsRoutes: Routes = [
path: '', component: SquadComponent,
children: [
{ {
path: '', path: '',
component: SquadListComponent component: SquadListComponent,
} outlet: 'left'
]
}, },
{ {
path: 'new', path: 'new',
@ -27,5 +23,5 @@ export const squadsRoutes: Routes = [{
export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes); export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent]; export const squadsRoutingComponents = [SquadItemComponent, SquadListComponent, EditSquadComponent];

View File

@ -14,7 +14,7 @@ export class StatisticComponent implements OnInit {
campaigns: Campaign[] = []; campaigns: Campaign[] = [];
collapsed: boolean = false; collapsed = false;
constructor(private campaignService: CampaignService, constructor(private campaignService: CampaignService,
private router: Router, private router: Router,
@ -45,4 +45,22 @@ export class StatisticComponent implements OnInit {
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
}); });
} }
// TODO: REACTIVATE
// deleteCampaign(campaign) {
// if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
// this.campaignService.deleteCampaign(campaign._id)
// .subscribe((res) => {
// if (this.selectedWarId === campaign._id) {
// this.selectOverview('all');
// }
// this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
// });
// }
// }
//
// editCampaign(selectCampaign) {
// this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
// }
} }

View File

@ -7,11 +7,7 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
import {CampaignService} from '../services/logs/campaign.service'; import {CampaignService} from '../services/logs/campaign.service';
import {PlayerService} from '../services/logs/player.service'; import {PlayerService} from '../services/logs/player.service';
import {LogsService} from '../services/logs/logs.service'; import {LogsService} from '../services/logs/logs.service';
import { import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material';
MatButtonToggleModule,
MatSortModule,
MatTableModule
} from '@angular/material';
@NgModule({ @NgModule({

View File

@ -19,8 +19,6 @@ export class WarListComponent implements OnInit, OnChanges {
selectedWarId: string | number; selectedWarId: string | number;
campaigns: Campaign[] = [];
public readonly highscore = 'HIGHSCORE'; public readonly highscore = 'HIGHSCORE';
constructor(private warService: WarService, constructor(private warService: WarService,
@ -31,17 +29,16 @@ export class WarListComponent implements OnInit, OnChanges {
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
if (changes.campaign) this.selectedWarId = this.campaign._id; if (changes.campaign) {
this.selectedWarId = this.campaign._id;
}
} }
ngOnInit() { ngOnInit() {
this.campaignService.getAllCampaignsWithWars().subscribe((items) => { const url = this.router.url;
const subPathWar = 'war/'; const subPathWar = 'war/';
const subPathOverview = 'overview/'; const subPathOverview = 'overview/';
this.campaignService.campaigns = items;
this.campaigns = items;
const url = this.router.url;
if (url.endsWith(RouteConfig.statsPath)) { if (url.endsWith(RouteConfig.statsPath)) {
this.selectOverview(this.campaign._id); this.selectOverview(this.campaign._id);
} else if (url.indexOf(subPathWar) !== -1) { } else if (url.indexOf(subPathWar) !== -1) {
@ -49,7 +46,6 @@ export class WarListComponent implements OnInit, OnChanges {
} else if (url.indexOf(subPathOverview) !== -1) { } else if (url.indexOf(subPathOverview) !== -1) {
this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')')); this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')'));
} }
});
} }
selectNewCampaign() { selectNewCampaign() {
@ -98,26 +94,8 @@ export class WarListComponent implements OnInit, OnChanges {
if (this.selectedWarId === war._id) { if (this.selectedWarId === war._id) {
this.selectOverview('all'); this.selectOverview('all');
} }
this.campaigns.forEach(campaign => { this.campaign.wars.splice(this.campaign.wars.indexOf(war), 1);
campaign.wars.splice(campaign.wars.indexOf(war), 1);
});
}); });
} }
} }
deleteCampaign(campaign) {
if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
this.campaignService.deleteCampaign(campaign._id)
.subscribe((res) => {
if (this.selectedWarId === campaign._id) {
this.selectOverview('all');
}
this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
});
}
}
editCampaign(selectCampaign) {
this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
}
} }

View File

@ -1,7 +1,6 @@
.overview { .overview {
overflow: hidden !important; overflow: hidden !important;
padding-top: 80px !important; width: 30vw;
width: 20%;
min-width: 380px; min-width: 380px;
} }

View File

@ -4,6 +4,7 @@
overflow-x: hidden; overflow-x: hidden;
border-left: thin solid lightgrey; border-left: thin solid lightgrey;
padding: 20px 0 0 50px; padding: 20px 0 0 50px;
top: 50px;
height: 100vh; height: 100vh;
bottom: 10px; bottom: 10px;
} }

View File

@ -25,7 +25,7 @@
} }
h3 { h3 {
margin: 80px 0 20px -20px; margin-left: -20px;
} }
label { label {

View File

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

View File

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

View File

@ -1,19 +1,15 @@
import {RouterModule, Routes} from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import {UsersComponent} from './users.component';
import {EditUserComponent} from './edit-user/edit-user.component'; import {EditUserComponent} from './edit-user/edit-user.component';
import {UserListComponent} from './user-list/user-list.component'; import {UserListComponent} from './user-list/user-list.component';
import {AwardUserComponent} from './award-user/award-user.component'; import {AwardUserComponent} from './award-user/award-user.component';
import {ModuleWithProviders} from '@angular/core'; import {ModuleWithProviders} from '@angular/core';
import {UserItemComponent} from './user-list/user-item.component'; import {UserItemComponent} from './user-list/user-item.component';
export const usersRoutes: Routes = [{ export const usersRoutes: Routes = [
path: '', component: UsersComponent,
children: [
{ {
path: '', path: '',
component: UserListComponent component: UserListComponent,
} outlet: 'left'
]
}, },
{ {
path: 'new', path: 'new',
@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{
export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes); export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];
AwardUserComponent];

View File

@ -40,17 +40,11 @@ form {
} }
#left { #left {
display: none; max-width: 20%;
width: 20%; min-width: 345px;
min-width: 350px; margin: 0;
max-width: 450px; position: static;
float: left; float: left;
background: #f9f9f9;
box-shadow: 2px 1px 5px grey;
}
#left:not(:empty) {
display:block!important;
} }
#right { #right {