Commit 32b8bb89 authored by Thodoris Nestoridis's avatar Thodoris Nestoridis

UI

parent a784914a
......@@ -10,10 +10,10 @@
</nav>
<mat-grid-list cols="2">
<div class="first">
<div *ngIf="get_metrics(currentboilerplate.title)"
style="display:flex; flex-direction: row; align-items: center;margin-bottom: 50px;">
<div *ngIf="get_metrics(currentboilerplate.title)"
style="display:flex; flex-direction: row; align-items: center;margin-bottom: 50px;" >
<mat-accordion>
<mat-expansion-panel *ngFor="let msection of mes_list" class="alert alert-warning" role="alert">
<mat-expansion-panel class="note note-light" *ngFor="let msection of mes_list" [ngStyle]="{'border-left-color': (msection.type.includes('Opaque') || msection.type.includes('Noisy')) ? '#ffc107' : '#dc3545'}">
<mat-expansion-panel-header>
<mat-panel-title [innerHTML]='msection.Description'>
</mat-panel-title>
......
......@@ -18,19 +18,28 @@
}
.first{
width: 65%;
width: 60%;
}
.second{
width: 35%;
width: 40%;
position: absolute;
top: 1%;
right: 0px;
height:100%;
overflow:auto;
overflow:auto;
}
.d-flex{
overflow-x: auto;
white-space: nowrap;
}
.note-light {
background-color: #f5f5f5;
border-color: #8c8c8c;
}
.note {
border-left: 6px solid;
margin-bottom:2px;
}
\ No newline at end of file
......@@ -174,15 +174,16 @@ export class BoilerplateDetailsComponent implements OnInit {
let description = ""
let information = ""
if (obj[i][0][this.currentboilerplate.title]?.length > 0) {
console.log(i)
title = '<b>Description : </b>' + obj[i][0]['Comment']
description = 'Invalid instances: ' + '<b>' + obj[i][0][this.currentboilerplate.title] + '</b>'
description = 'Property: <i>' + i + '</i>' +'&nbsp was activated by the instance(s): &nbsp' + '<b>' + obj[i][0][this.currentboilerplate.title] + '</b>'
for (let instances of obj[i][0][this.currentboilerplate.title]) {
information += 'Above there are presented the DSO properties for the instance : <b>' + instances + '</b>'
for (let info of obj[i][0][instances]) { information += '<ul><li>' + info + '</ul></li>' }
}
}
if (title != '' && description != "" && information != "") {
this.mes_list.push({ 'Title': title, 'Description': description, 'Info': information })
this.mes_list.push({ 'Title': title, 'Description': description, 'Info': information, 'type': i })
}
}
}
......
.example-card {
width: 350px;
height: 250px;
margin-right: 5px;
margin-top: 10px;
}
......
......@@ -7,6 +7,7 @@ import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { NotifierService } from "angular-notifier";
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
export const statesetfordialog: string[] = [];
export const systemfordialog: string[] = [];
......@@ -95,6 +96,7 @@ export class MainDetailsComponent implements OnInit {
main = '';
color_badge = 'danger'
spinner = true
filter:any;
constructor(
private mainService: MainService,
......@@ -214,6 +216,7 @@ export class MainDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -423,6 +426,18 @@ export class MainDetailsComponent implements OnInit {
console.log(error);
});
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
......@@ -3,8 +3,9 @@
<form class="form-group form-inline" ngNativeValidate>
<mat-form-field class="example-full-width">
<mat-label>Prefix</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required
[formControl]="simpleprefixControl" [matAutocomplete]="autosimpleprefix">
<input type="text" placeholder="Pick one" aria-label="SPrefix" matInput required
[formControl]="simpleprefixControl" [matAutocomplete]="autosimpleprefix"
(blur)="closed($event, this.simpleprefixControl)">
<mat-autocomplete autoActiveFirstOption #autosimpleprefix="matAutocomplete">
<mat-option *ngFor="let option of simpleprefixfilteredOptions | async" [value]="option">
{{option}}
......@@ -18,9 +19,9 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="subjectsControl.value !=null">Subject :
{{this.subjectsControl.value.split(':')[0]}}:{{this.subjectsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="subjectsControl" required
[matAutocomplete]="autosub">
<mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="SubC" matInput [formControl]="subjectsControl" required
[matAutocomplete]="autosub" (blur)="closed($event, this.subjectsControl)">
<mat-autocomplete autoActiveFirstOption #autosub="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string" panelWidth="string">
<mat-option *ngFor="let option of subjectsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -35,9 +36,9 @@
<mat-form-field class="example-full-width">
<mat-label>Verb or State</mat-label>
<mat-label *ngIf="verbsControl.value !=null">Subject : {{this.verbsControl.value.split(':')[0]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required [formControl]="verbsControl"
[matAutocomplete]="autoverb">
<mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="Verb" matInput required [formControl]="verbsControl"
[matAutocomplete]="autoverb" (blur)="closed($event, this.verbsControl)">
<mat-autocomplete autoActiveFirstOption #autoverb="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of verbsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -46,14 +47,14 @@
</form>
</div>
<div class="col" [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
<div class="col" [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<form class="form-group form-inline">
<mat-form-field class="example-full-width">
<mat-label>Quantifier</mat-label>
<input placeholder="Pick one" aria-label="Number" matInput [formControl]="prefix_quantifierControl" type="text"
[matAutocomplete]="autoprefix_quantifier">
<input placeholder="Pick one" aria-label="PrefixQ" matInput [formControl]="prefix_quantifierControl" type="text"
[matAutocomplete]="autoprefix_quantifier" (blur)="closed($event, this.prefix_quantifierControl)">
<mat-autocomplete autoActiveFirstOption #autoprefix_quantifier="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of prefix_quantifierfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -63,7 +64,7 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Numerical Value</mat-label>
<input type="text" matInput [(ngModel)]="currentprefix.prefix_numerical" name="numerical">
......@@ -72,13 +73,13 @@
</div>
<div class="col">
<form class="form-group form-inline"
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
[ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden', 'width':'0%'}">
<mat-form-field class="example-full-width">
<mat-label>Number Unit</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput
<input type="text" placeholder="Pick one" aria-label="PNumUnit" matInput
[formControl]="prefix_mumerical_unitsControl" [matAutocomplete]="autoprefix_mumerical_units">
<mat-autocomplete autoActiveFirstOption #autoprefix_mumerical_units="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string" (blur)="closed($event, this.prefix_mumerical_unitsControl)">
<mat-option *ngFor="let option of prefix_mumerical_unitsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -94,10 +95,10 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="objectsControl.value !=null">Object :
{{this.objectsControl.value.split(':')[0]}}:{{this.objectsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput required [formControl]="objectsControl"
[matAutocomplete]="autobjects">
<input type="text" placeholder="Pick one" aria-label="PreObj" matInput required [formControl]="objectsControl"
[matAutocomplete]="autobjects" (blur)="closed($event, this.objectsControl)">
<mat-autocomplete autoActiveFirstOption #autobjects="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of objectsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -110,8 +111,8 @@
<fieldset disabled>
<mat-form-field class="example-full-width">
<mat-label>Logic connectivity</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="logic_conControl"
[matAutocomplete]="autolog_con">
<input type="text" placeholder="Pick one" aria-label="PreLogic_c" matInput [formControl]="logic_conControl"
[matAutocomplete]="autolog_con" (blur)="closed($event, this.logic_conControl)">
<mat-autocomplete autoActiveFirstOption #autolog_con="matAutocomplete">
<mat-option *ngFor="let option of logic_confilteredOptions | async" [value]="option">
{{option}}
......
......@@ -64,6 +64,8 @@ export class PrefixDetailsComponent implements OnInit {
};
message = '';
numericalisDivVisible = false
filter:any;
constructor(private prefixService: PrefixService, private route: ActivatedRoute,
......@@ -126,6 +128,7 @@ export class PrefixDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -274,4 +277,16 @@ export class PrefixDetailsComponent implements OnInit {
}
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
\ No newline at end of file
......@@ -3,10 +3,10 @@
<form class="form-group form-inline" ngNativeValidate>
<mat-form-field class="example-full-width">
<mat-label *ngIf="this.suffixControl.value !=null">Suffix : {{this.suffixControl.value.split(':')[0]}}:{{this.suffixControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="suffixControl" required
[matAutocomplete]="autosuffix">
<input type="text" placeholder="Pick one" aria-label="Suf" matInput [formControl]="suffixControl" required
[matAutocomplete]="autosuffix" (blur)="closed($event, this.suffixControl)">
<mat-autocomplete autoActiveFirstOption #autosuffix="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of suffixfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -27,10 +27,10 @@
<mat-form-field class="example-full-width">
<mat-label *ngIf="this.mumerical_unitsControl.value !=null">Numerical Value
: {{this.mumerical_unitsControl.value.split(':')[0]}}:{{this.mumerical_unitsControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="mumerical_unitsControl"
[matAutocomplete]="autonumsuffix">
<input type="text" placeholder="Pick one" aria-label="SufNum" matInput [formControl]="mumerical_unitsControl"
[matAutocomplete]="autonumsuffix" (blur)="closed($event, this.mumerical_unitsControl)">
<mat-autocomplete autoActiveFirstOption #autonumsuffix="matAutocomplete" showPanel="true"
[displayWith]="displayFn">
[displayWith]="displayFn" panelWidth="string">
<mat-option *ngFor="let option of mumerical_unitsfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......@@ -43,9 +43,9 @@
[ngStyle]=" showflow(this.suffixControl.value) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
<mat-form-field class="example-full-width">
<mat-label *ngIf="flowControl.value !=null">Flow or Function : {{this.flowControl.value.split(':')[0]}}:{{this.flowControl.value.split(':')[1]}}</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="flowControl" required
[matAutocomplete]="autoflow">
<mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete" showPanel="true" [displayWith]="displayFn">
<input type="text" placeholder="Pick one" aria-label="SufFlow" matInput [formControl]="flowControl" required
[matAutocomplete]="autoflow" (blur)="closed($event, this.flowControl)" >
<mat-autocomplete autoActiveFirstOption #autoflow="matAutocomplete" showPanel="true" [displayWith]="displayFn" panelWidth="string" panelWidth="string">
<mat-option *ngFor="let option of flowfilteredOptions | async" [value]="option">
{{option.split(" : ").pop()}}
</mat-option>
......
......@@ -39,6 +39,7 @@ export class SuffixDetailsComponent implements OnInit {
flow: "",
};
message = '';
filter:any;
constructor(
private suffixService: SuffixService,
......@@ -64,7 +65,7 @@ export class SuffixDetailsComponent implements OnInit {
ngOnInit(): void {
//this.getchoices();
this.getflowchoices(this.route.snapshot.params.gb);
console.log('aaa', this.route.snapshot.params.gb);
//console.log('aaa', this.route.snapshot.params.gb);
this.getAllSuffix(this.route.snapshot.params.id);
}
......@@ -91,6 +92,7 @@ export class SuffixDetailsComponent implements OnInit {
private _filter(data: string[], value: string): string[] {
const filterValue = value.toLowerCase();
this.filter=data.filter(option => option.toLowerCase().includes(filterValue));
return data.filter(option => option.toLowerCase().includes(filterValue));
}
......@@ -185,8 +187,17 @@ export class SuffixDetailsComponent implements OnInit {
}
}
//autocomplete the first element of the autocomplete list
closed(event:any, data :any){
if(data.value && this.filter[0]==''){data.setValue(data.value)}
if (event.relatedTarget && event.relatedTarget?.tagName !== 'MAT-OPTION') {
if(data?.value!='' && !this.filter.includes(data?.value)){
data.setValue(this.filter[0])
this.filter[0]='';
}
if(data.value || data?.value=='' || event.relatedTarget?.tagName === 'MAT-OPTION'){this.filter[0]='';}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment