From 8e70fdea8955b0b9f87ecede4571af2ec9454511 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 12 Apr 2022 18:34:39 +0200
Subject: Razdvojio eksperiment stranu na dodaj eksperiment i treniraj model.

---
 .../src/app/_elements/navbar/navbar.component.html |  5 ++-
 frontend/src/app/app-routing.module.ts             |  4 ++-
 frontend/src/app/app.module.ts                     |  4 ++-
 .../src/app/experiment/experiment.component.html   | 30 +++--------------
 frontend/src/app/training/training.component.css   | 39 ++++++++++++++++++++++
 frontend/src/app/training/training.component.html  | 26 +++++++++++++++
 .../src/app/training/training.component.spec.ts    | 25 ++++++++++++++
 frontend/src/app/training/training.component.ts    | 29 ++++++++++++++++
 8 files changed, 134 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/app/training/training.component.css
 create mode 100644 frontend/src/app/training/training.component.html
 create mode 100644 frontend/src/app/training/training.component.spec.ts
 create mode 100644 frontend/src/app/training/training.component.ts

(limited to 'frontend/src/app')

diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index dbee4773..7d0c4cd8 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -9,7 +9,10 @@
                 <li><a routerLink="" class="nav-link px-2"
                         [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
                 <li><a routerLink="experiment" class="nav-link px-2"
-                        [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Eksperimentiši</a>
+                        [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
+                </li>
+                <li><a routerLink="training" class="nav-link px-2"
+                        [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
                 </li>
                 <li><a routerLink="my-predictors" class="nav-link px-2"
                         [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 93431397..54c29531 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -13,11 +13,13 @@ import { ProfileComponent } from './_pages/profile/profile.component';
 import { PredictComponent } from './_pages/predict/predict.component';
 import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
 import { ExperimentComponent } from './experiment/experiment.component';
+import { TrainingComponent } from './training/training.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
   /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/
-  { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj model' } },
+  { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj eksperiment' } },
+  { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } },
   { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } },
   { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } },
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 0c1a4162..3909c680 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -44,6 +44,7 @@ import { ModelLoadComponent } from './_elements/model-load/model-load.component'
 import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
 import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component';
 import { GraphComponent } from './_elements/graph/graph.component';
+import { TrainingComponent } from './training/training.component';
 
 @NgModule({
   declarations: [
@@ -77,7 +78,8 @@ import { GraphComponent } from './_elements/graph/graph.component';
     ModelLoadComponent,
     AlertDialogComponent,
     AddNewDatasetComponent,
-    GraphComponent
+    GraphComponent,
+    TrainingComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 703618ea..42797579 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -9,11 +9,7 @@
             <mat-icon>arrow_forward</mat-icon>
             <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Podešavanja mreže</a>
-            <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="3">Treniraj model</a>
-            <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="4">Rezultati treniranja</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
         </div>
 
         <div id="carouselExampleControls" class="carousel slide" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
@@ -200,6 +196,10 @@
                     </div>
                 </div>
 
+
+            </div>
+
+            <div class="carousel-item">
                 <div class="form-group row mt-5 mb-3">
                     <div class="col"></div>
                     <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
@@ -208,26 +208,6 @@
                 </div>
             </div>
 
-            <div class="carousel-item">
-                <h2>3. Podešavanja mreže</h2>
-                <app-model-load (selectedModelChangeEvent)="updateModel($event)"></app-model-load>
-            </div>
-            <div class="carousel-item">
-                <h2>4. Treniraj model</h2>
-                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
-                    model</button>
-            </div>
-
-            <div class="carousel-item">
-                <h3>Rezultati treniranja</h3>
-                <div class="m-3" *ngIf="trainingResult">
-                    <h2 class="my-2">Rezultati treniranja:</h2>
-                    <p>
-                        {{trainingResult}}
-                    </p>
-                </div>
-            </div>
-
         </div>
         <div class="m-3 d-flex flex-row justify-content-between align-items-center" style=" margin-left: auto;">
             <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
diff --git a/frontend/src/app/training/training.component.css b/frontend/src/app/training/training.component.css
new file mode 100644
index 00000000..ee4b0448
--- /dev/null
+++ b/frontend/src/app/training/training.component.css
@@ -0,0 +1,39 @@
+#header {
+    background-color: #003459;
+    padding-top: 30px;
+    padding-bottom: 20px;
+}
+
+#header h1 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+    color: white;
+}
+
+#container {
+    border-radius: 8px;
+}
+
+#wrapper {
+    color: #003459;
+}
+
+.btnType1 {
+    background-color: #003459;
+    color: white;
+}
+
+.btnType2 {
+    background-color: white;
+    color: #003459;
+    border-color: #003459;
+}
+
+.selectedDatasetClass {
+    /*border-color: 2px solid #003459;*/
+    background-color: lightblue;
+}
+
+ul li:hover {
+    background-color: lightblue;
+}
\ No newline at end of file
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
new file mode 100644
index 00000000..1939d3cf
--- /dev/null
+++ b/frontend/src/app/training/training.component.html
@@ -0,0 +1,26 @@
+<div id="header">
+    <h1>Trenirajte veštačku neuronske mrežu</h1>
+</div>
+<div id="wrapper">
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+
+<h2>1. Izaberi eksperiment</h2>
+TODO
+
+<h2>2.Izaberi model</h2>
+<app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
+
+<h2>3. Treniraj model</h2>
+<button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+    model</button>
+
+<h2>Rezultati treniranja</h2>
+<div class="m-3" *ngIf="trainingResult">
+    <h2 class="my-2">Rezultati treniranja:</h2>
+    <p>
+        {{trainingResult}}
+    </p>
+</div>
+
+</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/training/training.component.spec.ts b/frontend/src/app/training/training.component.spec.ts
new file mode 100644
index 00000000..1222cb40
--- /dev/null
+++ b/frontend/src/app/training/training.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrainingComponent } from './training.component';
+
+describe('TrainingComponent', () => {
+  let component: TrainingComponent;
+  let fixture: ComponentFixture<TrainingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TrainingComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrainingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
new file mode 100644
index 00000000..cb6c304c
--- /dev/null
+++ b/frontend/src/app/training/training.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import Experiment from '../_data/Experiment';
+import Model from '../_data/Model';
+
+@Component({
+  selector: 'app-training',
+  templateUrl: './training.component.html',
+  styleUrls: ['./training.component.css']
+})
+export class TrainingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  selectedExperiment?: Experiment;
+  selectedModel?: Model;
+
+  trainingResult: any;
+
+  selectModel($model: Model) {
+
+  }
+
+  trainModel() {
+    //eksperiment i model moraju da budu izabrani
+  }
+}
-- 
cgit v1.2.3