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 {
padding: 80px 0 0 10% !important;
padding-bottom: 50px!important;
}
.trash {

View File

@ -105,17 +105,16 @@
</div>
<div>
<router-outlet></router-outlet>
<div style="max-width:18%">
<div id="left">
<router-outlet name="left"></router-outlet>
</div>
<div id="right">
<router-outlet name="right"></router-outlet>
</div>
</div>
<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 {DecorationComponent} from './decoration.component';
import {DecorationListComponent} from './decoration-list/decoration-list.component';
import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
import {ModuleWithProviders} from '@angular/core';
import {DecorationItemComponent} from './decoration-list/decoration-item.component';
export const decorationsRoutes: Routes = [{
path: '', component: DecorationComponent,
children: [
export const decorationsRoutes: Routes = [
{
path: '',
component: DecorationListComponent
}
]
component: DecorationListComponent,
outlet: 'left'
},
{
path: 'new',
@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
EditDecorationComponent];
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, 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 {RankComponent} from './ranks.component';
import {RankListComponent} from './rank-list/rank-list.component';
import {EditRankComponent} from './edit-rank/edit-rank.component';
import {RankItemComponent} from './rank-list/rank-item.component';
import {ModuleWithProviders} from '@angular/core';
export const ranksRoutes: Routes = [{
path: '', component: RankComponent,
children: [
export const ranksRoutes: Routes = [
{
path: '',
component: RankListComponent
}
]
component: RankListComponent,
outlet: 'left'
},
{
path: 'new',
@ -27,5 +23,5 @@ export const ranksRoutes: Routes = [{
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 {SquadComponent} from './squads.component';
import {SquadListComponent} from './squad-list/squad-list.component';
import {EditSquadComponent} from './edit-squad/edit-squad.component';
import {ModuleWithProviders} from '@angular/core';
import {SquadItemComponent} from './squad-list/squad-item.component';
export const squadsRoutes: Routes = [{
path: '', component: SquadComponent,
children: [
export const squadsRoutes: Routes = [
{
path: '',
component: SquadListComponent
}
]
component: SquadListComponent,
outlet: 'left'
},
{
path: 'new',
@ -27,5 +23,5 @@ export const squadsRoutes: Routes = [{
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[] = [];
collapsed: boolean = false;
collapsed = false;
constructor(private campaignService: CampaignService,
private router: Router,
@ -45,4 +45,22 @@ export class StatisticComponent implements OnInit {
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 {PlayerService} from '../services/logs/player.service';
import {LogsService} from '../services/logs/logs.service';
import {
MatButtonToggleModule,
MatSortModule,
MatTableModule
} from '@angular/material';
import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material';
@NgModule({

View File

@ -19,8 +19,6 @@ export class WarListComponent implements OnInit, OnChanges {
selectedWarId: string | number;
campaigns: Campaign[] = [];
public readonly highscore = 'HIGHSCORE';
constructor(private warService: WarService,
@ -31,17 +29,16 @@ export class WarListComponent implements OnInit, OnChanges {
}
ngOnChanges(changes: SimpleChanges) {
if (changes.campaign) this.selectedWarId = this.campaign._id;
if (changes.campaign) {
this.selectedWarId = this.campaign._id;
}
}
ngOnInit() {
this.campaignService.getAllCampaignsWithWars().subscribe((items) => {
const url = this.router.url;
const subPathWar = 'war/';
const subPathOverview = 'overview/';
this.campaignService.campaigns = items;
this.campaigns = items;
const url = this.router.url;
if (url.endsWith(RouteConfig.statsPath)) {
this.selectOverview(this.campaign._id);
} else if (url.indexOf(subPathWar) !== -1) {
@ -49,7 +46,6 @@ export class WarListComponent implements OnInit, OnChanges {
} else if (url.indexOf(subPathOverview) !== -1) {
this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')'));
}
});
}
selectNewCampaign() {
@ -98,26 +94,8 @@ export class WarListComponent implements OnInit, OnChanges {
if (this.selectedWarId === war._id) {
this.selectOverview('all');
}
this.campaigns.forEach(campaign => {
campaign.wars.splice(campaign.wars.indexOf(war), 1);
});
this.campaign.wars.splice(this.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 {
overflow: hidden !important;
padding-top: 80px !important;
width: 20%;
width: 30vw;
min-width: 380px;
}

View File

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

View File

@ -25,7 +25,7 @@
}
h3 {
margin: 80px 0 20px -20px;
margin-left: -20px;
}
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 {UsersComponent} from './users.component';
import {EditUserComponent} from './edit-user/edit-user.component';
import {UserListComponent} from './user-list/user-list.component';
import {AwardUserComponent} from './award-user/award-user.component';
import {ModuleWithProviders} from '@angular/core';
import {UserItemComponent} from './user-list/user-item.component';
export const usersRoutes: Routes = [{
path: '', component: UsersComponent,
children: [
export const usersRoutes: Routes = [
{
path: '',
component: UserListComponent
}
]
component: UserListComponent,
outlet: 'left'
},
{
path: 'new',
@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{
export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
AwardUserComponent];
export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];

View File

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