2 files changed, 24 insertions, 9 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 20ff33d1..e521ce23 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -10,35 +10,40 @@
                 </div>
 
             </div>
-            <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
-                <mat-step>
+            <mat-stepper orientation="vertical" (selectionChange)="changePage($event)" [linear]="true">
+                <mat-step [completed]="this.step1">
                     <!--editable="false"-->
                     <ng-template matStepLabel>
-                        <span class="label" *ngIf="dataset==undefined">Izvor podataka</span>
+                        <span class="label" *ngIf="dataset==undefined">Izvor podataka </span>
                         <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span>
                     </ng-template>
                     <ng-template matStepContent>
                         <p class="text-left">Izaberite izvor podataka</p>
                     </ng-template>
                 </mat-step>
-                <mat-step>
+                <mat-step [completed]="experiment._id!=''">
                     <ng-template matStepLabel>
-                        <span class="label addedElement" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
-                        <span class="label" *ngIf="experiment.name=='exp1'">Odabir kolona</span>
+                        <span class="label addedElement" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span>
+                        <span *ngIf="!this.step1" class="align-middle"><mat-icon>lock</mat-icon></span>
+                        <span class="label" *ngIf="experiment._id==''">Odabir kolona </span>
                     </ng-template>
                     <ng-template matStepContent>
                         <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p>
                     </ng-template>
                 </mat-step>
-                <mat-step>
+                <mat-step [completed]="this.step3">
                     <ng-template matStepLabel>
+                        <span *ngIf="experiment._id==''" class="align-middle"><mat-icon>lock</mat-icon></span>
                         <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span>
                         <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span>
                     </ng-template>
                     <p class="text-left">Odaberite parametre i trenirajte model</p>
                 </mat-step>
-                <mat-step>
-                    <ng-template matStepLabel><span class="label">Pregled rezultata<br> treniranja</span></ng-template>
+                <mat-step [completed]="this.step4">
+                    <ng-template matStepLabel>
+                        <span *ngIf="!this.step3" class="align-middle"><mat-icon>lock</mat-icon></span>
+                        <span class="label">Pregled rezultata<br> treniranja</span>
+                    </ng-template>
                     <p class="text-left">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p>
                 </mat-step>
             </mat-stepper>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 62ef9257..6345307c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -34,9 +34,15 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
   @ViewChild("folderModel") folderModel!: FolderComponent;
   @ViewChild("metricView") metricView!: MetricViewComponent;
 
+  step1:boolean=false;
+  //step2:boolean=false;
+  step3:boolean=false;
+  step4:boolean=false;
+
   constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private signalRService: SignalRService, private route: ActivatedRoute) {
     this.experiment = new Experiment("exp1");
   }
+  
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       let experimentId = this.route.snapshot.paramMap.get("id");
@@ -78,6 +84,7 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
       Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže');
     } else {
       this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") });
+      this.step4=true;
     }
   }
 
@@ -192,6 +199,8 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
     this.dataset = d;
 
     this.columnTable.loadDataset(this.dataset);
+    this.step1=true;
+    
   }
 
   modelToTrain?: Model;
@@ -199,5 +208,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
   setModel(model: FolderFile) {
     const m = <Model>model;
     this.modelToTrain = m;
+    this.step3=true;
   }
 }