diff options
Diffstat (limited to 'frontend/src/app')
10 files changed, 116 insertions, 122 deletions
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 76fc40e2..b159c748 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -5,57 +5,28 @@ </div> <div class="col-3"> <label for="name" class="col-form-label">Naziv dataseta:</label> - <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." - [(ngModel)]="dataset.name"> - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> - </div> + <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> + </div> </div> <div class="col-1"> </div> <div class="col-4 mt-4"> - <input list=delimiterOptions - placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="delimiter" - (input)="update()"> + <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" + [(ngModel)]="delimiter" (input)="update()"> <datalist id=delimiterOptions> <option *ngFor="let option of delimiterOptions">{{option}}</option> </datalist> <label for="type" class="form-check-label my-5">Da li .csv ima header? - <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked> + <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" + value="" id="checkboxHeader" checked> </label> <br> - <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> + <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" + accept=".csv"> </div> </div> - - <div class="table-responsive" *ngIf="hasInput"> - <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-4"> - <thead> - <tr> - <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of csvRecords | slice:1:11"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - - <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4"> - <tbody> - <tr *ngFor="let row of csvRecords | slice:0:10"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - </div> - - <div *ngIf="csvRecords.length > 0 && hasInput" id="info"> - . . . <br> - {{rowsNumber}} x {{colsNumber}} - </div> - </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index bccf13b7..7f432b9a 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -15,7 +15,6 @@ export class DatasetLoadComponent { delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," hasHeader: boolean = true; - hasInput: boolean = false; csvRecords: any[] = []; @@ -39,10 +38,9 @@ export class DatasetLoadComponent { this.hasInput = false; return; } - else + else this.hasInput = true; - console.log(this.files); this.update(); } diff --git a/frontend/src/app/_elements/datatable/datatable.component.css b/frontend/src/app/_elements/datatable/datatable.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.css diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html new file mode 100644 index 00000000..2c469ecc --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -0,0 +1,29 @@ +<div *ngIf="data"> + <div class="table-responsive"> + <table *ngIf="hasHeader" class="table table-bordered table-light mt-4"> + <thead> + <tr> + <th *ngFor="let item of data[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of data | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + + <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4"> + <tbody> + <tr *ngFor="let row of data | slice:0:10"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + </div> + + <div id="info"> + . . . <br> + {{data.length}} x {{data[0].length}} + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/datatable/datatable.component.spec.ts b/frontend/src/app/_elements/datatable/datatable.component.spec.ts new file mode 100644 index 00000000..3cf06160 --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatatableComponent } from './datatable.component'; + +describe('DatatableComponent', () => { + let component: DatatableComponent; + let fixture: ComponentFixture<DatatableComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DatatableComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DatatableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts new file mode 100644 index 00000000..d3740d83 --- /dev/null +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-datatable', + templateUrl: './datatable.component.html', + styleUrls: ['./datatable.component.css'] +}) +export class DatatableComponent implements OnInit { + + @Input() hasHeader?: boolean = true; + + @Input() data?: any[] = []; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index e87d1431..afd4ceb4 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -3,9 +3,7 @@ </div> <div id="wrapper"> - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> <!--justify-content-center--> <h2 class="col-2"> Nov model: </h2> @@ -43,9 +41,6 @@ </button> </div> - <!-- POSTOJECI ILI NOVI DATASET --> - - <!-- POSTOJECI --> <div class="px-5"> <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> <ul class="list-group"> @@ -58,56 +53,20 @@ </div> </div> - <!-- NOVI --> - <app-dataset-load *ngIf="!showMyDatasets" id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load> + <app-dataset-load *ngIf="!showMyDatasets" id="dataset" + (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader"> + </app-dataset-load> + <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> </div> - - <!-- ULAZNE/IZLAZNE KOLONE - POSTOJECI DATASET --> - <div *ngIf="showMyDatasets && this.selectedDataset" class="mt-4"> - <h2 class="text-center"> - Izabrali ste dataset: <span - style="color: #003459; font-weight: bold">{{this.selectedDataset.name}}</span> - </h2> - <div class="row mt-5"> - <div class="col d-flex justify-content-center"> - <h3>Izaberite ulazne kolone:</h3> - <div id="divInputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of this.selectedDataset.header; let i = index"> - <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" - name="cbsExisting" checked [disabled]="this.selectedOutputColumnVal == item"> - <label class="form-check-label" for="cb_{{item}}"> - {{item}} - </label> - </div> - </div> - </div> - <div class="col d-flex justify-content-left"> - <h3>Izaberite izlaznu kolonu:</h3> - <div id="divOutputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of this.selectedDataset.header; let i = index"> - <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" - name="rbsExisting" (change)="this.selectedOutputColumnVal = item"> - <label class="form-check-label" for="rb_{{item}}"> - {{item}} - </label> - </div> - </div> - </div> - </div> - </div> - - - <!-- ULAZNE/IZLAZNE KOLONE - NOVI DATASET--> - <div *ngIf="!showMyDatasets && datasetLoaded"> - <div *ngIf="datasetLoadComponent && datasetLoadComponent.files[0]" class="row"> + <!-- ULAZNE/IZLAZNE KOLONE --> + <div *ngIf="selectedDataset"> + <div class="row"> <div class="col d-flex justify-content-center"> <h3>Izaberite ulazne kolone:</h3> <div id="divInputs" class="form-check mt-2"> <br> - <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> + <div *ngFor="let item of selectedDataset.header; let i = index"> <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> <label class="form-check-label" for="cb_{{item}}"> @@ -120,7 +79,7 @@ <h3>Izaberite izlaznu kolonu:</h3> <div id="divOutputs" class="form-check mt-2"> <br> - <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index"> + <div *ngFor="let item of selectedDataset.header; let i = index"> <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item"> <label class="form-check-label" for="rb_{{item}}"> @@ -131,7 +90,7 @@ </div> - <div class="my-2"> + <div class="my-2" *ngIf="datasetFile"> <h2>Popunjavanje nedostajućih vrednosti:</h2> <div class="form-check"> <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows" @@ -153,15 +112,14 @@ <div> <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label> <div id="columnReplacers"> - <div *ngFor="let column of datasetLoadComponent.dataset.header; let i = index" - class="my-3"> + <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> <div class="input-group row" *ngIf="getInputById('cb_'+column).checked"> <span class="input-group-text col-4 text-center"> {{column}} </span> <input type="text" class="form-control col-4"> <select [id]="'replaceOptions'+i" class="form-control col-4" - *ngIf="isNumber(datasetLoadComponent.csvRecords[1][i])"> + *ngIf="isNumber(datasetFile[1][i])"> <option *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" [value]="option"> diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index a29f92d3..1c9198a3 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -5,6 +5,7 @@ import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-loa import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; import Dataset from 'src/app/_data/Dataset'; +import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; @Component({ @@ -15,6 +16,7 @@ import Dataset from 'src/app/_data/Dataset'; export class AddModelComponent implements OnInit { @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; + @ViewChild(DatatableComponent) datatable?: DatatableComponent; datasetLoaded: boolean = false; newModel: Model; @@ -36,6 +38,8 @@ export class AddModelComponent implements OnInit { myDatasets?: Dataset[]; existingDatasetSelected: boolean = false; selectedDataset?: Dataset; + datasetFile?: any[]; + datasetHasHeader?: boolean = true; tempTestSetDistribution: number = 90; @@ -150,10 +154,8 @@ export class AddModelComponent implements OnInit { getCheckedInputCols() { this.newModel.inputColumns = []; let checkboxes: any; - if (this.showMyDatasets) - checkboxes = document.getElementsByName("cbsExisting"); - else - checkboxes = document.getElementsByName("cbsNew"); + + checkboxes = document.getElementsByName("cbsNew"); for (let i = 0; i < checkboxes.length; i++) { let thatCb = <HTMLInputElement>checkboxes[i]; @@ -165,10 +167,8 @@ export class AddModelComponent implements OnInit { getCheckedOutputCol() { this.newModel.columnToPredict = ''; let radiobuttons: any; - if (this.showMyDatasets) - radiobuttons = document.getElementsByName("rbsExisting"); - else - radiobuttons = document.getElementsByName("rbsNew"); + + radiobuttons = document.getElementsByName("rbsNew"); for (let i = 0; i < radiobuttons.length; i++) { let thatRb = <HTMLInputElement>radiobuttons[i]; @@ -211,6 +211,10 @@ export class AddModelComponent implements OnInit { if (datasets[i]._id == dataset._id) }*/ + + //this.datasetFile = csvRecords; + this.datasetHasHeader = false; + this.resetCbsAndRbs(); } @@ -226,15 +230,6 @@ export class AddModelComponent implements OnInit { } checkAllCbs() { let checkboxes: any; - //if (this.showMyDatasets) - checkboxes = document.getElementsByName("cbsExisting"); - //else - //checkboxes = document.getElementsByName("cbsNew"); - - for (let i = 0; i < checkboxes.length; i++) { - (<HTMLInputElement>checkboxes[i]).checked = true; - (<HTMLInputElement>checkboxes[i]).disabled = false; - } checkboxes = document.getElementsByName("cbsNew"); for (let i = 0; i < checkboxes.length; i++) { @@ -245,13 +240,7 @@ export class AddModelComponent implements OnInit { uncheckRbs() { this.selectedOutputColumnVal = ''; let radiobuttons: any; - //if (this.showMyDatasets) - radiobuttons = document.getElementsByName("rbsExisting"); - //else - //radiobuttons = document.getElementsByName("rbsNew"); - for (let i = 0; i < radiobuttons.length; i++) - (<HTMLInputElement>radiobuttons[i]).checked = false; radiobuttons = document.getElementsByName("rbsNew"); for (let i = 0; i < radiobuttons.length; i++) (<HTMLInputElement>radiobuttons[i]).checked = false; diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 2ec16fc2..f44a6d00 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -3,4 +3,5 @@ <router-outlet></router-outlet> <!--<app-barchart></app-barchart> <app-scatterchart></app-scatterchart>--> -</div>
\ No newline at end of file +</div> +<app-notifications></app-notifications>
\ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 7f076421..3387de8c 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -33,6 +33,8 @@ import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-pre import { PredictComponent } from './_pages/predict/predict.component'; import { ScatterchartComponent } from './scatterchart/scatterchart.component'; import { BarchartComponent } from './barchart/barchart.component'; +import { NotificationsComponent } from './_elements/notifications/notifications.component'; +import { DatatableComponent } from './_elements/datatable/datatable.component'; @NgModule({ declarations: [ @@ -55,7 +57,9 @@ import { BarchartComponent } from './barchart/barchart.component'; BrowsePredictorsComponent, PredictComponent, ScatterchartComponent, - BarchartComponent + BarchartComponent, + NotificationsComponent, + DatatableComponent ], imports: [ BrowserModule, |