Add interval dropdown

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, ButtonsModule, TabsModule} from "ngx-bootstrap";
+import {AccordionModule, BsDropdownModule, ButtonsModule, 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(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -101,7 +101,7 @@
 /* ########### CHART-TAB ######## */
 
 .chart-container {
-  width: 90%;
+  width: 95%;
   margin: 2%;
   min-width: 900px;
   height: 600px;
@@ -116,3 +116,7 @@
   display: block;
   vertical-align: middle;
 }
+
+.dropdown-menu > li > a {
+  cursor: pointer;
+}

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

@@ -25,8 +25,10 @@
       </div>
 
       <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>
+        <a class="btn btn-default" style="margin: 20px" target="_blank" onclick="window.open(this.href, 'logfileWindow',
+'left=20,top=20,width=1100,height=600,toolbar=1,resizable=0'); return false;"
+           href="resource/logs/{{war._id}}/clean.log">
+          Logfile anzeigen</a>
         <form class="form-group">
           <label class="radio-inline">
             <input type="radio" name="fractSelect"
@@ -95,6 +97,24 @@
         <img src="../../../assets/fraction-btn.png"> Fraktionen
       </ng-template>
 
+      <div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>
+        <button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">
+          {{dataMode}} <span class="caret"></span>
+        </button>
+        <ul *dropdownMenu class="dropdown-menu" role="menu">
+          <li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>
+          <li class="divider dropdown-divider"></li>
+          <li class="disabled" role="menuitem">
+            <a class="dropdown-item" style="cursor: default!important;">Interval:</a>
+          </li>
+          <li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>
+          <li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>
+          <li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>
+          <li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>
+          </li>
+        </ul>
+      </div>
+
       <div class="chart-select-group btn-group" (click)="selectChart()">
         <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
         <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</label>
@@ -102,8 +122,10 @@
         <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
         <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
         <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelTransport}}">{{labelTransport}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel"
+               btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel"
+               btnRadio="{{labelTransport}}">{{labelTransport}}</label>
       </div>
 
       <div *ngIf="showLineChart" class="chart-container">

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

@@ -79,6 +79,8 @@ export class WarDetailComponent {
   roundDomains = true;
   fractionChartsInitialized: boolean = false;
 
+  dataMode: string = 'Summe';
+
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
@@ -99,6 +101,7 @@ export class WarDetailComponent {
         Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
         this.chartSelectModel = this.labelPoints;
 
+        this.fractionRadioSelect = undefined;
         this.staticTabs.tabs[0].active = true;
         this.scrollOverviewTop();
       });
@@ -161,6 +164,10 @@ export class WarDetailComponent {
     }
   }
 
+  toggleDataMode(interval, entryString) {
+    this.dataMode = entryString;
+  }
+
   loadFractionData() {
     if (this.fractionChartsInitialized) {
       return;