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

---
 .../_elements/form-model/form-model.component.css  |  16 +++
 .../_elements/form-model/form-model.component.html | 134 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  32 ++++-
 3 files changed, 118 insertions(+), 64 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 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;
+    }
+  }
 }
-- 
cgit v1.2.3