Komponenta za ucitavanje i prikaz csv fajla v2

2 files changed, 65 insertions, 68 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 934aa5eb..48883ba0 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,16 +1,46 @@
 <div class="container">
-    <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($any($event).target.files)">
- 
+
+    <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>
+    &nbsp;&nbsp;&nbsp;
+    <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 lines[0]; let i = index">{{item}}</th>
+          <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let item of linesR[0]; let i = index">
-          <td *ngFor="let itemm of lines[0]; let j = index">{{item[j]}}</td>
+        <!--<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.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index d97e7cbe..7cdfe384 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
 
 @Component({
   selector: 'app-dataset-load',
@@ -7,76 +8,42 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 })
 export class DatasetLoadComponent {
 
-   //array varibales to store csv data
-   lines : any[] = []; //for headings
-   linesR : any[] = []; // for rows
+  delimiter: string = "";
+  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
-/*
-    const csv = require('csv-parser')
-    const fs = require('fs')
-    const res : string[] = [];
+  header: string = "";
+  headerOptions: Array<string> = ["Da", "Ne"]; //podrazumevano je "Da" ======> false
 
-    fs.createReadStream('https://raw.githubusercontent.com/sharmaroshan/Churn-Modelling-Dataset/master/Churn_Modelling.csv')
-      .pipe(csv())
-      .on('data', (data : string) => res.push(data))
-      .on('end', () => {
-        console.log(res);
+  slice: string = "";
 
-*/
+  csvRecords: any[] = [];
+  rowsNumber: number = 0;
+  colsNumber: number = 0;
 
-  changeListener(files: FileList) {
+  constructor(private ngxCsvParser: NgxCsvParser) {
+  }
+
+  @ViewChild('fileImportInput', { static: false }) fileImportInput: any;
+
+    changeListener($event: any): void {
 
-    console.log(files);
+    const files = $event.srcElement.files;
 
-    if(files && files.length > 0) {
-    
-      let file: File | null = files.item(0);
-      if (file == null)
-        return;
+    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) => {
 
-      if (file) { 
-          console.log(file.name);
-          console.log(file.size);
-          console.log(file.type);
-          //File reader method
-          let reader: FileReader = new FileReader();
-          reader.readAsText(file);
-          reader.onload = (e) => {
-            let csv: any = reader.result;
-            let allTextLines = [];
-            allTextLines = csv.split(/\r|\n|\r/);
-          
-          //Table Headings
-            let headers = allTextLines[0].split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/);
-            let data = headers;
-            let tarr = [];
-            for (let j = 0; j < headers.length; j++) {
-              tarr.push(data[j]);
-            }
-            //Pusd headings to array variable
-            this.lines.push(tarr);
-            //console.log(this.lines);
-            
-          
-            // Table Rows
-            let tarrR : string[] = [];
-            
-            let arrl = allTextLines.length;
-            let rows = [];
-            for(let i = 1; i < arrl; i++){
-            rows.push(allTextLines[i].split(/,(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/));
-          
-            }
-            
-            for (let j = 0; j < arrl; j++) {
-                tarrR.push(rows[j]);
-            }
-          //Push rows to array variable
-            this.linesR.push(tarrR);
-            console.log(this.linesR);
+        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);
+      });
+
   }
 
+
 }