Reorganizovao stranice i komponente.

4 files changed, 0 insertions, 381 deletions

diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css
deleted file mode 100644
index c716f964..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.btnType1 {
-    background-color: #003459;
-    color: white;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-}
-.btnType2 {
-    background-color: white;
-    color: #003459;
-    border-color: #003459;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-}
-.selectedModelClass {
-    /*border-color: 2px solid #003459;*/
-    background-color: lightblue;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
deleted file mode 100644
index 85caca0d..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<div>
-    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
-            [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
-            Izaberite model iz kolekcije
-        </button>
-        <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()"
-            [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
-            Dodajte novi model
-        </button>
-    </div>
-
-    <div *ngIf="showMyModels" class="px-5 my-3">
-        <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
-    </div>
-    <div *ngIf="showMyModels" class="px-5">
-        <div class="overflow-auto" style="max-height: 500px;">
-            <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term"
-                    [ngClass]="{'selectedModelClass': this.selectedModel == model}">
-                    <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);">
-                    </app-item-model>
-                </li>
-            </ul>
-            <div class="px-5 mt-5">
-                <!--prikaz izabranog modela-->
-            </div>
-        </div>
-    </div>
-
-
-    <div *ngIf="!showMyModels">
-        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
-
-            <div class="col-3">
-                <label for="name" class="col-form-label">Naziv modela:</label>
-                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
-            </div>
-            <div class="col-5">
-                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                <div>
-                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
-                </div>
-            </div>
-            
-        </div>
-        <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
-        <div>
-
-            <div class="row p-2">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="type" class="col-form-label">Tip problema: </label>
-                </div>
-                <div class="col-2">
-                    <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type"
-                        (change)="filterOptions()">
-                        <option
-                            *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
-                </div>
-                <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 class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="optimizer" class="col-form-label">Optimizacija: </label>
-                </div>
-                <div class="col-2">
-                    <select id=optimizerOptions class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer">
-                        <option
-                            *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
-                </div>
-                <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                        [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
-                </div>
-            </div>
-
-            <div class="row p-2">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="lossFunction" class="col-form-label">Funkcija troška: </label>
-                </div>
-                <div class="col-2">
-                    <select id=lossFunctionOptions class="form-select" name="lossFunction" 
-                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
-                        <option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
-                </div>
-                <div class="col-1">
-                    
-                    <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" >
-                    {{newModel.batchSize}}
-                    <!--<select id=BatchSizeOptions class="form-select" name="batchSize" [(ngModel)]="newModel.batchSize">
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option value="4">4</option>
-                        <option value="8">8</option>
-                        <option value="16">16</option>
-                        <option value="32">32</option>
-                        <option value="64">64</option>
-                        <option value="128">128</option>
-                        <option value="256">256</option>
-                        <option value="512">512</option>
-                        <option value="1024">1024</option>
-                    </select>-->
-                </div>
-                
-                <div class="row p-2">
-                    <div class="col-1"></div>
-                    <div class="col-3 m-1">
-                        <label for="epochs" class="col-form-label">Broj epoha: </label>
-                    </div>
-                    <div class="col-1">
-                        <input type="number" min="1" max="1000" class="form-control" name="epochs"
-                            [(ngModel)]="newModel.epochs">
-                    </div>
-                </div>
-            </div>
-
-            <div class="m-5">
-                <app-graph [model]="newModel" [inputCols]="1"></app-graph>
-            </div>
-
-            <h3 class="mx-5 mt-4">Aktivacione funkcije:</h3>
-
-            <div class="row p-2" style="align-self: center;">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
-                </div>
-                <div class="col-2 mt-2">
-                    <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
-                        <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text">#{{i+1}}</span>
-                            </div>
-                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select"
-                                [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" >
-                                <option
-                                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                                    [value]="option">
-                                    {{ optionName }}
-                                </option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-2">
-                    <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
-                </div>
-                <div class="col-2 mt-2">
-                    <select id=outputLayerActivationFunctionOptions class="form-select"
-                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                        <option
-                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col">
-                </div>
-            </div>
-        </div>
-
-        <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
-            <h3>Izaberite metrike:</h3>
-            <div id="divMetricsinput" class="mt-2 mx-5">
-
-                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
-                    class="form-check form-check-inline">
-
-                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
-                        id="metrics_{{option}}" style="float: left;" checked>
-                    <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
-                        {{optionName}}
-                    </label>
-                </div>
-            </div>
-        </div>
-        
-        <div class="form-group row mt-3 mb-3">
-            <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="uploadModel();">Sačuvaj
-                model</button>
-            <div class="col"></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/model-load/model-load.component.spec.ts
deleted file mode 100644
index 1dafd966..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ModelLoadComponent } from './model-load.component';
-
-describe('ModelLoadComponent', () => {
-  let component: ModelLoadComponent;
-  let fixture: ComponentFixture<ModelLoadComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ModelLoadComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ModelLoadComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
deleted file mode 100644
index 73872694..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
-import Shared from 'src/app/Shared';
-import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
-import { ModelsService } from 'src/app/_services/models.service';
-import { GraphComponent } from '../graph/graph.component';
-
-
-@Component({
-  selector: 'app-model-load',
-  templateUrl: './model-load.component.html',
-  styleUrls: ['./model-load.component.css']
-})
-export class ModelLoadComponent implements OnInit {
-
-  @ViewChild(GraphComponent) graph!: GraphComponent;
-  @Output() selectedModelChangeEvent = new EventEmitter<Model>();
-
-  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 = "";
-  selectedProblemType: string = '';
-  selectedMetrics = [];
-  lossFunction: any = LossFunction;
-
-  showMyModels: boolean = true;
-
-  constructor(private modelsService: ModelsService) {
-    this.modelsService.getMyModels().subscribe((models) => {
-      this.myModels = models;
-    });
-  }
-
-  ngOnInit(): void {
-  }
-  batchSizePower:number=1;
-  updateBatchSize()
-  {
-    this.newModel.batchSize=2**this.batchSizePower;
-  }
-
-  updateGraph() {
-    this.graph.update();
-  }
-
-  getMetrics() {
-    this.newModel.metrics = [];
-    let cb = document.getElementsByName("cbmetrics");
-
-    for (let i = 0; i < cb.length; i++) {
-      let chb = <HTMLInputElement>cb[i];
-      if (chb.checked == true)
-        this.newModel.metrics.push(chb.value);
-    }
-  }
-
-  uploadModel() {
-    this.getMetrics();
-
-    this.newModel.uploaderId = Shared.userId;
-
-    this.modelsService.addModel(this.newModel).subscribe((response) => {
-      Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
-      // treba da se selektuje nov model u listi modela
-      //this.selectedModel = 
-    }, (error) => {
-      Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.');
-    });
-  }
-
-  filterOptions() {
-    switch (this.newModel.type) {
-      case 'regresioni':
-        this.lossFunction = LossFunctionRegression;
-        this.metrics = MetricsRegression;
-        break;
-      case 'binarni-klasifikacioni':
-        this.lossFunction = LossFunctionBinaryClassification;
-        this.metrics = MetricsBinaryClassification;
-        break;
-      case 'multi-klasifikacioni':
-        this.lossFunction = LossFunctionMultiClassification;
-        this.metrics = MetricsMultiClassification;
-        break;
-      default:
-        break;
-    }
-  }
-
-  viewMyModelsForm() {
-    this.showMyModels = true;
-  }
-  viewNewModelForm() {
-    this.showMyModels = false;
-  }
-
-  selectThisModel(model: Model) {
-    this.selectedModel = model;
-    this.selectedModelChangeEvent.emit(this.selectedModel);
-  }
-
-}