Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

# Conflicts:
#	frontend/src/app/app.module.ts

20 files changed, 220 insertions, 30 deletions

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 665df932..c5b56957 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -11,6 +11,7 @@ export default class Dataset {
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
         public username: string = '',
-        public delimiter: string = ''
+        public delimiter: string = '',
+        public hasHeader: boolean = true
     ) { }
 }
\ 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 3ac43f73..76e46092 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -33,7 +33,7 @@
       </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)]="hasHeader" type="checkbox"
+        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox"
           value="" id="checkboxHeader" checked>
       </label>
       <br>
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 e7b19f9a..f9343117 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -13,7 +13,7 @@ export class DatasetLoadComponent {
 
   delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
 
-  hasHeader: boolean = true;
+  //hasHeader: boolean = true;
   hasInput: boolean = false;
 
   csvRecords: any[] = [];
@@ -21,7 +21,7 @@ export class DatasetLoadComponent {
   rowsNumber: number = 0;
   colsNumber: number = 0;
 
-  dataset: Dataset;
+  dataset: Dataset; //dodaj ! potencijalno
 
   constructor(private ngxCsvParser: NgxCsvParser) {
     this.dataset = new Dataset();
@@ -54,13 +54,14 @@ export class DatasetLoadComponent {
         console.log('Result', result);
         if (result.constructor === Array) {
           this.csvRecords = result;
-          if (this.hasHeader)
+          if (this.dataset.hasHeader)
             this.rowsNumber = this.csvRecords.length - 1;
           else
             this.rowsNumber = this.csvRecords.length;
           this.colsNumber = this.csvRecords[0].length;
 
-          this.dataset.header = this.csvRecords[0];
+          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");
         }
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
index 2c469ecc..bd9e7a13 100644
--- a/frontend/src/app/_elements/datatable/datatable.component.html
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -1,21 +1,21 @@
 <div *ngIf="data">
-    <div class="table-responsive">
-        <table *ngIf="hasHeader" class="table table-bordered table-light mt-4">
+    <div class="table-responsive" style="max-height: 50vh; max-width: 100%; overflow: scroll;">
+        <table *ngIf="hasHeader" class="table table-bordered table-light">
             <thead>
                 <tr>
                     <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
                 </tr>
             </thead>
             <tbody>
-                <tr *ngFor="let row of data | slice:1:11">
+                <tr *ngFor="let row of data | slice:1">
                     <td *ngFor="let col of row">{{col}}</td>
                 </tr>
             </tbody>
         </table>
 
-        <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
+        <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light">
             <tbody>
-                <tr *ngFor="let row of data | slice:0:10">
+                <tr *ngFor="let row of data">
                     <td *ngFor="let col of row">{{col}}</td>
                 </tr>
             </tbody>
@@ -23,7 +23,8 @@
     </div>
 
     <div id="info">
-        . . . <br>
-        {{data.length}} x {{data[0].length}}
+        <br>
+        <span *ngIf="hasHeader">{{data.length - 1}} x {{data[0].length}}</span>
+        <span *ngIf="!hasHeader">{{data.length}} x {{data[0].length}}</span>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
index 46840cdd..8751fce5 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
@@ -8,7 +8,7 @@
         </p>
         <table class="table table-bordered table-sm">
             <thead>
-                <th scope="col" *ngFor="let column of dataset.header">{{column}}</th>
+                <th scope="col" *ngFor="let column of dataset.header">{{column}}</th> <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze  -->
             </thead>
         </table>
     </div>
diff --git a/frontend/src/app/_elements/item-model/item-model.component.css b/frontend/src/app/_elements/item-model/item-model.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/item-model/item-model.component.css
diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html
new file mode 100644
index 00000000..9466da01
--- /dev/null
+++ b/frontend/src/app/_elements/item-model/item-model.component.html
@@ -0,0 +1,14 @@
+
+<div class="card" style="min-width: 12rem;">
+    <div class="card-header">
+        {{model.name}}
+    </div>
+    <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>
+        </p>
+        
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-model/item-model.component.spec.ts b/frontend/src/app/_elements/item-model/item-model.component.spec.ts
new file mode 100644
index 00000000..f696a160
--- /dev/null
+++ b/frontend/src/app/_elements/item-model/item-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemModelComponent } from './item-model.component';
+
+describe('ItemModelComponent', () => {
+  let component: ItemModelComponent;
+  let fixture: ComponentFixture<ItemModelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemModelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/item-model/item-model.component.ts b/frontend/src/app/_elements/item-model/item-model.component.ts
new file mode 100644
index 00000000..7f85f43f
--- /dev/null
+++ b/frontend/src/app/_elements/item-model/item-model.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import Model from 'src/app/_data/Model';
+
+@Component({
+  selector: 'app-item-model',
+  templateUrl: './item-model.component.html',
+  styleUrls: ['./item-model.component.css']
+})
+export class ItemModelComponent implements OnInit {
+
+  @Input() model: Model = new Model();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
index 58670d32..95b61b1b 100644
--- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
+++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
@@ -33,8 +33,8 @@ export class ReactiveBackgroundComponent implements OnInit {
   ngOnInit(): void {
 
     document.addEventListener('mousemove', (e) => {
-      this.mouseX = e.pageX / this.width;
-      this.mouseY = e.pageY / this.height;
+      this.mouseX = e.clientX / this.width;
+      this.mouseY = e.clientY / this.height;
     })
 
     this.canvas = (<HTMLCanvasElement>document.getElementById('bgCanvas'));
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 7e944a19..09a11e37 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -54,9 +54,11 @@
             </div>
 
             <app-dataset-load *ngIf="!showMyDatasets" id="dataset"
-                (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader">
+                (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader">
             </app-dataset-load>
-            <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
+            <div class="px-5 mt-5">
+                <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
+            </div>
         </div>
 
         <!-- ULAZNE/IZLAZNE KOLONE -->
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 fcc8ea70..995aaa87 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -209,6 +209,7 @@ export class AddModelComponent implements OnInit {
   selectThisDataset(dataset: Dataset) {
     this.selectedDataset = dataset;
     this.existingDatasetSelected = true;
+    this.datasetHasHeader = this.selectedDataset.hasHeader;
 
     /*let datasets = document.getElementsByClassName("usersDataset") as HTMLCollection;
     for (let i = 0; i < datasets.length; i++) {
@@ -220,9 +221,11 @@ export class AddModelComponent implements OnInit {
     this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
       if (file) {
         this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
+        this.datasetFile.length = this.datasetFile.length - 1;
+        console.log(this.datasetFile);
       }
     });
-    this.datasetHasHeader = false;
+    //this.datasetHasHeader = false;
 
     this.resetCbsAndRbs();
   }
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 bc13a51c..f6b78ded 100644
--- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
@@ -27,11 +27,12 @@ export class FilterDatasetsComponent implements OnInit {
     //this.router.navigateByUrl('/predict?id='+id);
     const helper = new JwtHelperService();
     const decodedToken = helper.decodeToken(this.cookie.get("token"));
-    dataset._id = "";
-    dataset.isPublic = false;
-    dataset.lastUpdated = new Date();
-    dataset.username = decodedToken.name;
-    this.datasets.addDataset(dataset).subscribe((response:string)=>{
+    const newDataset={...dataset};
+    newDataset._id = "";
+    newDataset.isPublic = false;
+    newDataset.lastUpdated = new Date();
+    newDataset.username = decodedToken.name;
+    this.datasets.addDataset(newDataset).subscribe((response:string)=>{
       console.log(response);
     });
   };
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 e69de29b..870e0ddb 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.html
+++ b/frontend/src/app/_pages/my-models/my-models.component.html
@@ -0,0 +1,27 @@
+<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 model of myModels">
+                <app-item-model [model]="model"></app-item-model>
+                <div style="width: 25%; margin: auto;">
+                    <button (click)="deleteThisModel(model)" style="margin-top: 3px; width: 100%;">Obriši</button>
+                </div>
+                </div>
+            </div>
+        <div class="text-center" *ngIf="this.myModels.length == 0" >
+        <h2>Nema rezultata</h2>
+        </div>
+        </div>
+    
+    </div>
+    
+    
+    
+    
+    
+    </div>
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 e9bc52de..bd6b0a2b 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,6 @@
 import { Component, OnInit } from '@angular/core';
+import Model from 'src/app/_data/Model';
+import { ModelsService } from 'src/app/_services/models.service';
 
 @Component({
   selector: 'app-my-models',
@@ -6,10 +8,48 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./my-models.component.css']
 })
 export class MyModelsComponent implements OnInit {
+  myModels: Model[] = [];
+  //myModel: Model;
 
-  constructor() { }
+  constructor(private modelsS : ModelsService) {
+
+    
+
+     }
 
   ngOnInit(): void {
+    this.getAllMyModels();
+
+  }
+/*
+  editModel(): void{
+    this.modelsS.editModel().subscribe(m => {
+      this.myModel = m;
+
+    })
+  }
+*/
+
+deleteThisModel(model: Model): void{
+  console.log("OK");
+  this.modelsS.deleteModel(model).subscribe((response) => {
+    console.log("OBRISANOOO JEE", response);
+    //na kraju uspesnog
+    this.getAllMyModels();
+  }, (error) =>{
+      if (error.error == "Model with name = {name} deleted") {
+        alert("Greška pri brisanju modela!");
+      }
+    });
+
+}
+
+  getAllMyModels(): void{
+    this.modelsS.getMyModels().subscribe(m => {
+      
+      this.myModels = m;
+      console.log(this.myModels);
+    });
   }
 
 }
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.css b/frontend/src/app/_pages/my-predictors/my-predictors.component.css
index e69de29b..ccb9fb7b 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.css
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.css
@@ -0,0 +1,13 @@
+#header {
+    background-color: #003459;
+    padding-top: 20px;
+    padding-bottom: 15px;
+    text-align: center;
+    color: white;
+    border-radius: 5px;
+}
+
+.row{
+    margin-top: 10px;
+    margin-bottom: 30px;
+}
\ No newline at end of file
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 32d085af..d739f561 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
@@ -1 +1,16 @@
-<p>my-predictors works!</p>
+<div id="header">
+    <h1>Trenirani modeli</h1>
+</div>
+<div id="container" style="background-color:rgba(255, 255, 255, 0.747);">
+<div class="row" *ngFor="let predictor of predictors">
+    <div class="left">
+        <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>
+    </div>
+    
+</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 b0d6e9dd..58daa44f 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import Predictor from 'src/app/_data/Predictor';
 
 @Component({
   selector: 'app-my-predictors',
@@ -6,10 +7,22 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./my-predictors.component.css']
 })
 export class MyPredictorsComponent implements OnInit {
-
-  constructor() { }
-
+  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')];
+  }
   ngOnInit(): void {
   }
 
+  delete(){
+    confirm("IZABRANI MODEL ĆE BITI IZBRISAN")
+    
+  }
+  
+
+
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index f629fd2a..58ddb2e6 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -42,4 +42,18 @@ export class ModelsService {
   getMyDatasets(): Observable<Dataset[]> {
     return this.http.get<Dataset[]>(`${API_SETTINGS.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() });
   }
+  
+  getMyModels(): Observable<Model[]> {
+    return this.http.get<Model[]>(`${API_SETTINGS.apiURL}/model/mymodels`, { headers: this.authService.authHeader() });
+  }
+
+  editModel(model:Model) : Observable<Model>
+  {
+    return this.http.put<Model>(`${API_SETTINGS.apiURL}/model/`, model, { headers: this.authService.authHeader() });
+  }
+
+  deleteModel(model:Model) : Observable<any>
+  {
+    return this.http.delete(`${API_SETTINGS.apiURL}/model/`+model.name, { headers: this.authService.authHeader() });
+  }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 1521c013..5d7af9d2 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { NotificationsComponent } from './_elements/notifications/notifications.
 import { DatatableComponent } from './_elements/datatable/datatable.component';
 import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
 import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component';
+import { ItemModelComponent } from './_elements/item-model/item-model.component';
 
 @NgModule({
   declarations: [
@@ -63,7 +64,8 @@ import { ReactiveBackgroundComponent } from './_elements/reactive-background/rea
     NotificationsComponent,
     DatatableComponent,
     FilterDatasetsComponent,
-    ReactiveBackgroundComponent
+    ReactiveBackgroundComponent,
+    ItemModelComponent
   ],
   imports: [
     BrowserModule,