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

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