Dodate stavke u material.module i form-model

3 files changed, 184 insertions, 4 deletions

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 e69de29b..9340fed5 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -0,0 +1,3 @@
+*{
+    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 8f284c46..5db2cb49 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -1 +1,139 @@
-<p>form-model works!</p>
+<div class="container">
+    <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>
+        </div>
+        <div class="row">
+            <mat-form-field appearance="fill">
+                <mat-label>Tip problema</mat-label>
+                <select matNativeControl required [formControl]="selectFormControl">
+                    <option
+                    *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
+                    [value]="option">
+                    {{ optionName }}
+                </option>
+                </select>
+                <mat-error *ngIf="selectFormControl.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>Optimizacija</mat-label>
+                <select matNativeControl required [formControl]="selectFormControl">
+                    <option
+                    *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                    [value]="option">
+                    {{ optionName }}
+                </option>
+                </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>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-error *ngIf="selectFormControl.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>
+                <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>
+        </div>
+        <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-error *ngIf="selectFormControl.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>
+                <select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <option
+                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                    [value]="option">
+                    {{ optionName }}
+                </option>
+                </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>
+                <select matNativeControl required [formControl]="selectFormControl">
+                    <option
+                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                </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="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
+    </div>
+    <div class="m-5">
+                <app-graph [model]="newModel" [inputCols]="4"></app-graph>
+                <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>
\ 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 2ff8c605..6f795161 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -1,15 +1,54 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+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';
 @Component({
   selector: 'app-form-model',
   templateUrl: './form-model.component.html',
   styleUrls: ['./form-model.component.css']
 })
 export class FormModelComponent implements OnInit {
+  @ViewChild(GraphComponent) graph!: GraphComponent;
+  @Input() forExperiment?: Experiment;
+  @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
   constructor() { }
-
+  
   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!'},
+  ];
+  */
+  newModel: Model = new Model();
+  myModels?: Model[];
+  selectedModel?: Model;
+
+  ProblemType = ProblemType;
+  ActivationFunction = ActivationFunction;
+  metrics: any = Metrics;
+  LossFunction = LossFunction;
+  Optimizer = Optimizer;
+  Object = Object;
+  document = document;
+  shared = Shared;
+
+  term: string = "";
+  selectedMetrics = [];
+  lossFunction: any = LossFunction;
 
+  showMyModels: boolean = true;
+
+  batchSizePower: number = 2;
+
+  updateGraph() {
+    this.graph.update();
+  }
 }