diff options
Diffstat (limited to 'frontend/src')
41 files changed, 726 insertions, 263 deletions
diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts index 31afb1a6..86e26687 100644 --- a/frontend/src/app/Shared.ts +++ b/frontend/src/app/Shared.ts @@ -1,9 +1,32 @@ +import { ElementRef } from "@angular/core"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; + class Shared { constructor( public loggedIn: boolean, public username: string = '', - public photoId: string = '1' + public photoId: string = '1', + public dialog?: MatDialog + //public alertDialog?: ElementRef ) { } + + + openDialog(title: string, message: string): void { + console.log("USAO U OPEN DIALOG 1"); + + if (this.dialog) { + console.log("USAO U OPEN DIALOG 2"); + const dialogRef = this.dialog.open(AlertDialogComponent, { + //width: '250px', + data: { title: title, message: message } + }); + dialogRef.afterClosed().subscribe(res => { + //nesto + }); + } + } } export default new Shared(false);
\ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 1ad4fc6d..85b6db2b 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -45,22 +45,22 @@ export enum ProblemType { export enum Encoding { Label = 'label', OneHot = 'onehot', + Ordinal = 'ordinal', + Hashing = 'hashing', + Binary = 'binary', + BaseN = 'baseN' /* BackwardDifference = 'backward difference', - BaseN = 'baseN', - Binary = 'binary', CatBoost = 'cat boost', Count = 'count', GLMM = 'glmm', - Hashing = 'hashing', + Target = 'target', Helmert = 'helmert', JamesStein = 'james stein', LeaveOneOut = 'leave one out', MEstimate = 'MEstimate', - Ordinal = 'ordinal', Sum = 'sum', Polynomial = 'polynomial', - Target = 'target', WOE = 'woe', Quantile = 'quantile' */ @@ -104,7 +104,7 @@ export enum LossFunction { BinaryCrossEntropy = 'binary_crossentropy', SquaredHingeLoss = 'squared_hinge_loss', HingeLoss = 'hinge_loss', - // multi-class classiication loss functions + // multi-class classification loss functions CategoricalCrossEntropy = 'categorical_crossentropy', SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy', KLDivergence = 'kullback_leibler_divergence', diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css 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 new file mode 100644 index 00000000..dfeb4f62 --- /dev/null +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html @@ -0,0 +1,41 @@ +<div class="row mb-4"> + <div class="col-2"> + </div> + <div class="col-3"> + <label for="name" class="col-form-label">Naziv dataseta:</label> + <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> + + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> + </div> + + <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox" + value="" id="checkboxIsPublic"> + </label> + + <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? + <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox" + value="" id="checkboxAccessibleByLink"> + </label> + </div> + <div class="col-1"> + </div> + <div class="col-4 mt-4"> + + <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" + [(ngModel)]="dataset.delimiter" (input)="update()"> + <datalist id=delimiterOptions> + <option *ngFor="let option of delimiterOptions">{{option}}</option> + </datalist> + + <label for="type" class="form-check-label my-5">Da li .csv ima header? + <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox" + value="" id="checkboxHeader" checked> + </label> + <br> + <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" + accept=".csv"> + </div> + </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts new file mode 100644 index 00000000..a9ea25b4 --- /dev/null +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddNewDatasetComponent } from './add-new-dataset.component'; + +describe('AddNewDatasetComponent', () => { + let component: AddNewDatasetComponent; + let fixture: ComponentFixture<AddNewDatasetComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddNewDatasetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AddNewDatasetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..fceb53cf --- /dev/null +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts @@ -0,0 +1,78 @@ +import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; +import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; +import Dataset from 'src/app/_data/Dataset'; + +@Component({ + selector: 'app-add-new-dataset', + templateUrl: './add-new-dataset.component.html', + styleUrls: ['./add-new-dataset.component.css'] +}) +export class AddNewDatasetComponent { + + @Output() loaded = new EventEmitter<string>(); + + delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," + + //hasHeader: boolean = true; + hasInput: boolean = false; + + csvRecords: any[] = []; + files: File[] = []; + rowsNumber: number = 0; + colsNumber: number = 0; + + dataset: Dataset; //dodaj ! potencijalno + + constructor(private ngxCsvParser: NgxCsvParser) { + this.dataset = new Dataset(); + } + + //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? + + changeListener($event: any): void { + this.files = $event.srcElement.files; + if (this.files.length == 0 || this.files[0] == null) { + //console.log("NEMA FAJLA"); + //this.loaded.emit("not loaded"); + this.hasInput = false; + return; + } + else + this.hasInput = true; + + this.update(); + } + + update() { + + if (this.files.length < 1) + return; + + this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter }) + .pipe().subscribe((result) => { + + console.log('Result', result); + if (result.constructor === Array) { + this.csvRecords = result; + if (this.dataset.hasHeader) + this.rowsNumber = this.csvRecords.length - 1; + else + 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 + this.dataset.header = this.csvRecords[0]; + + this.loaded.emit("loaded"); + } + }, (error: NgxCSVParserError) => { + console.log('Error', error); + }); + } + + checkAccessible() { + if (this.dataset.isPublic) + this.dataset.accessibleByLink = true; + } + +} diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html index f23022de..09251398 100644 --- a/frontend/src/app/_elements/annvisual/annvisual.component.html +++ b/frontend/src/app/_elements/annvisual/annvisual.component.html @@ -1,5 +1,5 @@ -<div style="text-align: center; width: 100%;" > +<div style="text-align: center; " > <button (click)="d3()" mat-raised-button color="primary">Prikaz veštačke neuronske mreže</button> - <div id="graph" align-items-center ></div> + <div id="graph" align-items-center style="width: 12rem;"></div> </div> diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css index 05819702..54e0738e 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css @@ -1,6 +1,13 @@ -#divInputs { - margin-left: 20px; +.btnType1 { + background-color: #003459; + color: white; } -#divOutputs { - margin-left: 20px; +.btnType2 { + background-color: white; + color: #003459; + border-color: #003459; +} +.selectedDatasetClass { + /*border-color: 2px solid #003459;*/ + background-color: lightblue; }
\ No newline at end of file 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 76e46092..674e5990 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,44 +1,42 @@ <div> - <div class="row mb-4"> - <div class="col-2"> - </div> - <div class="col-3"> - <label for="name" class="col-form-label">Naziv dataseta:</label> - <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> - - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> - </div> + <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> - <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox" - value="" id="checkboxIsPublic"> - </label> - - <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox" - value="" id="checkboxAccessibleByLink"> - </label> - </div> + <div class="col-12 d-flex my-5"> + <h2 class="">Izvor podataka:</h2> <div class="col-1"> </div> - <div class="col-4 mt-4"> - - <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" - [(ngModel)]="dataset.delimiter" (input)="update()"> - <datalist id=delimiterOptions> - <option *ngFor="let option of delimiterOptions">{{option}}</option> - </datalist> + <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" + [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> + Izaberite dataset iz kolekcije + </button> + <h3 class="mt-3 mx-3">ili</h3> + <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" + [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> + Dodajte novi dataset + </button> + </div> + <div class="px-5 my-2"> + <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" + [(ngModel)]="term"> + </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> + </div> + </div> - <label for="type" class="form-check-label my-5">Da li .csv ima header? - <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox" - value="" id="checkboxHeader" checked> - </label> - <br> - <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" - accept=".csv"> - </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"> + </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/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index f9343117..ed71dc3c 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -1,6 +1,12 @@ -import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; -import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component'; +import { ModelsService } from 'src/app/_services/models.service'; +import shared from 'src/app/Shared'; import Dataset from 'src/app/_data/Dataset'; +import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import { Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-dataset-load', @@ -9,70 +15,77 @@ import Dataset from 'src/app/_data/Dataset'; }) export class DatasetLoadComponent { - @Output() loaded = new EventEmitter<string>(); + @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>(); - delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," + @ViewChild(AddNewDatasetComponent) addNewDatasetComponent?: AddNewDatasetComponent; + @ViewChild(AddNewDatasetComponent) datatable?: DatatableComponent; + datasetLoaded: boolean = false; + selectedDatasetLoaded: boolean = false; - //hasHeader: boolean = true; - hasInput: boolean = false; + showMyDatasets: boolean = true; + myDatasets?: Dataset[]; + existingDatasetSelected: boolean = false; + selectedDataset?: Dataset; + otherDataset?: Dataset; + otherDatasetFile?: any[]; + datasetFile?: any[]; + datasetHasHeader?: boolean = true; - csvRecords: any[] = []; - files: File[] = []; - rowsNumber: number = 0; - colsNumber: number = 0; + term: string = ""; - dataset: Dataset; //dodaj ! potencijalno - - constructor(private ngxCsvParser: NgxCsvParser) { - this.dataset = new Dataset(); + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { + this.datasets.getMyDatasets().subscribe((datasets) => { + this.myDatasets = datasets; + }); } - @ViewChild('fileImportInput', { static: false }) fileImportInput: any; - - changeListener($event: any): void { - this.files = $event.srcElement.files; - if (this.files.length == 0 || this.files[0] == null) { - //console.log("NEMA FAJLA"); - //this.loaded.emit("not loaded"); - this.hasInput = false; - return; - } - else - this.hasInput = true; - - this.update(); + viewMyDatasetsForm() { + this.showMyDatasets = true; + this.resetSelectedDataset(); + //this.resetCbsAndRbs(); //TREBA DA SE DESI + } + viewNewDatasetForm() { + this.showMyDatasets = false; + this.resetSelectedDataset(); + //this.resetCbsAndRbs(); //TREBA DA SE DESI } - update() { - - if (this.files.length < 1) - return; - - this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter }) - .pipe().subscribe((result) => { - - console.log('Result', result); - if (result.constructor === Array) { - this.csvRecords = result; - if (this.dataset.hasHeader) - this.rowsNumber = this.csvRecords.length - 1; + selectThisDataset(dataset: Dataset) { + this.selectedDataset = dataset; + this.selectedDatasetLoaded = false; + this.existingDatasetSelected = true; + this.datasetHasHeader = this.selectedDataset.hasHeader; + + this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { + if (file) { + this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + /*for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. + if (this.datasetFile[i].length != this.datasetFile[0].length) + this.datasetFile[i].pop(); else - this.rowsNumber = this.csvRecords.length; - this.colsNumber = this.csvRecords[0].length; + break; //nema potrebe dalje + }*/ + //console.log(this.datasetFile); + //this.resetCbsAndRbs(); //TREBA DA SE DESI + //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI + this.selectedDatasetLoaded = true; + //this.scrollToNextForm(); + } + }); + } - if (this.dataset.hasHeader) //kasnije dodati opciju kada nema header da korisnik rucno unosi header-e - this.dataset.header = this.csvRecords[0]; + resetSelectedDataset(): boolean { + const temp = this.selectedDataset; + this.selectedDataset = this.otherDataset; + this.otherDataset = temp; + const tempFile = this.datasetFile; + this.datasetFile = this.otherDatasetFile; + this.otherDatasetFile = tempFile; - this.loaded.emit("loaded"); - } - }, (error: NgxCSVParserError) => { - console.log('Error', error); - }); - } + this.selectedDatasetChangeEvent.emit(this.selectedDataset); - checkAccessible() { - if (this.dataset.isPublic) - this.dataset.accessibleByLink = true; + return true; } + } diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html index 9466da01..c8c1a36d 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.html +++ b/frontend/src/app/_elements/item-model/item-model.component.html @@ -6,9 +6,9 @@ <div class="card-body overflow-hidden"> <p class="card-text"> {{"Opis: "+ model.description}}<br> - {{"Datum kreiranja:" + model.dateCreated}}<br> - {{"Poslednje ažuriranje:" + model.lastUpdated}}<br> + {{"Datum kreiranja: " + model.dateCreated}}<br> + {{"Poslednje ažuriranje: " + model.lastUpdated}}<br> </p> - + <app-annvisual class="align-items-center" [model]="model" style="width: 12rem"></app-annvisual> </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts index b6b5c9db..246032e0 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts @@ -17,8 +17,7 @@ export class ItemPredictorComponent implements OnInit { } openPredictor() { - this.router.navigate(['predict/'+ '6244958a26cf2385bc29ba2c']); - //this.router.navigate(['predict'+this.predictor._id]); + this.router.navigate(['predict/'+ this.predictor._id]); } } diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 2e4bde91..368508ed 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -3,6 +3,7 @@ import { Location } from '@angular/common'; import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; import { UserInfoService } from 'src/app/_services/user-info.service'; +import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-navbar', @@ -14,7 +15,8 @@ export class NavbarComponent implements OnInit { currentUrl: string; shared = shared; - constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService) { + constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) { + shared.dialog = matDialog; this.currentUrl = this.location.path(); this.location.onUrlChange(() => { this.currentUrl = this.location.path(); diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html new file mode 100644 index 00000000..82365193 --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html @@ -0,0 +1,7 @@ +<h2 mat-dialog-title class="text-muted">{{data.title}}</h2> +<div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);"> + {{data.message}} +</div> +<div mat-dialog-actions class="d-flex justify-content-center mt-4"> + <button mat-button cdkFocusInitial (click)="onOkClick()" style="background-color: lightgray;">OK</button> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts new file mode 100644 index 00000000..a93fc493 --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertDialogComponent } from './alert-dialog.component'; + +describe('AlertDialogComponent', () => { + let component: AlertDialogComponent; + let fixture: ComponentFixture<AlertDialogComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AlertDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts new file mode 100644 index 00000000..e15f3c6f --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { Inject} from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; + +interface DialogData { + title: string; + message: string; +} + +@Component({ + selector: 'app-alert-dialog', + templateUrl: './alert-dialog.component.html', + styleUrls: ['./alert-dialog.component.css'] +}) +export class AlertDialogComponent { + + constructor( + public dialogRef: MatDialogRef<AlertDialogComponent>, + @Inject(MAT_DIALOG_DATA) public data: DialogData, + //public dialog: MatDialog + ) {} + + onOkClick(): void { + this.dialogRef.close(); + } + + +} diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index d7836848..03048155 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -3,7 +3,7 @@ <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header" style="background-color: #003459;"> - <button id="closeButton" type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button> + <button #closeButton type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button> </div> <div class="modal-body px-5" style="color:#003459"> <h1 class="text-center mt-2 mb-4">Prijavite se</h1> diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts index c86c269a..e1535a25 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -4,6 +4,7 @@ import { CookieService } from 'ngx-cookie-service'; import { AuthService } from 'src/app/_services/auth.service'; import { UserInfoService } from 'src/app/_services/user-info.service'; import shared from '../../Shared'; +import {AfterViewInit, ElementRef} from '@angular/core'; @Component({ selector: 'app-login-modal', @@ -12,6 +13,8 @@ import shared from '../../Shared'; }) export class LoginModalComponent implements OnInit { + @ViewChild('closeButton') closeButton?: ElementRef; + username: string = ''; password: string = ''; @@ -38,7 +41,7 @@ export class LoginModalComponent implements OnInit { } else { this.authService.authenticate(response); - (<HTMLSelectElement>document.getElementById('closeButton')).click(); + (<HTMLSelectElement>this.closeButton?.nativeElement).click(); this.userInfoService.getUserInfo().subscribe((response) => { shared.photoId = response.photoId; }); diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts index 13ef7eba..05888589 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.ts +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { AuthService } from 'src/app/_services/auth.service'; import User from 'src/app/_data/User'; +import { DOCUMENT } from '@angular/common'; +import { Inject } from '@angular/core'; +import shared from 'src/app/Shared'; @Component({ selector: 'app-register-modal', @@ -29,8 +32,11 @@ export class RegisterModalComponent implements OnInit { pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; pattPassword: RegExp = /.{6,30}$/; + shared = shared; + constructor( - private authService: AuthService + private authService: AuthService, + @Inject(DOCUMENT) document: Document ) { } ngOnInit(): void { @@ -149,11 +155,11 @@ export class RegisterModalComponent implements OnInit { }, (error) => console.warn(error)); } else if (response == 'Email Already Exists') { - alert('Nalog sa unetim email-om već postoji!'); + shared.openDialog("Greška!", "Nalog sa unetim email-om već postoji!"); (<HTMLSelectElement>document.getElementById('email')).focus(); } else if (response == 'Username Already Exists') { - alert('Nalog sa unetim korisničkim imenom već postoji!'); + shared.openDialog("Greška!", "Nalog sa unetim korisničkim imenom već postoji!"); (<HTMLSelectElement>document.getElementById('username-register')).focus(); } } diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css index 6d961287..7f05af0f 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.css +++ b/frontend/src/app/_pages/add-model/add-model.component.css @@ -32,4 +32,11 @@ } ul li:hover { background-color: lightblue; -}
\ No newline at end of file +} + +#divInputs { + margin-left: 20px; +} +#divOutputs { + margin-left: 20px; +} diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 3d5fd7b1..179e9aea 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -25,42 +25,8 @@ <div class="py-3 pr-5 justify-content-center"> - <div class="col-12 d-flex my-5"> - <h2 class="">Izvor podataka:</h2> - <div class="col-1"> - </div> - <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" - [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> - Izaberite dataset iz kolekcije - </button> - <h3 class="mt-3 mx-3">ili</h3> - <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" - [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> - Dodajte novi dataset - </button> - </div> - <div class="px-5 my-2"> - <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> - </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> - </div> - </div> + <app-dataset-load (selectedDatasetChangeEvent)="datasetHasChanged($event)"></app-dataset-load> - <app-dataset-load [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset" - (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader"> - </app-dataset-load> - <div class="px-5 mt-5"> - <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> - </div> </div> <span id="selectInAndOuts"></span> <div diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index d47b24e6..ba8f7d01 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -5,9 +5,7 @@ import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-loa import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; import Dataset from 'src/app/_data/Dataset'; -import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; import { DatasetsService } from 'src/app/_services/datasets.service'; -import { NgxCsvParser } from 'ngx-csv-parser'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; @@ -18,11 +16,6 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service'; }) export class AddModelComponent implements OnInit { - @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; - @ViewChild(DatatableComponent) datatable?: DatatableComponent; - datasetLoaded: boolean = false; - selectedDatasetLoaded: boolean = false; - newModel: Model; ProblemType = ProblemType; @@ -71,8 +64,13 @@ export class AddModelComponent implements OnInit { (<HTMLInputElement>document.getElementById("btnMyDataset")).focus(); } + datasetHasChanged(selectedDataset: Dataset) { + this.selectedDataset = selectedDataset; + this.resetCbsAndRbs(); + this.refreshThreeNullValueRadioOptions(); + } - viewMyDatasetsForm() { + /*viewMyDatasetsForm() { this.showMyDatasets = true; this.resetSelectedDataset(); //this.datasetLoaded = false; @@ -82,7 +80,7 @@ export class AddModelComponent implements OnInit { this.showMyDatasets = false; this.resetSelectedDataset(); this.resetCbsAndRbs(); - } + }*/ addModel() { if (!this.showMyDatasets) @@ -174,7 +172,7 @@ export class AddModelComponent implements OnInit { this.models.addModel(this.newModel).subscribe((response) => { callback(response); }, (error) => { - alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom."); + shared.openDialog("Neuspeo pokušaj!", "Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom."); }); } } @@ -217,47 +215,47 @@ export class AddModelComponent implements OnInit { return false; } else if (this.newModel.inputColumns.length == 0) { - alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu."); + shared.openDialog("Neuspeo pokušaj!", "Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu."); return false; } else if (this.newModel.columnToPredict == '') { - alert("Molimo Vas da izaberete izlaznu kolonu za mrežu."); + shared.openDialog("Neuspeo pokušaj!", "Molimo Vas da izaberete izlaznu kolonu za mrežu."); return false; } for (let i = 0; i < this.newModel.inputColumns.length; i++) { if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) { let colName = this.newModel.columnToPredict; - alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); + shared.openDialog("Neuspeo pokušaj!", "Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); return false; } } return true;*/ } - selectThisDataset(dataset: Dataset) { + /*selectThisDataset(dataset: Dataset) { this.selectedDataset = dataset; - this.selectedDatasetLoaded = false; + //this.selectedDatasetLoaded = false; this.existingDatasetSelected = true; this.datasetHasHeader = this.selectedDataset.hasHeader; this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { if (file) { this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - /*for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. - if (this.datasetFile[i].length != this.datasetFile[0].length) - this.datasetFile[i].pop(); - else - break; //nema potrebe dalje - }*/ + //for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. + //if (this.datasetFile[i].length != this.datasetFile[0].length) + //this.datasetFile[i].pop(); + //else + // break; //nema potrebe dalje + //} //console.log(this.datasetFile); this.resetCbsAndRbs(); this.refreshThreeNullValueRadioOptions(); - this.selectedDatasetLoaded = true; + //this.selectedDatasetLoaded = true; this.scrollToNextForm(); } }); //this.datasetHasHeader = false; - } + }*/ scrollToNextForm() { (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({ @@ -267,7 +265,7 @@ export class AddModelComponent implements OnInit { }); } - resetSelectedDataset(): boolean { + /*resetSelectedDataset(): boolean { const temp = this.selectedDataset; this.selectedDataset = this.otherDataset; this.otherDataset = temp; @@ -275,7 +273,7 @@ export class AddModelComponent implements OnInit { this.datasetFile = this.otherDatasetFile; this.otherDatasetFile = tempFile; return true; - } + }*/ resetCbsAndRbs(): boolean { this.uncheckRbs(); this.checkAllCbs(); @@ -345,7 +343,7 @@ export class AddModelComponent implements OnInit { let colIndex = this.findColIndexByName(colName); let sumOfNulls = 0; - let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0; + let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0; for (let i = startValue; i < this.datasetFile.length; i++) { if (this.datasetFile[i][colIndex] == "" || this.datasetFile[i][colIndex] == undefined) ++sumOfNulls; @@ -360,7 +358,7 @@ export class AddModelComponent implements OnInit { let sum = 0; let n = 0; - let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0; + let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0; for (let i = startValue; i < this.datasetFile.length; i++) if (this.datasetFile[i][colIndex] != '') { sum += Number(this.datasetFile[i][colIndex]); @@ -467,9 +465,13 @@ export class AddModelComponent implements OnInit { arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))]; - dropEmptyString(set: Set<string>): Set<string> { + dropEmptyString(set: Set<any>): Set<string> { if (set.has("")) set.delete(""); + if (set.has(null)) + set.delete(null); + if (set.has(undefined)) + set.delete(undefined); return set; } diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html index a4ab6e2c..27e06884 100644 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html @@ -5,7 +5,9 @@ <div class="row mt-3 mb-2 d-flex justify-content-center"> <div class="col-sm-6" style="margin-bottom: 10px;"> + <p class="glyphicon glyphicon-search"></p> <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> + </div> <div class="row"> @@ -14,7 +16,7 @@ <div class="card-body"> <h3 class="card-title"><b>{{predictor.name}}</b></h3> <p class="card-text">{{predictor.description}}</p> - <a class="btn btn-primary" (click)="openPredictor(predictor._id)">Otvori</a> + <a class="btn btn-primary" (click)="openPredictor(predictor._id)">Iskoristi</a> </div> <div class="card-footer text-muted"> Kreirao: {{predictor.username}} <br> diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts index 4f96fc36..891b3cab 100644 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts +++ b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts @@ -20,7 +20,7 @@ export class BrowsePredictorsComponent implements OnInit { ngOnInit(): void { } openPredictor(id:string):void{ - this.router.navigateByUrl('/predict?id='+id); + this.router.navigate(['predict/'+id]); }; } diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts index b75decf2..fc146046 100644 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts @@ -4,6 +4,7 @@ import Dataset from 'src/app/_data/Dataset'; import {Router} from '@angular/router' import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; +import shared from 'src/app/Shared'; @Component({ selector: 'app-filter-datasets', @@ -12,6 +13,7 @@ import { CookieService } from 'ngx-cookie-service'; }) export class FilterDatasetsComponent implements OnInit { + shared = shared; publicDatasets?: Dataset[]; term: string = ""; constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) { @@ -37,11 +39,9 @@ export class FilterDatasetsComponent implements OnInit { if(name!=null && name!="") this.datasets.addDataset(newDataset).subscribe((response:string)=>{ console.log(response); - alert("Uspenso ste dodali dataset sa imenom "+newDataset.name); + shared.openDialog("Obaveštenje", "Uspešno ste dodali dataset sa nazivom " + newDataset.name); },(error)=>{ - alert("Vec imate dataset sa istim imenom molim vas unesite drugo ime"); - - + shared.openDialog("Obaveštenje", "U svojoj kolekciji već imate dataset sa ovim imenom. Molimo Vas da unesete drugo ime."); }); }; diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html index 623b9ac8..2e17201d 100644 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.html +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.html @@ -1,5 +1,37 @@ -<ul class="list-group my-2"> - <li class="list-group-item" *ngFor="let dataset of myDatasets"> - <app-item-dataset [dataset]="dataset"></app-item-dataset> - </li> -</ul>
\ No newline at end of file +<div id="wrapper"> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + <div class="row mt-3 mb-2 d-flex justify-content-center"> + + <div class="col-sm-6" style="margin-bottom: 10px;"> + </div> + + <div class="row"> + <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of myDatasets"> + <app-item-dataset [dataset]="dataset"></app-item-dataset> + + <div class="panel-footer row"><!-- panel-footer --> + <div class="col-xs-6 text-center"> + <div> + <button type="button" class="btn btn-default btn-lg" mat-raised-button color="primary" (click)="deleteThisDataset(dataset)">Obriši + <span class="glyphicon glyphicon-chevron-right"></span> + </button> + </div> + </div> + </div><!-- end panel-footer --> + + + + </div> + </div> + <div class="text-center" *ngIf="this.myDatasets.length == 0" > + <h2>Nema rezultata</h2> + </div> + </div> + + </div> + + + + + + </div> diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts index 13b0c47b..eb5e32f8 100644 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import {Router} from '@angular/router'; +import { DatasetsService } from 'src/app/_services/datasets.service'; import Dataset from 'src/app/_data/Dataset'; +import { JwtHelperService } from '@auth0/angular-jwt'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-my-datasets', @@ -7,18 +11,47 @@ import Dataset from 'src/app/_data/Dataset'; styleUrls: ['./my-datasets.component.css'] }) export class MyDatasetsComponent implements OnInit { + myDatasets: Dataset[] = []; - myDatasets?: Dataset[]; + constructor(private datasetsS : DatasetsService) { - constructor() { - this.myDatasets = [ - new Dataset('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli']), - new Dataset('Neki drugi set', 'opis', ['a', 'b', 'c']), - new Dataset('Treci set', 'opis', ['a', 'b', 'c']) - ]; - } + + + } ngOnInit(): void { + this.datasetsS.getMyDatasets(); + + } +/* + editModel(): void{ + this.modelsS.editModel().subscribe(m => { + this.myModel = m; + + }) + } +*/ + +deleteThisDataset(dataset: Dataset): void{ + console.log("OK"); + this.datasetsS.deleteDataset(dataset).subscribe((response) => { + console.log("OBRISANO JE", response); + //na kraju uspesnog + this.getAllMyDatasets(); + }, (error) =>{ + if (error.error == "Dataset with name = {name} deleted") { + alert("Greška pri brisanju dataseta!"); + } + }); + +} + + getAllMyDatasets(): void{ + this.datasetsS.getMyDatasets().subscribe(m => { + + this.myDatasets = m; + console.log(this.myDatasets); + }); } } diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html index e2533d89..4aebc1f2 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ b/frontend/src/app/_pages/my-models/my-models.component.html @@ -8,12 +8,22 @@ <div class="row"> <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let model of myModels"> <app-item-model [model]="model"></app-item-model> - <app-annvisual align-items-center [model]="model" style="width: 100%;"></app-annvisual> - <div style="width: 25%; margin: auto;"> - <button mat-raised-button color="primary" (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Obriši</button> - - <button mat-raised-button color="primary" (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Koristi</button> - </div> + + <div class="panel-footer row"><!-- panel-footer --> + <div class="col-xs-6 text-center"> + <div> + <button type="button" class="btn btn-default btn-lg" (click)="deleteThisModel(model)" mat-raised-button color="primary">Koristi + <span class="glyphicon glyphicon-search"></span> + </button> + <button type="button" class="btn btn-default btn-lg" mat-raised-button color="primary" (click)="deleteThisModel(model)">Obriši + <span class="glyphicon glyphicon-chevron-right"></span> + </button> + </div> + </div> + </div><!-- end panel-footer --> + + + </div> </div> <div class="text-center" *ngIf="this.myModels.length == 0" > diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts index bd6b0a2b..6086b1b1 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ b/frontend/src/app/_pages/my-models/my-models.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import shared from 'src/app/Shared'; import Model from 'src/app/_data/Model'; import { ModelsService } from 'src/app/_services/models.service'; @@ -38,7 +39,7 @@ deleteThisModel(model: Model): void{ this.getAllMyModels(); }, (error) =>{ if (error.error == "Model with name = {name} deleted") { - alert("Greška pri brisanju modela!"); + shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela."); } }); diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html index d739f561..3746d35e 100644 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html @@ -7,7 +7,7 @@ <app-item-predictor [predictor]="predictor"></app-item-predictor> </div> <div> - <button (click)="delete()" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button> + <button (click)="delete(predictor)" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button> </div> </div> diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts index 58daa44f..13cfdab2 100644 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import Predictor from 'src/app/_data/Predictor'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-my-predictors', @@ -7,22 +8,38 @@ import Predictor from 'src/app/_data/Predictor'; styleUrls: ['./my-predictors.component.css'] }) export class MyPredictorsComponent implements OnInit { - predictors: Predictor[]; - constructor() { - this.predictors = [ - new Predictor('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli'],'Preziveli'), - new Predictor('Neki drugi set', 'opis', ['a', 'b', 'c'],'c'), - new Predictor('Preživeli', 'Za uneto ime osobe, predvidja da li je ta osoba preživela ili ne.', ['Ime'], 'OsobaJePreživela'), - new Predictor('Drugi model', 'Lorem ipsum dolor sir amet', ['kruska'], 'jagoda')]; + predictors: Predictor[] = []; + constructor(private predictorsS : PredictorsService) { } ngOnInit(): void { + this.getAllMyPredictors(); + } - delete(){ - confirm("IZABRANI MODEL ĆE BITI IZBRISAN") + delete(predictor: Predictor){ + if(window.confirm("IZABRANI MODEL ĆE BITI IZBRISAN")) + { + this.predictorsS.deletePredictor(predictor).subscribe((response) => { + console.log("OBRISANOOO JEE", response); + //na kraju uspesnog + this.getAllMyPredictors(); + }, (error) =>{ + if (error.error == "Predictor with name = {name} deleted") { + alert("Greška pri brisanju modela!"); + } + }); + } + } - + + getAllMyPredictors(): void{ + this.predictorsS.getMyPredictors().subscribe(m => { + + this.predictors = m; + console.log(this.predictors); + }); + } } diff --git a/frontend/src/app/_pages/predict/predict.component.css b/frontend/src/app/_pages/predict/predict.component.css index e69de29b..dab059a5 100644 --- a/frontend/src/app/_pages/predict/predict.component.css +++ b/frontend/src/app/_pages/predict/predict.component.css @@ -0,0 +1,3 @@ +#wrapper { + color: #003459; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html index fe17c96d..13afa8e4 100644 --- a/frontend/src/app/_pages/predict/predict.component.html +++ b/frontend/src/app/_pages/predict/predict.component.html @@ -18,8 +18,25 @@ <div> <label for="output" class="col-sm-5 col-form-label">Opis prediktora: <b>{{predictor.description}}</b></label> </div> + + + </div> + <br> + <label for="type" class="form-check-label" ><b>Informacije o prediktoru</b></label> + <div class="col-5 mt-2"> + <label for="type" class="form-check-label" >Prediktor {{predictor.isPublic?"je":"nije"}} javni.</label> + </div> + <div class="col-5 mt-2"> + <label for="type" class="form-check-label" >Prediktor {{predictor.accessibleByLink?"je":"nije"}} dostupan za deljenje.</label> + </div> + <br> + <div class="col-2"> + <label for="dateCreated" class="col-form-label">Datum:</label> + <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" + value="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly> </div> + <br> <div > <!--input --> @@ -28,44 +45,20 @@ <div *ngIf="predictor" class="form-group row mt-3 mb-2 d-flex justify-content-left"> <div *ngFor="let input of predictor.inputs; let i = index"> <label for="{{input}}" class="col-sm-2 col-form-label"><b>{{input}}</b></label> - <input name="{{input}}" type="text" [(ngModel)]="inputs[i]" > + <input name="{{input}}" type="text" [(ngModel)]="inputs[i].value" > </div> </div> </div> - + <br> </div> <div> <label for="output" class="col-sm-2 col-form-label">Izlaz: <b>{{predictor.output}}</b></label> </div> - <br> - <br> - <br> - <br> - <br> - - <div class="col-5 mt-2"> - <label for="type" class="form-check-label">Da li je prediktor javan?</label> - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.isPublic" - type="checkbox" value="" > - </div> - <div class="col-5 mt-2"> - <label for="type" class="form-check-label">Da li je dostupan za deljenje?</label> - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="predictor.accessibleByLink" - type="checkbox" value="" > - </div> - <br> - <div class="col-2"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> - - <br><br> <div class="form-group row mt-5 mb-3"> <div class="col"></div> <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts index 3f431fff..1c1c7425 100644 --- a/frontend/src/app/_pages/predict/predict.component.ts +++ b/frontend/src/app/_pages/predict/predict.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import Predictor from 'src/app/_data/Predictor'; import { PredictorsService } from 'src/app/_services/predictors.service'; +import shared from 'src/app/Shared'; @Component({ selector: 'app-predict', @@ -10,7 +11,8 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; }) export class PredictComponent implements OnInit { - inputs : String[] = []; + inputs : Column[] = []; + predictor:Predictor; constructor(private predictS : PredictorsService, private route: ActivatedRoute) { @@ -22,6 +24,7 @@ export class PredictComponent implements OnInit { this.predictS.getPredictor(url["id"]).subscribe(p => { this.predictor = p; + this.predictor.inputs.forEach((p,index)=> this.inputs[index] = new Column(p, "")); console.log(this.predictor); }) }); @@ -29,9 +32,16 @@ export class PredictComponent implements OnInit { usePredictor(): void{ this.predictS.usePredictor(this.predictor, this.inputs).subscribe(p => { - - alert("Uspesno ste poslali preditor!"); + shared.openDialog("Obaveštenje", "Prediktor je uspešno poslat na probu."); //pisalo je "na treniranje" ?? }) console.log(this.inputs); } } + + +export class Column { + constructor( + public name : string, + public value : (number | string)){ + } +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html index d082a003..557d69fd 100644 --- a/frontend/src/app/_pages/profile/profile.component.html +++ b/frontend/src/app/_pages/profile/profile.component.html @@ -30,12 +30,14 @@ <label class="small mb-1" for="inputPassword">Važeća lozinka</label> <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka"> <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small> + <small *ngIf="wrongOldPassBool" class="form-text text-danger">Pogrešan format.</small> </div> <!-- Form Group (new password)--> <div class="col-md-6"> <label class="small mb-1" for="inputNewPassword">Nova lozinka</label> <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku"> <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small> + <small *ngIf="wrongNewPass1Bool" class="form-text text-danger">Pogrešan format.</small> </div> </div> @@ -52,6 +54,7 @@ <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label> <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku"> <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small> + <small *ngIf="wrongNewPass2Bool" class="form-text text-danger">Pogrešan format.</small> </div> </div> </div> @@ -73,11 +76,13 @@ <div class="col-md-6"> <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label> <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username"> + <small *ngIf="wrongUsernameBool" class="form-text text-danger">Pogrešan format.</small> </div> <!-- Form Group (email address)--> <div class="col-md-6"> <label class="small mb-1" for="inputEmailAddress">Email adresa</label> <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email"> + <small *ngIf="wrongEmailBool" class="form-text text-danger">Pogrešan format.</small> </div> </div> @@ -87,11 +92,13 @@ <div class="col-md-6"> <label class="small mb-1" for="inputFirstName">Ime</label> <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName"> + <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Pogrešan format.</small> </div> <!-- Form Group (last name)--> <div class="col-md-6"> <label class="small mb-1" for="inputLastName">Prezime</label> <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName"> + <small *ngIf="wrongLastNameBool" class="form-text text-danger">Pogrešan format.</small> </div> </div> diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts index 3e9a0d11..d055fad3 100644 --- a/frontend/src/app/_pages/profile/profile.component.ts +++ b/frontend/src/app/_pages/profile/profile.component.ts @@ -6,6 +6,7 @@ import { Router } from '@angular/router'; import { PICTURES } from 'src/app/_data/ProfilePictures'; import { Picture } from 'src/app/_data/ProfilePictures'; import shared from '../../Shared'; +import { share } from 'rxjs'; @Component({ @@ -71,6 +72,9 @@ export class ProfileComponent implements OnInit { } saveInfoChanges() { + if (!(this.checkInfoChanges())) //nije prosao regex + return; + let editedUser: User = { _id: this.user._id, username: this.username, @@ -84,18 +88,20 @@ export class ProfileComponent implements OnInit { this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{ if (this.user.username != editedUser.username) { //promenio username, ide logout this.user = editedUser; - alert("Nakon promene korisničkog imena, moraćete ponovo da se ulogujete."); + this.resetInfo(); + shared.openDialog("Obaveštenje", "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete."); this.authService.logOut(); this.router.navigate(['']); return; } + shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni."); this.user = editedUser; console.log(this.user); this.resetInfo(); }, (error: any) =>{ if (error.error == "Username already exists!") { - alert("Ukucano korisničko ime je već zauzeto!\nIzaberite neko drugo."); - (<HTMLSelectElement>document.getElementById("inputUsername")).focus(); + shared.openDialog("Obaveštenje", "Ukucano korisničko ime je već zauzeto! Izaberite neko drugo."); + //(<HTMLSelectElement>document.getElementById("inputUsername")).focus(); //poruka obavestenja ispod inputa this.resetInfo(); } @@ -103,38 +109,41 @@ export class ProfileComponent implements OnInit { } savePasswordChanges() { + this.wrongPassBool = false; + this.wrongNewPassBool = false; + + if (!(this.checkPasswordChanges())) //nije prosao regex + return; + if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku return; - console.log("zeli da promeni lozinku"); + //console.log("zeli da promeni lozinku"); if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku this.wrongNewPassBool = true; this.resetNewPassInputs(); - console.log("Netacno ponovljena lozinka"); + //console.log("Netacno ponovljena lozinka"); return; } - this.wrongPassBool = false; - this.wrongNewPassBool = false; - let passwordArray: string[] = [this.oldPass, this.newPass1]; this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => { - console.log("PROMENIO LOZINKU"); + //console.log("PROMENIO LOZINKU"); this.resetNewPassInputs(); - alert("Nakon promene lozinke, moraćete ponovo da se ulogujete."); + shared.openDialog("Obaveštenje", "Nakon promene lozinke, moraćete ponovo da se ulogujete."); this.authService.logOut(); this.router.navigate(['']); }, (error: any) => { console.log("error poruka: ", error.error); if (error.error == 'Wrong old password!') { this.wrongPassBool = true; - (<HTMLSelectElement>document.getElementById("inputPassword")).focus(); + //(<HTMLSelectElement>document.getElementById("inputPassword")).focus(); return; } else if (error.error == 'Identical password!') { - alert("Stara i nova lozinka su identične."); + shared.openDialog("Obaveštenje", "Stara i nova lozinka su identične."); this.resetNewPassInputs(); - (<HTMLSelectElement>document.getElementById("inputNewPassword")).focus(); + //(<HTMLSelectElement>document.getElementById("inputNewPassword")).focus(); return; } }); @@ -161,5 +170,95 @@ export class ProfileComponent implements OnInit { shared.photoId = this.photoId; } + checkPasswordChanges() : boolean { + this.passwordValidation(); + + if (!(this.wrongOldPassBool || this.wrongNewPass1Bool || this.wrongNewPass2Bool)) + return true; + return false; + } + checkInfoChanges() : boolean { + this.firstName = this.firstName.trim(); + this.lastName = this.lastName.trim(); + this.username = this.username.trim(); + this.email = this.email.trim(); + + this.firstNameValidation(); + this.lastNameValidation(); + this.usernameValidation(); + this.emailValidation(); + + if (!(this.wrongUsernameBool || this.wrongEmailBool || this.wrongFirstNameBool || this.wrongLastNameBool)) + return true; + return false; + } + + isCorrectName(element: string): boolean { + if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectUsername(element: string): boolean { + if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectEmail(element: string): boolean { + if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320) + return true; + return false; + } + isCorrectPassword(element: string): boolean { + if (this.pattPassword.test(element)) + return true; + return false; + } + firstNameValidation() { + if (this.isCorrectName(this.firstName) == true) { + this.wrongFirstNameBool = false; + return; + } + //(<HTMLSelectElement>document.getElementById('firstName')).focus(); + this.wrongFirstNameBool = true; + } + lastNameValidation() { + if (this.isCorrectName(this.lastName) == true) { + this.wrongLastNameBool = false; + return; + } + //(<HTMLSelectElement>document.getElementById('lastName')).focus(); + this.wrongLastNameBool = true; + } + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; + return; + } + //(<HTMLSelectElement>document.getElementById('username-register')).focus(); + this.wrongUsernameBool = true; + } + emailValidation() { + if (this.isCorrectEmail(this.email) == true) { + this.wrongEmailBool = false; + return; + } + //(<HTMLSelectElement>document.getElementById('email')).focus(); + this.wrongEmailBool = true; + } + passwordValidation() { + if (this.isCorrectPassword(this.oldPass) && this.isCorrectPassword(this.newPass1) && this.newPass1 == this.newPass2) { + this.wrongOldPassBool = false; + this.wrongNewPass1Bool = false; + this.wrongNewPass2Bool = false; + return; + } + this.oldPass = ''; + this.newPass1 = ''; + this.newPass2 = ''; + //(<HTMLSelectElement>document.getElementById('pass1')).focus(); + this.wrongOldPassBool = true; + this.wrongNewPass1Bool = true; + this.wrongNewPass2Bool = true; + } } diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index 0ff63828..cd901481 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -27,4 +27,12 @@ export class DatasetsService { getDatasetFile(fileId: any): any { return this.http.get(`${API_SETTINGS.apiURL}/file/download?id=${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' }); } + + editDataset(dataset: Dataset): Observable<Dataset> { + return this.http.put<Dataset>(`${API_SETTINGS.apiURL}/dataset/`, dataset, { headers: this.authService.authHeader() }); + } + + deleteDataset(dataset: Dataset) { + return this.http.delete(`${API_SETTINGS.apiURL}/dataset/` + dataset.name, { headers: this.authService.authHeader(), responseType: "text" }); + } } diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts index 54ae5694..844cd706 100644 --- a/frontend/src/app/_services/predictors.service.ts +++ b/frontend/src/app/_services/predictors.service.ts @@ -3,6 +3,7 @@ import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { API_SETTINGS } from 'src/config'; import Predictor from '../_data/Predictor'; +import { Column } from '../_pages/predict/predict.component'; import { AuthService } from './auth.service'; @Injectable({ @@ -21,7 +22,15 @@ export class PredictorsService { return this.http.get<Predictor>(`${API_SETTINGS.apiURL}/predictor/getpredictor/`+ id, { headers: this.authService.authHeader() }); } - usePredictor(predictor: Predictor, inputs : String[]) { + usePredictor(predictor: Predictor, inputs : Column[]) { return this.http.post(`${API_SETTINGS.apiURL}/predictor/usepredictor/` + predictor._id, inputs, { headers: this.authService.authHeader() }); } + + deletePredictor(predictor: Predictor) { + return this.http.delete(`${API_SETTINGS.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" }); + } + + getMyPredictors(): Observable<Predictor[]> { + return this.http.get<Predictor[]>(`${API_SETTINGS.apiURL}/predictor/mypredictors`, { headers: this.authService.authHeader() }); + } } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index d701f9d7..04523989 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; @@ -42,6 +42,8 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component'; import { ExperimentComponent } from './experiment/experiment.component'; import { LoadingComponent } from './_elements/loading/loading.component'; import { ModelLoadComponent } from './_elements/model-load/model-load.component'; +import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; +import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component'; @NgModule({ declarations: [ @@ -73,7 +75,9 @@ import { ModelLoadComponent } from './_elements/model-load/model-load.component' AnnvisualComponent, ExperimentComponent, LoadingComponent, - ModelLoadComponent + ModelLoadComponent, + AlertDialogComponent, + AddNewDatasetComponent ], imports: [ BrowserModule, @@ -90,6 +94,8 @@ import { ModelLoadComponent } from './_elements/model-load/model-load.component' Ng2SearchPipeModule, ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + entryComponents: [AlertDialogComponent] }) export class AppModule { } diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts index e85419ee..d16cef3d 100644 --- a/frontend/src/app/material.module.ts +++ b/frontend/src/app/material.module.ts @@ -1,18 +1,21 @@ import { NgModule } from '@angular/core'; - +import { CommonModule } from '@angular/common'; import { MatDialogModule } from '@angular/material/dialog'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatIconModule } from '@angular/material/icon'; @NgModule({ exports: [ + CommonModule, MatDialogModule, MatButtonModule, MatFormFieldModule, MatInputModule, - MatCheckboxModule + MatCheckboxModule, + MatIconModule ] }) export class MaterialModule {}
\ No newline at end of file |