Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

# Conflicts:
#	frontend/src/app/app-routing.module.ts
#	frontend/src/app/app.module.ts

8 files changed, 185 insertions, 61 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 34e412ef..2fde8e7f 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -1,37 +1,49 @@
-ul{
+ul {
     list-style: none;
 }
-.navmenu{
-    position: absolute;
-    background-color: var(--ns-bg-dark-50);
-    height: 90%;
-    width: 250px;
+
+.holder {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
 }
-.navmenuwrapper{
-    position: relative;
-    top:40%;
-    transform: translateY(-50%);
+
+.sidenav {
+    width: 250px;
+    background-color: var(--ns-bg-dark-50);
 }
 
+@media only screen and (max-width: 400px) {
+    .sidenav {
+        width: 100%;
+        background-color: var(--ns-bg-dark-100);
+    }
+    .holder {
+        flex-direction: column;
+    }
+}
 
-mat-stepper{
+mat-stepper {
     background-color: transparent;
 }
 
-::ng-deep .mat-step-header .mat-step-icon .mat-step-content{
-    background-color: white;
-    color:var(--ns-primary); 
-  }
-::ng-deep .mat-step-header .mat-step-icon{
-    color:white;
-}
-::ng-deep .mat-step-header .mat-step-icon-state-done{
-    background: var(--ns-primary);
-    color:var(--ns-primary)
+.label {
+    color: white;
 }
-::ng-deep .mat-step-header .mat-step-icon-state-done .label{
-    color:var(--ns-primary)
+
+.steps-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-y: auto;
 }
-.label{
-    color: white;
+
+.step-content {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index e0746d4a..c988a50a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,37 +1,35 @@
-<app-folder></app-folder>
-<div class="wrapper">   
-    
-    <nav class="navmenu">
-        <div class="navmenuwrapper text-offwhite">
-          <mat-stepper orientation="vertical" (selectionChange)="test($event)">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+    <div class="d-flex flex-colum align-items-center sidenav">
+        <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
-              <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
-              <ng-template matStepContent>
-                <p>Izaberite vas izvor podataka</p>
-              </ng-template>
+                <!--editable="false"-->
+                <ng-template matStepLabel><span class="label">Izvor podataka</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Izaberite vas izvor podataka</p>
+                </ng-template>
             </mat-step>
             <mat-step>
-              <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
-              <ng-template matStepContent>
-                <p>Pripremite podatke i izaberite izlazne kolone</p>
-              </ng-template>
+                <ng-template matStepLabel> <span class="label">Odabir kolona</span></ng-template>
+                <ng-template matStepContent>
+                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                </ng-template>
             </mat-step>
-            <mat-step >
-              <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
-              <p>Odaberite parametre i trenirajte model</p>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
+                <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
-          </mat-stepper>
+        </mat-stepper>
+    </div>
+    <div #stepsContainer class="steps-container">
+        <div #steps id="step_1" class="step-content">
+            <app-folder (okPressed)="goToPage(1)"></app-folder>
+        </div>
+        <div #steps id="step_2" class="step-content">
+            <div class="text-offwhite" style="height: 100px;width: 100px;background-color: red;top:50%;left: 50%;position: absolute;">Insert odabir kolona</div>
+        </div>
+        <div #steps id="step_3" class="step-content">
+            
+            <app-form-model></app-form-model>
         </div>
-
-          
-
-    </nav>
-    
-    
-
-    
-
-</div>
-
-
-
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index f06a7c48..ad0f1df2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,19 +1,89 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
+import { MatStepper } from '@angular/material/stepper';
+import Shared from 'src/app/Shared';
+
 @Component({
   selector: 'app-experiment',
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent implements OnInit {
+export class ExperimentComponent implements AfterViewInit {
+
+  @ViewChild(MatStepper) stepper!: MatStepper;
+  @ViewChild('stepsContainer') stepsContainer!: ElementRef;
+  @ViewChildren('steps') steps!: ElementRef[];
+
+  event: number = 0;
 
   constructor() { }
 
-  ngOnInit(): void {
+  stepHeight = this.calcStepHeight();
+
+  calcStepHeight() {
+    return window.innerHeight - 64;
+  }
+
+  ngAfterViewInit(): void {
+    window.addEventListener('resize', () => {
+      this.updatePageHeight();
+    })
+    this.updatePageHeight();
+
+    setInterval(() => {
+      this.updatePageIfScrolled();
+    }, 100);
+
+    this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => {
+      Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop);
+    });
+  }
+
+  updatePageIfScrolled() {
+    if (this.scrolling) return;
+    const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight)
+    this.stepper.selectedIndex = currentPage;
+  }
+
+  updatePageHeight() {
+    this.stepHeight = this.calcStepHeight();
+    const stepHeight = `${this.stepHeight}px`;
+    this.stepsContainer.nativeElement.style.minHeight = stepHeight;
+    this.steps.forEach(step => {
+      step.nativeElement.style.minHeight = stepHeight;
+    })
+  }
+
+  changePage(event: StepperSelectionEvent) {
+    this.updatePage(<number>event.selectedIndex)
   }
 
-  test(event:StepperSelectionEvent){
-    console.log(event);
+  goToPage(pageNum: number) {
+    this.stepper.selectedIndex = pageNum;
+    this.updatePage(pageNum);
   }
 
+  scrollTimeout: any;
+
+  updatePage(pageNum: number) {
+    this.scrolling = true;
+    this.event = pageNum;
+    let scrollAmount = 0;
+    this.steps.forEach((step, index) => {
+      if (index == pageNum) {
+        scrollAmount = step.nativeElement.offsetTop;
+      }
+    })
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = setTimeout(() => {
+      this.scrolling = false;
+    }, 800);
+    this.stepsContainer.nativeElement.scroll({
+      top: scrollAmount,
+      behavior: 'smooth' //auto, smooth, initial, inherit
+    });
+  }
+
+  scrolling: boolean = false;
+
 }
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index f73e7571..e682d8dd 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -16,4 +16,5 @@
 
 
     </div>
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/test/test.component.css b/frontend/src/app/_pages/test/test.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.css
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
new file mode 100644
index 00000000..625739f8
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -0,0 +1,3 @@
+<app-pie-chart></app-pie-chart>
+<app-doughnut-chart></app-doughnut-chart>
+<app-barchart></app-barchart>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/test/test.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts
new file mode 100644
index 00000000..e0f9bcc9
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/test/test.component.ts b/frontend/src/app/_pages/test/test.component.ts
new file mode 100644
index 00000000..b3c0d8cf
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.css']
+})
+export class TestComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}