From 90640d6e966ffd02c653768121279782e6a80dba Mon Sep 17 00:00:00 2001 From: ddamiron <ddamiron@sii.fr> Date: Tue, 23 Jul 2019 11:22:02 +0200 Subject: [PATCH] add basic tabs update label for graph update css for tables --- .../logs-home/logs-home.component.html | 70 ++++++++++++----- .../logs-home/logs-home.component.scss | 76 ++++++++++++++++++- .../logs-home/logs-home.component.ts | 23 +++++- .../report/logs-data/logs-data.component.html | 2 +- .../report/logs-data/logs-data.component.ts | 9 +-- .../report/logs-graph/logs-graph.component.ts | 4 + src/app/models/basic-tabs.model.ts | 8 ++ 7 files changed, 160 insertions(+), 32 deletions(-) create mode 100644 src/app/models/basic-tabs.model.ts diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.html b/src/app/components/logs-dashboard/logs-home/logs-home.component.html index 1deaf57..2c78c1d 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.html +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.html @@ -2,34 +2,62 @@ <div class="columns is-centered is-marginless"> <div class="input-field"> <form> - <label> Slug/Uuid: </label> - <input type="text" size="40" name="slug" [(ngModel)]="slug"> - - <label> SessionId: </label> - <input type="text" size="40" name="sessionId" [(ngModel)]="sessionId"> + <div class="table"> + <div class="header columns is-marginless"> + <div class="column is-5 has-text-left"> + <label> Slug/Uuid </label> + </div> + <div class="column is-5 has-text-left"> + <label> Session Id </label> + </div> + <div class="column is-2 has-text-left"> - <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']"> - <i class="fas fa-search"></i> - </a> - </form> - <br> + </div> + </div> + <div class="data-list"> + <div class="data columns is-multiline is-vcentered is-marginless" > + <div class="column is-5 has-text-left"> + <input type="text" size="45" name="slug" [(ngModel)]="slug"> + </div> + <div class="column is-5 has-text-left"> + <input type="text" size="45" name="sessionId" [(ngModel)]="sessionId"> + </div> + <div class="column is-2 has-text-left"> + <a class="button button-gl " [routerLink]="['report', slug, sessionId, 'home']"> + <i class="fas fa-search"></i> + </a> + </div> + </div> + </div> + </div> + </form> + <br> + + <!-- Tabs --> + <ul class="tabs-container"> + <li *ngFor="let tab of tabs" (click)="tabsToggler(tab.name)" [ngClass]="{'is-active':tab.isActive}"> + <!-- [routerLink]="tab.fullRouterLinkPath" routerLinkActive="is-active" --> + <span class="tab-label">{{ tab.name }}</span> + </li> + </ul> - <a class="button button-gl is-centered" (click)="tabsToggler(true)"> + + <!-- <a class="button button-gl is-centered" (click)="tabsToggler(true)"> Slugs </a> <a class="button button-gl is-centered" (click)="tabsToggler(false)"> Sessions - </a> + </a> --> - </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> \ No newline at end of file +<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> \ No newline at end of file diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss index 07e58bb..d5d4f68 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.scss +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.scss @@ -1,3 +1,6 @@ +@import "../../../../scss/variables.scss"; +@import "../../../../../node_modules/bulma/sass/utilities/_all.sass"; + figure { text-align: center; } @@ -35,4 +38,75 @@ figure { color: #d5232a; } } - } \ No newline at end of file + } + .tabs-container { + display: flex; + align-content: stretch; + flex-wrap: wrap; + border-bottom: 1px solid $grey-super-light-color; + + li { + display: flex; + align-items: center; + padding-right: 2rem; + padding-bottom: 0.4rem; + padding-top: 0.4rem; + cursor: pointer; + position: relative; + margin-bottom: 1px; + width: 50%; + + @media screen and (min-width: $tablet) { + width: 33%; + padding-right: 3rem; + } + + @media screen and (min-width: $desktop) { + width: 20%; + } + } + + li:last-child { + padding-right: 0; + } + + .tab-label { + font-size: 1rem; + font-weight: 500; + color: $brand-color; + } + + li:hover { + .tab-label { + font-weight: 700; + } + } + + li:focus{ + .tab-label { + color: $tomato-color; + font-weight: 700; + } + } + li.is-active { + .tab-label { + color: $tomato-color; + font-weight: 600; + } + } + + li::after { + content: ''; + display: block; + height: 2px; + background: $tomato-color; + width: 0; + position: absolute; + bottom: -2px; + } + + li.is-active::after { + transition: width 0.3s; + width: 100%; + } +} diff --git a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts index a8bbd2e..ef258bb 100644 --- a/src/app/components/logs-dashboard/logs-home/logs-home.component.ts +++ b/src/app/components/logs-dashboard/logs-home/logs-home.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { DataLogsService } from 'src/app/services/data-logs.service'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { ILogs } from 'src/app/models/logs.model'; +import { ISimpleTab } from 'src/app/models/basic-tabs.model'; @Component({ selector: 'app-logs-home', @@ -21,7 +22,13 @@ export class LogsHomeComponent implements OnInit { nbUuid: number; nbSlug: number; isToggled: boolean; - + tabs: ISimpleTab[] = [{ + name: 'Slug', + isActive: true}, + { + name: 'Session', + isActive: false}, + ]; sessionIdList: [string]; constructor( private dataLogsService: DataLogsService, @@ -69,9 +76,17 @@ export class LogsHomeComponent implements OnInit { }, ); } - tabsToggler(oneBoolean) { - this.isToggled = oneBoolean; - this.isDashboardDisplayed = false; + tabsToggler(tabName) { + if (tabName === 'Session') { + this.isToggled = false; + this.tabs[0].isActive = false; + this.tabs[1].isActive = true; + } + if (tabName === 'Slug') { + this.isToggled = true; + this.tabs[0].isActive = true; + this.tabs[1].isActive = false; + } } } diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html index ffb029f..7d51059 100644 --- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html +++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.html @@ -24,7 +24,7 @@ </div> <div class="column has-text-left"> - <div class="mini-log-card" *ngIf="!allLogs?.lenght>0"> + <div class="mini-log-card" *ngIf="allLogs?.lenght==0"> <p>No DATA</p> </div> <!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0"> diff --git a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts index 9a373a4..923ea27 100644 --- a/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts +++ b/src/app/components/logs-dashboard/report/logs-data/logs-data.component.ts @@ -16,15 +16,14 @@ export class LogsDataComponent implements OnChanges { @Input() childSlug: string; logTypes: any = [ { - name : 'error', - selected : true, + name : 'erreurs', + selected : false, }, { - name : 'info', - selected : false, + name : 'infos', + selected : true, }, ]; - isDashboardDisplayed: boolean = false; uuid: string; sessionId: string; slug: string; diff --git a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts index 4bec41d..c03790b 100644 --- a/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts +++ b/src/app/components/logs-dashboard/report/logs-graph/logs-graph.component.ts @@ -49,6 +49,10 @@ export class LogsGraphComponent implements OnChanges { display: true, text: 'Logs-chart: progress-report.', }, + legend: { + display: true, + position: 'right', + }, elements: { line: { tension: 0, // disables bezier curves diff --git a/src/app/models/basic-tabs.model.ts b/src/app/models/basic-tabs.model.ts new file mode 100644 index 0000000..93caa24 --- /dev/null +++ b/src/app/models/basic-tabs.model.ts @@ -0,0 +1,8 @@ +export interface IBasicTab { + name: string; + fullRouterLinkPath: string; +} +export interface ISimpleTab { + name: string; + isActive: boolean; +} -- GitLab