Skip to content
Snippets Groups Projects
Commit 54eaf841 authored by ddamiron's avatar ddamiron
Browse files

update logs component with ngOnChange

parent 2f248e78
Branches
Tags
5 merge requests!10New updated datalog,!9add all datalog components and services into angular gui,!8update Datalog research input,!7Datalog research input,!14Version 1.3.0
<div class="section">
<div class="columns is-centered is-marginless">
<div class="input-field">
<form>
<label> Slug/Uuid: </label>
<input type="text" size="40" name="uuid" [(ngModel)]="uuid">
<!-- <br> --> &nbsp;
<label> SessionId: </label>
<input type="text" size="40" name="sessionId" [(ngModel)]="sessionId">
<!-- <label> Slug: </label>
<input type="text" size="20" name="slug" [(ngModel)]="slug"> -->
<a class="button button-gl is-centered" (click)="onSubmit()">
<i class="fas fa-search"></i>
</a>
</form>
<br>
<a class="button button-gl is-centered" (click)="tabsToggler(true)">
Slugs
</a>
<a class="button button-gl is-centered" (click)="tabsToggler(false)">
Sessions
</a>
</div>
</div>
<!-- <div class="columns is-centered is-marginless">
<div class="column has-text-centered">
<h2>{{ nbSessionId }} sessionId trouvées</h2>
<div *ngFor="let s of allFields.session_id_list">
<p>{{s}} </p>
</div>
<h2>{{ nbSlug }} slugs trouvées</h2>
<div *ngFor="let slg of allFields.slug_list">
<p>{{slg}} </p>
</div>
<h2>{{ nbUuid }} uuid trouvées</h2>
<div *ngFor="let ul of allFields.uuid_list">
<p>{{ul}} </p>
</div>
</div>
</div> -->
<div class="columns is-centered is-marginless">
<div class="column has-text-centered is-marginless">
<app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId">
</app-logs-sessions>
<app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug"
[childNbUuids]="nbUuid"></app-logs-slugs>
</div>
</div>
<div class="columns is-centered is-marginless" [ngClass]="{'hidden': !isDashboardDisplayed}">
<div class="column has-text-centered" >
<div *ngFor="let a of [data]">
<hr>
<span>
<h3>
uuid: {{a.uuid}}
</h3>
<p>|</p>
<p>V</p>
session_id list:
<div *ngFor="let s of a.sessionIdList">
{{s}}
</div>
</span>
</div>
</div>
<div class="column has-text-left">
<div *ngFor="let oneStepData of allStepsData">
<div class="mini-log-card">
<div class="mini-log-card" *ngIf="oneStepData">
<span>
<p>slug: {{oneStepData._id.slug}} </p>
<p>uuid: {{oneStepData._id.uuid}} </p>
......@@ -81,13 +12,9 @@
<p>total-time: {{oneStepData.totalHoursSpent}}h : {{oneStepData.totalMinutesSpent}}m :
{{oneStepData.totalSecondsSpent}}s </p>
</h3>
</span>
</div>
</div>
</div>
</div>
<app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
import { DataLogsService } from 'src/app/services/data-logs.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
......@@ -10,10 +10,12 @@ import { FormsModule } from '@angular/forms';
templateUrl: './logs-data.component.html',
styleUrls: ['./logs-data.component.scss'],
})
export class LogsDataComponent implements OnInit {
export class LogsDataComponent implements OnChanges {
@Input() childUuid: string = '';
@Input() childSessionId: string = '';
@Input() childSlug: string;
isDashboardDisplayed: boolean = false;
uuid: string;
allFields: any;
sessionId: string;
slug: string;
data: any;
......@@ -22,7 +24,6 @@ export class LogsDataComponent implements OnInit {
nbSessionId: number;
nbUuid: number;
nbSlug: number;
isToggled: boolean;
sessionIdList: [string];
constructor(
......@@ -30,50 +31,27 @@ export class LogsDataComponent implements OnInit {
private route: ActivatedRoute,
) { }
ngOnInit() {
this.isToggled = true;
ngOnChanges(changes: SimpleChanges): void {
this.data = [];
this.uuid = 'c1b069ca-181d-4265-9838-8d182f207bd3';
this.sessionId = '372b59a4-72b0-4a3a-b518-843e516da0cd';
this.slug = 'not implemented yet';
this.slug = this.childSlug;
this.allStepsData = [];
this.allFields = [];
this.getAllUniqueFields();
this.getLogsSteps();
}
onSubmit() {
this.isDashboardDisplayed = true;
this.isToggled = false;
this.dataLogsService.uuidToSessionId(this.uuid)
.subscribe((result) => {
this.data.uuid = result[0]._id.uuid;
this.data.sessionIdList = result[0].session_id_list;
},
);
this.dataLogsService.getAllStepsDuration(
this.uuid,
this.sessionId,
).subscribe((results) => {
console.log('results', results);
this.allStepsData = results;
},
);
}
getLogsSteps() {
if ((this.childUuid != null) && (this.childSessionId != null)) {
console.log('parameters', this.childUuid, this.childSessionId);
getAllUniqueFields() {
this.dataLogsService.getAllUniqueFields().subscribe((result) => {
this.allFields = result[0];
this.nbSessionId = result[0]['session_id_list'].length;
this.nbUuid = result[0]['uuid_list'].length;
this.nbSlug = result[0]['slug_list'].length;
this.dataLogsService.getAllStepsDuration(
this.childUuid,
this.childSessionId,
).subscribe((results) => {
console.log('results', results);
this.allStepsData = results;
},
);
}
},
);
}
tabsToggler(oneBoolean) {
this.isToggled = oneBoolean;
this.isDashboardDisplayed = false;
}
}
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
import { Chart } from 'chart.js';
import { DataLogsService } from 'src/app/services/data-logs.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
......@@ -11,7 +11,7 @@ import { FormsModule } from '@angular/forms';
templateUrl: './logs-graph.component.html',
styleUrls: ['./logs-graph.component.scss'],
})
export class LogsGraphComponent implements OnInit {
export class LogsGraphComponent implements OnChanges {
@Input() childUuid: string;
@Input() childSessionId: string;
@Input() childSlug: string;
......@@ -27,15 +27,14 @@ export class LogsGraphComponent implements OnInit {
constructor(
private dataLogsService: DataLogsService,
) { }
ngOnInit() {
ngOnChanges(changes: SimpleChanges): void {
this.graphData = [0.2, 0.3];
this.xValues = [];
this.yValues = [];
this.dataset = [];
this.getData();
// this.myChart.update();
if ((this.childUuid != null) && (this.childSessionId != null)) {
this.getData();
}
}
plotGraph() {
......@@ -112,7 +111,6 @@ export class LogsGraphComponent implements OnInit {
}
}
replotGraph() {
// this.myChart.destroy();
this.getData();
this.myChart.update();
}
......
......@@ -38,7 +38,7 @@
</div>
<div class="data-list">
<div class="data columns is-multiline is-vcentered is-marginless"
*ngFor="let session of responseArray.session_id_list; let i=index;">
*ngFor="let session of responseArray.session_id_list; let i=index; let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
<div class="column is-4 has-text-left">
{{ session }}
</div>
......@@ -116,7 +116,7 @@
<span class="column-title"></span>
</div>
</div>
<div class="data-list" *ngFor="let slug of responseArray.slug_list; let i=index;">
<div class="data-list" *ngFor="let slug of responseArray.slug_list; let i=index;let odd=odd; let even=even;" [ngClass]="{ odd: odd, even: even }">
<div class="data columns is-multiline is-vcentered is-marginless" *ngIf="slug">
<div class="column is-4 has-text-centered">
{{ slug }}
......
......@@ -7,5 +7,6 @@
<app-logs-graph [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-graph>
<app-logs-data [childUuid]="uuid" [childSessionId]="sessionId" [childSlug]="slug"></app-logs-data>
</div>
</ng-container>
\ No newline at end of file
......@@ -38,33 +38,14 @@ export class LogsReportComponent implements OnInit {
this.slug = this._route.snapshot.paramMap.get('slug');
this.urlCode = this._route.snapshot.paramMap.get('urlCode');
if (this.urlCode === 'session') {
this.previousUrl = '/datalogs/preReport/session/' + this.sessionId;
this.previousUrl = `/datalogs/preReport/session/${this.sessionId}`;
} else if (this.urlCode === 'slug') {
this.previousUrl = '/datalogs/preReport/slug/' + this.slug;
this.previousUrl = `/datalogs/preReport/slug/${this.slug}`;
} else {
this.previousUrl = '/datalogs';
}
this.getUuidFromSlug(this.slug);
// this._route.paramMap.pipe(
// filter((paramMap: ParamMap) => (paramMap.get('id') !== null)),
// filter((paramMap: ParamMap) => (paramMap.get('type') !== null)),
// switchMap((paramMap: ParamMap) => this._dataLogsService.getComplementaryFromSlugOrSession(
// paramMap.get('type'),
// paramMap.get('id'))))
// .subscribe((response) => {
// this.responseArray = response[0];
// if (this.type === 'session') {
// this.nbObjects = response[0].slug_list.length;
// } else {
// this.nbObjects = response[0].session_id_list.length;
// }
// console.log('responseArray: ', this.responseArray);
// console.log('nbObjects: ', this.nbObjects);
// });
}
getUuidFromSlug(slug) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment