From 0b38d83378e3ea03893eb60729e8bebbf9942949 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Sun, 24 Apr 2022 18:17:18 +0200
Subject: Pie Chart dodat (Test Page).

---
 .../_charts/box-plot/box-plot.component.ts         |  3 ++-
 .../_charts/pie-chart/pie-chart.component.html     |  2 +-
 .../_charts/pie-chart/pie-chart.component.ts       | 27 +++++++++++++++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)

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

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index 0cef8f90..56f87057 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
 
 @Component({
   selector: 'app-box-plot',
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index 43a2d766..413aa6f3 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1 +1 @@
-<p>pie-chart works!</p>
+<canvas #piechart width="800" height="450"></canvas>
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index dde5cbab..e7d79615 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -1,15 +1,36 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
 
 @Component({
   selector: 'app-pie-chart',
   templateUrl: './pie-chart.component.html',
   styleUrls: ['./pie-chart.component.css']
 })
-export class PieChartComponent implements OnInit {
+export class PieChartComponent implements AfterViewInit {
 
+  @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+  const myChart = new Chart(this.chartRef.nativeElement, {
+    type: 'pie',
+    data: {
+      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+      datasets: [{
+        label: "Population (millions)",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+        data: [2478,5267,734,784,433]
+      }]
+    },
+    /*options: {
+      title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }
+    }*/
+});
+
   }
 
+
 }
-- 
cgit v1.2.3


From dbc6d56f495b2238ed1e8b6bc036b23a6067b051 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Sun, 24 Apr 2022 18:43:14 +0200
Subject: Doughnut Chart (Varijanta Pie Chart).

---
 .../_charts/box-plot/box-plot.component.html       |  2 +-
 .../_charts/box-plot/box-plot.component.ts         |  3 +-
 .../doughnut-chart/doughnut-chart.component.css    |  0
 .../doughnut-chart/doughnut-chart.component.html   |  1 +
 .../doughnut-chart.component.spec.ts               | 25 ++++++++++++++++
 .../doughnut-chart/doughnut-chart.component.ts     | 34 ++++++++++++++++++++++
 frontend/src/app/_pages/test/test.component.html   |  4 ++-
 frontend/src/app/app.module.ts                     |  4 ++-
 8 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts

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

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
index 20cf6487..2006eada 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -1 +1 @@
-<p>box-plot works!</p>
+<p>Box-plot</p>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index 56f87057..0cef8f90 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -1,5 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {Chart} from 'node_modules/chart.js';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-box-plot',
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
new file mode 100644
index 00000000..4befc7dc
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
@@ -0,0 +1 @@
+<canvas #doughnut width="800" height="450"></canvas>
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
new file mode 100644
index 00000000..67309670
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DoughnutChartComponent } from './doughnut-chart.component';
+
+describe('DoughnutChartComponent', () => {
+  let component: DoughnutChartComponent;
+  let fixture: ComponentFixture<DoughnutChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DoughnutChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DoughnutChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
new file mode 100644
index 00000000..4c7508fe
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
@@ -0,0 +1,34 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-doughnut-chart',
+  templateUrl: './doughnut-chart.component.html',
+  styleUrls: ['./doughnut-chart.component.css']
+})
+export class DoughnutChartComponent implements AfterViewInit {
+
+  @ViewChild('doughnut') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'doughnut',
+      data: {
+        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+        datasets: [{
+          label: "Population (millions)",
+          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+          data: [2478,5267,734,784,433]
+        }]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Predicted world population (millions) in 2050'
+        }
+      }*/
+    });
+  }
+
+}
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
index 8085f77f..625739f8 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1 +1,3 @@
-<app-pie-chart></app-pie-chart>
\ No newline at end of file
+<app-pie-chart></app-pie-chart>
+<app-doughnut-chart></app-doughnut-chart>
+<app-barchart></app-barchart>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 0271d64d..5502df26 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -44,6 +44,7 @@ import { FormModelComponent } from './_elements/form-model/form-model.component'
 import { ColumnTableComponent } from './_elements/column-table/column-table.component';
 import { FolderComponent } from './_elements/folder/folder.component';
 import { TestComponent } from './_pages/test/test.component';
+import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -76,7 +77,8 @@ export function initializeApp(appConfig: Configuration) {
     PieChartComponent,
     BoxPlotComponent,
     FolderComponent,
-    TestComponent
+    TestComponent,
+    DoughnutChartComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From 8497bc988f2a5cbca10ee6870708bd4c06c24dd2 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sun, 24 Apr 2022 21:47:00 +0200
Subject: Promenio temu material-a tako da se poklapa sa nasom temom. Dodao
 responzivnost za eksperiment stranu.

---
 frontend/angular.json                              | 216 ++++++++---------
 .../src/app/_elements/folder/folder.component.css  |   4 +-
 .../src/app/_elements/folder/folder.component.html |   4 +-
 .../src/app/_elements/folder/folder.component.ts   |   1 -
 .../src/app/_elements/navbar/navbar.component.html |   2 +-
 .../app/_pages/experiment/experiment.component.css |  47 ++--
 .../_pages/experiment/experiment.component.html    |  83 ++++---
 .../app/_pages/experiment/experiment.component.ts  |  16 +-
 frontend/src/app/app.component.html                |   6 +-
 frontend/src/app/app.component.ts                  |  18 +-
 frontend/src/custom-theme.scss                     | 267 +++++++++++++++++++--
 frontend/src/styles/layout.css                     |   5 +
 frontend/src/styles/theme.css                      |  18 ++
 13 files changed, 452 insertions(+), 235 deletions(-)

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

diff --git a/frontend/angular.json b/frontend/angular.json
index d1983d31..13c27f40 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -1,117 +1,113 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "frontend": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/frontend",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/custom-theme.scss",
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "src/styles.css",
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
-            ],
-            "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "4mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "10kb",
-                  "maximumError": "15kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "frontend": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:application": {
+                    "strict": true
                 }
-              ],
-              "outputHashing": "all"
             },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "frontend:build:production"
-            },
-            "development": {
-              "browserTarget": "frontend:build:development"
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/frontend",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "src/styles.css",
+                            "src/custom-theme.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [{
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "4mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "10kb",
+                                    "maximumError": "15kb"
+                                }
+                            ],
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "frontend:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "frontend:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "frontend:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    }
+                }
             }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "frontend:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
         }
