diff options
Diffstat (limited to 'frontend/src/app/_pages/add-model/add-model.component.html')
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.html | 87 |
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"> + <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"> + <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"> + id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> <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"> + id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item"> <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> |