aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_pages/add-model/add-model.component.html
diff options
context:
space:
mode:
authorOgnjen Cirkovic <ciraboxkg@gmail.com>2022-03-22 15:04:36 +0000
committerOgnjen Cirkovic <ciraboxkg@gmail.com>2022-03-22 15:04:36 +0000
commit012fb19a54f4d55a6e4cc73227f738f64539cf04 (patch)
tree57b3de84ad41037e8c7b1403dba4a5bad24a4752 /frontend/src/app/_pages/add-model/add-model.component.html
parentb4f0cd025a86c68a5c35a58e62c22b7cedf3d8b5 (diff)
parent31642f68564e67175301235546b74baf56ac5882 (diff)
Merge branch 'dev' into 'Privremeno-cuvanje-podataka'
# Conflicts: # backend/api/api/Controllers/ModelController.cs
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.html118
1 files changed, 94 insertions, 24 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 c6f21f1e..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,22 +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 *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}"
- id="cb_{{item}}" name="cbs" checked>
- <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}"
- id="cb_{{item}}" name="cbs">&nbsp;
+ <input class="form-check-input" type="checkbox" value="{{item}}"
+ id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
<label class="form-check-label" for="cb_{{item}}">
{{item}}
</label>
@@ -53,10 +118,8 @@
<div id="divOutputs" class="form-check mt-2">
<br>
<div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
- <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}"
- id="rb_{{item}}" name="rbs" checked>
- <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}"
- id="rb_{{item}}" name="rbs">&nbsp;
+ <input class="form-check-input" type="radio" value="{{item}}"
+ id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item">&nbsp;
<label class="form-check-label" for="rb_{{item}}">
{{item}}
</label>
@@ -193,15 +256,10 @@
<div class="col-1">
</div>
<div class="col-5">
- <label for="type" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
- <input class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+ <label for="splitYesNo" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
+ <input id="splitYesNo" class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
(change)="newModel.randomTestSet = !newModel.randomTestSet">
- </label> &nbsp;&nbsp;&nbsp;&nbsp;
- test
- <mat-slider min="0.1" max="0.9" step="0.1" value="0.2" name="randomTestSetDistribution" thumbLabel
- [disabled]="!newModel.randomTestSet" [(ngModel)]="newModel.randomTestSetDistribution">
- </mat-slider>
- trening
+ </label>
</div>
<div class="col">
</div>
@@ -224,9 +282,14 @@
</option>
</select>
</div>
- <div class="col">
+ <div class="col-1">
</div>
- <div class="col">
+ <div class="col-2">
+ <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="90" [(ngModel)]="tempTestSetDistribution"
+ [disabled] = "!newModel.randomTestSet">
</div>
</div>
@@ -247,7 +310,14 @@
</option>
</select>
</div>
+ <div class="col-1">
+ </div>
<div class="col">
+ trening
+ <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
+ [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
+ </mat-slider>
+ test
</div>
<div class="col">
</div>