diff options
Diffstat (limited to 'frontend/src/app/_elements')
4 files changed, 120 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..48883ba0 --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -0,0 +1,46 @@ +<div class="container"> + + <input style="display: inline-block; width:350px;" list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> + + <input style="display: inline-block" [ngStyle]="{width:'350px'}" list=headerOptions placeholder="Da li .csv ima header?" class="form-control" [(ngModel)]="header"> + <datalist id=headerOptions> + <option *ngFor="let option of headerOptions">{{option}}</option> + </datalist> + + <br><br> + + <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($event)"> + + <table 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 | ((header == 'Da') ? (slice:1:11) : (slice:0:11))">--> + <!--<ng-container *ngIf="header == 'Da'"> + <tr *ngFor="let row of csvRecords | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </ng-container> + <ng-container *ngIf="header == 'Ne'"> + <tr *ngFor="let row of csvRecords | slice:0:10"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </ng-container>--> + + <tr *ngFor="let row of csvRecords | slice:1:11"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + </tbody> + </table> + <div *ngIf="csvRecords[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..7cdfe384 --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -0,0 +1,49 @@ +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 "," + + header: string = ""; + headerOptions: Array<string> = ["Da", "Ne"]; //podrazumevano je "Da" ======> false + + slice: string = ""; + + csvRecords: any[] = []; + rowsNumber: number = 0; + colsNumber: number = 0; + + constructor(private ngxCsvParser: NgxCsvParser) { + } + + @ViewChild('fileImportInput', { static: false }) fileImportInput: any; + + changeListener($event: any): void { + + const files = $event.srcElement.files; + + this.ngxCsvParser.parse(files[0], { header: (this.header == "") ? false : (this.header == "Da") ? false : true, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter}) + .pipe().subscribe((result) => { + + console.log('Result', result); + if (result.constructor === Array) { + this.csvRecords = result; + this.rowsNumber = this.csvRecords.length; + this.colsNumber = this.csvRecords[0].length; + } + + }, (error: NgxCSVParserError) => { + console.log('Error', error); + }); + + } + + +} |