diff options
Diffstat (limited to 'frontend/src/app/_elements')
5 files changed, 65 insertions, 25 deletions
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html index dfeb4f62..eb68b54c 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html @@ -24,9 +24,9 @@ </div> <div class="col-4 mt-4"> - <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" + <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="dataset.delimiter" (input)="update()"> - <datalist id=delimiterOptions> + <datalist id="delimiterOptions"> <option *ngFor="let option of delimiterOptions">{{option}}</option> </datalist> @@ -38,4 +38,12 @@ <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> </div> - </div>
\ No newline at end of file +</div> + +<div class="px-5 mt-5"> + <app-datatable [data]="csvRecords" [hasHeader]="dataset.hasHeader"></app-datatable> +</div> + +<div class="d-flex flex-row align-items-center justify-content-center w-100"> + <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> +</div> diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts index fceb53cf..c5e6558a 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts @@ -1,6 +1,10 @@ import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { ModelsService } from 'src/app/_services/models.service'; +import shared from 'src/app/Shared'; +import { DatatableComponent } from '../datatable/datatable.component'; @Component({ selector: 'app-add-new-dataset', @@ -9,7 +13,8 @@ import Dataset from 'src/app/_data/Dataset'; }) export class AddNewDatasetComponent { - @Output() loaded = new EventEmitter<string>(); + @Output() newDatasetAdded = new EventEmitter<string>(); + @ViewChild(DatatableComponent) datatable?: DatatableComponent; delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," @@ -23,7 +28,7 @@ export class AddNewDatasetComponent { dataset: Dataset; //dodaj ! potencijalno - constructor(private ngxCsvParser: NgxCsvParser) { + constructor(private ngxCsvParser: NgxCsvParser, private modelsService: ModelsService, private datasetsService: DatasetsService) { this.dataset = new Dataset(); } @@ -48,6 +53,9 @@ export class AddNewDatasetComponent { if (this.files.length < 1) return; + this.datatable!.loaded = false; + this.datatable!.hasInput = this.hasInput; + this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter }) .pipe().subscribe((result) => { @@ -60,10 +68,12 @@ export class AddNewDatasetComponent { this.rowsNumber = this.csvRecords.length; this.colsNumber = this.csvRecords[0].length; - if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e + if (this.dataset.hasHeader) this.dataset.header = this.csvRecords[0]; - - this.loaded.emit("loaded"); + + this.datatable!.data = this.csvRecords; + this.datatable!.hasHeader = this.dataset.hasHeader; + this.datatable!.loaded = true; } }, (error: NgxCSVParserError) => { console.log('Error', error); @@ -75,4 +85,26 @@ export class AddNewDatasetComponent { this.dataset.accessibleByLink = true; } + uploadDataset() { + this.modelsService.uploadData(this.files[0]).subscribe((file) => { + //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); + this.dataset.fileId = file._id; + this.dataset.username = shared.username; + + this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { + + this.newDatasetAdded.emit("added"); + //this.refreshMyDatasetList(); refreshuj dataset listu u ds-load i selektuj taj ds + //this.showMyDatasets = true; + //this.selectThisDataset(dataset); + + shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + }, (error) => { + shared.openDialog("Neuspeo pokušaj!", "Dataset sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); + }); //kraj addDataset subscribe + }, (error) => { + + }); //kraj uploadData subscribe + } + } 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 674e5990..2052c9b5 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -3,8 +3,7 @@ <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> <div class="col-12 d-flex my-5"> - <h2 class="">Izvor podataka:</h2> - <div class="col-1"> + <div class="col-3"> </div> <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> @@ -22,21 +21,21 @@ </div> <div class="px-5"> <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" - [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> - <app-item-dataset name="usersDataset" [dataset]="dataset" - (click)="selectThisDataset(dataset);"></app-item-dataset> - </li> - </ul> + <ul class="list-group"> + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" + [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> + <app-item-dataset name="usersDataset" [dataset]="dataset" + (click)="selectThisDataset(dataset);"></app-item-dataset> + </li> + </ul> + <div class="px-5 mt-5"> + <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> + </div> </div> </div> <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset" - (loaded)="datasetLoaded = true; selectedDataset = addNewDatasetComponent?.dataset; datasetFile = addNewDatasetComponent?.csvRecords; datasetHasHeader = addNewDatasetComponent?.dataset!.hasHeader"> + (newDatasetAdded)="showMyDatasets = true"> </app-add-new-dataset> - <div class="px-5 mt-5"> - <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> - </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index 8fcd44ac..52d50443 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,11 +1,11 @@ -<div *ngIf="data"> +<div *ngIf="data && hasInput"> <div class="table-responsive" style="height: 34rem; overflow: auto; border-radius: 5px;" class="mh-5"> <div *ngIf="!loaded" style="background-color: #003459; width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center"> <app-loading></app-loading> </div> <div *ngIf="loaded"> - <table *ngIf="hasHeader" class="table table-bordered table-light"> + <table *ngIf="data.length > 0 && hasHeader && data[0].length > 0" class="table table-bordered table-light"> <thead> <tr> <th *ngFor="let item of data[0]; let i = index">{{item}}</th> @@ -18,7 +18,7 @@ </tbody> </table> - <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light"> + <table *ngIf="data.length > 0 && !hasHeader && data[0].length > 0" class="table table-bordered table-light"> <tbody> <tr *ngFor="let row of data"> <td *ngFor="let col of row">{{col}}</td> @@ -28,7 +28,7 @@ </div> </div> - <div id="info"> + <div id="info" *ngIf="data.length > 0 && data[0].length > 0"> <br> <span *ngIf="hasHeader">{{data.length - 1}} x {{data[0].length}}</span> <span *ngIf="!hasHeader">{{data.length}} x {{data[0].length}}</span> diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts index 3343f6f0..19fb204e 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.ts +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -11,6 +11,7 @@ export class DatatableComponent implements OnInit { @Input() data?: any[] = []; + hasInput = false; loaded = false; constructor() { } |