Dugme za treniranje se disable-uje dok traje treniranje. Podesene strelice za navigaciju i linkovi kod pravljenja eksperimenta. Obrisani/zakomentarisani console.logovi na frontu.

3 files changed, 23 insertions, 8 deletions

diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
index 4a3d7741..d84a897e 100644
--- a/frontend/src/app/experiment/experiment.component.css
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -40,4 +40,9 @@ ul li:hover {
 
 h2 {
     color: #003459;
+}
+
+.boldClass {
+    font-weight: bold;
+    font-size: 125%;
 }
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index ffc1db9d..4675236c 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -4,12 +4,12 @@
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-        <div class="d-flex flex-row justify-content-center align-items-center my-3">
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0">Izvor podataka</a>
+        <div class="d-flex flex-row justify-content-center align-items-center my-3 links">
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0)" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a>
         </div>
 
         <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
@@ -244,11 +244,11 @@
 
             </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">
+            <div class="m-3 d-flex flex-row align-items-center" style=" margin-left: auto;">
+                <button class="me-auto" *ngIf="carouselIndex != 0" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev" (click)="updateCarouselIndex(carouselIndex - 1)">
                                 <mat-icon>arrow_backward</mat-icon>
                             </button>
-                <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+                <button class="ms-auto" *ngIf="carouselIndex != 2" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next" (click)="updateCarouselIndex(carouselIndex + 1)">
                                 <mat-icon>arrow_forward</mat-icon>
                             </button>
             </div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 75c8e0d8..1533ceb3 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -8,7 +8,7 @@ import { ExperimentsService } from '../_services/experiments.service';
 import { ColumnEncoding } from '../_data/Experiment';
 import { Router } from '@angular/router';
 import { TrainingComponent } from '../training/training.component';
-import { retryWhen } from 'rxjs';
+import { NEVER, retryWhen } from 'rxjs';
 
 @Component({
   selector: 'app-experiment',
@@ -32,6 +32,7 @@ export class ExperimentComponent implements OnInit {
   selectedNotNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
+  carouselIndex: number = 0;
 
   constructor(private experimentsService: ExperimentsService, private router: Router) {
   }
@@ -219,4 +220,13 @@ export class ExperimentComponent implements OnInit {
     }
     return counter;
   }
+
+  updateCarouselIndex(newIndex: number) {
+    if (newIndex > 2)
+      newIndex = 2;
+    else if (newIndex < 0)
+      newIndex = 0; 
+
+    this.carouselIndex = newIndex;
+  }
 }