Rework management two column layouts

static/src/app/admin/admin.component.css

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

static/src/app/app.component.html

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

static/src/app/decorations/decoration.component.html

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

static/src/app/decorations/decoration.component.ts

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

static/src/app/decorations/decoration.routing.ts

@@ -1,19 +1,15 @@
 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 = [{
+export const decorationsRoutes: Routes = [
-  path: '', component: DecorationComponent,
+  {
-  children: [
+    path: '',
-    {
+    component: DecorationListComponent,
-      path: '',
+    outlet: 'left'
-      component: DecorationListComponent
+  },
-    }
-  ]
-},
   {
     path: 'new',
     component: EditDecorationComponent,
@@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{
 
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
-export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
+export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
-  EditDecorationComponent];
 

static/src/app/ranks/ranks.component.html

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

static/src/app/ranks/ranks.component.ts

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

static/src/app/ranks/ranks.routing.ts

@@ -1,19 +1,15 @@
 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 = [{
+export const ranksRoutes: Routes = [
-  path: '', component: RankComponent,
+  {
-  children: [
+    path: '',
-    {
+    component: RankListComponent,
-      path: '',
+    outlet: 'left'
-      component: RankListComponent
+  },
-    }
-  ]
-},
   {
     path: 'new',
     component: EditRankComponent,
@@ -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];
 

static/src/app/squads/squads.component.html

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

static/src/app/squads/squads.component.ts

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

static/src/app/squads/squads.routing.ts

@@ -1,19 +1,15 @@
 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 = [{
+export const squadsRoutes: Routes = [
-  path: '', component: SquadComponent,
+  {
-  children: [
+    path: '',
-    {
+    component: SquadListComponent,
-      path: '',
+    outlet: 'left'
-      component: SquadListComponent
+  },
-    }
-  ]
-},
   {
     path: 'new',
     component: EditSquadComponent,
@@ -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];
 

static/src/app/statistic/stats.component.ts

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

static/src/app/statistic/stats.module.ts

@@ -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 {
+import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material';
-  MatButtonToggleModule,
-  MatSortModule,
-  MatTableModule
-} from '@angular/material';
 
 
 @NgModule({

static/src/app/statistic/war/war-list/war-list.component.ts

@@ -19,8 +19,6 @@ export class WarListComponent implements OnInit, OnChanges {
 
   selectedWarId: string | number;
 
-  campaigns: Campaign[] = [];
-
   public readonly highscore = 'HIGHSCORE';
 
   constructor(private warService: WarService,
@@ -31,25 +29,23 @@ 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 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) {
+      this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')'));
-        this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')'));
+    } 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() {
@@ -98,26 +94,8 @@ export class WarListComponent implements OnInit, OnChanges {
             if (this.selectedWarId === war._id) {
               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});
-  }
 }

static/src/app/style/entry-form.css

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

static/src/app/style/overview.css

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

static/src/app/users/award-user/award-user.component.css

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

static/src/app/users/users.component.html

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

static/src/app/users/users.component.ts

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

static/src/app/users/users.routing.ts

@@ -1,20 +1,16 @@
 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 = [{
+export const usersRoutes: Routes = [
-  path: '', component: UsersComponent,
+  {
-  children: [
+    path: '',
-    {
+    component: UserListComponent,
-      path: '',
+    outlet: 'left'
-      component: UserListComponent
+  },
-    }
-  ]
-},
   {
     path: 'new',
     component: EditUserComponent,
@@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{
 
 export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
 
-export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
+export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];
-  AwardUserComponent];

static/src/styles.css

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