aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/package-lock.json56
-rw-r--r--frontend/package.json6
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.css0
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.html46
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts25
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.ts49
-rw-r--r--frontend/src/app/app-routing.module.ts4
-rw-r--r--frontend/src/app/app.module.ts3
8 files changed, 185 insertions, 4 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2bc6994f..dc0d1dc1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,7 +21,9 @@
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
+ "csv-parser": "^3.0.0",
"ngx-cookie-service": "^13.1.2",
+ "ngx-csv-parser": "^0.0.7",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@@ -4483,6 +4485,20 @@
"node": ">=4"
}
},
+ "node_modules/csv-parser": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
+ "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
+ "dependencies": {
+ "minimist": "^1.2.0"
+ },
+ "bin": {
+ "csv-parser": "bin/csv-parser"
+ },
+ "engines": {
+ "node": ">= 10"
+ }
+ },
"node_modules/custom-event": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -7869,6 +7885,23 @@
"@angular/core": "^13.0.0"
}
},
+ "node_modules/ngx-csv-parser": {
+ "version": "0.0.7",
+ "resolved": "https://registry.npmjs.org/ngx-csv-parser/-/ngx-csv-parser-0.0.7.tgz",
+ "integrity": "sha512-KCos2rxjkPqw/gQfd+0TYnf4bWHY4zyC8G5JB09DEnHrHz2RReKgSccJO+4SzApG7O6asDtUV4qfa94/uZ10ZQ==",
+ "dependencies": {
+ "tslib": "^1.10.0"
+ },
+ "peerDependencies": {
+ "@angular/common": "^8.1.3",
+ "@angular/core": "^8.1.3"
+ }
+ },
+ "node_modules/ngx-csv-parser/node_modules/tslib": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+ },
"node_modules/nice-napi": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
@@ -14669,6 +14702,14 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
+ "csv-parser": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
+ "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
+ "requires": {
+ "minimist": "^1.2.0"
+ }
+ },
"custom-event": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -17129,6 +17170,21 @@
"tslib": "^2.0.0"
}
},
+ "ngx-csv-parser": {
+ "version": "0.0.7",
+ "resolved": "https://registry.npmjs.org/ngx-csv-parser/-/ngx-csv-parser-0.0.7.tgz",
+ "integrity": "sha512-KCos2rxjkPqw/gQfd+0TYnf4bWHY4zyC8G5JB09DEnHrHz2RReKgSccJO+4SzApG7O6asDtUV4qfa94/uZ10ZQ==",
+ "requires": {
+ "tslib": "^1.10.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "1.14.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+ }
+ }
+ },
"nice-napi": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5d3ab5e3..e8180256 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,10 +20,12 @@
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"@auth0/angular-jwt": "^5.0.2",
- "ngx-cookie-service": "^13.1.2",
"@ng-bootstrap/ng-bootstrap": "^12.0.0",
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
+ "csv-parser": "^3.0.0",
+ "ngx-cookie-service": "^13.1.2",
+ "ngx-csv-parser": "^0.0.7",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
@@ -42,4 +44,4 @@
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
-} \ No newline at end of file
+}
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>
+ &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 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);
+ });
+
+ }
+
+
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 8dc3c752..c592d57b 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,11 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
-import { AddModelComponent } from './_pages/add-model/add-model.component';
+import { AuthGuardService } from './_services/auth-guard.service';
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 { AddModelComponent } from './_pages/add-model/add-model.component';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 819c1557..16bb7ce5 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -9,6 +9,8 @@ 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 { NgxCsvParser } from 'ngx-csv-parser';
import { AddModelComponent } from './_pages/add-model/add-model.component';
@NgModule({
@@ -17,6 +19,7 @@ import { AddModelComponent } from './_pages/add-model/add-model.component';
LoginPageComponent,
RegisterPageComponent,
OnlyAuthorizedComponent,
+ DatasetLoadComponent,
AddModelComponent
],
imports: [
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-06 22:22:08 +0000