Add points and budget time graphs

api/routes/logs.js

@@ -5,6 +5,7 @@ const express = require('express');
 const logger = require('debug')('cc:logs');
 
 const routerHandling = require('../middleware/router-handling');
+const decimalToTimeString = require('../tools/util').decimalToTimeString;
 
 // Mongoose Model using mongoDB
 const LogBudgetModel = require('../models/logs/budget');
@@ -25,7 +26,13 @@ function processLogRequest(model, filter, res, next) {
       err.status = require('./http-codes').notfound;
       return next(err)
     }
-    res.locals.items = log;
+    const updatedTimeItems = [];
+    for (let i =0; i <log.length; i++) {
+      let item = log[i].toObject();
+      item.time = decimalToTimeString(item.time);
+      updatedTimeItems.push(item);
+    }
+    res.locals.items = updatedTimeItems;
     next();
   })
 }

static/src/app/models/model-interfaces.ts

@@ -50,6 +50,10 @@ export interface War {
   ptOpfor?: number;
   playersBlufor?: number;
   playersOpfor?: number;
+  budgetBlufor?: number;
+  budgetOpfor?: number;
+  endBudgetBlufor?: number;
+  endBudgetOpfor?: number;
   players?: Player[];
   campaign?: string;
 }

static/src/app/services/logs/logs.service.ts

@@ -11,7 +11,6 @@ export class LogsService {
   }
 
   getBudgetLogs(warId: string, fraction = '') {
-    console.log("CALL")
     const params = new URLSearchParams();
     params.append('fraction', fraction);
     return this.http.get(this.config.apiLogsPath + '/' + warId + '/budget', params)

static/src/app/statistic/war-detail/war-detail.component.css

@@ -42,6 +42,15 @@
   color: blue;
 }
 
+.chart-container {
+  width: 80%;
+  min-width: 500px;
+  height: 400px;
+  padding: 15px;
+  margin: 2%;
+  float: left;
+}
+
 /* ########### TABS ########### */
 
 :host /deep/ .nav-tabs {
@@ -54,7 +63,7 @@
 }
 
 :host /deep/ .nav-link:hover {
-  background: aliceblue;
+  background: #286090;
   color: #000;
 }
 

static/src/app/statistic/war-detail/war-detail.component.html

@@ -54,9 +54,9 @@
 
   <tabset>
     <tab>
-      <template tabHeading>
+      <ng-template tabHeading>
         <img src="../../../assets/scoreboard-btn.png"> Scoreboard
-      </template>
+      </ng-template>
       <div class=vertical-spacer></div>
       <ngx-datatable
         [rows]="rows"
@@ -91,10 +91,43 @@
     </tab>
 
     <tab (select)="loadFractionData()">
-      <template tabHeading>
+      <ng-template tabHeading>
         <img src="../../../assets/fraction-btn.png"> Fraktionen
-      </template>
-      I've got an HTML heading, and a select callback. Pretty cool!
+      </ng-template>
+      <div class="fade-in chart-container">
+        <ngx-charts-line-chart
+          [scheme]="colorScheme"
+          [results]="pointData"
+          [gradient]="gradient"
+          [xAxis]="xAxis"
+          [yAxis]="yAxis"
+          [legend]="legend"
+          [legendTitle]="legendTitle"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+          [yAxisLabel]="yAxisLabelPoints"
+          [autoScale]="autoscale"
+          [timeline]="timeline"
+          [roundDomains]="roundDomains">
+        </ngx-charts-line-chart>
+      </div>
+      <div class="fade-in chart-container">
+        <ngx-charts-line-chart
+          [scheme]="colorScheme"
+          [results]="budgetData"
+          [gradient]="gradient"
+          [xAxis]="xAxis"
+          [yAxis]="yAxis"
+          [legend]="legend"
+          [legendTitle]="legendTitle"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+          [yAxisLabel]="yAxisLabelBudget"
+          [autoScale]="autoscale"
+          [timeline]="timeline"
+          [roundDomains]="roundDomains">
+        </ngx-charts-line-chart>
+      </div>
     </tab>
   </tabset>
 

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

@@ -31,10 +31,32 @@ export class WarDetailComponent {
     sortDescending: 'glyphicon glyphicon-triangle-bottom',
   };
 
+  pointData: any[] = [];
+  budgetData: any[] = [];
+
+  colorScheme = {
+    domain: ['#0000FF', '#B22222']
+  };
+
+  yAxisLabelPoints = 'Punkte';
+  yAxisLabelBudget = 'Budget';
+
+  gradient = false;
+  yAxis = true;
+  xAxis = true;
+  legend = false;
+  legendTitle = false;
+  showXAxisLabel = false;
+  showYAxisLabel = true;
+  autoscale = true;
+  timeline = false;
+  roundDomains = true;
+  fractionInitialized: boolean = false;
+
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private warService: WarService) {
-    Object.assign(this, this.playerChart)
+              private warService: WarService,
+              private logsService: LogsService) {
   }
 
   ngOnInit() {
@@ -55,6 +77,7 @@ export class WarDetailComponent {
             "value": war.playersBlufor
           }
         ];
+        Object.assign(this, [this.playerChart, this.pointData, this.budgetData]);
         this.scrollOverviewTop();
       });
   }
@@ -84,7 +107,72 @@ export class WarDetailComponent {
   }
 
   loadFractionData() {
-    console.log('load data from server')
+    if (!this.fractionInitialized) {
+      const tmpPointData = [
+        {
+          "name": "NATO",
+          "series": []
+        },
+        {
+          "name": "CSAT",
+          "series": []
+        }
+      ];
+      const tmpBudgetData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpKillData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpFrienlyFireData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpTransportData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpReviveData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpStabilizeData = JSON.parse(JSON.stringify(tmpPointData));
+      const tmpFlagCaptureData = JSON.parse(JSON.stringify(tmpPointData));
+
+      // POINTS
+      this.logsService.getPointsLogs(this.war._id).subscribe((data) => {
+        data.forEach(pointEntry => {
+          const dateObj = new Date(this.war.date);
+          const time = pointEntry.time.split(':');
+          dateObj.setHours(time[0]);
+          dateObj.setMinutes(time[1]);
+          tmpPointData[0].series.push({
+            "name": dateObj,
+            "value": pointEntry.ptBlufor
+          });
+          tmpPointData[1].series.push({
+            "name": dateObj,
+            "value": pointEntry.ptOpfor
+          });
+        });
+        this.pointData = tmpPointData;
+      });
+
+      // BUDGET
+      this.logsService.getBudgetLogs(this.war._id).subscribe((data) => {
+        const dateObj = new Date(this.war.date);
+        dateObj.setHours(0);
+        dateObj.setMinutes(0);
+        tmpBudgetData[0].series.push({
+          "name": dateObj,
+          "value": this.war.budgetBlufor
+        });
+        tmpBudgetData[1].series.push({
+          "name": dateObj,
+          "value": this.war.budgetOpfor
+        });
+        data.forEach(budgetEntry => {
+          const time = budgetEntry.time.split(':');
+          const dateObj = new Date(this.war.date);
+          dateObj.setHours(time[0]);
+          dateObj.setMinutes(time[1]);
+          tmpBudgetData[budgetEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({
+            "name": dateObj,
+            "value": budgetEntry.newBudget
+          });
+        });
+        this.budgetData = tmpBudgetData;
+      });
+
+      this.fractionInitialized = true;
+    }
   }
 
 }