Add points and budget time graphs

api/package.json

@@ -3,6 +3,7 @@
   "licence": "CC BY-SA 4.0",
   "description": "RESTful API for Operation Pandora Trigger Command Center, includes signature generator",
   "main": "server.js",
+  "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
     "start": "NODE_ENV=production node server.js",

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();
   })
 }

api/routes/wars.js

@@ -150,7 +150,7 @@ wars.route('/:id')
         err.status = codes.notfound;
         return next(err);
       }
-      PlayerModel.find({warId: item._id}, {}, {sort: {sort: 'desc'}}, (err, items) => {
+      PlayerModel.find({warId: item._id}, {}, {sort: {kill: 'desc'}}, (err, items) => {
         if (err) {
           return next(err);
         }

api/tools/log-parse-tool.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const timeStringToDecimal = require('../tools/util').timeStringToDecimal;
-const arrayContains = require('./util').arrayContains;
+const playerArrayContains = require('./util').playerArrayContains;
 
 const parseWarLog = (lineArray, war) => {
   const nameToLongError = 'Error: ENAMETOOLONG: name too long, open \'';
@@ -20,7 +20,7 @@ const parseWarLog = (lineArray, war) => {
 
   const addPlayersIfNotExists = (inputPlayers) => {
     inputPlayers.forEach(player => {
-      if (player && player.name && player.fraction && !arrayContains(stats.players, player)) {
+      if (player && player.name && player.fraction && !playerArrayContains(stats.players, player)) {
         player['warId'] = war._id;
         stats.players.push(player);
       }

api/tools/util.js

@@ -29,7 +29,7 @@ const timeStringToDecimal = (timeString) => {
   const hour = parseInt(timeArray[0]);
   const sek = parseInt(timeArray[1]) * 60 + parseInt(timeArray[2]);
 
-  return hour + sek * (1 / 3600);
+  return hour + (sek / 3600);
 };
 
 
@@ -45,6 +45,6 @@ const decimalToTimeString = (decimal) => {
 };
 
 exports.sortCollection = sortCollectionBy;
-exports.arrayContains = playerArrayContains;
+exports.playerArrayContains = playerArrayContains;
 exports.timeStringToDecimal = timeStringToDecimal;
 exports.decimalToTimeString = decimalToTimeString;

package.json

@@ -2,6 +2,7 @@
   "name": "opt-cc",
   "version": "1.6.0",
   "license": "MIT",
+  "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
     "start": "npm run deploy-static-prod && npm start --prefix ./api",

static/package.json

@@ -1,6 +1,7 @@
 {
   "name": "opt-cc-static",
   "license": "MIT",
+  "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "angular-cli": {},
   "scripts": {
@@ -30,7 +31,6 @@
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
-    "ngx-bootstrap": "^2.0.0-beta.6",
     "ngx-clipboard": "^8.1.0",
     "ngx-cookie-service": "^1.0.9",
     "ngx-infinite-scroll": "^0.5.2",

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/campaign-player-detail/campaign-player-detail.component.ts

@@ -91,6 +91,10 @@ export class CampaignPlayerDetailComponent {
         this.reviveData = this.assignData(this.yAxisRevive, "revive");
         this.captureData = this.assignData(this.yAxisCapture, "flagTouch");
 
+        if (this.totalDeath === 0) {
+          // avoid infinite or NaN with no death
+          this.totalDeath = 1;
+        }
         this.kdRatio = parseFloat((this.totalKills / this.totalDeath).toFixed(2));
         if (this.kdRatio > 1) this.maxKd = this.kdRatio * 1.7;
 

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

@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+import {AccordionModule, TabsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -1,9 +1,15 @@
 .vertical-spacer {
-  height: 100vh;
+  height: 205px;
   float: left;
   width: 4%;
 }
 
+.head-field {
+  font-size: 24px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 @media screen and (min-width: 1500px) {
   .vertical-spacer {
     width: 15%;
@@ -36,6 +42,36 @@
   color: blue;
 }
 
+.chart-container {
+  width: 80%;
+  min-width: 500px;
+  height: 400px;
+  padding: 15px;
+  margin: 2%;
+  float: left;
+}
+
+/* ########### TABS ########### */
+
+:host /deep/ .nav-tabs {
+  padding-left: 35%!important;
+}
+
+:host /deep/ .nav-link {
+  background: #4b4b4b;
+  color: white;
+}
+
+:host /deep/ .nav-link:hover {
+  background: #286090;
+  color: #000;
+}
+
+:host /deep/ .nav-tabs>li.active>a{
+  background: #222222;
+  color: white;
+}
+
 /* ########### DATATABLE ########### */
 
 :host /deep/ .datatable-header {

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

@@ -1,20 +1,19 @@
 <div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class=vertical-spacer>
-  </div>
+  <div class=vertical-spacer></div>
   <div style="overflow:hidden">
-    <div style="width: 920px;min-height: 263px;">
+    <div style="width: 920px;min-height: 205px;">
       <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
-      <h3 class="pull-left" style="width: 250px">
+      <div class="pull-left head-field" style="width: 250px">
         <h4>Endpunktestand:</h4>
         <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
         <span style="font-size: x-large">|</span>
         <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
-      </h3>
+      </div>
 
-      <h3 class="pull-left" style="padding-left: 150px;">
-        <h4>Teilnehmer:</h4>
+      <div class="pull-left head-field " style="padding-left: 150px;">
+        <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
         <ngx-charts-pie-chart
-          [view]="[150, 150]"
+          [view]="[120, 120]"
           [scheme]="{domain: ['#B22222', '#0000FF']}"
           [results]="playerChart"
           [legend]="false"
@@ -23,9 +22,9 @@
           [doughnut]="false"
           [gradient]="false">
         </ngx-charts-pie-chart>
-      </h3>
+      </div>
 
-      <div class="pull-left" style="padding-left: 150px; padding-top:15px">
+      <div class="pull-left " style="padding-left: 150px; padding-top:15px">
         <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
           anzeigen</a>
         <form class="form-group">
@@ -51,38 +50,85 @@
         </form>
       </div>
     </div>
+  </div>
 
-    <!--may be added in future: [sorts]="[{prop: 'sort', dir: 'desc'}]"-->
-    <ngx-datatable
-      [rows]="rows"
-      [reorderable]="reorderable"
-      [messages]="{emptyMessage: 'Loading...'}"
-      [headerHeight]="cellHeight"
-      [rowHeight]="cellHeight"
-      [cssClasses]='customClasses'
-      [selectionType]="'single'"
-      (select)="selectPlayerDetail($event)">
-      <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
-        <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+  <tabset>
+    <tab>
+      <ng-template tabHeading>
+        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
+      </ng-template>
+      <div class=vertical-spacer></div>
+      <ngx-datatable
+        [rows]="rows"
+        [sorts]="[{prop: 'kill', dir: 'desc'}]"
+        [reorderable]="reorderable"
+        [messages]="{emptyMessage: 'Loading...'}"
+        [headerHeight]="cellHeight"
+        [rowHeight]="cellHeight"
+        [cssClasses]='customClasses'
+        [selectionType]="'single'"
+        (select)="selectPlayerDetail($event)">
+        <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
+          <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
         <span class="player-name"
               [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
           {{value}}
         </span>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
-        <ng-template ngx-datatable-cell-template let-value="value">
-          {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
-      <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
-      <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
-    </ngx-datatable>
-  </div>
+          </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
+          <ng-template ngx-datatable-cell-template let-value="value">
+            {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
+          </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+        <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
+        <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
+      </ngx-datatable>
+    </tab>
 
+    <tab (select)="loadFractionData()">
+      <ng-template tabHeading>
+        <img src="../../../assets/fraction-btn.png"> Fraktionen
+      </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>
 
 </div>

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();
       });
   }
@@ -83,4 +106,73 @@ export class WarDetailComponent {
     }
   }
 
+  loadFractionData() {
+    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;
+    }
+  }
+
 }

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

@@ -26,7 +26,7 @@ div.user-list-entry, a.user-list-entry {
   background: lightgrey;
 }
 
-span {
+span > a, span.glyphicon, span.icon-award{
   cursor: pointer;
 }