diff options
Diffstat (limited to 'frontend/src/app/_elements')
6 files changed, 85 insertions, 43 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 { + } + +} |