diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 130 insertions, 2 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..934aa5eb --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -0,0 +1,16 @@ +<div class="container"> + <input class="form-control mb-5" type="file" class="upload" (change)="changeListener($any($event).target.files)"> + + <table class="table table-bordered table-light mt-5"> + <thead> + <tr> + <th *ngFor="let item of lines[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> + </tbody> + </table> + </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..d97e7cbe --- /dev/null +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -0,0 +1,82 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-dataset-load', + templateUrl: './dataset-load.component.html', + styleUrls: ['./dataset-load.component.css'] +}) +export class DatasetLoadComponent { + + //array varibales to store csv data + lines : any[] = []; //for headings + linesR : any[] = []; // for rows + +/* + const csv = require('csv-parser') + const fs = require('fs') + const res : string[] = []; + + 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); + +*/ + + changeListener(files: FileList) { + + console.log(files); + + if(files && files.length > 0) { + + let file: File | null = files.item(0); + if (file == null) + return; + + 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); + } + } + } + } + +} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 1868e56c..af8bc237 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -5,11 +5,13 @@ import { LoginPageComponent } from './_pages/login-page/login-page.component'; import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component'; import { RegisterPageComponent } from './_pages/register-page/register-page.component'; import { AuthGuardService } from './_services/auth-guard.service'; +import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; const routes: Routes = [ { path: 'login', component: LoginPageComponent }, { path: 'register', component: RegisterPageComponent }, - { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] } + { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }, + { path: 'proba', component: DatasetLoadComponent} ]; @NgModule({ diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 9ccd7ddb..bada926e 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -9,13 +9,16 @@ import { LoginPageComponent } from './_pages/login-page/login-page.component'; import { RegisterPageComponent } from './_pages/register-page/register-page.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component'; +import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; +import { CsvParser } from 'csv-parser'; @NgModule({ declarations: [ AppComponent, LoginPageComponent, RegisterPageComponent, - OnlyAuthorizedComponent + OnlyAuthorizedComponent, + DatasetLoadComponent ], imports: [ BrowserModule, |