Skip to content

Commit

Permalink
[IT-2651] Refactored selection of values and added i18n.
Browse files Browse the repository at this point in the history
  • Loading branch information
@finnmartens
finnmartens committed Apr 30, 2019
1 parent e2cab7a commit 8964bca
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 163 deletions.
111 changes: 63 additions & 48 deletions ...ion-page-location-connectivity/result-selection-page-location-connectivity.component.html
View file
@@ -1,30 +1,40 @@
<div class="card">
<!-- td:Header changes when only page visible -->
<h2>PLC</h2>
<ng-container *ngIf="showOnlyPageSelection || showOnlyBrowserSelection">
<h2 *ngIf="showOnlyBrowserSelection">Browser</h2>
<h2 *ngIf="showOnlyPageSelection">{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.page.label' | translate }}</h2>
</ng-container>

<ul class="nav nav-tabs result-selection-tabs">
<li #pageAndEventTab id="pageAndEventTab" (click)="switchTab(pageAndEventTab)"
<ul class="nav nav-tabs result-selection-tabs" *ngIf="!showOnlyPageSelection && !showOnlyBrowserSelection">
<li id="pageAndEventTab"
(click)="pageAndEventSelectionActive = true; browserAndLocationSelectionActive = connectivitySelectionActive = false"
[className]="pageAndEventSelectionActive ? 'active' : ''">
<a>Page | Measured step</a>
<a>{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.page.label' | translate }}
<ng-container *ngIf="showMeasuredStepSelection">
| {{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.measuredStep.label' | translate }}
</ng-container>
</a>
</li>
<li #browserAndLocationTab id="browserAndLocationTab" (click)="switchTab(browserAndLocationTab)"
<li id="browserAndLocationTab"
(click)="browserAndLocationSelectionActive = true; pageAndEventSelectionActive = connectivitySelectionActive = false"
[className]="browserAndLocationSelectionActive ? 'active' : ''">
<a>Browser | Location</a>
<a>Browser
<ng-container *ngIf="showLocationSelection"> | Location</ng-container>
</a>
</li>
<li #connectivityTab id="connectivityTab" (click)="switchTab(connectivityTab)"
<li id="connectivityTab"
(click)="connectivitySelectionActive = true; pageAndEventSelectionActive = browserAndLocationSelectionActive = false"
[className]="connectivitySelectionActive ? 'active' : ''">
<a>Connectivity</a>
<a>{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.connectivity.label' | translate }}</a>
</li>
</ul>

<div class="tab-content">
<div class="tab-pane active">
<ng-container *ngIf="pageAndEventSelectionActive; then pageAndEventSelection"></ng-container>
<ng-container *ngIf="browserAndLocationSelectionActive; then browserAndLocationSelection"></ng-container>
<ng-container *ngIf="(pageAndEventSelectionActive || showOnlyPageSelection) && !showOnlyBrowserSelection; then pageAndEventSelection"></ng-container>
<ng-container *ngIf="browserAndLocationSelectionActive || showOnlyBrowserSelection; then browserAndLocationSelection"></ng-container>
<ng-container *ngIf="connectivitySelectionActive; then connectivitySelection"></ng-container>
</div>
</div>

</div>

<ng-template #pageAndEventSelection>
Expand All @@ -34,59 +44,64 @@ <h2>PLC</h2>
</select>
</div>

<label for="result-selection-event-selection">
<strong>Measured step:</strong>
</label>
<ng-select id="result-selection-event-selection"
[items]="measuredEvents$ | async" [(ngModel)]="selectedEvents"
(change)="changedSelection(selectAllEventsCheckbox)"
[multiple]="true" [closeOnSelect]="false" bindValue="id" bindLabel="name"
placeholder="Please select an option">
</ng-select>
<div class="checkbox-inline" (click)="selectAllItems(selectAllEventsCheckbox)">
<input id="selectAllEventsCheckbox" #selectAllEventsCheckbox type="checkbox" checked disabled>
Select all measured steps
</div>
<ng-container *ngIf="showMeasuredStepSelection">
<label for="result-selection-event-selection">
<strong>{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.measuredStep.label' | translate }}
:</strong>
</label>
<ng-select id="result-selection-event-selection"
[items]="measuredEvents$ | async" [(ngModel)]="selectedEvents"
[multiple]="true" [closeOnSelect]="false" bindValue="id" bindLabel="name"
placeholder="{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectOption.placeholder' | translate }}">
</ng-select>
<div class="checkbox-inline" (click)="selectAllEventsCheckbox.checked = true; selectedEvents = []">
<input id="selectAllEventsCheckbox" #selectAllEventsCheckbox type="checkbox"
[checked]="selectedEvents.length < 1">
{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllMeasuredSteps' | translate }}
</div>
</ng-container>
</ng-template>

<ng-template #browserAndLocationSelection>
<div class="form-group">
<select id="result-selection-browser-selection" class="form-control" multiple="multiple"
[(ngModel)]="selectedBrowsers" style="opacity: 0.5;" (change)="changedSelection(selectAllBrowsersCheckbox)">
[(ngModel)]="selectedBrowsers" [style.opacity]="selectedBrowsers.length > 0 ? 1 : 0.5">
<option *ngFor="let browser of uniqueBrowsers$ | async" [value]="browser.id">{{browser.name}}</option>
</select>
<div class="checkbox-inline" (click)="selectAllItems(selectAllBrowsersCheckbox)">
<input id="selectAllBrowsersCheckbox" #selectAllBrowsersCheckbox type="checkbox" checked disabled>
Select all browsers
<div class="checkbox-inline" (click)="selectAllBrowsersCheckbox.checked = true; selectedBrowsers = []">
<input id="selectAllBrowsersCheckbox" #selectAllBrowsersCheckbox type="checkbox"
[checked]="selectedBrowsers.length < 1">
{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllBrowsers' | translate }}
</div>
</div>

<label for="result-selection-event-selection">
<strong>Location:</strong>
</label>
<ng-select id="result-selection-location-selection"
[items]="locations$ | async" [(ngModel)]="selectedLocations"
(change)="changedSelection(selectAllLocationsCheckbox)"
[multiple]="true" [closeOnSelect]="false" bindValue="id" bindLabel="name"
placeholder="Please select an option">
</ng-select>
<div class="checkbox-inline" (click)="selectAllItems(selectAllLocationsCheckbox)">
<input id="selectAllLocationsCheckbox" #selectAllLocationsCheckbox type="checkbox" checked disabled>
Select all locations
</div>
<ng-container *ngIf="showLocationSelection">
<label for="result-selection-event-selection">
<strong>Location:</strong>
</label>
<ng-select id="result-selection-location-selection"
[items]="locations$ | async" [(ngModel)]="selectedLocations"
[multiple]="true" [closeOnSelect]="false" bindValue="id" bindLabel="name"
placeholder="{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectOption.placeholder' | translate }}">
</ng-select>
<div class="checkbox-inline" (click)="selectAllLocationsCheckbox.checked = true; selectedLocations = []">
<input id="selectAllLocationsCheckbox" #selectAllLocationsCheckbox type="checkbox"
[checked]="selectedLocations.length < 1">
{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllLocations' | translate }}
</div>
</ng-container>
</ng-template>

<ng-template #connectivitySelection>
<div class="form-group">
<select id="result-selection-connectivity-selection" class="form-control" multiple="multiple"
[(ngModel)]="selectedConnectivities" style="opacity: 0.5;"
(change)="changedSelection(selectAllConnectivitiesCheckbox)">
[(ngModel)]="selectedConnectivities" [style.opacity]="selectedConnectivities.length > 0 ? 1 : 0.5">
<option *ngFor="let connectivityProfile of connectivities$ | async"
[value]="connectivityProfile.id">{{connectivityProfile.name}}</option>
</select>
<div class="checkbox-inline" (click)="selectAllItems(selectAllConnectivitiesCheckbox)">
<input id="selectAllConnectivitiesCheckbox" #selectAllConnectivitiesCheckbox type="checkbox" checked disabled>
Select all connectivity profiles
<div class="checkbox-inline" (click)="selectAllConnectivitiesCheckbox.checked = true; selectedConnectivities = []">
<input id="selectAllConnectivitiesCheckbox" #selectAllConnectivitiesCheckbox type="checkbox"
[checked]="selectedConnectivities.length < 1">
{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllConnectivities' | translate }}
</div>
</div>
</ng-template>
126 changes: 12 additions & 114 deletions ...ction-page-location-connectivity/result-selection-page-location-connectivity.component.ts
View file
Expand Up @@ -20,31 +20,25 @@ export class ResultSelectionPageLocationConnectivityComponent {
connectivities$: Observable<Connectivity[]>;

pageAndEventSelectionActive: boolean = true;
browserAndLocationSelectionActive: boolean;
connectivitySelectionActive: boolean;
browserAndLocationSelectionActive: boolean = false;
connectivitySelectionActive: boolean = false;

uniquePages$: Observable<Page[]>;
uniqueBrowsers$: Observable<Browser[]>;
locations$: Observable<Location[]>;
measuredEvents$: Observable<MeasuredEvent[]>;

selectedPages: number[];
selectedEvents: number[];
selectableEvents: number[];
allEventsSelected: boolean = true;

selectedBrowsers: number[];
selectedLocations: number[];
selectableBrowsers: number[];
selectableLocations: number[];
allLocationsSelected: boolean = true;
allBrowsersSelected: boolean = true;

selectedConnectivities: number[];
selectableConnectivities: number[];
allConnectivitiesSelected: boolean = true;
selectedPages: number[] = [];
selectedEvents: number[] = [];
selectedBrowsers: number[] = [];
selectedLocations: number[] = [];
selectedConnectivities: number[] = [];

@Input() currentChart: string;
@Input() showMeasuredStepSelection: boolean = true;
@Input() showLocationSelection: boolean = true;
@Input() showOnlyPageSelection: boolean = false;
@Input() showOnlyBrowserSelection: boolean = false;

constructor(private resultSelectionService: ResultSelectionService) {
this.eventsAndPages$ = this.resultSelectionService.eventsAndPages$;
Expand All @@ -53,7 +47,7 @@ export class ResultSelectionPageLocationConnectivityComponent {

let defaultFrom = new Date();
let defaultTo = new Date();
defaultFrom.setDate(defaultTo.getDate() - 7);
defaultFrom.setDate(defaultTo.getDate() - 28);
const testResultSelectionCommand = {
from: defaultFrom,
to: defaultTo,
Expand All @@ -70,7 +64,6 @@ export class ResultSelectionPageLocationConnectivityComponent {
this.eventsAndPages$.subscribe(next => {
if (next) {
this.measuredEvents$ = of(this.sortAlphabetically(next));
this.selectableEvents = next.map(value => value.id);
let pages: Page[] = next.map(value => value.parent);
let uniquePages: Page[] = this.getUniqueElements(pages);
this.uniquePages$ = of(uniquePages);
Expand All @@ -80,106 +73,11 @@ export class ResultSelectionPageLocationConnectivityComponent {
this.locationsAndBrowsers$.subscribe(next => {
if (next) {
this.locations$ = of(this.sortAlphabetically(next));
this.selectableLocations = next.map(value => value.id);
let browsers: Browser[] = next.map(value => value.parent);
let uniqueBrowsers: Browser[] = this.getUniqueElements(browsers);
this.selectableBrowsers = uniqueBrowsers.map(value => value.id);
this.uniqueBrowsers$ = of(uniqueBrowsers);
}
});

this.connectivities$.subscribe(next => {
if (next) {
this.selectableConnectivities = next.map(value => value.id);
}
})
}

switchTab(clickedTab: HTMLLIElement): void {
clickedTab.classList.add('active');
if (clickedTab.id === 'browserAndLocationTab') {
this.pageAndEventSelectionActive = false;
this.browserAndLocationSelectionActive = true;
this.connectivitySelectionActive = false;
} else if (clickedTab.id === 'connectivityTab') {
this.pageAndEventSelectionActive = false;
this.browserAndLocationSelectionActive = false;
this.connectivitySelectionActive = true;
} else {
this.pageAndEventSelectionActive = true;
this.browserAndLocationSelectionActive = false;
this.connectivitySelectionActive = false;
}
}

selectAllItems(selectAllCheckbox: HTMLInputElement): void {
if (selectAllCheckbox.id === 'selectAllEventsCheckbox') {
if (this.selectedEvents && this.selectedEvents.length > 0) {
this.selectedEvents = [];
this.allEventsSelected = true;
selectAllCheckbox.checked = true;
}
} else if (selectAllCheckbox.id === 'selectAllLocationsCheckbox') {
if (this.selectedLocations && this.selectedLocations.length > 0) {
this.selectedLocations = [];
this.allLocationsSelected = true;
selectAllCheckbox.checked = true;
}
} else if (selectAllCheckbox.id === 'selectAllBrowsersCheckbox') {
if (this.selectedBrowsers && this.selectedBrowsers.length > 0) {
this.selectedBrowsers = [];
this.allBrowsersSelected = true;
selectAllCheckbox.checked = true;
document.querySelector('#result-selection-browser-selection').attributes.getNamedItem('style').value = 'opacity: 0.5;';
}
} else {
if (this.selectedConnectivities && this.selectedConnectivities.length > 0) {
this.selectedConnectivities = [];
this.allConnectivitiesSelected = true;
selectAllCheckbox.checked = true;
document.querySelector('#result-selection-connectivity-selection').attributes.getNamedItem('style').value = 'opacity: 0.5;';
}
}
}

changedSelection(selectAllCheckbox: HTMLInputElement): void {
if (selectAllCheckbox.id === 'selectAllEventsCheckbox') {
if (this.selectedEvents && this.selectedEvents.length > 0) {
this.allEventsSelected = false;
selectAllCheckbox.checked = false;
} else {
this.allEventsSelected = true;
selectAllCheckbox.checked = true;
}
} else if (selectAllCheckbox.id === 'selectAllLocationsCheckbox') {
if (this.selectedLocations && this.selectedLocations.length > 0) {
this.allLocationsSelected = false;
selectAllCheckbox.checked = false;
} else {
this.allLocationsSelected = true;
selectAllCheckbox.checked = true;
}
} else if (selectAllCheckbox.id === 'selectAllBrowsersCheckbox') {
if (this.selectedBrowsers && this.selectedBrowsers.length > 0) {
this.allBrowsersSelected = false;
selectAllCheckbox.checked = false;
document.querySelector('#result-selection-browser-selection').attributes.getNamedItem('style').value = 'opacity: 1;';
} else {
this.allBrowsersSelected = true;
selectAllCheckbox.checked = true;
document.querySelector('#result-selection-browser-selection').attributes.getNamedItem('style').value = 'opacity: 0.5;';
}
} else {
if (this.selectedConnectivities && this.selectedConnectivities.length > 0) {
this.allConnectivitiesSelected = false;
selectAllCheckbox.checked = false;
document.querySelector('#result-selection-connectivity-selection').attributes.getNamedItem('style').value = 'opacity: 1;';
} else {
this.allConnectivitiesSelected = true;
selectAllCheckbox.checked = true;
document.querySelector('#result-selection-connectivity-selection').attributes.getNamedItem('style').value = 'opacity: 0.5;';
}
}
}

private getUniqueElements(items) {
Expand Down
8 changes: 8 additions & 0 deletions grails-app/i18n/messages.properties
View file
Expand Up @@ -1197,6 +1197,14 @@ frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.intervals.1440=Da
frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.intervals.10080=Weekly
frontend.de.iteratec.osm.resultSelection.timeFrame.label=Main
frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.label=Comparison
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.connectivity.label=Connectivity
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.page.label=Page
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.measuredStep.label=Measured step
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllConnectivities=Select all connectivity profiles
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllLocations=Select all locations
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllBrowsers=Select all browsers
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllMeasuredSteps=Select all measured steps
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectOption.placeholder=Please select some options
frontend.de.iteratec.isr.measurand.group.USER_TIMINGS=User Timings
frontend.de.iteratec.isr.measurand.group.HERO_TIMINGS=Hero Timings
frontend.de.iteratec.isr.measurand.group.UNDEFINED=Others
Expand Down
10 changes: 9 additions & 1 deletion grails-app/i18n/messages_de.properties
View file
Expand Up @@ -1175,6 +1175,14 @@ frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.intervals.1440=T
frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.intervals.10080=Wöchentlich
frontend.de.iteratec.osm.resultSelection.timeFrame.label=Haupt
frontend.de.iteratec.osm.resultSelection.timeFrame.comparative.label=Vergleich
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.connectivity.label=Anbindung
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.page.label=Seite
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.measuredStep.label=Messschritt
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllConnectivities=Alle Anbindungs-Profile auswählen
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllLocations=Alle Locations auswählen
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllBrowsers=Alle Browser auswählen
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectAllMeasuredSteps=Alle Messschritte auswählen
frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectOption.placeholder=Bitte auswählen
frontend.de.iteratec.isr.measurand.group.LOAD_TIMES=Ladezeiten
frontend.de.iteratec.isr.measurand.group.REQUEST_COUNTS=Anzahl Requests
frontend.de.iteratec.isr.measurand.group.REQUEST_SIZES=Grö&szlig;e Requests
Expand All @@ -1191,4 +1199,4 @@ frontend.de.iteratec.osm.performance-aspect.PAGE_IS_USABLE.user-centric-question
frontend.de.iteratec.osm.performance-aspect-metric=Aspekt-Metrik
frontend.default.button.edit.label=Bearbeiten
frontend.default.button.save.label=Speichern
frontend.default.button.cancel.label=Abbrechen
frontend.default.button.cancel.label=Abbrechen

0 comments on commit 8964bca

Please sign in to comment.