From edb151a0e7de2c48de3ba38a0ddaff198936bd29 Mon Sep 17 00:00:00 2001
From: Danijel Andjelkovic <adanijel99@gmail.com>
Date: Thu, 10 Mar 2022 00:50:04 +0100
Subject: Dodao model i stranicu za dodavanje modela, potrebno je prosiriti
 formu i za ostala podesavanja.

---
 frontend/src/app/_data/Model.ts                    | 53 ++++++++++++++++++
 .../app/_pages/add-model/add-model.component.css   |  0
 .../app/_pages/add-model/add-model.component.html  | 62 ++++++++++++++++++++++
 .../_pages/add-model/add-model.component.spec.ts   | 25 +++++++++
 .../app/_pages/add-model/add-model.component.ts    | 27 ++++++++++
 frontend/src/app/app-routing.module.ts             |  5 +-
 frontend/src/app/app.module.ts                     |  4 +-
 7 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app/_data/Model.ts
 create mode 100644 frontend/src/app/_pages/add-model/add-model.component.css
 create mode 100644 frontend/src/app/_pages/add-model/add-model.component.html
 create mode 100644 frontend/src/app/_pages/add-model/add-model.component.spec.ts
 create mode 100644 frontend/src/app/_pages/add-model/add-model.component.ts

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
new file mode 100644
index 00000000..61c27ae6
--- /dev/null
+++ b/frontend/src/app/_data/Model.ts
@@ -0,0 +1,53 @@
+export default class Model {
+    constructor(
+        public name: string = 'Novi model',
+        public description: string = '',
+        public dateCreated: Date = new Date(),
+        public datasetId?: number,
+
+        //Test set settings
+        public inputColumns: number[] = [0],
+        public columnToPredict: number = 1,
+        public randomTestSet: boolean = true,
+        public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%)
+
+        // Neural net training settings
+        public encoding: Encoding = Encoding.Label,
+        public type: ANNType = ANNType.FullyConnected,
+        public optimizer: Optimizer = Optimizer.Adam,
+        public lossFunction: LossFunction = LossFunction.MeanSquaredError,
+        public inputNeurons: number = 1,
+        public hiddenLayerNeurons: number = 1,
+        public hiddenLayers: number = 1,
+        public batchSize: number = 5,
+        public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
+        public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
+        public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid
+    ) { }
+}
+
+export enum ANNType {
+    FullyConnected = 'potpuno povezana',
+    Convolutional = 'konvoluciona'
+}
+
+export enum Encoding {
+    Label = 'label',
+    OneHot = 'one hot'
+}
+
+export enum ActivationFunction {
+    Relu = 'relu',
+    Sigmoid = 'sigmoid',
+    Tanh = 'tanh',
+    Linear = 'linear'
+}
+
+export enum LossFunction {
+    BinaryCrossEntropy = 'binary_crossentropy',
+    MeanSquaredError = 'mean_squared_error'
+}
+
+export enum Optimizer {
+    Adam = 'adam'
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
new file mode 100644
index 00000000..a14411e5
--- /dev/null
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -0,0 +1,62 @@
+<div class="container p-3" style="background-color: rgb(249, 251, 253);">
+
+    <h2 class="my-4 text-primary"> Nov model: </h2>
+    <div class="form-group row align-items-center">
+        <label for="name" class="col-sm-2 col-form-label col-form-label-lg">Naziv</label>
+        <div class="col-sm-7">
+            <input type="text" class="form-control form-control-lg" name="name" placeholder="Naziv..."
+                [(ngModel)]="newModel.name">
+        </div>
+
+        <div class="col-sm-3">
+
+        </div>
+    </div>
+
+    <div class="form-group row my-2">
+        <label for="desc" class="col-sm-2 col-form-label">Opis</label>
+        <div class="col-sm-10">
+            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
+        </div>
+    </div>
+
+    <div style="flex-direction: column; align-items: center; justify-items: center;">
+        <label for="type">Tip: </label>
+        <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type">
+            <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)"
+                [value]="option">
+                {{ optionName }}
+            </option>
+        </select>
+    </div>
+
+    <!--<div class="form-group row">
+    <label for="value" class="col-4">Vrednost</label>
+    <div class="input-group">
+        <input type="number" min="0" class="form-control" name="value" placeholder="Vrednost..."
+            [(ngModel)]="newModel.value">
+        <div class="input-group-prepend">
+            <span class="input-group-text">#</span>
+        </div>
+        <input type="number" min="1" class="form-control" name="count" placeholder="Br." [(ngModel)]="newModel.count">
+        <input type="text" class="form-control" name="sum" placeholder="Suma"
+            value="=({{newModel.value * newModel.count}})" readonly>
+    </div>
+</div>-->
+
+    <div class="my-4">
+        <label for="dataset">Izvor podataka:</label>
+        <!--<app-upload-dataset id="dataset"></app-upload-dataset>-->
+    </div>
+
+    <div class="form-group row">
+        <div class="col-4"></div>
+        <button class="btn btn-lg btn-primary col-4" (click)="addModel();">Dodaj</button>
+        <div class="col-1"></div>
+        <div class="col-3">
+            <input type="text" class="form-control-plaintext text-center" id="dateCreated" placeholder="--/--/--"
+                value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.spec.ts b/frontend/src/app/_pages/add-model/add-model.component.spec.ts
new file mode 100644
index 00000000..2926e1c4
--- /dev/null
+++ b/frontend/src/app/_pages/add-model/add-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddModelComponent } from './add-model.component';
+
+describe('AddModelComponent', () => {
+  let component: AddModelComponent;
+  let fixture: ComponentFixture<AddModelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddModelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
new file mode 100644
index 00000000..1836af52
--- /dev/null
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import Model from 'src/app/_data/Model';
+import { ANNType } from 'src/app/_data/Model';
+
+@Component({
+  selector: 'app-add-model',
+  templateUrl: './add-model.component.html',
+  styleUrls: ['./add-model.component.css']
+})
+export class AddModelComponent implements OnInit {
+
+  newModel: Model
+  ANNType = ANNType;
+  Object = Object;
+
+  constructor() {
+    this.newModel = new Model();
+  }
+
+  ngOnInit(): void {
+  }
+
+  addModel() {
+    //TODO
+  }
+
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 1868e56c..8dc3c752 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AddModelComponent } from './_pages/add-model/add-model.component';
 
 import { LoginPageComponent } from './_pages/login-page/login-page.component';
 import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component';
@@ -7,9 +8,11 @@ import { RegisterPageComponent } from './_pages/register-page/register-page.comp
 import { AuthGuardService } from './_services/auth-guard.service';
 
 const routes: Routes = [
+  { path: '', redirectTo: '/login', pathMatch: 'full' },
   { path: 'login', component: LoginPageComponent },
   { path: 'register', component: RegisterPageComponent },
-  { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] }
+  { path: 'only-authorized', component: OnlyAuthorizedComponent, canActivate: [AuthGuardService] },
+  { path: 'add-model', component: AddModelComponent }
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 9ccd7ddb..819c1557 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -9,13 +9,15 @@ import { LoginPageComponent } from './_pages/login-page/login-page.component';
 import { RegisterPageComponent } from './_pages/register-page/register-page.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { OnlyAuthorizedComponent } from './_pages/only-authorized/only-authorized.component';
+import { AddModelComponent } from './_pages/add-model/add-model.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginPageComponent,
     RegisterPageComponent,
-    OnlyAuthorizedComponent
+    OnlyAuthorizedComponent,
+    AddModelComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3