-      }
-    }
-  },
-  "defaultProject": "frontend",
-  "cli": {
-    "warnings": {
-      "versionMismatch": false
+    },
+    "defaultProject": "frontend",
+    "cli": {
+        "warnings": {
+            "versionMismatch": false
+        }
     }
-  }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index cfb0d087..a1c1124a 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -55,7 +55,7 @@
 }
 
 .tab-link:active {
-    color: var(--ns-accent) !important;
+    text-decoration: underline !important;
 }
 
 .selected-tab {
@@ -107,7 +107,7 @@
 .folder-bottom-button {
     font-size: large;
     position: relative;
-    background-color: var(--ns-bg-dark-100);
+    background-color: var(--ns-bg-dark-50);
     width: 10rem;
     height: 2.5rem;
     display: flex;
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 11fccc56..895ac84e 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -51,13 +51,13 @@
         {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
     </div>
     <div id="footer">
-        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="newFileSelected">
+        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected">
             <a class="tab-link stretched-link">Sačuvaj</a>
             <div>
                 <mat-icon>check</mat-icon>
             </div>
         </div>
-        <div class="folder-bottom-button text-offwhite rounded-bottom" *ngIf="!newFileSelected">
+        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected">
             <a class="tab-link stretched-link">Ok</a>
             <div class="icon-double">
                 <mat-icon>check</mat-icon>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 34c8db82..485a8dd7 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -97,7 +97,6 @@ export class FolderComponent implements OnInit {
   newFileZIndex() {
     return (this.files.length + 1);
   }
-
 }
 
 export enum FolderType {
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 5390136d..09d83bd1 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<header class="sticky-top p-3 bg-dark text-white">
+<header class="bg-dark text-white">
     <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
             <a routerLink="" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 34e412ef..5cb8c325 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -1,37 +1,32 @@
-ul{
+ul {
     list-style: none;
 }
-.navmenu{
-    position: absolute;
-    background-color: var(--ns-bg-dark-50);
-    height: 90%;
-    width: 250px;
+
+.holder {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
 }
-.navmenuwrapper{
-    position: relative;
-    top:40%;
-    transform: translateY(-50%);
+
+.sidenav {
+    width: 250px;
+    background-color: var(--ns-bg-dark-50);
 }
 
+@media only screen and (max-width: 400px) {
+    .sidenav {
+        width: 100%;
+        background-color: var(--ns-bg-dark-100);
+    }
+    .holder {
+        flex-direction: column;
+    }
+}
 
-mat-stepper{
+mat-stepper {
     background-color: transparent;
 }
 
-::ng-deep .mat-step-header .mat-step-icon .mat-step-content{
-    background-color: white;
-    color:var(--ns-primary); 
-  }
-::ng-deep .mat-step-header .mat-step-icon{
-    color:white;
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done{
-    background: var(--ns-primary);
-    color:var(--ns-primary)
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done .label{
-    color:var(--ns-primary)
-}
-.label{
+.label {
     color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2f1a86fd..2c69ae9c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,46 +1,51 @@
+<!--<div #wrapper class="text-offwhite d-flex flex-row">
+    <div class="navmenu d-flex flex-column flex-shrink-0 p-3">
+        
+    </div>
+
+    <div class="position-relative">
+        <div *ngIf="event==0" class="overflow-y-auto">
+            <app-folder></app-folder>
+        </div>
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>-->
 
-<div class="wrapper">   
-    
-    <nav class="navmenu">
-        <div class="navmenuwrapper text-offwhite">
-          <mat-stepper orientation="vertical" (selectionChange)="ChangePage($event)">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+    <div class="d-flex flex-colum align-items-center sidenav">
+        <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
-              <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
-              <ng-template matStepContent>
-                <p>Izaberite vas izvor podataka</p>
-              </ng-template>
+                <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Izaberite vas izvor podataka</p>
+                </ng-template>
             </mat-step>
             <mat-step>
-              <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
-              <ng-template matStepContent>
-                <p>Pripremite podatke i izaberite izlazne kolone</p>
-              </ng-template>
+                <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                </ng-template>
             </mat-step>
-            <mat-step >
-              <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
-              <p>Odaberite parametre i trenirajte model</p>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
+                <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
-          </mat-stepper>
+        </mat-stepper>
+    </div>
+    <div class="d-flex flex-colum w-100 position-relative">
+        <div *ngIf="event==0">
+            <app-folder></app-folder>
         </div>
-
-          
-
-    </nav>
-    
-    
-
-    
-
-</div>
-
-<div *ngIf="event==0"><app-folder></app-folder></div>
-<div *ngIf="event==1">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
-</div>
-<div *ngIf="event==2">
-  <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
-</div>
-
-
-
-
+        <div *ngIf="event==1">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div *ngIf="event==2">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index c8b301ca..2d623709 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,24 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent implements OnInit {
-
-event:number=0;
+export class ExperimentComponent {
 
+  event: number = 0;
 
   constructor() { }
 
-  ngOnInit(): void {
-  }
-
-  ChangePage(event:StepperSelectionEvent){
-    this.event=event.selectedIndex;
+  changePage(event: StepperSelectionEvent) {
+    this.event = event.selectedIndex;
     console.log(this.event);
-
   }
 
+
 }
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 8c3f4e9e..d15793e7 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -6,10 +6,8 @@
 <app-reactive-background [speed]="0.001" [scrollSpeed]="1" [minDistance]="0.14" [maxSize]="5" [cursorDistance]="0.22" lineColor="#00a8e8" pointColor="rgba(0, 188, 252, 1)" cursorLineColor="#00a8e8" [numPoints]="100">
 </app-reactive-background>
 <app-navbar></app-navbar>
-<a class="bg-controls" routerLink="playground">
+<a class="bg-controls" style="z-index: 1000;" routerLink="playground">
     <mat-icon color="accent">settings_suggest</mat-icon>
 </a>
-<div class="h-100">
-    <router-outlet></router-outlet>
-</div>
+<router-outlet></router-outlet>
 <app-notifications></app-notifications>
\ No newline at end of file
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 4a0d85c8..f9bc2726 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { filter, map } from 'rxjs';
@@ -11,9 +11,11 @@ import Shared from './Shared';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) {
 
+  }
+  ngAfterViewInit(): void {
   }
 
   ngOnInit() {
@@ -42,17 +44,5 @@ export class AppComponent implements OnInit {
     }
     this.signalRService.startConnection();
     //this.startHttpRequest();
-
-
-
-
-  }
-  private startHttpRequest = () => {
-    this.http.get('http://localhost:5283/chatHub')
-      .subscribe(res => {
-        console.log(res);
-      })
   }
-
-
 }
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index a6538c37..8f716240 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -1,35 +1,250 @@
+/**
+* Generated theme by Material Theme Generator
+* https://materialtheme.arcsine.dev
+* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzAwNjNhYiIsIj9lcjwjYjNkMGU2IiwiO2VyPCMwMDQ3OTF$LCIlPmBePCMwMGE4ZTgiLCI~ZXI8I2IzZTVmOCIsIjtlcjwjMDA4ZGRlfiwid2Fybj5gXjwjZjliN2I3IiwiP2VyPCNmZGU5ZTkiLCI7ZXI8I2Y2OWY5Zn4sIj9UZXh0PCMwMDQxNjUiLCI~PTwjZGZkN2Q3IiwiO1RleHQ8I2RmZDdkNyIsIjs9PCMwMDQxNjV$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
+*/
 
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
-
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
+// Fonts
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
+$fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
+display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
+display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
+display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
+headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
+title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
+subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
+subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
+body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
+body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
+button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
+caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
+input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px));
+// Foreground Elements
+// Light Theme Text
+$dark-text: #004165;
+$dark-primary-text: rgba($dark-text,
+0.87);
+$dark-accent-text: rgba($dark-primary-text,
+0.54);
+$dark-disabled-text: rgba($dark-primary-text,
+0.38);
+$dark-dividers: rgba($dark-primary-text,
+0.12);
+$dark-focused: rgba($dark-primary-text,
+0.12);
+$mat-light-theme-foreground: ( base : black,
+divider : $dark-dividers,
+dividers : $dark-dividers,
+disabled : $dark-disabled-text,
+disabled-button : rgba($dark-text, 0.26),
+disabled-text : $dark-disabled-text,
+elevation : black,
+secondary-text : $dark-accent-text,
+hint-text : $dark-disabled-text,
+accent-text : $dark-accent-text,
+icon : $dark-accent-text,
+icons : $dark-accent-text,
+text : $dark-primary-text,
+slider-min : $dark-primary-text,
+slider-off : rgba($dark-text, 0.26),
+slider-off-active: $dark-disabled-text,
+);
+// Dark Theme text
+$light-text: #dfd7d7;
+$light-primary-text: $light-text;
+$light-accent-text: rgba($light-primary-text,
+0.7);
+$light-disabled-text: rgba($light-primary-text,
+0.5);
+$light-dividers: rgba($light-primary-text,
+0.12);
+$light-focused: rgba($light-primary-text,
+0.12);
+$mat-dark-theme-foreground: ( base : $light-text,
+divider : $light-dividers,
+dividers : $light-dividers,
+disabled : $light-disabled-text,
+disabled-button : rgba($light-text, 0.3),
+disabled-text : $light-disabled-text,
+elevation : black,
+hint-text : $light-disabled-text,
+secondary-text : $light-accent-text,
+accent-text : $light-accent-text,
+icon : $light-text,
+icons : $light-text,
+text : $light-text,
+slider-min : $light-text,
+slider-off : rgba($light-text, 0.3),
+slider-off-active: rgba($light-text, 0.3),
+);
+// Background config
+// Light bg
+$light-background : #dfd7d7;
+$light-bg-darker-5 : darken($light-background,
+5%);
+$light-bg-darker-10 : darken($light-background,
+10%);
+$light-bg-darker-20 : darken($light-background,
+20%);
+$light-bg-darker-30 : darken($light-background,
+30%);
+$light-bg-lighter-5 : lighten($light-background,
+5%);
+$dark-bg-tooltip : lighten(#004165,
+20%);
+$dark-bg-alpha-4 : rgba(#004165,
+0.04);
+$dark-bg-alpha-12 : rgba(#004165,
+0.12);
+$mat-light-theme-background: ( background : $light-background,
+status-bar : $light-bg-darker-20,
+app-bar : $light-bg-darker-5,
+hover : $dark-bg-alpha-4,
+card : $light-bg-lighter-5,
+dialog : $light-bg-lighter-5,
+tooltip : $dark-bg-tooltip,
+disabled-button : $dark-bg-alpha-12,
+raised-button : $light-bg-lighter-5,
+focused-button : $dark-focused,
+selected-button : $light-bg-darker-20,
+selected-disabled-button: $light-bg-darker-30,
+disabled-button-toggle : $light-bg-darker-10,
+unselected-chip : $light-bg-darker-10,
+disabled-list-option : $light-bg-darker-10,
+);
+// Dark bg
+$dark-background : #004165;
+$dark-bg-lighter-5 : lighten($dark-background,
+5%);
+$dark-bg-lighter-10 : lighten($dark-background,
+10%);
+$dark-bg-lighter-20 : lighten($dark-background,
+20%);
+$dark-bg-lighter-30 : lighten($dark-background,
+30%);
+$light-bg-alpha-4 : rgba(#dfd7d7,
+0.04);
+$light-bg-alpha-12 : rgba(#dfd7d7,
+0.12);
+// Background palette for dark themes.
+$mat-dark-theme-background: ( background : $dark-background,
+status-bar : $dark-bg-lighter-20,
+app-bar : $dark-bg-lighter-5,
+hover : $light-bg-alpha-4,
+card : $dark-bg-lighter-5,
+dialog : $dark-bg-lighter-5,
+tooltip : $dark-bg-lighter-20,
+disabled-button : $light-bg-alpha-12,
+raised-button : $dark-bg-lighter-5,
+focused-button : $light-focused,
+selected-button : $dark-bg-lighter-20,
+selected-disabled-button: $dark-bg-lighter-30,
+disabled-button-toggle : $dark-bg-lighter-10,
+unselected-chip : $dark-bg-lighter-20,
+disabled-list-option : $dark-bg-lighter-10,
+);
+// Compute font config
+@include mat.core($fontConfig);
+// Theme Config
+body {
+    --primary-color: #0063ab;
+    --primary-lighter-color: #b3d0e6;
+    --primary-darker-color: #004791;
+    --text-primary-color: #{$light-primary-text};
+    --text-primary-lighter-color: #{$dark-primary-text};
+    --text-primary-darker-color: #{$light-primary-text};
+}
+
+$mat-primary: ( main: #0063ab,
+lighter: #b3d0e6,
+darker: #004791,
+200: #0063ab, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-primary: mat.define-palette($mat-primary,
+main,
+lighter,
+darker);
+body {
+    --accent-color: #00a8e8;
+    --accent-lighter-color: #b3e5f8;
+    --accent-darker-color: #008dde;
+    --text-accent-color: #{$light-primary-text};
+    --text-accent-lighter-color: #{$dark-primary-text};
+    --text-accent-darker-color: #{$light-primary-text};
+}
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$mat-accent: ( main: #00a8e8,
+lighter: #b3e5f8,
+darker: #008dde,
+200: #00a8e8, // For slide toggle,
+contrast: ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ));
+$theme-accent: mat.define-palette($mat-accent,
+main,
+lighter,
+darker);
+body {
+    --warn-color: #f9b7b7;
+    --warn-lighter-color: #fde9e9;
+    --warn-darker-color: #f69f9f;
+    --text-warn-color: #{$dark-primary-text};
+    --text-warn-lighter-color: #{$dark-primary-text};
+    --text-warn-darker-color: #{$dark-primary-text};
+}
 
-// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$mat-warn: ( main: #f9b7b7,
+lighter: #fde9e9,
+darker: #f69f9f,
+200: #f9b7b7, // For slide toggle,
+contrast: ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, ));
+$theme-warn: mat.define-palette($mat-warn,
+main,
+lighter,
+darker);
+;
+$theme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: true,
+foreground: $mat-dark-theme-foreground,
+background: $mat-dark-theme-background,
+);
+$altTheme: ( primary: $theme-primary,
+accent: $theme-accent,
+warn: $theme-warn,
+is-dark: false,
+foreground: $mat-light-theme-foreground,
+background: $mat-light-theme-background,
+);
+// Theme Init
+@include mat.all-component-themes($theme);
+.theme-alternate {
+    @include mat.all-component-themes($altTheme);
+}
 
-// Create the theme object. A theme consists of configurations for individual
-// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
-  color: (
-    primary: $frontend-primary,
-    accent: $frontend-accent,
-    warn: $frontend-warn,
-  )
-));
+// Specific component overrides, pieces that are not in line with the general theming
+// Handle buttons appropriately, with respect to line-height
+.mat-raised-button,
+.mat-stroked-button,
+.mat-flat-button {
+    padding: 0 1.15em;
+    margin: 0 .65em;
+    min-width: 3em;
+    line-height: 36.4px
+}
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($frontend-theme);
+.mat-standard-chip {
+    padding: .5em .85em;
+    min-height: 2.5em;
+}
 
+.material-icons {
+    font-size: 24px;
+    font-family: 'Material Icons', 'Material Icons';
+    .mat-badge-content {
+        font-family: 'Roboto';
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index e24da375..33f4cf2b 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -1,5 +1,10 @@
 /*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/
 
+html,
+body {
+    height: 100%;
+}
+
 .align-items-view>*:first-child {
     transform: perspective(100em) rotateY(25deg) translateZ(1em);
 }
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index d0ccc935..f2e84e8b 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -35,4 +35,22 @@ a {
 
 .text-offwhite {
     color: var(--offwhite) !important;
+}
+
+
+/* Ripple effect */
+
+.bubble {
+    background-position: center;
+    transition: background 0.8s;
+}
+
+.bubble:hover {
+    background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
+}
+
+.bubble:active {
+    background-color: #6eb9f7;
+    background-size: 100%;
+    transition: background 0s;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From aee2cd43578a255f5a0e346ac8955f663a673cca Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 00:56:45 +0200
Subject: Ažurirana komponenta form-model, dodata komponenta hidden-layer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json                         |  12 +--
 .../_elements/form-model/form-model.component.css  |  11 ++-
 .../_elements/form-model/form-model.component.html | 107 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  12 +--
 .../hidden-layer/hidden-layer.component.css        |   5 +
 .../hidden-layer/hidden-layer.component.html       |  40 ++++++++
 .../hidden-layer/hidden-layer.component.spec.ts    |  25 +++++
 .../hidden-layer/hidden-layer.component.ts         |  16 +++
 frontend/src/app/app.module.ts                     |   5 +-
 9 files changed, 166 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
 create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
 create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
 create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts

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

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 22756c36..14c957cb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3420,9 +3420,9 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.14"
@@ -14355,9 +14355,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
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 9340fed5..c650bdeb 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -1,3 +1,12 @@
-*{
+mat-label{
+    color: var(--offwhite) !important;
+}
+select{
+    color: var(--offwhite) !important;
+}
+mat-form-field{
+    color: var(--offwhite) !important;
+}
+hr{
     color: var(--offwhite) !important;
 }
\ No newline at end of file
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 5db2cb49..69635a4a 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -2,29 +2,27 @@
     <div class="row">
       <div class="col-sm">
         <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Naziv</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                  <option label="--select something --"></option>
-                  <option value="saab">Saab</option>
-                  <option value="mercedes">Mercedes</option>
-                  <option value="audi">Audi</option>
-                </select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
+          <mat-form-field class="example-full-width" appearance="fill">
+            <mat-label>Naziv</mat-label>
+            <input type="text" matInput [formControl]="nameFormControl">
+            <mat-error *ngIf="nameFormControl.hasError('name') && !nameFormControl.hasError('required')">
+              Unesite naziv
+            </mat-error>
+            <mat-error *ngIf="nameFormControl.hasError('required')">
+              Naziv je <strong>obavezan</strong>
+            </mat-error>
+          </mat-form-field>
         </div>
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                    <option
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                    <mat-option
                     *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                     [value]="option">
                     {{ optionName }}
-                </option>
-                </select>
+                </mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -35,13 +33,13 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                    <option
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                    <mat-option
                     *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                     [value]="option">
                     {{ optionName }}
-                </option>
-                </select>
+                </mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -50,12 +48,12 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Learning rate</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                  <option label="--select something --"></option>
-                  <option value="saab">Saab</option>
-                  <option value="mercedes">Mercedes</option>
-                  <option value="audi">Audi</option>
-                </select>
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                  <mat-option label="--select something --"></mat-option>
+                  <mat-option value="saab">Saab</mat-option>
+                  <mat-option value="mercedes">Mercedes</mat-option>
+                  <mat-option value="audi">Audi</mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -66,12 +64,12 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Broj epoha</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                  <option label="--select something --"></option>
-                  <option value="saab">Saab</option>
-                  <option value="mercedes">Mercedes</option>
-                  <option value="audi">Audi</option>
-                </select>
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                  <mat-option label="--select something --"></mat-option>
+                  <mat-option value="saab">Saab</mat-option>
+                  <mat-option value="mercedes">Mercedes</mat-option>
+                  <mat-option value="audi">Audi</mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -80,12 +78,12 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Broj uzoraka po iteraciji</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                  <option label="--select something --"></option>
-                  <option value="saab">Saab</option>
-                  <option value="mercedes">Mercedes</option>
-                  <option value="audi">Audi</option>
-                </select>
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                  <mat-option label="--select something --"></mat-option>
+                  <mat-option value="saab">Saab</mat-option>
+                  <mat-option value="mercedes">Mercedes</mat-option>
+                  <mat-option value="audi">Audi</mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -96,13 +94,13 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                    <option
+                <mat-select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <mat-option
                     *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                     [value]="option">
                     {{ optionName }}
-                </option>
-                </select>
+                </mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
@@ -111,13 +109,13 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Funkcija troška</mat-label>
-                <select matNativeControl required [formControl]="selectFormControl">
-                    <option
+                <mat-select matNativeControl required [formControl]="selectFormControl">
+                    <mat-option
                             *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
                             [value]="option">
                             {{ optionName }}
-                        </option>
-                </select>
+                        </mat-option>
+                </mat-select>
                 <mat-error *ngIf="selectFormControl.hasError('required')">
                   Obavezno polje
                 </mat-error>
@@ -125,15 +123,24 @@
         </div>
       </div>
     </div><!--kraj unosa parametara-->
-    
+
     <div class="col-1">
-        <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
-    </div>
+      <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
+  </div>
+  <hr>
     <div class="m-5">
                 <app-graph [model]="newModel" [inputCols]="4"></app-graph>
+                Broj skrivenih slojeva: 
                 <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
+                    <input type="number" min="1" class="form" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
                 </div>
             </div>
 
+  </div>
+  <hr>
+  <div class="row">
+
+      <div class="col">
+        <app-hidden-layer></app-hidden-layer>
+      </div>
   </div>
\ No newline at end of file
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 6f795161..c5ab9811 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -4,6 +4,8 @@ import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
 import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
 import { GraphComponent } from '../graph/graph.component';
+import {FormGroupDirective, NgForm} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
 @Component({
   selector: 'app-form-model',
   templateUrl: './form-model.component.html',
@@ -18,15 +20,9 @@ export class FormModelComponent implements OnInit {
   
   ngOnInit(): void {
   }
-  animalControl = new FormControl('', Validators.required);
   selectFormControl = new FormControl('', Validators.required);
-  /*animals: Animal[] = [
-    {name: 'Dog', sound: 'Woof!'},
-    {name: 'Cat', sound: 'Meow!'},
-    {name: 'Cow', sound: 'Moo!'},
-    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
-  ];
-  */
+  nameFormControl = new FormControl('', [Validators.required, Validators.email]);
+
   newModel: Model = new Model();
   myModels?: Model[];
   selectedModel?: Model;
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
new file mode 100644
index 00000000..c8db6056
--- /dev/null
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
@@ -0,0 +1,5 @@
+.container{
+    max-width: 15rem;
+    border: 1px solid white;
+    border-radius: 5px;
+}
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
new file mode 100644
index 00000000..65e0f626
--- /dev/null
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
@@ -0,0 +1,40 @@
+<div class="container">
+    <mat-form-field appearance="fill">
+        <mat-label>Aktivaciona funkcija</mat-label>
+        <mat-select matNativeControl required [formControl]="selectFormControl">
+          <mat-option label="--select something --"></mat-option>
+          <mat-option value="saab">Relu</mat-option>
+          <mat-option value="mercedes">Sigmoid</mat-option>
+          <mat-option value="audi">Softmax</mat-option>
+        </mat-select>
+        <mat-error *ngIf="selectFormControl.hasError('required')">
+            Obavezno polje
+        </mat-error>
+      </mat-form-field>
+<br>
+      Broj čvorova: <input type="number" min="1" class="form-control" name="hiddenLayersNeurons">
+      <br>
+      <mat-form-field appearance="fill">
+        <mat-label>Regularizacija</mat-label>
+        <mat-select matNativeControl required [formControl]="selectFormControl">
+          <mat-option label="--select something --"></mat-option>
+          <mat-option value="l1">L1</mat-option>
+          <mat-option value="l2">L2</mat-option>
+        </mat-select>
+        <mat-error *ngIf="selectFormControl.hasError('required')">
+            Obavezno polje
+        </mat-error>
+      </mat-form-field>
+      <br>
+      <mat-form-field appearance="fill">
+        <mat-label>Stopa regularizacije</mat-label>
+        <mat-select matNativeControl required [formControl]="selectFormControl">
+          <mat-option value="saab">0.001</mat-option>
+          <mat-option value="mercedes">0.01</mat-option>
+          <mat-option value="audi">0.1</mat-option>
+        </mat-select>
+        <mat-error *ngIf="selectFormControl.hasError('required')">
+            Obavezno polje
+        </mat-error>
+      </mat-form-field>
+</div>
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
new file mode 100644
index 00000000..103e4539
--- /dev/null
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HiddenLayerComponent } from './hidden-layer.component';
+
+describe('HiddenLayerComponent', () => {
+  let component: HiddenLayerComponent;
+  let fixture: ComponentFixture<HiddenLayerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HiddenLayerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HiddenLayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
new file mode 100644
index 00000000..fa9a1114
--- /dev/null
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-hidden-layer',
+  templateUrl: './hidden-layer.component.html',
+  styleUrls: ['./hidden-layer.component.css']
+})
+export class HiddenLayerComponent implements OnInit {
+  
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  selectFormControl = new FormControl('', Validators.required);
+}
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 5502df26..a7850552 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp
 import { FolderComponent } from './_elements/folder/folder.component';
 import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
-
+import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component';
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -78,7 +78,8 @@ export function initializeApp(appConfig: Configuration) {
     BoxPlotComponent,
     FolderComponent,
     TestComponent,
-    DoughnutChartComponent
+    DoughnutChartComponent,
+    HiddenLayerComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From 044ef1a76cf2f53b0dd86c4a77fabd01a81e93ad Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 03:40:36 +0200
Subject: Ažurirane komponente form-model i hidden-layer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/_data/Model.ts                    |   6 +-
 .../_elements/form-model/form-model.component.css  |  16 +++
 .../_elements/form-model/form-model.component.html | 134 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  32 ++++-
 .../hidden-layer/hidden-layer.component.css        |  14 ++-
 .../hidden-layer/hidden-layer.component.html       |  21 ++--
 .../hidden-layer/hidden-layer.component.ts         |   8 +-
 frontend/src/app/_pages/home/home.component.html   |   3 +
 8 files changed, 155 insertions(+), 79 deletions(-)

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

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index b273f56a..6cef09e5 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -21,7 +21,9 @@ export default class Model {
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public uploaderId: string = '',
         public metrics: string[] = [], // TODO add to add-model form
-        public epochs: number = 5 // TODO add to add-model form
+        public epochs: number = 5, // TODO add to add-model form
+        public inputColNum:number=5,
+        public learningRate:number=0.01
     ) { }
 }
 
@@ -156,4 +158,4 @@ export enum MetricsMultiClassification {
     Precision = 'precision_score',
     Recall = 'recall_score',
     F1 = 'f1_score',
-}
+}
\ No newline at end of file
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 c650bdeb..20546e17 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -1,3 +1,6 @@
+#container{
+    color:var(--offwhite);
+}
 mat-label{
     color: var(--offwhite) !important;
 }
@@ -6,7 +9,20 @@ select{
 }
 mat-form-field{
     color: var(--offwhite) !important;
+    padding: 0;
 }
 hr{
     color: var(--offwhite) !important;
+    margin-bottom: 30px;;
+}
+.row{
+    margin: 0;
+    padding: 0;
+}
+mat-icon{
+    color: var(--ns-primary);
+}
+#rowhn{
+    margin-bottom:-50px;
+    padding: 0;
 }
\ No newline at end of file
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 69635a4a..40631570 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div id="container">
     <div class="row">
       <div class="col-sm">
         <div class="row">
@@ -16,14 +16,14 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectTypeFormControl">
                     <mat-option
                     *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectTypeFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
@@ -33,114 +33,122 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectOptFormControl">
                     <mat-option
                     *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectOptFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
         <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Learning rate</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
-                  <mat-option label="--select something --"></mat-option>
-                  <mat-option value="saab">Saab</mat-option>
-                  <mat-option value="mercedes">Mercedes</mat-option>
-                  <mat-option value="audi">Audi</mat-option>
+                  <mat-form-field appearance="fill">
+                <mat-label>Funkcija troška</mat-label>
+                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                    <mat-option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                    Obavezno polje
+                <mat-error *ngIf="selectLFFormControl.hasError('required')">
+                  Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
       </div>
       <div class="col-sm">
         <div class="row">
-            <mat-form-field appearance="fill">
+              
+              <mat-form-field appearance="fill">
+                  <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
+                  <mat-select matNativeControl required [formControl]="selectAFFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                      <mat-option
+                      *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                      [value]="option">
+                      {{ optionName }}
+                  </mat-option>
+                  </mat-select>
+                  <mat-error *ngIf="selectAFFormControl.hasError('required')">
+                      Obavezno polje
+                  </mat-error>
+                </mat-form-field>
+          
+        </div>
+        <div class="row">
+              <mat-form-field appearance="fill">
+                <mat-label>Funkcija troška</mat-label>
+                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                    <mat-option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </mat-option>
+                </mat-select>
+                <mat-error *ngIf="selectLFFormControl.hasError('required')">
+                  Obavezno polje
+                </mat-error>
+              </mat-form-field>
+        </div>
+      </div>
+      <div class="col-sm">
+        <div class="row">
+              <mat-form-field appearance="fill">
                 <mat-label>Broj epoha</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectEpochFormControl">
                   <mat-option label="--select something --"></mat-option>
                   <mat-option value="saab">Saab</mat-option>
                   <mat-option value="mercedes">Mercedes</mat-option>
                   <mat-option value="audi">Audi</mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectEpochFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
         <div class="row">
-            <mat-form-field appearance="fill">
+              <mat-form-field appearance="fill">
                 <mat-label>Broj uzoraka po iteraciji</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
+                <mat-select matNativeControl required [formControl]="selectBSFormControl">
                   <mat-option label="--select something --"></mat-option>
                   <mat-option value="saab">Saab</mat-option>
                   <mat-option value="mercedes">Mercedes</mat-option>
                   <mat-option value="audi">Audi</mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
+                <mat-error *ngIf="selectBSFormControl.hasError('required')">
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
         </div>
       </div>
-      <div class="col-sm">
-        <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                    <mat-option
-                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                    [value]="option">
-                    {{ optionName }}
-                </mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
-        </div>
-        <div class="row">
-            <mat-form-field appearance="fill">
-                <mat-label>Funkcija troška</mat-label>
-                <mat-select matNativeControl required [formControl]="selectFormControl">
-                    <mat-option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
-              </mat-form-field>
-        </div>
-      </div>
     </div><!--kraj unosa parametara-->
-
-    <div class="col-1">
-      <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
-  </div>
   <hr>
     <div class="m-5">
-                <app-graph [model]="newModel" [inputCols]="4"></app-graph>
-                Broj skrivenih slojeva: 
-                <div class="col-1">
-                    <input type="number" min="1" class="form" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
+                <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
+                <!--<div class="row" style="position: center;">
+                  <div class="col-3"></div>
+                  <label class="col-2" style="color: white;">Broj skrivenih slojeva:</label>  
+                  <div class="col-1">
+                      <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
+                  </div>
                 </div>
+            </div>-->
+            <div class="row" id="rowhn">
+                <div class="col-3"></div>
+                <div class="col-2">Broj Skrivenih Slojeva</div>
+                <div class="col-1"><mat-icon (click)="addLayer()" (ngModelChange)="updateGraph()">add_circle</mat-icon></div>
+                <div class="col-1">{{newModel.hiddenLayers}}</div>
+                <div class="col-1"><mat-icon (click)="removeLayer()" (ngModelChange)="updateGraph()">remove_circle</mat-icon></div>
             </div>
-
   </div>
   <hr>
   <div class="row">
 
-      <div class="col">
-        <app-hidden-layer></app-hidden-layer>
+      <div class="col text-center" *ngFor="let item of [1,2,3,4,5]">
+        <app-hidden-layer  ></app-hidden-layer>
       </div>
   </div>
\ No newline at end of file
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 c5ab9811..6dad9e6c 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -22,6 +22,13 @@ export class FormModelComponent implements OnInit {
   }
   selectFormControl = new FormControl('', Validators.required);
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
+  selectTypeFormControl=new FormControl('', Validators.required);
+  selectOptFormControl=new FormControl('', Validators.required);
+  selectLFFormControl=new FormControl('', Validators.required);
+  selectLRFormControl=new FormControl('', Validators.required);
+  selectEpochFormControl=new FormControl('', Validators.required);
+  selectAFFormControl=new FormControl('', Validators.required);
+  selectBSFormControl=new FormControl('', Validators.required);
 
   newModel: Model = new Model();
   myModels?: Model[];
@@ -41,10 +48,33 @@ export class FormModelComponent implements OnInit {
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
-
+  
   batchSizePower: number = 2;
 
+
+
   updateGraph() {
     this.graph.update();
   }
+  removeLayer(){
+    if(this.newModel.hiddenLayers>0)
+    {
+      this.newModel.hiddenLayers-=1;
+    }
+    else
+    {
+      this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+    }
+    
+  }
+  addLayer(){
+    if(this.newModel.hiddenLayers<12)
+    {
+      this.newModel.hiddenLayers+=1;
+    }
+    else
+    {
+      this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+    }
+  }
 }
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
index c8db6056..dd96e0c5 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
@@ -1,5 +1,17 @@
 .container{
-    max-width: 15rem;
+  
+    text-align: justify;
     border: 1px solid white;
     border-radius: 5px;
+    padding: 0;
+    color: white!important;
+    background-color: var(--ns-bg-dark-100) !important;
+   
 }
+mat-form-field{
+    font-size: 10px;
+}
+input{
+    background-color: #004165;
+    color: aliceblue;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
index 65e0f626..16c41b28 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
@@ -1,39 +1,42 @@
 <div class="container">
+  <div>
+    <label>Skriveni sloj {{hiddenLayerNum}}</label>
+  </div>
     <mat-form-field appearance="fill">
         <mat-label>Aktivaciona funkcija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
-          <mat-option label="--select something --"></mat-option>
+        <mat-select matNativeControl required [formControl]="selectActivationFormControl">
           <mat-option value="saab">Relu</mat-option>
           <mat-option value="mercedes">Sigmoid</mat-option>
           <mat-option value="audi">Softmax</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectActivationFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
 <br>
-      Broj čvorova: <input type="number" min="1" class="form-control" name="hiddenLayersNeurons">
+<div class="row">
+      <label style="width: 7rem;" for="hiddenLayersNeurons">Broj čvorova:</label> <input type="number" min="1" class="form-control" name="hiddenLayersNeurons" style="max-width: 5rem;">
+</div>
       <br>
       <mat-form-field appearance="fill">
         <mat-label>Regularizacija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
-          <mat-option label="--select something --"></mat-option>
+        <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
           <mat-option value="l1">L1</mat-option>
           <mat-option value="l2">L2</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectRegularisationFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
       <br>
       <mat-form-field appearance="fill">
         <mat-label>Stopa regularizacije</mat-label>
-        <mat-select matNativeControl required [formControl]="selectFormControl">
+        <mat-select matNativeControl required [formControl]="selectRRateFormControl">
           <mat-option value="saab">0.001</mat-option>
           <mat-option value="mercedes">0.01</mat-option>
           <mat-option value="audi">0.1</mat-option>
         </mat-select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
+        <mat-error *ngIf="selectRRateFormControl.hasError('required')">
             Obavezno polje
         </mat-error>
       </mat-form-field>
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
index fa9a1114..301476de 100644
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
+++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
@@ -1,16 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
-
+import Model from 'src/app/_data/Model';
 @Component({
   selector: 'app-hidden-layer',
   templateUrl: './hidden-layer.component.html',
   styleUrls: ['./hidden-layer.component.css']
 })
 export class HiddenLayerComponent implements OnInit {
-  
+  hiddenLayerNum:number=1;
   constructor() { }
 
   ngOnInit(): void {
   }
-  selectFormControl = new FormControl('', Validators.required);
+  selectActivationFormControl = new FormControl('', Validators.required);
+  selectRegularisationFormControl = new FormControl('', Validators.required);
+  selectRRateFormControl = new FormControl('', Validators.required);
 }
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index f73e7571..956e9784 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -16,4 +16,7 @@
 
 
     </div>
+    <app-form-model>
+        
+    </app-form-model>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3


From cdfecf22863385132701aea4356d5f5aabf3805c Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Mon, 25 Apr 2022 03:40:06 +0200
Subject: Osposobio pretragu u folder komponenti. Promenio experiment stranu
 tako da moze da se skroluje od koraka do koraka. Dodao nacin da komponente
 manuelno skroluju pozadinu.

---
 frontend/src/app/Shared.ts                         | 12 +++-
 .../src/app/_elements/folder/folder.component.css  | 25 ++++----
 .../src/app/_elements/folder/folder.component.html | 59 +++++++++--------
 .../src/app/_elements/folder/folder.component.ts   | 37 ++++++++++-
 .../reactive-background.component.ts               | 19 +++++-
 .../app/_pages/experiment/experiment.component.css | 17 +++++
 .../_pages/experiment/experiment.component.html    | 11 ++--
 .../app/_pages/experiment/experiment.component.ts  | 74 ++++++++++++++++++++--
 frontend/src/styles/helper.css                     | 23 +++++++
 9 files changed, 217 insertions(+), 60 deletions(-)

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

diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts
index 59a2716d..d088fff9 100644
--- a/frontend/src/app/Shared.ts
+++ b/frontend/src/app/Shared.ts
@@ -1,4 +1,4 @@
-import { ElementRef } from "@angular/core";
+import { ElementRef, EventEmitter } from "@angular/core";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
@@ -27,18 +27,24 @@ class Shared {
             });
         }
     }
-    openYesNoDialog(title: string, message: string,yesFunction:Function): void {
+    openYesNoDialog(title: string, message: string, yesFunction: Function): void {
 
         if (this.dialog) {
             const dialogRef = this.dialog.open(YesNoDialogComponent, {
                 width: '350px',
-                data: { title: title, message: message,yesFunction}
+                data: { title: title, message: message, yesFunction }
             });
             dialogRef.afterClosed().subscribe(res => {
                 //nesto
             });
         }
     }
+
+    bgScroll: EventEmitter<number> = new EventEmitter();
+
+    emitBGScrollEvent(value: number) {
+        this.bgScroll.emit(value);
+    }
 }
 
 export default new Shared(false);
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index a1c1124a..3e865576 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -1,7 +1,7 @@
 #folder {
-    position: absolute;
+    /*position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%);*/
 }
 
 #tabs {
@@ -22,9 +22,10 @@
     align-items: center;
     position: relative;
     overflow-x: hidden;
-    background-color: var(--ns-bg-dark-100);
     height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
     border-color: var(--ns-primary);
+    color: var(--ns-primary);
     border-style: solid;
     border-width: 1px 1px 0 1px;
 }
@@ -37,6 +38,7 @@
 .selected-tab {
     height: 3rem;
     background-color: var(--ns-primary);
+    color: var(--offwhite);
 }
 
 .hover-tab {
@@ -91,7 +93,7 @@
     background-color: var(--ns-bg-dark-50);
     width: 100%;
     height: 36rem;
-    backdrop-filter: blur(2px);
+    /*backdrop-filter: blur(2px);*/
     border-color: var(--ns-primary);
     border-style: solid;
     border-width: 1px 1px 1px 1px;
@@ -104,21 +106,18 @@
     justify-content: center;
 }
 
-.folder-bottom-button {
+.bottom-button {
     font-size: large;
     position: relative;
-    background-color: var(--ns-bg-dark-50);
+    background-color: var(--ns-primary);
     width: 10rem;
-    height: 2.5rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
+    height: 2.3rem;
     border-color: var(--ns-primary);
     border-style: solid;
     border-width: 0px 1px 1px 1px;
 }
 
-.folder-bottom-button:hover {
-    background-color: var(--ns-primary);
+.rounded-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 895ac84e..c3da30fc 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,12 +1,12 @@
 <div id="folder" style="width: 60rem;">
-    <div id="tabs" class="text-offwhite">
+    <div id="tabs">
         <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + newFileZIndex() + ' ;'" [ngClass]="{'selected-tab' : newFileSelected, 'hover-tab' : hoveringOverFileIndex == -2}">
             <mat-icon class="text-offwhite">add</mat-icon>
             <a class="stretched-link tab-link" (click)="selectNewFile()" (mouseenter)="hoverOverFile(-2)" (mouseleave)="hoverOverFile(-1)">
                 <p class="m-1" *ngIf="newFile != undefined">{{newFile.name}}</p>
             </a>
         </div>
-        <div class="folder-tab p-1 rounded-top" *ngFor="let file of files; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
+        <div class="folder-tab p-1 rounded-top" *ngFor="let file of filteredFiles; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedFileIndex == i, 'hover-tab' : hoveringOverFileIndex == i}">
             <a class="m-1 stretched-link tab-link" (click)="selectFile(i)" (mouseenter)="hoverOverFile(i)" (mouseleave)="hoverOverFile(-1)">{{file.name}}</a>
         </div>
     </div>
@@ -15,27 +15,22 @@
             <div id="path" class="ps-2">{{folderName}}
             </div>
             <mat-icon>keyboard_arrow_right</mat-icon>
-            <div id="search">
+            <div id="search" class="text-offwhite">
                 <mat-form-field>
-                    <input matNativeControl>
+                    <button matPrefix class="btn-clear input-icon"><mat-icon>search</mat-icon></button>
+                    <input type="search" matInput name="search" [(ngModel)]="searchTerm" (input)="searchTermsChanged()">
+                    <button matSuffix class="btn-clear input-icon" (click)="clearSearchTerm()"><mat-icon>clear</mat-icon></button>
                 </mat-form-field>
             </div>
             <div id="search-options">
                 <div id="collapseFilters" class="collapse collapse-horizontal">
-                    <mat-chip-list aria-label="filter selection">
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">timeline</mat-icon>
-                            Regresioni
-                        </mat-chip>
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">looks_two</mat-icon>
-                            Binarni klasifikacioni
-                        </mat-chip>
-                        <mat-chip class="text-offwhite ns-bg-dark-50">
-                            <mat-icon class="text-offwhite">auto_awesome_motion</mat-icon>
-                            Multiklasifikacioni
-                        </mat-chip>
-                    </mat-chip-list>
+
+                    <mat-icon class="text-offwhite ">timeline</mat-icon>
+                    Regresioni
+                    <mat-icon class="text-offwhite ">looks_two</mat-icon>
+                    Binarni klasifikacioni
+                    <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon>
+                    Multiklasifikacioni
                 </div>
                 <a class="tab-link p-1" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
                     <mat-icon>filter_alt</mat-icon>
@@ -50,19 +45,23 @@
         </div>
         {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}
     </div>
-    <div id="footer">
-        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="newFileSelected">
-            <a class="tab-link stretched-link">Sačuvaj</a>
-            <div>
-                <mat-icon>check</mat-icon>
+    <div id="footer" [ngSwitch]="newFileSelected">
+        <button mat-button (click)="saveNewFile()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="true">
+            <div  class="f-row">
+                <div>Sačuvaj</div>
+                <div class="pt-1">
+                    <mat-icon>check</mat-icon>
+                </div>
             </div>
-        </div>
-        <div class="folder-bottom-button text-offwhite rounded-bottom bubble" *ngIf="!newFileSelected">
-            <a class="tab-link stretched-link">Ok</a>
-            <div class="icon-double">
-                <mat-icon>check</mat-icon>
-                <mat-icon>check</mat-icon>
+        </button>
+        <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="false">
+            <div class="f-row">
+                <div>Ok</div>
+                <div class="icon-double pt-1">
+                    <mat-icon>check</mat-icon>
+                    <mat-icon>check</mat-icon>
+                </div>
             </div>
-        </div>
+        </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 485a8dd7..91565f3c 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -20,11 +20,15 @@ export class FolderComponent implements OnInit {
   newFileSelected: boolean = true;
 
   selectedFileIndex: number = -1;
+  selectedFile?: (Dataset | Model);
   hoveringOverFileIndex: number = -1;
 
   fileToDisplay?: (Dataset | Model);
 
   @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter();
+  @Output() okPressed: EventEmitter<string> = new EventEmitter();
+
+  searchTerm: string = '';
 
   constructor() {
     //PLACEHOLDER
@@ -33,6 +37,9 @@ export class FolderComponent implements OnInit {
       new Dataset('Dijamanti'),
       new Dataset('Filmovi'),
     ]
+
+    this.filteredFiles.length = 0;
+    this.filteredFiles.push(...this.files);
   }
 
   ngOnInit(): void {
@@ -60,17 +67,19 @@ export class FolderComponent implements OnInit {
     if (!this.newFile) {
       this.createNewFile();
     }
-    this.fileToDisplay = this.newFile;
     this.selectedFileIndex = -1;
+    this.fileToDisplay = this.newFile;
+    this.selectedFile = this.newFile;
     this.newFileSelected = true;
     this.selectedFileChanged.emit(this.newFile);
   }
 
   selectFile(index: number) {
     this.selectedFileIndex = index;
-    this.fileToDisplay = this.files[index];
+    this.selectedFile = this.filteredFiles[index];
+    this.fileToDisplay = this.filteredFiles[index];
     this.newFileSelected = false;
-    this.selectedFileChanged.emit(this.files[index]);
+    this.selectedFileChanged.emit(this.selectedFile);
   }
 
   createNewFile() {
@@ -81,6 +90,10 @@ export class FolderComponent implements OnInit {
     }
   }
 
+  ok() {
+    this.okPressed.emit();
+  }
+
   saveNewFile() {
     // TODO
   }
@@ -97,6 +110,24 @@ export class FolderComponent implements OnInit {
   newFileZIndex() {
     return (this.files.length + 1);
   }
+
+  clearSearchTerm() {
+    this.searchTerm = '';
+  }
+
+  filteredFiles: (Dataset | Model)[] = [];
+
+  searchTermsChanged() {
+    this.filteredFiles.length = 0;
+    this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase())));
+    if (this.selectedFile) {
+      if (!this.filteredFiles.includes(this.selectedFile)) {
+        this.selectFile(-1);
+      } else {
+        this.selectedFileIndex = this.filteredFiles.indexOf(this.selectedFile);
+      }
+    }
+  }
 }
 
 export enum FolderType {
diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
index 97387ac8..1a6157e3 100644
--- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
+++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts
@@ -1,5 +1,6 @@
 import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
+import Shared from 'src/app/Shared';
 
 @Component({
   selector: 'app-reactive-background',
@@ -90,18 +91,32 @@ export class ReactiveBackgroundComponent implements AfterViewInit {
 
       this.drawBackground();
     }, 1000 / 60);
+
+    Shared.bgScroll.subscribe((amount) => {
+      this.scrollBackgroundFromSharedEvent(amount);
+    })
   }
 
   private lastScrollY: number = 0;
 
+  scrollBackgroundFromSharedEvent(amount: number) {
+    const scrolledAmount = amount - this.lastScrollY;
+    this.scrollPoints(scrolledAmount);
+    this.lastScrollY = amount;
+  }
+
   scrollBackground(e: Event) {
     const scrolledAmount = window.scrollY - this.lastScrollY;
+    this.scrollPoints(scrolledAmount);
+    this.lastScrollY = window.scrollY;
+  }
+
+  scrollPoints(amount: number) {
     this.points.forEach((point, index) => {
       if (index > this.numPoints * this.fill) return;
-      point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed;
+      point.y = point.y - (amount / this.height) * this.scrollSpeed;
       this.keepPointWithinBounds(point);
     })
-    this.lastScrollY = window.scrollY;
   }
 
   drawBackground() {
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 5cb8c325..2fde8e7f 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -29,4 +29,21 @@ mat-stepper {
 
 .label {
     color: white;
+}
+
+.steps-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.step-content {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2c69ae9c..86b40cec 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -20,6 +20,7 @@
     <div class="d-flex flex-colum align-items-center sidenav">
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
+                <!--editable="false"-->
                 <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
                 <ng-template matStepContent>
                     <p>Izaberite vas izvor podataka</p>
@@ -37,14 +38,14 @@
             </mat-step>
         </mat-stepper>
     </div>
-    <div class="d-flex flex-colum w-100 position-relative">
-        <div *ngIf="event==0">
-            <app-folder></app-folder>
+    <div #stepsContainer class="steps-container">
+        <div #steps id="step_1" class="step-content">
+            <app-folder (okPressed)="goToPage(1)"></app-folder>
         </div>
-        <div *ngIf="event==1">
+        <div #steps id="step_2" class="step-content">
             <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
         </div>
-        <div *ngIf="event==2">
+        <div #steps id="step_3" class="step-content">
             <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 2d623709..377866d1 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,20 +1,86 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material/stepper';
+import Shared from 'src/app/Shared';
+
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent {
+export class ExperimentComponent implements AfterViewInit {
+
+  @ViewChild(MatStepper) stepper!: MatStepper;
+  @ViewChild('stepsContainer') stepsContainer!: ElementRef;
+  @ViewChildren('steps') steps!: ElementRef[];
 
   event: number = 0;
 
   constructor() { }
 
+  stepHeight = this.calcStepHeight();
+
+  calcStepHeight() {
+    return window.innerHeight - 64;
+  }
+
+  ngAfterViewInit(): void {
+    window.addEventListener('resize', () => {
+      this.updatePageHeight();
+    })
+    this.updatePageHeight();
+
+    setInterval(() => {
+      this.updatePageIfScrolled();
+    }, 200);
+
+    this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => {
+      Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop);
+    });
+  }
+
+  updatePageIfScrolled() {
+    if (this.scrolling) return;
+    const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight)
+    this.stepper.selectedIndex = currentPage;
+  }
+
+  updatePageHeight() {
+    this.stepHeight = this.calcStepHeight();
+    const stepHeight = `${this.stepHeight}px`;
+    this.stepsContainer.nativeElement.style.minHeight = stepHeight;
+    this.steps.forEach(step => {
+      step.nativeElement.style.minHeight = stepHeight;
+    })
+  }
+
   changePage(event: StepperSelectionEvent) {
-    this.event = event.selectedIndex;
-    console.log(this.event);
+    this.updatePage(<number>event.selectedIndex)
+  }
+
+  goToPage(pageNum: number) {
+    this.stepper.selectedIndex = pageNum;
+    this.updatePage(pageNum);
+  }
+
+  updatePage(pageNum: number) {
+    this.event = pageNum;
+    let scrollAmount = 0;
+    this.steps.forEach((step, index) => {
+      if (index == pageNum) {
+        scrollAmount = step.nativeElement.offsetTop;
+      }
+    })
+    this.scrolling = true;
+    setTimeout(() => {
+      this.scrolling = false;
+    }, 1000);
+    this.stepsContainer.nativeElement.scroll({
+      top: scrollAmount,
+      behavior: 'smooth' //auto, smooth, initial, inherit
+    });
   }
 
+  scrolling: boolean = false;
 
 }
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index 9c520ac3..875b94f1 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -51,4 +51,27 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
+
+.btn-clear {
+    border: unset;
+    background-color: unset;
+    outline: unset;
+    position: relative;
+}
+
+.input-icon {
+    color: var(--offwhite);
+    transform: translateY(25%);
+}
+
+.input-icon:hover {
+    color: var(--ns-primary);
+}
+
+.f-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 636d944d3fabbf3b42b3b316756a52a777657d03 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 04:30:57 +0200
Subject: Ažurirana komponenta form-model, izbrisana komponenta hidden-layer.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/_data/Model.ts                    |  2 +-
 .../_elements/form-model/form-model.component.css  | 20 +++++
 .../_elements/form-model/form-model.component.html | 86 ++++++++++++++------
 .../_elements/form-model/form-model.component.ts   | 93 ++++++++++++++++++++--
 .../hidden-layer/hidden-layer.component.css        | 17 ----
 .../hidden-layer/hidden-layer.component.html       | 43 ----------
 .../hidden-layer/hidden-layer.component.spec.ts    | 25 ------
 .../hidden-layer/hidden-layer.component.ts         | 18 -----
 8 files changed, 169 insertions(+), 135 deletions(-)
 delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
 delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
 delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
 delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts

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

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 6cef09e5..00ac0d0c 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -14,7 +14,7 @@ export default class Model {
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
         public inputNeurons: number = 1,
-        public hiddenLayerNeurons: number = 1,
+        public hiddenLayerNeurons: number=1,
         public hiddenLayers: number = 1,
         public batchSize: number = 5,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
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 20546e17..b4477bce 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -25,4 +25,24 @@ mat-icon{
 #rowhn{
     margin-bottom:-50px;
     padding: 0;
+}
+.neuron{
+  
+    text-align: justify;
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 0;
+    color: white!important;
+    background-color: var(--ns-bg-dark-100) !important;
+   
+}
+mat-form-field{
+    font-size: 12px;
+}
+col-1{
+    text-align: center;
+}
+mat-icon{
+    margin-right: 5px;
+    margin-left: -7px;
 }
\ No newline at end of file
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 40631570..22307d4d 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -95,34 +95,20 @@
               </mat-form-field>
         </div>
       </div>
-      <div class="col-sm">
+      <div class="col">
         <div class="row">
-              <mat-form-field appearance="fill">
-                <mat-label>Broj epoha</mat-label>
-                <mat-select matNativeControl required [formControl]="selectEpochFormControl">
-                  <mat-option label="--select something --"></mat-option>
-                  <mat-option value="saab">Saab</mat-option>
-                  <mat-option value="mercedes">Mercedes</mat-option>
-                  <mat-option value="audi">Audi</mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectEpochFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
+          <div class="col-7">Broj Epoha</div>
+          <mat-icon (click)="addEpoch()">add_circle</mat-icon>
+          <div class="col-1">{{newModel.epochs}}</div>
+          <mat-icon (click)="removeEpoch()">remove_circle</mat-icon>
         </div>
+        <br>
+        <br>
         <div class="row">
-              <mat-form-field appearance="fill">
-                <mat-label>Broj uzoraka po iteraciji</mat-label>
-                <mat-select matNativeControl required [formControl]="selectBSFormControl">
-                  <mat-option label="--select something --"></mat-option>
-                  <mat-option value="saab">Saab</mat-option>
-                  <mat-option value="mercedes">Mercedes</mat-option>
-                  <mat-option value="audi">Audi</mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectBSFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
-              </mat-form-field>
+          <div class="col-7">Broj Uzoraka Po Iteraciji</div>
+          <mat-icon (click)="addBatch()">add_circle</mat-icon>
+          <div class="col-1">{{newModel.batchSize}}</div>
+          <mat-icon (click)="removeBatch()">remove_circle</mat-icon>
         </div>
       </div>
     </div><!--kraj unosa parametara-->
@@ -149,6 +135,54 @@
   <div class="row">
 
       <div class="col text-center" *ngFor="let item of [1,2,3,4,5]">
-        <app-hidden-layer  ></app-hidden-layer>
+        <div class="neuron">
+          <div>
+            <label>Skriveni sloj {{item}}</label>
+          </div>
+            <mat-form-field appearance="fill">
+                <mat-label>Aktivaciona funkcija</mat-label>
+                <mat-select matNativeControl required [formControl]="selectActivationFormControl">
+                  <mat-option value="saab">Relu</mat-option>
+                  <mat-option value="mercedes">Sigmoid</mat-option>
+                  <mat-option value="audi">Softmax</mat-option>
+                </mat-select>
+                <mat-error *ngIf="selectActivationFormControl.hasError('required')">
+                    Obavezno polje
+                </mat-error>
+              </mat-form-field>
+        <br>
+        <div class="row" >
+              <!--<label style="width: 7rem;" for="hiddenLayersNeurons">Broj čvorova:</label> <input type="number" min="1" class="form-control" name="hiddenLayersNeurons" style="max-width: 5rem;">-->
+
+                <div class="col-6" style="font-size: 13px;" >Broj čvorova</div>
+                <mat-icon (click)="addNeuron()">add_circle</mat-icon>
+                <div class="col-1">{{newModel.hiddenLayerNeurons}}</div>
+                <mat-icon (click)="removeNeuron()">remove_circle</mat-icon>
+          
+        </div>
+              <br>
+              <mat-form-field appearance="fill">
+                <mat-label>Regularizacija</mat-label>
+                <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
+                  <mat-option value="l1">L1</mat-option>
+                  <mat-option value="l2">L2</mat-option>
+                </mat-select>
+                <mat-error *ngIf="selectRegularisationFormControl.hasError('required')">
+                    Obavezno polje
+                </mat-error>
+              </mat-form-field>
+              <br>
+              <mat-form-field appearance="fill">
+                <mat-label>Stopa regularizacije</mat-label>
+                <mat-select matNativeControl required [formControl]="selectRRateFormControl">
+                  <mat-option value="saab">0.001</mat-option>
+                  <mat-option value="mercedes">0.01</mat-option>
+                  <mat-option value="audi">0.1</mat-option>
+                </mat-select>
+                <mat-error *ngIf="selectRRateFormControl.hasError('required')">
+                    Obavezno polje
+                </mat-error>
+              </mat-form-field>
+        </div>
       </div>
   </div>
\ No newline at end of file
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 6dad9e6c..cff967aa 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -16,7 +16,10 @@ export class FormModelComponent implements OnInit {
   @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
-  constructor() { }
+  constructor() { 
+  this.newModel.epochs=1;
+  this.newModel.batchSize=1;
+}
   
   ngOnInit(): void {
   }
@@ -29,7 +32,9 @@ export class FormModelComponent implements OnInit {
   selectEpochFormControl=new FormControl('', Validators.required);
   selectAFFormControl=new FormControl('', Validators.required);
   selectBSFormControl=new FormControl('', Validators.required);
-
+  selectActivationFormControl = new FormControl('', Validators.required);
+  selectRegularisationFormControl = new FormControl('', Validators.required);
+  selectRRateFormControl = new FormControl('', Validators.required);
   newModel: Model = new Model();
   myModels?: Model[];
   selectedModel?: Model;
@@ -49,17 +54,18 @@ export class FormModelComponent implements OnInit {
 
   showMyModels: boolean = true;
   
-  batchSizePower: number = 2;
-
+  
+ 
 
 
   updateGraph() {
     this.graph.update();
   }
   removeLayer(){
-    if(this.newModel.hiddenLayers>0)
+    if(this.newModel.hiddenLayers>1)
     {
       this.newModel.hiddenLayers-=1;
+      this.updateGraph();
     }
     else
     {
@@ -71,10 +77,87 @@ export class FormModelComponent implements OnInit {
     if(this.newModel.hiddenLayers<12)
     {
       this.newModel.hiddenLayers+=1;
+      this.updateGraph();
     }
     else
     {
       this.newModel.hiddenLayers=this.newModel.hiddenLayers;
+      
+    }
+  }
+  removeBatch(){
+    if(this.newModel.batchSize>1)
+    {
+      this.newModel.batchSize=this.newModel.batchSize/2;
+    }
+    else
+    {
+      this.newModel.batchSize=this.newModel.batchSize;
+    }
+    
+  }
+  addBatch(){
+    if(this.newModel.batchSize<600)
+    {
+      this.newModel.batchSize=this.newModel.batchSize*2;
+    }
+    else
+    {
+      this.newModel.batchSize=this.newModel.batchSize;
+      
+    }
+  }
+  removeEpoch(){
+    if(this.newModel.epochs>1)
+    {
+      this.newModel.epochs=this.newModel.epochs-1;
+    }
+    else
+    {
+      this.newModel.epochs=this.newModel.epochs;
+    }
+    
+  }
+  addEpoch(){
+    if(this.newModel.epochs<100)
+    {
+      this.newModel.epochs=this.newModel.epochs+1;
+    }
+    else
+    {
+      this.newModel.epochs=this.newModel.epochs;
+      
+    }
+  }
+  /*
+  setNeurons()
+  {
+    for(let i=0;i<this.newModel.hiddenLayers;i++){
+      this.newModel.hiddenLayerNeurons[i]=1;
+    }
+  }*/
+  removeNeuron(){
+    if(this.newModel.hiddenLayerNeurons>1)
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1;
+      this.updateGraph();
+    }
+    else
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons;
+    }
+    
+  }
+  addNeuron(){
+    if(this.newModel.hiddenLayerNeurons<100)
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1;
+      this.updateGraph();
+    }
+    else
+    {
+      this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons;
+      
     }
   }
 }
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
deleted file mode 100644
index dd96e0c5..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.container{
-  
-    text-align: justify;
-    border: 1px solid white;
-    border-radius: 5px;
-    padding: 0;
-    color: white!important;
-    background-color: var(--ns-bg-dark-100) !important;
-   
-}
-mat-form-field{
-    font-size: 10px;
-}
-input{
-    background-color: #004165;
-    color: aliceblue;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
deleted file mode 100644
index 16c41b28..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<div class="container">
-  <div>
-    <label>Skriveni sloj {{hiddenLayerNum}}</label>
-  </div>
-    <mat-form-field appearance="fill">
-        <mat-label>Aktivaciona funkcija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectActivationFormControl">
-          <mat-option value="saab">Relu</mat-option>
-          <mat-option value="mercedes">Sigmoid</mat-option>
-          <mat-option value="audi">Softmax</mat-option>
-        </mat-select>
-        <mat-error *ngIf="selectActivationFormControl.hasError('required')">
-            Obavezno polje
-        </mat-error>
-      </mat-form-field>
-<br>
-<div class="row">
-      <label style="width: 7rem;" for="hiddenLayersNeurons">Broj čvorova:</label> <input type="number" min="1" class="form-control" name="hiddenLayersNeurons" style="max-width: 5rem;">
-</div>
-      <br>
-      <mat-form-field appearance="fill">
-        <mat-label>Regularizacija</mat-label>
-        <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
-          <mat-option value="l1">L1</mat-option>
-          <mat-option value="l2">L2</mat-option>
-        </mat-select>
-        <mat-error *ngIf="selectRegularisationFormControl.hasError('required')">
-            Obavezno polje
-        </mat-error>
-      </mat-form-field>
-      <br>
-      <mat-form-field appearance="fill">
-        <mat-label>Stopa regularizacije</mat-label>
-        <mat-select matNativeControl required [formControl]="selectRRateFormControl">
-          <mat-option value="saab">0.001</mat-option>
-          <mat-option value="mercedes">0.01</mat-option>
-          <mat-option value="audi">0.1</mat-option>
-        </mat-select>
-        <mat-error *ngIf="selectRRateFormControl.hasError('required')">
-            Obavezno polje
-        </mat-error>
-      </mat-form-field>
-</div>
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
deleted file mode 100644
index 103e4539..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HiddenLayerComponent } from './hidden-layer.component';
-
-describe('HiddenLayerComponent', () => {
-  let component: HiddenLayerComponent;
-  let fixture: ComponentFixture<HiddenLayerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HiddenLayerComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HiddenLayerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
deleted file mode 100644
index 301476de..00000000
--- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-import Model from 'src/app/_data/Model';
-@Component({
-  selector: 'app-hidden-layer',
-  templateUrl: './hidden-layer.component.html',
-  styleUrls: ['./hidden-layer.component.css']
-})
-export class HiddenLayerComponent implements OnInit {
-  hiddenLayerNum:number=1;
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-  selectActivationFormControl = new FormControl('', Validators.required);
-  selectRegularisationFormControl = new FormControl('', Validators.required);
-  selectRRateFormControl = new FormControl('', Validators.required);
-}
-- 
cgit v1.2.3


From fd8abefd0caed47b7e3d7dd0abf10e747a18f82e Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 12:07:36 +0200
Subject: Izbrisana komponenta hidden-layer iz app.module fajla.

---
 .../src/app/_elements/form-model/form-model.component.html     | 10 +---------
 frontend/src/app/app.module.ts                                 |  4 ++--
 2 files changed, 3 insertions(+), 11 deletions(-)

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

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 22307d4d..7d669d1d 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -114,15 +114,7 @@
     </div><!--kraj unosa parametara-->
   <hr>
     <div class="m-5">
-                <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
-                <!--<div class="row" style="position: center;">
-                  <div class="col-3"></div>
-                  <label class="col-2" style="color: white;">Broj skrivenih slojeva:</label>  
-                  <div class="col-1">
-                      <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
-                  </div>
-                </div>
-            </div>-->
+            <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
             <div class="row" id="rowhn">
                 <div class="col-3"></div>
                 <div class="col-2">Broj Skrivenih Slojeva</div>
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index a7850552..faa8bb8e 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp
 import { FolderComponent } from './_elements/folder/folder.component';
 import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
-import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component';
+
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -79,7 +79,7 @@ export function initializeApp(appConfig: Configuration) {
     FolderComponent,
     TestComponent,
     DoughnutChartComponent,
-    HiddenLayerComponent
+
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From f20f77226f0106ed2c9e2bb7b49550f5e5eb4c50 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 25 Apr 2022 13:05:47 +0200
Subject: Ažurirana komponenta form-model, dodata mogućnost iscrtavanja kartica
 za skrivene slojeve u zavisnosti od broja slojeva.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_elements/form-model/form-model.component.css  |  2 ++
 .../_elements/form-model/form-model.component.html | 22 +++++++++++++---------
 .../_elements/form-model/form-model.component.ts   |  4 ++++
 .../_pages/experiment/experiment.component.html    |  3 ++-
 frontend/src/app/_pages/home/home.component.html   |  4 +---
 5 files changed, 22 insertions(+), 13 deletions(-)

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

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 b4477bce..f4d085ea 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -34,6 +34,8 @@ mat-icon{
     padding: 0;
     color: white!important;
     background-color: var(--ns-bg-dark-100) !important;
+    min-width: none;
+    max-width: 12.5rem;
    
 }
 mat-form-field{
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 7d669d1d..0b63c5ac 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -124,13 +124,15 @@
             </div>
   </div>
   <hr>
-  <div class="row">
+  <div class="row" style="max-width:60rem ;">
 
-      <div class="col text-center" *ngFor="let item of [1,2,3,4,5]">
+      <div class="col text-center" *ngFor="let item of numSequence(newModel.hiddenLayers)" >
+        {{item}}
         <div class="neuron">
-          <div>
-            <label>Skriveni sloj {{item}}</label>
+          <div style="text-align: center;">
+            <label >Skriveni sloj</label>
           </div>
+          <div class="row" style="margin-bottom: -10px;">
             <mat-form-field appearance="fill">
                 <mat-label>Aktivaciona funkcija</mat-label>
                 <mat-select matNativeControl required [formControl]="selectActivationFormControl">
@@ -142,17 +144,15 @@
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
-        <br>
+            </div>
         <div class="row" >
-              <!--<label style="width: 7rem;" for="hiddenLayersNeurons">Broj čvorova:</label> <input type="number" min="1" class="form-control" name="hiddenLayersNeurons" style="max-width: 5rem;">-->
-
                 <div class="col-6" style="font-size: 13px;" >Broj čvorova</div>
                 <mat-icon (click)="addNeuron()">add_circle</mat-icon>
                 <div class="col-1">{{newModel.hiddenLayerNeurons}}</div>
                 <mat-icon (click)="removeNeuron()">remove_circle</mat-icon>
           
         </div>
-              <br>
+              <div class='row' style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Regularizacija</mat-label>
                 <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
@@ -163,7 +163,8 @@
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
-              <br>
+              </div>
+            <div class="row" style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Stopa regularizacije</mat-label>
                 <mat-select matNativeControl required [formControl]="selectRRateFormControl">
@@ -175,6 +176,9 @@
                     Obavezno polje
                 </mat-error>
               </mat-form-field>
+            </div>
         </div>
+        <br>
       </div>
+      
   </div>
\ No newline at end of file
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 cff967aa..b1d0a2a9 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -54,6 +54,7 @@ export class FormModelComponent implements OnInit {
 
   showMyModels: boolean = true;
   
+  hiddenLayers=[];
   
  
 
@@ -136,6 +137,9 @@ export class FormModelComponent implements OnInit {
       this.newModel.hiddenLayerNeurons[i]=1;
     }
   }*/
+  numSequence(n: number): Array<number> {
+    return Array(n);
+  }
   removeNeuron(){
     if(this.newModel.hiddenLayerNeurons>1)
     {
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2ffc7d8b..c988a50a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -28,7 +28,8 @@
             <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
         </div>
         <div #steps id="step_3" class="step-content">
-            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: blue;top:50%;left: 50%;position: absolute;">Insert treniranje</div>
+            
+            <app-form-model></app-form-model>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 956e9784..e682d8dd 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -16,7 +16,5 @@
 
 
     </div>
-    <app-form-model>
-        
-    </app-form-model>
+
 </div>
\ No newline at end of file
-- 
cgit v1.2.3