Add basic statistic page

static/src/app/app.component.html

@@ -31,6 +31,9 @@
               <li *ngIf="loginService.hasPermission(3)">
                 <a routerLink='/cc-wars' class="link">Hinzufügen...</a>
               </li>
+              <li>
+                <a routerLink='/cc-statistic' class="link">Übersicht</a>
+              </li>
               <li *ngFor="let war of wars">
                 <a [routerLink]="['/cc-wars/' + war._id]">{{war.title}}
                   <small>{{war.date | date: 'dd.MM.yy'}}</small>

static/src/app/app.routing.ts

@@ -14,6 +14,7 @@ import {RequestPromotionComponent} from "./request/promotion/req-promotion.compo
 import {ConfirmPromotionComponent} from "./request/confirm-promotion/confirm-promotion.component";
 import {ConfirmAwardComponent} from "./request/confirm-award/confirm-award.component";
 import {warRoutes, warsRoutingComponents} from "./wars/wars.routing";
+import {StatisticComponent} from "./statistic/statistic.component";
 
 
 export const appRoutes: Routes = [
@@ -22,6 +23,7 @@ export const appRoutes: Routes = [
   {path: '', redirectTo: '/cc-overview', pathMatch: 'full'},
 
   {path: 'cc-wars', children: warRoutes},
+  {path: 'cc-statistic', component: StatisticComponent},
 
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: SignupComponent},
@@ -46,7 +48,7 @@ export const appRoutes: Routes = [
 export const appRouting = RouterModule.forRoot(appRoutes);
 
 export const routingComponents = [LoginComponent, SignupComponent, RequestAwardComponent, RequestPromotionComponent, ConfirmAwardComponent,
-  ConfirmPromotionComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents,
+  ConfirmPromotionComponent, StatisticComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents,
   ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents, ...warsRoutingComponents];
 
 export const routingProviders = [LoginGuardSQL, LoginGuardHL, LoginGuardMT, LoginGuardAdmin];

static/src/app/army/army.component.html

@@ -2,24 +2,6 @@
 
 <div style="width: 1200px; margin-left: 25%">
 
-  <ngx-charts-line-chart
-    [view]="view"
-    [scheme]="colorScheme"
-    [results]="chartData"
-    [gradient]="gradient"
-    [xAxis]="showXAxis"
-    [yAxis]="showYAxis"
-    [legend]="showLegend"
-    [legendTitle]="legendTitle"
-    [showXAxisLabel]="showXAxisLabel"
-    [showYAxisLabel]="showYAxisLabel"
-    [xAxisLabel]="xAxisLabel"
-    [yAxisLabel]="yAxisLabel"
-    [autoScale]="autoScale"
-    [timeline]="timeline"
-    (select)="onSelect($event)">
-  </ngx-charts-line-chart>
-
   <div class="div-table" style="width: 490px; float:left">
     <h3 class="text-blufor army-head">NATO</h3>
     <div *ngFor="let squad of army.NATO.squads" style="outline:1px solid #D4D4D4;">

static/src/app/army/army.component.ts

@@ -1,8 +1,7 @@
 import {Component} from "@angular/core";
-import {Army, War} from "../models/model-interfaces";
+import {Army} from "../models/model-interfaces";
 import {ArmyService} from "../services/army-service/army.service";
 import {ActivatedRoute, Router} from "@angular/router";
-import {WarService} from "../services/war-service/war.service";
 
 
 @Component({
@@ -14,34 +13,9 @@ export class ArmyComponent {
 
   army: Army = {NATO: {squads: [], memberCount: 0}, CSAT: {squads: [], memberCount: 0}};
 
-  chartData: any[] = [];
-
-  view: any[] = [700, 400];
-
-  // options
-  showXAxis = true;
-  showYAxis = true;
-  timeline=true;
-  gradient = false;
-  showLegend = true;
-  legendTitle = "";
-  showXAxisLabel = true;
-  xAxisLabel = 'Schlachtdatum';
-  showYAxisLabel = true;
-  yAxisLabel = 'Punkte';
-
-  colorScheme = {
-    domain: ['#0000FF', '#B22222', '#C7B42C', '#AAAAAA']
-  };
-
-  // line, area
-  autoScale = false;
-
   constructor(private router: Router,
               private route: ActivatedRoute,
-              private armyService: ArmyService,
-              private warService: WarService) {
-    Object.assign(this, this.chartData)
+              private armyService: ArmyService) {
   }
 
   ngOnInit() {
@@ -49,39 +23,10 @@ export class ArmyComponent {
       .subscribe(army => {
         this.army = army;
       });
-    this.warService.getAllWars()
-      .subscribe((wars) => {
-      let updateObj = [{
-          "name": "NATO",
-          "series": []
-        },
-        {
-          "name": "CSAT",
-          "series": []
-        }];
-        for (let i = 0; i < wars.length; i++) {
-          let warDateString = wars[i].date;
-          let bluforData = {
-            name: warDateString,
-            value: wars[i].ptBlufor
-          };
-          updateObj[0].series.push(bluforData);
-          let opforData = {
-            name: warDateString,
-            value: wars[i].ptOpfor
-          };
-          updateObj[1].series.push(opforData);
-        }
-        this.chartData = updateObj;
-    })
   };
 
   select(memberId) {
     this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
 
-  onSelect(event) {
-    console.log(event);
-  }
-
 }

static/src/app/statistic/statistic.component.css

@@ -0,0 +1,48 @@
+h1 {
+  width: 920px;
+  margin-bottom: 50px;
+  margin-left: 25%
+}
+
+img {
+  margin-top: 10px;
+  padding-right: 30px;
+}
+
+.div-table {
+  display: table;
+  border-radius: 10px;
+  margin-left: 1%;
+  width: auto;
+  border-spacing: 5px; /* cellspacing:poor IE support for  this */
+}
+
+.div-table-row {
+  display: table-row;
+  width: auto;
+  clear: both;
+}
+
+.div-table-col {
+  float: left; /* fix for  buggy browsers */
+  display: table-column;
+  padding: 5px 15px 5px 15px;
+}
+
+.army-head {
+  font-weight: bolder;
+  text-align: center
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.text-opfor {
+  color: firebrick;
+}
+
+.text-blufor {
+  color: blue;
+}

static/src/app/statistic/statistic.component.html

@@ -0,0 +1,23 @@
+<h3>Statistik</h3>
+
+<div style="width: 1200px; margin-left: 25%">
+
+  <ngx-charts-line-chart
+    [view]="[1050, 400]"
+    [scheme]="colorScheme"
+    [results]="chartData"
+    [gradient]="false"
+    [xAxis]="true"
+    [yAxis]="true"
+    [legend]="true"
+    [legendTitle]="''"
+    [showXAxisLabel]="true"
+    [showYAxisLabel]="true"
+    [xAxisLabel]="Schlachtdatum"
+    [yAxisLabel]="Punkte"
+    [autoScale]="false"
+    [timeline]="true"
+    (select)="onSelect($event)">
+  </ngx-charts-line-chart>
+
+</div>

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

@@ -0,0 +1,54 @@
+import {Component} from "@angular/core";
+import {WarService} from "../services/war-service/war.service";
+
+
+@Component({
+  selector: 'statistic',
+  templateUrl: './statistic.component.html',
+  styleUrls: ['./statistic.component.css']
+})
+export class StatisticComponent {
+
+  chartData: any[] = [];
+
+  colorScheme = {
+    domain: ['#0000FF', '#B22222', '#C7B42C', '#AAAAAA']
+  };
+
+  constructor(private warService: WarService) {
+    Object.assign(this, this.chartData)
+  }
+
+  ngOnInit() {
+    this.warService.getAllWars()
+      .subscribe((wars) => {
+        let updateObj = [{
+          "name": "NATO",
+          "series": []
+        },
+          {
+            "name": "CSAT",
+            "series": []
+          }];
+        for (let i = 0; i < wars.length; i++) {
+          let warDateString = new Date(wars[i].date);
+          let bluforData = {
+            name: warDateString,
+            value: wars[i].ptBlufor
+          };
+          updateObj[0].series.push(bluforData);
+          let opforData = {
+            name: warDateString,
+            value: wars[i].ptOpfor
+          };
+          updateObj[1].series.push(opforData);
+        }
+        this.chartData = updateObj;
+      })
+  };
+
+  onSelect(event) {
+    console.log(event);
+  }
+
+}