diff options
Diffstat (limited to 'frontend/src/app/_elements/dataset-load')
4 files changed, 121 insertions, 0 deletions
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html new file mode 100644 index 00000000..c89add43 --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -0,0 +1,42 @@ +<div> + + <input style="display: inline-block; width:350px;" list=delimiterOptions + placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter" + (input)="update()"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> + + <label for="checkboxHeader">Da li .csv ima header?</label> + <input (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked> + <br><br> + + <input id="fileInput" class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> + + <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-5"> + <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-5"> + <tbody> + <tr *ngFor="let row of csvRecords | slice:0:10"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + + <div *ngIf="csvRecords.length > 0" 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.spec.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts new file mode 100644 index 00000000..5601b57b --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatasetLoadComponent } from './dataset-load.component'; + +describe('DatasetLoadComponent', () => { + let component: DatasetLoadComponent; + let fixture: ComponentFixture<DatasetLoadComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DatasetLoadComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DatasetLoadComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts new file mode 100644 index 00000000..843a5709 --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -0,0 +1,54 @@ +import { Component, ViewChild } from '@angular/core'; +import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; + +@Component({ + selector: 'app-dataset-load', + templateUrl: './dataset-load.component.html', + styleUrls: ['./dataset-load.component.css'] +}) +export class DatasetLoadComponent { + + delimiter: string = ""; + delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," + + hasHeader: boolean = true; + + slice: string = ""; + + csvRecords: any[] = []; + files: any[] = []; + rowsNumber: number = 0; + colsNumber: number = 0; + + constructor(private ngxCsvParser: NgxCsvParser) { + } + + @ViewChild('fileImportInput', { static: false }) fileImportInput: any; + + changeListener($event: any): void { + this.files = $event.srcElement.files; + this.update(); + } + + update() { + + if (this.files.length < 1) + return; + + this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter}) + .pipe().subscribe((result) => { + + //console.log('Result', result); + if (result.constructor === Array) { + this.csvRecords = result; + if (this.hasHeader) + this.rowsNumber = this.csvRecords.length - 1; + else + this.rowsNumber = this.csvRecords.length; + this.colsNumber = this.csvRecords[0].length; + } + }, (error: NgxCSVParserError) => { + console.log('Error', error); + }); + } +} |