From d28576bff04b0f5ea9a58037ffee7c4157aa2c61 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Wed, 27 Apr 2022 20:55:31 +0200
Subject: Datat checkbox za izbor nasumicnih podataka i podvrdi dugme.
 Promenjen dizajn.

---
 .../column-table/column-table.component.css        | 25 ++++++--
 .../column-table/column-table.component.html       | 70 ++++++++++++++--------
 .../column-table/column-table.component.ts         |  8 ++-
 .../_pages/experiment/experiment.component.html    |  2 +-
 4 files changed, 74 insertions(+), 31 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index 0db50cdb..09aa2dff 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -31,13 +31,30 @@ table.fixed th:first-child {
 }
 
 mat-slider {
-    width: 300px;
+    width: 150px;
+    
 }
 
 .belowColumn {
-    background-color: var(--ns-bg-dark-50);
+    background-color: transparent;
 }
 
 .slider {
-    background-color: var(--ns-bg-dark-100);
-}
\ No newline at end of file
+    background-color: var(--ns-bg-dark-50);
+}
+
+.bottom-button {
+    font-size: large;
+    position: relative;
+    background-color: var(--ns-primary);
+    width: 10rem;
+    height: 2.3rem;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+#footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
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 55c07b87..67846116 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -111,34 +111,56 @@
     </tbody>
 </table>
 
-<div class="container text-offwhite belowColumn">
+<div class="container-fluid text-offwhite belowColumn">
     <div class="row ">
-        <div class="col-sm slider rounded">
-            <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 class="col-sm-3 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="col-sm-3 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" >Nasumicni redosled podataka</mat-checkbox>
+            </div>
         </div>
 
-        <div class="col-sm-3 d-flex pt-3">
-            <mat-form-field appearance="fill" style="width: 270px;">
-                <mat-label>Tip problema</mat-label>
-                <mat-select value="ToDo1">
-                    <mat-option value="ToDo1">Regresioni</mat-option>
-                    <mat-option value="ToDo2">Binarni-Klasifikacioni</mat-option>
-                    <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option>
-                </mat-select>
-            </mat-form-field>
+        <div class="col-sm-2 rounded">
+            
+                <mat-form-field appearance="fill"  class="align-items-center justify-content-center pt-3 w-100">
+                    <mat-label>Tip problema</mat-label>
+                    <mat-select value="ToDo1">
+                        <mat-option value="ToDo1">Regresioni</mat-option>
+                        <mat-option value="ToDo2">Binarni-Klasifikacioni</mat-option>
+                        <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            
+        </div>
+        <div class="col-sm-2 rounded">
+            
+                <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
+                    <mat-label>Izlazna kolona</mat-label>
+                    <mat-select>
+                        <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
+                    </mat-select>
+                </mat-form-field>
+           
         </div>
-        <div class="col-sm-3 d-flex pt-3">
-            <mat-form-field appearance="fill">
-                <mat-label>Izlazna kolona</mat-label>
-                <mat-select>
-                    <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
-                </mat-select>
-            </mat-form-field>
+        <div class="col-sm-1 d-flex align-items-center justify-content-center">
+            <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom">
+                <div class="f-row" style="justify-content: space-around;">
+                    <div>Potvrdi</div>
+                    <div class="icon-double pt-1">
+                        <mat-icon>check</mat-icon>
+                        <mat-icon>check</mat-icon>
+                    </div>
+                </div>
+            </button>
         </div>
-
     </div>
+</div>
+
 
-</div>
\ No newline at end of file
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 9cb038bc..e938abe4 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
 import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment';
 import { DatasetsService } from 'src/app/_services/datasets.service';
@@ -20,7 +20,7 @@ export class ColumnTableComponent implements AfterViewInit {
   @Input() dataset?: Dataset;
   @Input() experiment?: Experiment;
   @ViewChildren("nullValMenu") nullValMenus!: ElementRef[];
-
+  @Output() okPressed: EventEmitter<string> = new EventEmitter();
   Object = Object;
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
@@ -204,5 +204,9 @@ export class ColumnTableComponent implements AfterViewInit {
       return (<HTMLInputElement>document.getElementById(columnName)).value;
     return '0';
   }
+  ok() {
+    this.okPressed.emit();
+  }
+
 
 } 
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 1606adf5..5206c5f2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -28,7 +28,7 @@
         </div>
         <div #steps id="step_2" class="step-content">
             <div class="step-content-inside">
-                <app-column-table></app-column-table>
+                <app-column-table (okPressed)="goToPage(2)"></app-column-table>
             </div>
         </div>
         <div #steps id="step_3" class="step-content">
-- 
cgit v1.2.3