Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Angular result selection (merged) #196

Merged
merged 57 commits into from May 16, 2019
Merged
Changes from 1 commit
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
b2d551c
[IT-2647] Initially added the Angular module and embedded it into the…
finnmartens Mar 4, 2019
07239e5
[IT-2647] Added models for the result selection service and methods f…
finnmartens Mar 8, 2019
60b8290
[IT-2647] Only include used parameters in the service and added model…
finnmartens Mar 8, 2019
109675a
[IT-2647] Added foundation for Time frame selection and testing alter…
finnmartens Mar 14, 2019
41d0f51
[IT-2647/49] Changed timepicker to ng-datetime-picker.
finnmartens Mar 22, 2019
c37e9d4
[IT-2649] Added comparative time selection.
finnmartens Mar 26, 2019
48aaec1
[IT-2647] Add aggregation interval field and change behaviour for man…
DanielSteger Mar 27, 2019
60b4577
Merge develop into feature/angularModuleForResultSelection
DanielSteger Mar 29, 2019
20275bf
merged the result-selection service and optimized the timeframe
Mar 29, 2019
8733b92
[IT-2647] Comment out the module and fix timezone in time frame selec…
DanielSteger Apr 2, 2019
28fac0f
[IT-2649] Removed empty component.
finnmartens Apr 9, 2019
9664717
[IT-2649] Imported needed Modules for initial Angular tests. Removed …
finnmartens Apr 9, 2019
21d414b
[IT-2649] package-lock.json
finnmartens Apr 10, 2019
1d76530
[IT-2649] Added tests for the time frame selection and changed the la…
finnmartens Apr 10, 2019
8007b2b
[2650]added jobgroup selection and shared service for communication b…
Apr 16, 2019
8510922
[IT-2650] sorted the jobgroups alphabetically
Apr 17, 2019
dd70935
[IT-2651] package-lock.json
finnmartens Apr 18, 2019
ca9b8d7
[IT-2651] Added ng-select dependency for having a searchable and modi…
finnmartens Apr 18, 2019
aefdb24
[IT-2651] Added first draft for the page location connectivity result…
finnmartens Apr 18, 2019
e2cab7a
[IT-2651] Included the new component so the initial test can run succ…
finnmartens Apr 18, 2019
1e2a83f
[IT-2650] Added filter tags
Apr 24, 2019
4499e5e
[IT-2650] changed the filter behaviour
Apr 26, 2019
8964bca
[IT-2651] Refactored selection of values and added i18n.
finnmartens Apr 30, 2019
932a8d6
[IT-2651] Removed test data and loading.
finnmartens Apr 30, 2019
18615fd
[IT-2650] Added some tests and changed the behavior for the filter ta…
Apr 30, 2019
eca6323
[IT-2651] Added filter mechanism so that the selectable sub-category …
May 2, 2019
4d78a29
[IT-2651] Fixed wrongly associated label and created initial basic te…
May 2, 2019
efdd813
[IT-2650] Added more tests and disabled selection for the dates in th…
May 3, 2019
a7f24bd
[IT-2651] Added additional test case.
finnmartens May 6, 2019
95eeeda
Merge remote-tracking branch 'origin/develop' into feature/angularPag…
finnmartens May 6, 2019
94133b0
[IT-2649] Removed reference to currently disabled component, all para…
finnmartens May 7, 2019
6d89294
[IT-2649] Removed log.
finnmartens May 7, 2019
5b0220a
Merge remote-tracking branch 'origin/develop' into feature/angularMod…
finnmartens May 7, 2019
8d84c32
[IT-2650] deleted the data sharing from time frame component and opti…
May 7, 2019
761fa59
Update frontend/src/app/modules/result-selection/components/result-se…
finnmartens May 8, 2019
7cf69fa
Update frontend/src/app/modules/result-selection/components/result-se…
finnmartens May 8, 2019
99cc1bb
Update frontend/src/app/modules/result-selection/components/result-se…
finnmartens May 8, 2019
160e3f5
Update frontend/src/app/modules/result-selection/result-selection.com…
finnmartens May 8, 2019
c7630cf
Update frontend/src/app/modules/result-selection/components/result-se…
finnmartens May 8, 2019
31393e3
Update frontend/src/app/modules/result-selection/components/result-se…
finnmartens May 8, 2019
2685967
Apply suggestions from code review
finnmartens May 8, 2019
65f4de3
[IT-2650] handled job groups selection and renamed jobGroup component…
jiayiw5 May 8, 2019
4246496
[IT-2650] deleted the references to the component in gsp
jiayiw5 May 8, 2019
7f6de87
Merge branch 'develop' into feature/angularPageBrowserConnectivityRes…
PhilAlbrecht May 8, 2019
4eade6c
[IT-2700] Add measurand component
DanielSteger May 9, 2019
7753404
[IT-2700] Change model in measurand component
DanielSteger May 9, 2019
a199579
[IT-2700] Add observables in measurand component
DanielSteger May 10, 2019
ea819d1
Merge branch 'develop' into feature/angularModuleForResultSelection
finnmartens May 14, 2019
9ec0d3b
[IT-2700] Fix tests
DanielSteger May 14, 2019
168b635
Fix typo
DanielSteger May 14, 2019
164dce9
Merge branch 'develop' into feature/angularModuleForResultSelection
finnmartens May 15, 2019
122d71a
Merge remote-tracking branch 'origin/develop' into feature/angularRes…
finnmartens May 16, 2019
d4c03cc
Merge remote-tracking branch 'origin/feature/angularModuleForJobGroup…
finnmartens May 16, 2019
aa1ea2c
Merge branch 'feature/angularPageBrowserConnectivityResultSelection' …
finnmartens May 16, 2019
15ad28f
Merge remote-tracking branch 'origin/feature/angularMeasurandsResultS…
finnmartens May 16, 2019
e9bad0c
Additional merge changes
finnmartens May 16, 2019
4781f62
Merge branch 'develop' into feature/angularResultSelection
finnmartens May 16, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

