Dodate stavke u material.module i form-model

5 files changed, 294 insertions, 14 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();
+  }
 }
diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts
index b7d28d77..dd46615d 100644
--- a/frontend/src/app/_services/auth.service.ts
+++ b/frontend/src/app/_services/auth.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
@@ -13,6 +13,7 @@ const jwtHelper = new JwtHelperService();
 export class AuthService {
 
   shared = shared;
+  public loggedInEvent: EventEmitter<boolean> = new EventEmitter();
 
   constructor(private http: HttpClient, private cookie: CookieService) { }
 
diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts
index 4cee3146..baaae58b 100644
--- a/frontend/src/app/material.module.ts
+++ b/frontend/src/app/material.module.ts
@@ -1,23 +1,122 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
+// Material Form Controls
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatInputModule } from '@angular/material/input';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+// Material Navigation
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+// Material Layout
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+// Material Buttons & Indicators
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
-
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
+// Material Popups & Modals
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+// Material Data tables
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 @NgModule({
-  exports: [
+  declarations: [],
+  imports: [
     CommonModule,
-    MatDialogModule,
-    MatButtonModule,
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
+  ],
+  exports: [
+    MatAutocompleteModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
     MatIconModule,
-    MatSlideToggleModule
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
   ]
 })
 export class MaterialModule { }
\ No newline at end of file