Add interval dropdown

pull/17/head
HardiReady 2017-11-03 14:43:04 +01:00
parent 9198d59fa5
commit 8f34d44139
4 changed files with 40 additions and 7 deletions

View File

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

View File

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

View File

@ -25,8 +25,10 @@
</div> </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 <a class="btn btn-default" style="margin: 20px" target="_blank" onclick="window.open(this.href, 'logfileWindow',
anzeigen</a> '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"> <form class="form-group">
<label class="radio-inline"> <label class="radio-inline">
<input type="radio" name="fractSelect" <input type="radio" name="fractSelect"
@ -95,6 +97,24 @@
<img src="../../../assets/fraction-btn.png"> Fraktionen <img src="../../../assets/fraction-btn.png"> Fraktionen
</ng-template> </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()"> <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="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</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="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</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="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelStabilize}}">{{labelStabilize}}</label> <label class="btn btn-default" [(ngModel)]="chartSelectModel"
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelTransport}}">{{labelTransport}}</label> btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel"
btnRadio="{{labelTransport}}">{{labelTransport}}</label>
</div> </div>
<div *ngIf="showLineChart" class="chart-container"> <div *ngIf="showLineChart" class="chart-container">

View File

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