[IT-2647] Added foundation for Time frame selection and testing alter…

…native date picker.
  • Loading branch information...
finnmartens committed Mar 14, 2019
commit 109675a6511041122aea46c2283d06da28dff5d8
@@ -0,0 +1,3 @@
<p>
result-selection-application works!
</p>
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ResultSelectionApplicationComponent } from './result-selection-application.component';

describe('ResultSelectionApplicationComponent', () => {
let component: ResultSelectionApplicationComponent;
let fixture: ComponentFixture<ResultSelectionApplicationComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ResultSelectionApplicationComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ResultSelectionApplicationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'osm-result-selection-application',
templateUrl: './result-selection-application.component.html',
styleUrls: ['./result-selection-application.component.scss']
})
export class ResultSelectionApplicationComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}
@@ -0,0 +1,41 @@
<div class="card form-horizontal">
<h2>{{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.heading' | translate }}</h2>

<div class="row form-group">

<label class="control-label col-md-4">
{{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.heading' | translate }}
</label>
<div class="col-md-8">
<select class="form-control" [(ngModel)]="timeFrameInSeconds" (ngModelChange)="selectTimeFrame()">
<option *ngFor="let seconds of selectableTimeFramesInSeconds" [value]="seconds">
{{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.' + seconds | translate }}
</option>
</select>
</div>
</div>

<div class="row form-group">
<div class="col-md-8 col-md-offset-4">
<div class="input-group" [formGroup]="timeSelectionForm">
<ng2-flatpickr formControlName="timeFrame" #resultSelectionFlatpickr id="resultSelectionFlatpickr" [config]="resultSelectionFlatpickrOptions" [addClass]="'form-control'"></ng2-flatpickr>
<span class="input-group-addon">{{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.to' | translate }}</span>
<input type="text" #resultSelectionFlatpickrSecondField id="resultSelectionFlatpickrSecondField" class="form-control">
</div>
</div>
</div>


<div class="row form-group">
<div class="col-md-8 col-md-offset-4">
<button type="button" class="btn btn-default btn-block">
<i class="fas fa-plus"></i> {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.heading' | translate }}
</button>
</div>
</div>

</div>

<p>
<button (click)="updateName()">Update Name</button>
</p>
@@ -0,0 +1,10 @@
#resultSelectionFlatpickr > div > input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: transparent;
}

#resultSelectionFlatpickrSecondField {
background: transparent;
cursor: pointer;
}
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ResultSelectionTimeFrameComponent } from './result-selection-time-frame.component';

describe('ResultSelectionTimeFrameComponent', () => {
let component: ResultSelectionTimeFrameComponent;
let fixture: ComponentFixture<ResultSelectionTimeFrameComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ResultSelectionTimeFrameComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(ResultSelectionTimeFrameComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,97 @@
import {Component, ElementRef, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {formatDate} from "@angular/common";
import {Caller, ResultSelectionCommand} from "../../models/result-selection-command.model";
import {Chart} from "../../models/result-selection-chart.model";
import {ResultSelectionService} from "../../services/result-selection.service";
import {FlatpickrOptions, Ng2FlatpickrComponent} from "ng2-flatpickr";
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin'
import German from 'flatpickr/dist/l10n/de'
import {OsmLangService} from "../../../../services/osm-lang.service";
import {FormControl, FormGroup} from "@angular/forms";

@Component({
selector: 'osm-result-selection-time-frame',
templateUrl: './result-selection-time-frame.component.html',
styleUrls: ['./result-selection-time-frame.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ResultSelectionTimeFrameComponent implements OnInit {

@Input() currentChart: string;
@ViewChild("resultSelectionFlatpickr") resultSelectionFlatpickr: Ng2FlatpickrComponent;
@ViewChild("resultSelectionFlatpickrSecondField") resultSelectionFlatpickrSecondField: ElementRef;

from: Date;
to: Date;

timeSelectionForm = new FormGroup({
timeFrame: new FormControl(),
});

selectableTimeFramesInSeconds: number[] = [0, 3600, 43200, 86400, 259200, 604800, 1209600, 2419200];
timeFrameInSeconds: number = 0;

resultSelectionFlatpickrOptions: FlatpickrOptions;

constructor(private resultSelectionService: ResultSelectionService, private osmLangService: OsmLangService) {
}

ngOnInit() {
let defaultFrom = new Date();
let defaultTo = new Date();
defaultTo.setHours(23, 59, 59, 999);
defaultFrom.setDate(defaultTo.getDate() - 28);
defaultFrom.setHours(0, 0, 0, 0);

let defaultResultSelectionCommand = new ResultSelectionCommand({
from: defaultFrom,
to: defaultTo,
caller: Caller.EventResult,
jobGroupIds: [],
pageIds: [],
locationIds: [],
browserIds: [],
measuredEventIds: [],
selectedConnectivities: []
});

this.resultSelectionService.loadSelectableData(defaultResultSelectionCommand, Chart[this.currentChart]);

this.from = defaultFrom;
this.to = defaultTo;

this.updateFlatpickrConfig();
this.timeFrameInSeconds = this.selectableTimeFramesInSeconds[7];
this.timeSelectionForm.setValue({'timeFrame': [this.from, this.to]});
this.resultSelectionFlatpickrSecondField.nativeElement.value = formatDate(this.to, 'dd.LL.yyyy HH:mm', 'en');
}

private updateFlatpickrConfig(): void {
this.resultSelectionFlatpickrOptions = {
dateFormat: 'd.m.Y H:i',
enableTime: true,
time_24hr: true,
defaultDate: this.from,
...(this.osmLangService.getOsmLang() === 'de' && { locale: German.de }),
plugins: [rangePlugin({ input: "#resultSelectionFlatpickrSecondField" })],
};
}

selectTimeFrame(): void {
this.from = new Date();
this.to = new Date();
this.from.setSeconds(this.to.getSeconds() - this.timeFrameInSeconds);
if (this.timeFrameInSeconds >= 259200) {
this.to.setHours(23, 59, 59, 999);
this.from.setHours(0, 0, 0, 0);
}

this.timeSelectionForm.setValue({'timeFrame': [this.from, this.to]});
this.resultSelectionFlatpickr.flatpickrElement.nativeElement._flatpickr.setDate(this.from);
this.resultSelectionFlatpickrSecondField.nativeElement.value = formatDate(this.to, 'dd.LL.yyyy HH:mm', 'en');
}

updateName() {
console.log(this.timeSelectionForm.value);
}
}
@@ -4,12 +4,15 @@ import {ResultSelectionService} from "./services/result-selection.service";
import {SharedModule} from "../shared/shared.module";
import { ResultSelectionTimeFrameComponent } from './components/result-selection-time-frame/result-selection-time-frame.component';
import { ResultSelectionApplicationComponent } from './components/result-selection-application/result-selection-application.component';
import {Angular2AirDatepickerModule} from "angular2-air-datepicker";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {Ng2FlatpickrModule} from "ng2-flatpickr";

@NgModule({
imports: [
SharedModule,
Angular2AirDatepickerModule
ReactiveFormsModule,
FormsModule,
Ng2FlatpickrModule
],
declarations: [
ResultSelectionComponent,
@@ -2,3 +2,4 @@
@import "styles/fonts";
@import "styles/cards";
@import "styles/modals";
@import "~flatpickr/dist/flatpickr.min.css";
@@ -1172,4 +1172,19 @@ frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.addr
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.port=Graphite Server Port
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.protocol=Graphite Server Protocol
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.webAppAddress=Web App URL
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.prefix=Path Prefix
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.prefix=Path Prefix
frontend.de.iteratec.osm.resultSelection.timeFrame.heading=Time frame
frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.heading=Comparative Timeframe
frontend.de.iteratec.osm.resultSelection.timeFrame.to=to
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.0=Manual selection
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.900=last 15 minutes
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.1800=last 30 minutes
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.3600=last hour
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.10800=last 3 hours
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.21600=last 6 hours
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.43200=last 12 hours
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.86400=last day
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.259200=last 3 days
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.604800=last week
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.1209600=last 2 weeks
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.2419200=last 4 weeks
@@ -1150,4 +1150,19 @@ frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.addr
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.port=Graphite Server Port
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.protocol=Graphite Server Protokoll
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.webAppAddress=Web App URL
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.prefix=Pfad Präfix
frontend.de.iteratec.osm.applicationDashboard.jobStatus.graphiteIntegration.prefix=Pfad Präfix
frontend.de.iteratec.osm.resultSelection.timeFrame.heading=Zeitraum
frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.heading=Vergleichszeitraum
frontend.de.iteratec.osm.resultSelection.timeFrame.to=bis
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.0=Manuelle Auswahl
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.900=letzte 15 Minuten
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.1800=letzte 30 Minuten
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.3600=letzte Stunde
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.10800=letzte 3 Stunden
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.21600=letzte 6 Stunden
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.43200=letzte 12 Stunden
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.86400=letzter Tag
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.259200=letzte 3 Tage
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.604800=letzte Woche
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.1209600=letzte 2 Wochen
frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.2419200=letzte 4 Wochen
@@ -96,5 +96,10 @@
</asset:script>
</content>

<sitemesh:parameter name="needsAngular" value="true"/>
<osm-result-selection
data-module-path="src/app/modules/result-selection/result-selection.module#ResultSelectionModule"
data-current-chart="PageAggregation"></osm-result-selection>

</body>
</html>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.