Add-model strana. Dodavanje modela uz postojeci dataset ili uz kreiranje novog dataseta. Servis za uzimanje korisnikovih datasetova iz baze. Izmenjen randomTestSetDistribution.

1 files changed, 77 insertions, 10 deletions

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 98cd204b..33066f80 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -6,7 +6,7 @@
 
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-        <div class="form-group row mb-4 d-flex justify-content-center">
+        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
             <!--justify-content-center-->
             <h2 class="col-2"> Nov model: </h2>
             <div class="col-3">
@@ -26,20 +26,87 @@
             </div>
         </div>
 
-        <div class="mt-5 justify-content-center">
-            <h2>Izvor podataka:</h2>
-            <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
+        <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>
+
+                <!-- POSTOJECI ILI NOVI DATASET -->
+
+                <!-- POSTOJECI -->
+                <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" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+                                <app-item-dataset name="usersDataset" [dataset]="dataset" (click)="selectThisDataset(dataset)"></app-item-dataset>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+               
+                <!-- NOVI -->
+                <app-dataset-load *ngIf="!showMyDatasets" id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
         </div>
 
-        <div *ngIf="datasetLoaded">
-            <div *ngIf="datasetLoadComponent" class="row">
+
+        <!-- ULAZNE/IZLAZNE KOLONE - POSTOJECI DATASET -->
+        <div *ngIf="showMyDatasets && this.selectedDataset" class="mt-4">
+            <h2 class="text-center">
+                Izabrali ste dataset: <span style="color: #003459; font-weight: bold">{{this.selectedDataset.name}}</span>
+            </h2>
+            <div class="row mt-5">
+                <div class="col d-flex justify-content-center">
+                    <h3>Izaberite ulazne kolone:</h3>
+                    <div id="divInputs" class="form-check mt-2">
+                        <br>
+                        <div *ngFor="let item of this.selectedDataset.header; let i = index">
+                            <input class="form-check-input" type="checkbox" value="{{item}}"
+                                id="cb_{{item}}" name="cbsExisting" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+                            <label class="form-check-label" for="cb_{{item}}">
+                                {{item}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col d-flex justify-content-left">
+                    <h3>Izaberite izlaznu kolonu:</h3>
+                    <div id="divOutputs" class="form-check mt-2">
+                        <br>
+                        <div *ngFor="let item of this.selectedDataset.header; let i = index">
+                            <input class="form-check-input" type="radio" value="{{item}}"
+                                id="rb_{{item}}" name="rbsExisting" (change)="this.selectedOutputColumnVal = item">&nbsp;
+                            <label class="form-check-label" for="rb_{{item}}">
+                                {{item}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- ULAZNE/IZLAZNE KOLONE - NOVI DATASET-->
+        <div *ngIf="!showMyDatasets && datasetLoaded">
+            <div *ngIf="datasetLoadComponent && datasetLoadComponent.files[0]" class="row">
                 <div class="col d-flex justify-content-center">
                     <h3>Izaberite ulazne kolone:</h3>
                     <div id="divInputs" class="form-check mt-2">
                         <br>
                         <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
                             <input class="form-check-input" type="checkbox" value="{{item}}"
-                                id="cb_{{item}}" name="cbs" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+                                id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
                             <label class="form-check-label" for="cb_{{item}}">
                                 {{item}}
                             </label>
@@ -52,7 +119,7 @@
                         <br>
                         <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
                             <input class="form-check-input" type="radio" value="{{item}}"
-                                id="rb_{{item}}" name="rbs" (change)="this.selectedOutputColumnVal = item">&nbsp;
+                                id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item">&nbsp;
                             <label class="form-check-label" for="rb_{{item}}">
                                 {{item}}
                             </label>
@@ -221,7 +288,7 @@
                     <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label>
                 </div>
                 <div class="col-1">
-                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="10" [(ngModel)]="newModel.randomTestSetDistribution"
+                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution"
                         [disabled] = "!newModel.randomTestSet">
                 </div>
             </div>
@@ -248,7 +315,7 @@
                 <div class="col">
                     trening
                     <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
-                        [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
+                        [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
                     </mat-slider>
                     test
                 </div>