Global layout (router outlet) rework and main setup for new stats page UI #43
|
@ -1,5 +1,5 @@
|
||||||
.overview {
|
.overview {
|
||||||
padding: 80px 0 0 10% !important;
|
padding-bottom: 50px!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash {
|
.trash {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<router-outlet></router-outlet>
|
|
|
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,19 +1,15 @@
|
||||||
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',
|
||||||
component: EditDecorationComponent,
|
component: EditDecorationComponent,
|
||||||
|
@ -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];
|
|
||||||
|
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<router-outlet></router-outlet>
|
|
|
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,19 +1,15 @@
|
||||||
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',
|
||||||
component: EditRankComponent,
|
component: EditRankComponent,
|
||||||
|
@ -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];
|
||||||
|
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<router-outlet></router-outlet>
|
|
|
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,19 +1,15 @@
|
||||||
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',
|
||||||
component: EditSquadComponent,
|
component: EditSquadComponent,
|
||||||
|
@ -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];
|
||||||
|
|
||||||
|
|
|
@ -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});
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 80px 0 20px -20px;
|
margin-left: -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
<router-outlet></router-outlet>
|
|
|
@ -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() {
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,20 +1,16 @@
|
||||||
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',
|
||||||
component: EditUserComponent,
|
component: EditUserComponent,
|
||||||
|
@ -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];
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue