From fdf0b814fcc3ffe890384720f4e3d8d38f502c37 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Mon, 2 May 2022 20:28:08 +0200
Subject: Pomereni atributi iz experimenta u model na frontu i backu.
 Premesteni elementi za biranje test skupa iz column-table u form-model.

---
 .../column-table/column-table.component.html          | 14 --------------
 .../_elements/column-table/column-table.component.ts  |  7 ++-----
 .../app/_elements/form-model/form-model.component.css | 10 +++++++++-
 .../_elements/form-model/form-model.component.html    | 19 ++++++++++++++++++-
 .../app/_elements/form-model/form-model.component.ts  |  7 +++++--
 5 files changed, 34 insertions(+), 23 deletions(-)

(limited to 'frontend/src/app/_elements')

diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index 42c43138..557b7be3 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -209,20 +209,6 @@
 
 <div class="container-fluid text-offwhite belowColumn mt-3">
     <div class="ns-row">
-        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary)">
-
-            <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
-            <div class="text-center pt-0 mt-0">Trening
-                <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
-                Test</div>
-
-        </div>
-        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
-            <div class="text-center text-offwhite justify-content-center align-items-center">
-                <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
-            </div>
-        </div>
-
         <div class="break-2"></div>
 
         <div class="ns-col rounded">
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 4499196c..3f958aee 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -5,7 +5,6 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component';
-import { MatSliderChange } from '@angular/material/slider';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { CsvParseService } from 'src/app/_services/csv-parse.service';
 
@@ -28,7 +27,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
   columnsChecked: boolean[] = []; //niz svih kolona
 
-  testSetDistribution: number = 70;
+ 
   constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) {
     //ovo mi nece trebati jer primam dataset iz druge komponente
   }
@@ -145,9 +144,7 @@ export class ColumnTableComponent implements AfterViewInit {
         this.resetMissingValuesTreatment(selectedMissingValuesOption);
     });
   }
-  updateTestSet(event: MatSliderChange) {
-    this.testSetDistribution = event.value!;
-  }
+ 
 
 
   MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) {
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css
index 8c279523..9b55a814 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -84,4 +84,12 @@ hr {
 
 .m-2 {
     max-height: 20 rem;
-}
\ No newline at end of file
+}
+
+mat-slider {
+    width: 40%;
+}
+
+.slider {
+    background-color: var(--ns-bg-dark-100);
+}
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 76601465..e51c2cac 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -85,7 +85,23 @@
 
     </div>
 </div>
+<div>
+    <div class="ns-row" style="margin-top: 10px;">
+        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
+
+            <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
+            <div class="text-center pt-0 mt-0">Trening
+                <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
+                Test</div>
+        
+        </div>
+        <div class="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;">
+                    <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
+        </div>
+        
 
+    </div>
+</div>
 
 <!--kraj unosa parametara-->
 <hr>
@@ -199,4 +215,5 @@
             </mat-select>
         </mat-form-field>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 2c78cd56..d5c497aa 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -4,7 +4,7 @@ import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
 import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model';
 import { GraphComponent } from '../graph/graph.component';
-
+import { MatSliderChange } from '@angular/material/slider';
 
 @Component({
   selector: 'app-form-model',
@@ -15,7 +15,7 @@ export class FormModelComponent implements AfterViewInit {
   @ViewChild(GraphComponent) graph!: GraphComponent;
   @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
-
+  testSetDistribution: number = 70;
   constructor() { }
 
   ngAfterViewInit(): void {
@@ -132,6 +132,9 @@ export class FormModelComponent implements AfterViewInit {
       this.updateGraph();
     }
   }
+  updateTestSet(event: MatSliderChange) {
+    this.testSetDistribution = event.value!;
+  }
 
 
 
-- 
cgit v1.2.3