Skip to content
Snippets Groups Projects
Commit 90640d6e authored by ddamiron's avatar ddamiron
Browse files

add basic tabs

update label for graph
update css for tables
parent 559b837f
No related branches found
No related tags found
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
...@@ -2,34 +2,62 @@ ...@@ -2,34 +2,62 @@
<div class="columns is-centered is-marginless"> <div class="columns is-centered is-marginless">
<div class="input-field"> <div class="input-field">
<form> <form>
<label> Slug/Uuid: </label> <div class="table">
<input type="text" size="40" name="slug" [(ngModel)]="slug"> <div class="header columns is-marginless">
&nbsp; <div class="column is-5 has-text-left">
<label> SessionId: </label> <label> Slug/Uuid </label>
<input type="text" size="40" name="sessionId" [(ngModel)]="sessionId"> </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']"> </div>
<i class="fas fa-search"></i> </div>
</a>
</form>
<br>
<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 Slugs
</a> </a>
<a class="button button-gl is-centered" (click)="tabsToggler(false)"> <a class="button button-gl is-centered" (click)="tabsToggler(false)">
Sessions Sessions
</a> </a> -->
</div>
</div> </div>
</div>
<div class="columns is-centered is-marginless"> <div class="columns is-centered is-marginless">
<div class="column has-text-centered is-marginless"> <div class="column has-text-centered is-marginless">
<app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId"> <app-logs-sessions [hidden]="isToggled" [childSessionId]="sessionId" [childNbSessions]="nbSessionId">
</app-logs-sessions> </app-logs-sessions>
<app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug" <app-logs-slugs [hidden]="!isToggled" [childSlugsList]="allFields.slug_list" [childNbSlugs]="nbSlug"
[childNbUuids]="nbUuid"></app-logs-slugs> [childNbUuids]="nbUuid"></app-logs-slugs>
</div> </div>
</div> </div>
\ No newline at end of file \ No newline at end of file
@import "../../../../scss/variables.scss";
@import "../../../../../node_modules/bulma/sass/utilities/_all.sass";
figure { figure {
text-align: center; text-align: center;
} }
...@@ -35,4 +38,75 @@ figure { ...@@ -35,4 +38,75 @@ figure {
color: #d5232a; 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%;
}
}
...@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { DataLogsService } from 'src/app/services/data-logs.service'; import { DataLogsService } from 'src/app/services/data-logs.service';
import { ActivatedRoute, ParamMap } from '@angular/router'; import { ActivatedRoute, ParamMap } from '@angular/router';
import { ILogs } from 'src/app/models/logs.model'; import { ILogs } from 'src/app/models/logs.model';
import { ISimpleTab } from 'src/app/models/basic-tabs.model';
@Component({ @Component({
selector: 'app-logs-home', selector: 'app-logs-home',
...@@ -21,7 +22,13 @@ export class LogsHomeComponent implements OnInit { ...@@ -21,7 +22,13 @@ export class LogsHomeComponent implements OnInit {
nbUuid: number; nbUuid: number;
nbSlug: number; nbSlug: number;
isToggled: boolean; isToggled: boolean;
tabs: ISimpleTab[] = [{
name: 'Slug',
isActive: true},
{
name: 'Session',
isActive: false},
];
sessionIdList: [string]; sessionIdList: [string];
constructor( constructor(
private dataLogsService: DataLogsService, private dataLogsService: DataLogsService,
...@@ -69,9 +76,17 @@ export class LogsHomeComponent implements OnInit { ...@@ -69,9 +76,17 @@ export class LogsHomeComponent implements OnInit {
}, },
); );
} }
tabsToggler(oneBoolean) { tabsToggler(tabName) {
this.isToggled = oneBoolean; if (tabName === 'Session') {
this.isDashboardDisplayed = false; 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;
}
} }
} }
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
<div class="column has-text-left"> <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> <p>No DATA</p>
</div> </div>
<!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0"> <!-- <div class="mini-error-card" *ngIf="!allErrorLogs?.lenght>0">
......
...@@ -16,15 +16,14 @@ export class LogsDataComponent implements OnChanges { ...@@ -16,15 +16,14 @@ export class LogsDataComponent implements OnChanges {
@Input() childSlug: string; @Input() childSlug: string;
logTypes: any = [ logTypes: any = [
{ {
name : 'error', name : 'erreurs',
selected : true, selected : false,
}, },
{ {
name : 'info', name : 'infos',
selected : false, selected : true,
}, },
]; ];
isDashboardDisplayed: boolean = false;
uuid: string; uuid: string;
sessionId: string; sessionId: string;
slug: string; slug: string;
......
...@@ -49,6 +49,10 @@ export class LogsGraphComponent implements OnChanges { ...@@ -49,6 +49,10 @@ export class LogsGraphComponent implements OnChanges {
display: true, display: true,
text: 'Logs-chart: progress-report.', text: 'Logs-chart: progress-report.',
}, },
legend: {
display: true,
position: 'right',
},
elements: { elements: {
line: { line: {
tension: 0, // disables bezier curves tension: 0, // disables bezier curves
......
export interface IBasicTab {
name: string;
fullRouterLinkPath: string;
}
export interface ISimpleTab {
name: string;
isActive: boolean;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment