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

---
 .../_elements/form-model/form-model.component.css  |  11 ++-
 .../_elements/form-model/form-model.component.html | 107 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  12 +--
 3 files changed, 71 insertions(+), 59 deletions(-)

(limited to 'frontend/src/app/_elements/form-model')

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;
-- 
cgit v1.2.3