From 40e4cf81dc29d2f3a44cd56a58a5181a64295d5f Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 19 May 2022 21:10:36 +0200
Subject: Dodao spiner dok se izvrsavaju neke akcije. Promenio brisanje u
 folderu tako da se prvo postavi pitanje korisniku da li ste sigurni... Dodao
 pracenje da li se model/dataset promenio i mogucnost da se updateuje isti.

---
 .../_elements/form-model/form-model.component.html | 26 +++++++++++-----------
 .../_elements/form-model/form-model.component.ts   | 13 ++++++++++-
 2 files changed, 25 insertions(+), 14 deletions(-)

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

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 c7a9d5ca..bed69998 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -5,13 +5,13 @@
             <div class="ns-col">
                 <mat-form-field class="example-full-width" appearance="fill" class="mat-fix">
                     <mat-label>Naziv</mat-label>
-                    <input type="text" matInput [(ngModel)]="newModel.name">
+                    <input type="text" matInput [(ngModel)]="newModel.name" (valueChange)="editEvent.emit()">
                 </mat-form-field>
             </div>
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Tip problema</mat-label>
-                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType">
+                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -24,7 +24,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Optimizacija</mat-label>
-                    <mat-select [(ngModel)]="newModel.optimizer">
+                    <mat-select [(ngModel)]="newModel.optimizer" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -35,7 +35,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija troška</mat-label>
-                    <mat-select [(ngModel)]="newModel.lossFunction">
+                    <mat-select [(ngModel)]="newModel.lossFunction" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(lossFunctions[forProblemType]); let optionName of Object.values(lossFunctions[forProblemType])" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -48,7 +48,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -58,7 +58,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa učenja</mat-label>
-                    <mat-select [(ngModel)]="newModel.learningRate">
+                    <mat-select [(ngModel)]="newModel.learningRate" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -71,14 +71,14 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Broj epoha</mat-label>
-                    <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
+                    <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000" (valueChange)="editEvent.emit()">
                 </mat-form-field>
             </div>
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Broj uzoraka po iteraciji</mat-label>
 
-                    <mat-select matNativeControl [(value)]="newModel.batchSize">
+                    <mat-select matNativeControl [(value)]="newModel.batchSize" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option>
                     </mat-select>
                 </mat-form-field>
@@ -102,7 +102,7 @@
                     </div>
                     <div class="slider-extended">
                         <div class="slider-pad"></div>
-                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)" (valueChange)="editEvent.emit()"></mat-slider>
                         <div class="slider-pad"></div>
                     </div>
                     <div>
@@ -110,13 +110,13 @@
                     </div>
                     <div class="slider-extended">
                         <div class="slider-pad"></div>
-                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)" (valueChange)="editEvent.emit()"></mat-slider>
                         <div class="slider-pad"></div>
                     </div>
                 </div>
 
                 <div class="d-flex justify-content-center mt-3">
-                    <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox>
+                    <mat-checkbox color="accent" (valueChange)="editEvent.emit()">Nasumični redosled podataka</mat-checkbox>
                 </div>
             </div>
 
@@ -220,7 +220,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Regularizacija</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisation">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisation" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -229,7 +229,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa regularizacije</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
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 9e6082c4..196d575b 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -24,6 +24,8 @@ export class FormModelComponent implements AfterViewInit {
     this.forProblemType = ProblemType.BinaryClassification;
   }
 
+  @Output() editEvent = new EventEmitter();
+
   ngAfterViewInit(): void { }
 
   selectFormControl = new FormControl('', Validators.required);
@@ -80,6 +82,7 @@ export class FormModelComponent implements AfterViewInit {
       this.newModel.layers.splice(this.newModel.layers.length - 1, 1);
       this.newModel.hiddenLayers -= 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -89,6 +92,7 @@ export class FormModelComponent implements AfterViewInit {
 
       this.newModel.hiddenLayers += 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -100,6 +104,7 @@ export class FormModelComponent implements AfterViewInit {
     if (this.newModel.layers[index].neurons > 1) {
       this.newModel.layers[index].neurons -= 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -107,6 +112,7 @@ export class FormModelComponent implements AfterViewInit {
     if (this.newModel.layers[index].neurons < 18) {
       this.newModel.layers[index].neurons += 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -119,22 +125,26 @@ export class FormModelComponent implements AfterViewInit {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].activationFunction = this.selectedActivation;
     }
+    this.editEvent.emit();
   }
   changeAllRegularisation() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].regularisation = this.selectedRegularisation;
     }
+    this.editEvent.emit();
   }
   changeAllRegularisationRate() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate;
     }
+    this.editEvent.emit();
   }
   changeAllNumberOfNeurons() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].neurons = this.selectedNumberOfNeurons;
-      this.updateGraph();
     }
+    this.updateGraph();
+    this.editEvent.emit();
   }
   updateTestSet(event: MatSliderChange) {
     this.testSetDistribution = event.value!;
@@ -149,5 +159,6 @@ export class FormModelComponent implements AfterViewInit {
 
   updateValidation(event: MatSliderChange) {
     this.validationSize = event.value!;
+    this.editEvent.emit();
   }
 }
-- 
cgit v1.2.3